/* TPApp v3.0 - base.css: reset, variables, tipografía y componentes comunes */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { --primary: #1B3A6B; /* Azul marino institucional */ --primary-light: #2B5BA8; /* Azul medio */ --accent: #E8A020; /* Dorado/naranja cálido */ --bg: #F5F7FA; /* Fondo gris muy claro */ --card: #ffffff; --text: #1a1a2e; --muted: #6b7280; --border: #e5e7eb; --danger: #dc2626; --success: #059669; --input-bg: #f9fafb; --shadow: 0 2px 12px rgba(0, 0, 0, 0.08); /* Gradiente de fondo del login (se ajusta en modo oscuro) */ --login-grad-a: #1B3A6B; --login-grad-b: #0d2244; /* Fondo del header del dashboard */ --header-bg: var(--primary); } /* ===== MODO OSCURO ===== */ /* Se activa con data-theme="dark" en (lo setea theme.js). Mantiene el azul institucional como color primario, solo cambia fondos, superficies y textos para reducir el brillo. */ :root[data-theme="dark"] { --primary: #3B6FBF; /* Azul institucional aclarado para contraste sobre oscuro */ --primary-light: #5A8AD6; --accent: #F0B84A; --bg: #0e1420; /* Fondo general oscuro */ --card: #1a2332; /* Superficies (cards, login-card, modales) */ --text: #e6ebf2; --muted: #9aa7bd; --border: #2a3547; --danger: #f87171; --success: #34d399; --input-bg: #131c2b; --shadow: 0 2px 14px rgba(0, 0, 0, 0.45); --login-grad-a: #101a2e; --login-grad-b: #060b16; --header-bg: #131c2b; } html, body { min-height: 100%; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; } /* Transición suave al alternar tema */ body, .card, .login-card, .modal-inner, .header, input, .btn-google { transition: background-color .25s ease, border-color .25s ease, color .25s ease; } /* ===== Botón de cambio de tema ===== */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 10px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; line-height: 1; } .theme-toggle:hover { background: var(--input-bg); } /* Variante flotante sobre el fondo azul del login */ .theme-toggle.floating { position: fixed; top: 14px; right: 14px; z-index: 60; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; backdrop-filter: blur(4px); } .theme-toggle.floating:hover { background: rgba(255, 255, 255, .22); } /* Variante dentro del header (fondo azul institucional): sin marco, solo el ícono, para no competir con el avatar (que sí es un círculo sólido) ni con el membrete. El fondo aparece únicamente al pasar el mouse. */ .theme-toggle.in-header { background: transparent; border: none; color: rgba(255, 255, 255, .85); width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; font-size: 18px; transition: color .15s ease, background-color .15s ease; } .theme-toggle.in-header:hover { background: rgba(255, 255, 255, .12); color: #fff; } .theme-toggle.in-header svg { width: 22px; height: 22px; stroke-width: 1.5; } /* Íconos SVG de línea (sin emojis, para un look más institucional) */ .theme-toggle svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* El ícono correcto se muestra según el tema activo */ .theme-toggle .icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: block; } h1, h2, h3 { font-family: 'Sora', sans-serif; } button { font-family: inherit; /* Elimina el delay de 300ms en mobile */ touch-action: manipulation; } /* Pantallas: se muestran/ocultan con display (sin routing por hash) */ .screen { display: none; min-height: 100vh; flex-direction: column; } .screen.active { display: flex; animation: fadeIn .2s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Card genérica */ .card { background: var(--card); border-radius: 14px; padding: 1.25rem; box-shadow: var(--shadow); border: 0.5px solid var(--border); } /* Título de sección */ .section-title { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .06em; } /* Spinner de carga */ .spinner { width: 36px; height: 36px; border: 3px solid rgba(27, 58, 107, .2); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } .loading-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--muted); font-size: 14px; } /* Modal */ .modal-bg { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 300; align-items: center; justify-content: center; padding: 1rem; } .modal-bg.open { display: flex; } .modal-inner { background: var(--card); border-radius: 16px; padding: 1.5rem; width: 100%; max-width: 320px; } .modal-inner h3 { margin-bottom: .5rem; font-size: 17px; } .key-display { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem; font-size: 20px; font-family: monospace; letter-spacing: .12em; text-align: center; color: var(--primary); margin: 1rem 0; word-break: break-all; } .close-modal { width: 100%; background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: .75rem; font-size: 15px; cursor: pointer; font-family: 'Sora', sans-serif; font-weight: 600; min-height: 44px; } /* Toast */ .toast { position: fixed; bottom: 4rem; left: 50%; transform: translateX(-50%); background: #1a1a2e; color: #fff; padding: .7rem 1.4rem; border-radius: 10px; font-size: 14px; z-index: 500; display: none; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); } /* Footer corporativo siempre visible: sello institucional (transparente, se lee en claro y oscuro) arriba del copyright. */ .app-footer { text-align: center; padding: 1.1rem 1rem 1.2rem; font-size: 11px; color: var(--muted); background: transparent; margin-top: auto; } .app-footer::before { content: ''; display: block; width: 54px; height: 47px; margin: 0 auto .5rem; opacity: .95; }