/* * estilos-extraidos.css * ------------------------------------------------------------ * Estilos que originalmente estaban escritos en línea (atributo * style="...") dentro de index.html y que se movieron aquí como * clases reutilizables, para mantener el HTML limpio y separar * estructura (HTML) de presentación (CSS). * * Convención de nombres usada al extraer cada clase: * - Si el elemento tenía id, la clase usa ese mismo nombre en * kebab-case (ej: id="dateDisplay" -> .date-display). * - Si el elemento tenía onclick/onchange, la clase se nombra * según la acción que dispara (ej: onclick="openWFM()" -> .open-wfm). * - Si no tenía ninguno de los anteriores, se nombra como * "__-" para dejar claro dentro * de qué bloque vive (ej: .modal-calendar__span-3). * - Los estilos idénticos que se repetían en varios elementos * (por ejemplo, los botones numéricos del teclado de PIN) * comparten una sola clase. * * Cargar este archivo DESPUÉS de diseno.css en el , ya que * complementa (no reemplaza) esa hoja de estilos base. */ /* ═══════════════════════════════════════════════════════════ * LOGIN GLOBAL POR PIN * ═══════════════════════════════════════════════════════════ */ .global-pin-login { position: fixed; inset: 0; z-index: 99998; background: linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#4f46e5 100%); display: flex; align-items: center; justify-content: center; } .global-pin-login__div-1 { background: white; border-radius: 24px; padding: 40px 36px; width: 100%; max-width: 380px; margin: 20px; box-shadow: 0 40px 80px rgba(0,0,0,0.4); } .global-pin-login__div-2 { text-align: center; margin-bottom: 28px; } .global-pin-login__div-3 { width: 64px; height: 64px; background: linear-gradient(135deg,#4f46e5,#6366f1); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 900; font-size: 24px; margin: 0 auto 12px; } .global-pin-login__div-4 { font-size: 22px; font-weight: 800; color: #1e293b; } .global-pin-login__div-5 { font-size: 13px; color: #64748b; margin-top: 4px; } .global-pin-input { width: 100%; padding: 16px; border: 2px solid #e2e8f0; border-radius: 14px; font-size: 24px; text-align: center; letter-spacing: 6px; font-family: inherit; outline: none; box-sizing: border-box; } .global-pin-btn { width: 100%; padding: 14px; background: linear-gradient(135deg,#4f46e5,#6366f1); color: white; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 16px; } .global-pin-error { font-size: 12px; color: #ef4444; text-align: center; margin-top: 12px; min-height: 16px; } /* ═══════════════════════════════════════════════════════════ * ENCABEZADO * ═══════════════════════════════════════════════════════════ */ .root__div-1 { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; padding-bottom: 15px; } .root__h1-1 { margin: 0; font-size: 28px; letter-spacing: -1px; } .root__span-1 { color: #2563eb; font-weight: 800; } .date-display { color: #64748b; font-size: 0.9em; } .sync-badge { display: none; background: #34C759; color: white; font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.5px; } .priority-alert__div-1 { font-size: 18px; font-weight: 800; } .alert-message { margin-top: 5px; font-size: 14px; } /* ═══════════════════════════════════════════════════════════ * VISTA: TAREAS * ═══════════════════════════════════════════════════════════ */ .view-tareas__div-1 { margin-bottom: 15px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .filter-user { padding: 8px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 12px; outline: none; flex-grow: 1; max-width: 200px; } /* ═══════════════════════════════════════════════════════════ * VISTA: COMUNICADOS * ═══════════════════════════════════════════════════════════ */ .view-comunicados { display: none; } /* ═══════════════════════════════════════════════════════════ * VISTA: PERFIL DE JUGADOR * ═══════════════════════════════════════════════════════════ */ .sec-perfil { padding: 16px; display: none; } /* ═══════════════════════════════════════════════════════════ * VISTA: PROYECTOS * ═══════════════════════════════════════════════════════════ */ .sec-proyectos { padding: 0; display: none; } /* ═══════════════════════════════════════════════════════════ * BARRA LATERAL * ═══════════════════════════════════════════════════════════ */ .group-progress-container { background: white; padding: 15px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .group-progress-container__div-1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .group-progress-container__span-1 { font-weight: 800; font-size: 13px; color: var(--text); } .progress-percent { font-weight: 800; color: var(--accent); font-size: 14px; } .group-progress-container__div-2 { background: #e2e8f0; height: 12px; border-radius: 10px; overflow: hidden; position: relative; } .group-progress-bar { background: linear-gradient(90deg, #3b82f6, #2563eb); width: 0%; height: 100%; transition: width 0.5s ease-out; } .progress-stats { font-size: 11px; color: var(--muted); margin-top: 6px; text-align: center; font-weight: 600; } .root__h3-1 { margin: 0 0 15px 0; font-size: 14px; color: var(--muted); text-transform: uppercase; } .root__h3-2 { margin: 0 0 10px 0; font-size: 14px; } .daily-log__div-1 { text-align: center; padding: 10px; } .root__div-2 { margin-top: 30px; padding: 20px; text-align: center; opacity: 0.4; transition: opacity 0.3s; } .root__div-3 { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--muted); } .root__div-4 { font-size: 11px; color: var(--muted); margin-top: 5px; } .launch-dev-easter-egg { color: var(--accent); font-weight: bold; cursor: help; } /* ═══════════════════════════════════════════════════════════ * MODAL: CONFIRMACIÓN GENÉRICA * ═══════════════════════════════════════════════════════════ */ .custom-confirm { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(4px); z-index: 10001; align-items: center; justify-content: center; } .custom-confirm__div-1 { background: white; width: 90%; max-width: 400px; border-radius: 16px; padding: 24px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2); text-align: center; } .confirm-icon { font-size: 40px; margin-bottom: 15px; } .confirm-title { margin: 0 0 10px; color: #1e293b; font-size: 18px; } .confirm-msg { color: #64748b; font-size: 14px; line-height: 1.5; margin-bottom: 25px; } .custom-confirm__div-2 { display: flex; gap: 12px; } .btn-confirm-cancel { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; font-weight: bold; cursor: pointer; } .btn-confirm-ok { flex: 1; padding: 12px; border-radius: 12px; border: none; background: #2563eb; color: white; font-weight: bold; cursor: pointer; } /* ═══════════════════════════════════════════════════════════ * MODAL: INGRESO DE PIN POR USUARIO * ═══════════════════════════════════════════════════════════ */ .modal-pin { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(8px); z-index: 10002; align-items: center; justify-content: center; } .modal-pin__div-1 { background: white; width: 280px; border-radius: 24px; padding: 30px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); text-align: center; } .pin-user-icon { font-size: 40px; margin-bottom: 10px; } .pin-user-name { margin: 0; color: #1e293b; font-size: 18px; } .pin-user-rank { font-size: 11px; font-weight: 800; letter-spacing: 1px; margin-top: -15px; margin-bottom: 20px; } .pin-dots { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; } .pin-dots__div-1 { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #cbd5e1; } .modal-pin__div-2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .press-pin { height: 55px; border-radius: 15px; border: none; background: #f1f5f9; color: #1e293b; font-size: 20px; font-weight: bold; cursor: pointer; } .clear-pin { height: 55px; border-radius: 15px; border: none; background: #fee2e2; color: #ef4444; font-size: 18px; font-weight: bold; cursor: pointer; } .close-pin-modal { height: 55px; border-radius: 15px; border: none; background: #e2e8f0; color: #64748b; font-size: 18px; font-weight: bold; cursor: pointer; } /* ═══════════════════════════════════════════════════════════ * MODAL: HISTORIAL DE REPORTES * ═══════════════════════════════════════════════════════════ */ .modal-reports { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; justify-content: center; align-items: center; } .modal-reports__div-1 { background: white; padding: 20px; border-radius: 15px; width: 90%; max-width: 400px; position: relative; } .modal-reports__div-2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .modal-reports__h3-1 { margin: 0; } .close-reports { background: none; border: none; font-size: 22px; cursor: pointer; } .reports-list-container { max-height: 300px; overflow-y: auto; } .modal-reports__p-1 { font-size: 10px; color: gray; text-align: center; margin-top: 15px; } /* ═══════════════════════════════════════════════════════════ * MODAL: PROMPT PERSONALIZADO * ═══════════════════════════════════════════════════════════ */ .custom-prompt { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(10px); z-index: 10005; align-items: center; justify-content: center; } .custom-prompt__div-1 { background: rgba(255,255,255,0.9); width: 280px; border-radius: 18px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.2); animation: applePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); } .custom-prompt__div-2 { padding: 20px; text-align: center; } .prompt-title { margin: 0 0 10px; color: #000; font-size: 17px; font-weight: 600; } .prompt-msg { color: #3a3a3c; font-size: 13px; line-height: 1.4; margin-bottom: 15px; } .prompt-input { width: 100%; padding: 8px; border: 0.5px solid #c6c6c8; border-radius: 8px; background: white; font-size: 15px; outline: none; box-sizing: border-box; } .custom-prompt__div-3 { display: flex; border-top: 0.5px solid #c6c6c8; } .close-custom-prompt-cancelar { flex: 1; padding: 12px; border: none; background: transparent; color: #007aff; font-size: 17px; cursor: pointer; border-right: 0.5px solid #c6c6c8; } .close-custom-prompt-aceptar { flex: 1; padding: 12px; border: none; background: transparent; color: #007aff; font-size: 17px; font-weight: 600; cursor: pointer; } /* ═══════════════════════════════════════════════════════════ * MODAL: "VISTO POR" * ═══════════════════════════════════════════════════════════ */ .modal-vistos { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); backdrop-filter: blur(10px); z-index: 10010; align-items: center; justify-content: center; } .modal-vistos__div-1 { background: rgba(255,255,255,0.9); width: 280px; border-radius: 18px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.2); animation: applePop 0.3s ease; } .modal-vistos__div-2 { padding: 20px; } .modal-vistos__h3-1 { margin: 0 0 15px; color: #000; font-size: 17px; font-weight: 600; text-align: center; } .lista-nombres-vistos { max-height: 200px; overflow-y: auto; text-align: left; display: flex; flex-direction: column; gap: 8px; } .close-modal-vistos { width: 100%; padding: 12px; border: none; background: transparent; border-top: 0.5px solid #c6c6c8; color: #007aff; font-size: 17px; font-weight: 600; cursor: pointer; } /* ═══════════════════════════════════════════════════════════ * MODAL: PANEL DE ADMINISTRACIÓN * ═══════════════════════════════════════════════════════════ */ .admin-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; backdrop-filter: blur(8px); background: rgba(0,0,0,0.3); align-items: center; justify-content: center; } .admin-modal__div-1 { background: #F2F2F7; width: 95%; max-width: 380px; max-height: 90vh; border-radius: 28px; padding: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); animation: appleFade 0.3s ease; overflow-y: auto; } .admin-modal__div-2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; position: sticky; top: 0; background: #F2F2F7; z-index: 10; padding-bottom: 10px; } .admin-modal__h2-1 { margin: 0; font-size: 20px; font-weight: 800; color: #1c1c1e; } .toggle-admin-modal { background: #E5E5EA; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-weight: 800; color: #8E8E93; } .admin-modal__div-3 { background: #f2f2f7; padding: 20px; border-radius: 16px; margin-bottom: 20px; } .admin-modal__h3-1 { margin: 0 0 15px 0; font-size: 14px; color: #8e8e93; text-transform: uppercase; letter-spacing: 0.5px; } .admin-modal__div-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .abrir-gestor-tareas { background: #EEF2FF; padding: 15px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #C7D7FF; } .admin-modal__div-5 { background: #6C63FF; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .admin-modal__div-6 { font-weight: bold; font-size: 13px; color: #1c1c1e; } .admin-modal__div-7 { font-size: 10px; color: #8e8e93; } .open-wfm { background: white; padding: 15px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #e5e5ea; } .admin-modal__div-8 { background: linear-gradient(135deg, #007AFF, #00C6FF); width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .ui-set-global-announcement { background: white; padding: 15px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #e5e5ea; transition: 0.2s; } .admin-modal__div-9 { background: #FF9500; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .admin-modal__button-1 { background: #F2F2F7; border: none; color: #1C1C1E; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 10px; cursor: pointer; } .admin-modal__div-10 { background: #5856D6; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .compartir-por-whats-app { background: #f0fff4; padding: 15px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #bbf7d0; } .admin-modal__div-11 { background: #25D366; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .open-requests-modal { background: #ffffff; border: 1px solid #DDD6FE; padding: 15px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #e5e5ea; position: relative; } .admin-modal__div-12 { background: linear-gradient(135deg, #7945f3, #7C3AED); width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .admin-modal__div-13 { flex: 1; } .badge-requests { background: #EF4444; color: white; font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 20px; position: absolute; top: 10px; right: 10px; display: none; } .abrir-dashboard { background: #EEF9FF; padding: 15px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #C7E8FF; } .admin-modal__div-14 { background: #0EA5E9; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .admin-modal__div-15 { background: #34C759; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .admin-modal__div-16 { background: #FF3B30; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .admin-modal__div-17 { font-weight: bold; font-size: 13px; color: #FF3B30; } .admin-reset-action { background: #fff5f5; padding: 15px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #ff3b3033; } .admin-modal__div-18 { background: #ff3b30; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .admin-modal__div-19 { font-weight: bold; font-size: 13px; color: #ff3b30; } .abrir-reporte-tareas { background: #f0f4ff; padding: 15px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #c7d7ff; } .cambiar-sucursal-dispositivo { background: #FEF3E2; padding: 15px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #FFE0B2; } .exportar-base-datos { background: #f0fdf4; padding: 15px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #bbf7d0; } .admin-modal__div-20 { background: #22c55e; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .importar-bd-input-action { background: #fdf4ff; padding: 15px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #e9d5ff; } .admin-modal__div-21 { background: #a855f7; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .abrir-respaldos-automaticos { background: #fff8f0; padding: 15px; border-radius: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #fed7aa; } .admin-modal__div-22 { background: #f97316; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .admin-staff-manager { margin-top: 25px; border-top: 1px solid #E5E5EA; padding-top: 20px; } .admin-staff-manager__h3-1 { margin: 0 0 15px 0; font-size: 14px; color: #8e8e93; text-transform: uppercase; } .admin-staff-manager__div-1 { text-align: center; padding: 16px 0 8px; } .abrir-gestor-staff { background: #6C63FF; color: white; border: none; padding: 14px 28px; border-radius: 14px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(108,99,255,0.3); width: 100%; } /* ═══════════════════════════════════════════════════════════ * MODAL: SOLICITUDES DE CANJE DE PREMIOS * ═══════════════════════════════════════════════════════════ */ .modal-requests { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 2000; align-items: center; justify-content: center; backdrop-filter: blur(5px); } .modal-requests__div-1 { background: white; width: 90%; max-width: 400px; border-radius: 24px; padding: 25px; max-height: 80vh; display: flex; flex-direction: column; } .modal-requests__div-2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .modal-requests__h3-1 { margin: 0; font-size: 20px; font-weight: 800; } .close-requests-modal { background: #F2F2F7; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-weight: bold; } .admin-requests-container { overflow-y: auto; flex-grow: 1; padding-right: 5px; } /* ═══════════════════════════════════════════════════════════ * MODAL: CALENDARIO MENSUAL * ═══════════════════════════════════════════════════════════ */ .modal-calendar { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 3000; align-items: center; justify-content: center; backdrop-filter: blur(12px); padding: 16px; } .modal-calendar__div-1 { background: #f2f2f7; width: 100%; max-width: 980px; height: 92vh; border-radius: 28px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.4); } .modal-calendar__div-2 { padding: 18px 24px; background: white; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e5e5ea; flex-shrink: 0; } .modal-calendar__div-3 { display: flex; align-items: center; gap: 14px; } .change-month { background: #f2f2f7; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .calendar-month-year { font-family: 'Syne',sans-serif; font-size: 20px; font-weight: 800; color: #1c1c1e; letter-spacing: -0.5px; text-transform: capitalize; } .calendar-user-label { font-size: 11px; color: #8e8e93; font-weight: 600; margin-top: 1px; } .modal-calendar__div-4 { display: flex; gap: 8px; } .print-monthly-calendar { background: #f0fdf4; color: #16a34a; border: none; padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 700; } .close-calendar { background: #fff0f0; color: #ff3b30; border: none; padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 700; } .modal-calendar__div-5 { padding: 8px 24px; background: white; border-bottom: 1px solid #f0f0f0; display: flex; gap: 16px; flex-shrink: 0; } .modal-calendar__span-1 { font-size: 10px; font-weight: 700; color: #0284c7; display: flex; align-items: center; gap: 4px; } .modal-calendar__span-2 { width: 8px; height: 8px; background: #0284c7; border-radius: 2px; display: inline-block; } .modal-calendar__span-3 { font-size: 10px; font-weight: 700; color: #dc2626; display: flex; align-items: center; gap: 4px; } .modal-calendar__span-4 { width: 8px; height: 8px; background: #fecaca; border-radius: 2px; display: inline-block; } .modal-calendar__span-5 { font-size: 10px; font-weight: 700; color: #059669; display: flex; align-items: center; gap: 4px; } .modal-calendar__span-6 { width: 8px; height: 8px; background: #bbf7d0; border-radius: 2px; display: inline-block; } .modal-calendar__span-7 { font-size: 10px; font-weight: 700; color: #6b7280; display: flex; align-items: center; gap: 4px; } .modal-calendar__span-8 { width: 8px; height: 8px; background: #007aff; border-radius: 50%; display: inline-block; } .modal-calendar__div-6 { display: flex; flex: 1; overflow: hidden; } .calendar-grid-container { flex: 1.6; padding: 20px 20px 20px 24px; background: white; overflow-y: auto; border-right: 1px solid #e5e5ea; } .modal-calendar__div-7 { flex: 1; background: #f2f2f7; display: flex; flex-direction: column; overflow: hidden; } .modal-calendar__div-8 { padding: 16px 20px 10px; border-bottom: 1px solid #e5e5ea; flex-shrink: 0; } .selected-date-badge { background: #007aff; color: white; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; text-transform: uppercase; } .selected-date-title { font-family: 'Syne',sans-serif; font-size: 18px; font-weight: 800; color: #1c1c1e; margin-top: 6px; } .list-tasks-planned { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .list-tasks-planned__div-1 { text-align: center; margin-top: 40px; color: #8e8e93; } .list-tasks-planned__div-2 { font-size: 36px; opacity: 0.3; margin-bottom: 8px; } .list-tasks-planned__p-1 { font-size: 13px; margin: 0; } /* ═══════════════════════════════════════════════════════════ * MODAL: VISUALIZADOR DE HORARIOS (WFM) * ═══════════════════════════════════════════════════════════ */ .modal-wfm { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 35000; } .wfm-modal-card__h2-1 { margin: 0; font-size: 20px; font-weight: 800; color: #1C1C1E; letter-spacing: -0.5px; } .wfm-modal-card__div-1 { font-size: 11px; color: #86868B; font-weight: 500; } .wfm-download-image { background: #F2F2F7; color: #007AFF; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; } .wfm-clear-schedule { background: #FEF2F2; color: #EF4444; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; } .close-modal-wfm { background: #1C1C1E; color: white; border: none; padding: 0 20px; height: 36px; border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer; } /* ═══════════════════════════════════════════════════════════ * MODAL: EDITAR HORARIO (excepción de un día puntual) * ═══════════════════════════════════════════════════════════ */ .wfm-edit-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; } .wfm-time-inputs__div-1 { display: flex; gap: 12px; margin-bottom: 15px; } .wfm-time-inputs__div-2 { flex: 1; } .wfm-time-inputs__div-3 { margin-bottom: 15px; } .wfm-food { text-align: center; } .wfm-reason { font-size: 14px; } .wfm-edit-modal__div-1 { display: flex; justify-content: space-between; align-items: center; } .wfm-edit-modal__div-2 { font-size: 14px; font-weight: 600; color: #1C1C1E; } .wfm-edit-modal__div-3 { font-size: 11px; color: #8E8E93; } .wfm-edit-modal__div-4 { display: flex; align-items: center; gap: 5px; } .wfm-init-balance { width: 70px; text-align: center; padding: 8px; } .wfm-edit-modal__span-1 { font-size: 14px; color: #1C1C1E; font-weight: 600; } .wfm-reset-exception { width: 100%; background: #FFF0F0; color: #FF3B30; border: none; padding: 14px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 10px; }