/* ext/styles.css — Layouts externos (login + accounts). * Hereda los tokens del webmail (mismo --bg, --bg-secondary, --text, * --cls-a..z) para que las pantallas externas se sientan parte del mismo * producto. El theme (light/dark) se lee de localStorage.darkMode === '1' * (igual que el webmail) y se aplica con ``. */ /* Mismas fuentes que el webmail (Inter + ProximaNova fallback). */ @import url('/assets/style/fonts.css'); @font-face { font-family: 'ProximaNova-Reg-webfont'; src: url('/_assets/fonts/Proxima-Nova/ProximaNova-Reg-webfont.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'ProximaNova-Sbold-webfont'; src: url('/_assets/fonts/Proxima-Nova/ProximaNova-Sbold-webfont.woff2') format('woff2'); font-display: swap; font-weight: 600; } :root { --bg: #ffffff; --bg-secondary: #f8f9fa; --bg-hover: #f1f3f4; --bg-selected: #e8f0fe; --text: #202124; --text-secondary: #5f6368; --text-tertiary: #9aa0a6; --border: #dadce0; --border-light: rgba(0, 0, 0, 0.07); --primary: #1a73e8; --primary-hover: #1558b8; --primary-light: rgba(26, 115, 232, 0.10); --primary-disabled: rgba(26, 115, 232, 0.4); --error: #ea4335; --error-hover: #c5221f; --error-light: rgba(234, 67, 53, 0.10); --gold: #D4A437; /* Brand panel fijo — independiente del theme. */ --brand-bg: #0a0a0a; --brand-text: #fafafa; --brand-text-muted: rgba(250, 250, 250, 0.62); --brand-text-dim: rgba(250, 250, 250, 0.42); --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --transition-fast: 120ms ease; --transition-base: 200ms ease; /* Avatares — misma paleta del webmail (assets/style/base.css). */ --cls-a:#e91e63;--cls-b:#9c27b0;--cls-c:#673ab7;--cls-d:#3f51b5;--cls-e:#2196f3; --cls-f:#03a9f4;--cls-g:#00bcd4;--cls-h:#009688;--cls-i:#4caf50;--cls-j:#8bc34a; --cls-k:#cddc39;--cls-l:#ffc107;--cls-m:#ff9800;--cls-n:#ff5722;--cls-o:#795548; --cls-p:#607d8b;--cls-q:#e91e63;--cls-r:#9c27b0;--cls-s:#673ab7;--cls-t:#3f51b5; --cls-u:#2196f3;--cls-v:#03a9f4;--cls-w:#00bcd4;--cls-x:#009688;--cls-y:#4caf50;--cls-z:#8bc34a; } :root.dark { --bg: #111113; /* auth-panel y body unificados */ --bg-secondary: #111113; /* body / fondo general */ --bg-hover: #1A1A1D; /* tercer nivel: hovers, alternates */ --bg-selected: #1f2937; --text: #e4e4e7; --text-secondary: #a1a1aa; --text-tertiary: #52525b; /* muted */ --border: #27272a; --border-light: #27272a; /* mismo que border — propagado en separadores */ --primary: #4285f4; --primary-hover: #5b9bf5; --primary-light: rgba(66, 133, 244, 0.18); --error: #f87171; --error-hover: #ef4444; --error-light: rgba(248, 113, 113, 0.16); /* brand-bg/text se quedan fijos: el panel es siempre oscuro (#0a0a0a). */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100vh; font-family: 'Inter', 'ProximaNova-Reg-webfont', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg-secondary); color: var(--text); transition: background var(--transition-base), color var(--transition-base); font-size: 14px; line-height: 1.5; } a { color: inherit; text-decoration: none; } /* ===== Split layout (brand left + content right) ===== */ .auth-container { display: flex; min-height: 100vh; width: 100%; } .brand-panel { flex: 0 0 40%; max-width: 480px; background: var(--brand-bg); color: var(--brand-text); display: flex; flex-direction: column; /* mark arriba, content abajo */ justify-content: space-between; padding: var(--space-2xl); position: relative; overflow: hidden; } .brand-mark { display: flex; align-items: baseline; gap: 6px; font-size: 18px; letter-spacing: .2px; color: var(--brand-text); } .brand-mark img { width: 30px; height: 30px; align-self: center; margin-right: 4px; } .brand-mark strong { font-weight: 700; color: var(--brand-text); } .brand-mark span { font-style: italic; font-weight: 400; color: var(--brand-text-muted); font-size: 16px; } .brand-content { max-width: 360px; } .brand-content h1 { font-size: 28px; line-height: 1.2; font-weight: 600; margin: 0 0 var(--space-md); letter-spacing: -0.02em; color: var(--brand-text); } .brand-content p { color: var(--brand-text-muted); font-size: 14px; line-height: 1.55; margin: 0; } .auth-panel { flex: 1; display: flex; flex-direction: column; padding: var(--space-lg) var(--space-xl); background: var(--bg); min-width: 0; } .auth-inner { width: 100%; max-width: 500px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; } /* brand-mark del auth-panel — clon del izquierdo, visible sólo en mobile. * En desktop el brand panel oscuro lleva el mark. */ .brand-mark-mobile { display: none; color: var(--text); margin-bottom: var(--space-xl); } .brand-mark-mobile strong { color: var(--text); } .brand-mark-mobile span { color: var(--text-tertiary); } .auth-card { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; width: 100%; /* el ancho lo controla .auth-inner (500px max) */ } /* Botón "Volver" inline arriba del título — flecha + texto. */ .back-link { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 0; margin: 0 0 var(--space-md); font: inherit; font-size: 13px; color: var(--text-tertiary); cursor: pointer; transition: color var(--transition-fast); align-self: flex-start; } .back-link:hover { color: var(--text); } .back-link svg { width: 14px; height: 14px; } .auth-title { font-size: 22px; font-weight: 600; margin: 0 0 var(--space-xs); letter-spacing: -0.01em; color: var(--text); } .auth-sub { font-size: 14px; color: var(--text-secondary); margin: 0 0 var(--space-xl); line-height: 1.5; } /* ===== Form ===== */ .form-row { margin-bottom: var(--space-md); } .form-input { width: 100%; padding: 12px 14px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; font-family: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline: none; } .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .form-input::placeholder { color: var(--text-tertiary); } .form-input-wrap { position: relative; } .form-input-wrap .input-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 6px; color: var(--text-tertiary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color var(--transition-fast); } .form-input-wrap .input-toggle:hover { color: var(--text); } .form-link { display: inline-block; font-size: 13px; color: var(--primary); margin-top: var(--space-xs); } .form-link:hover { color: var(--primary-hover); text-decoration: underline; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; border: 1px solid transparent; border-radius: var(--radius-md); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--primary-hover); } .btn-primary:disabled { background: var(--primary-disabled); cursor: not-allowed; } .btn-primary.loading { color: transparent; position: relative; } .btn-primary.loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; transform: translate(-50%, -50%); animation: spin 800ms linear infinite; } .btn-secondary { background: var(--bg-secondary); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--bg-hover); } .btn-danger { background: var(--error); color: #fff; border-color: var(--error); } .btn-danger:hover { background: var(--error-hover); border-color: var(--error-hover); } .btn-danger svg { color: #fff; } .btn-add { background: #28559f; color: #fff; border-color: #28559f; } .btn-add:hover { background: #1e4480; border-color: #1e4480; } .btn-add svg { color: #fff; } .actions-row { display: flex; gap: var(--space-sm); } .actions-row > .btn { flex: 1; } /* "Cerrar todas las sesiones": botón compacto, pill, alineado a la derecha. */ .action-close-all { display: flex; justify-content: flex-end; margin-top: var(--space-md); } .action-close-all .btn { width: auto; padding: 6px 14px; border-radius: 999px; font-size: 12px; gap: 6px; background: #D3394B; border-color: #D3394B; color: #fff; } .action-close-all .btn:hover { background: #b62d3d; border-color: #b62d3d; } .action-close-all .btn svg { width: 13px; height: 13px; color: #fff; } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* ===== Error ===== */ .alert-error { display: none; padding: 10px 12px; background: var(--error-light); border: 1px solid var(--error); color: var(--error); border-radius: var(--radius-md); font-size: 13px; margin-bottom: var(--space-md); } .alert-error.show { display: block; } /* ===== Account chooser ===== */ /* El grupo unifica todas las tarjetas en una sola caja: borde y radio van * solamente en el contenedor, los items por dentro usan un único separador * fino entre ellos. */ .acc-group { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); overflow: hidden; margin: 0 0 var(--space-lg); } .acc-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: transparent; border: 0; border-radius: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--transition-fast); } .acc-group > .acc-item + .acc-item { border-top: 1px solid var(--border-light); } .acc-item:hover { background: var(--bg-hover); } .acc-item._signout { cursor: pointer; } .acc-item .ava { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 14px; overflow: hidden; background: var(--cls-a); } .acc-item .ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .acc-item .info { flex: 1; min-width: 0; } .acc-item .info > strong { display: block; font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acc-item .info > span { display: block; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Acción visual a la derecha del card. Sin estilo de botón — solo el SVG. * Default gris; el hover de toda la fila lo pinta de rojo. */ .acc-item .action { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); transition: color var(--transition-fast); margin-left: var(--space-sm); } .acc-item .action svg { width: 18px; height: 18px; display: block; color: inherit; stroke: currentColor; fill: none; } /* El rojo en hover es señal "destructiva" — solo para signout. */ .acc-item._signout:hover .action, .acc-item._signout:hover .action svg { color: #D3394B; } /* En signin el arrow se aclara al color del texto principal. */ .acc-item.signin:hover .action, .acc-item.signin:hover .action svg { color: var(--text); } .acc-item._busy { opacity: .5; pointer-events: none; } .acc-item.signin .action { color: var(--text-tertiary); } .acc-empty { padding: var(--space-lg); text-align: center; color: var(--text-tertiary); font-size: 13px; background: var(--bg); border: 1px dashed var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-lg); } /* Avatar colors — heredados del webmail (var(--cls-x)) por inicial. */ .acc-item .ava.cls_a{ background:var(--cls-a) } .acc-item .ava.cls_b{ background:var(--cls-b) } .acc-item .ava.cls_c{ background:var(--cls-c) } .acc-item .ava.cls_d{ background:var(--cls-d) } .acc-item .ava.cls_e{ background:var(--cls-e) } .acc-item .ava.cls_f{ background:var(--cls-f) } .acc-item .ava.cls_g{ background:var(--cls-g) } .acc-item .ava.cls_h{ background:var(--cls-h) } .acc-item .ava.cls_i{ background:var(--cls-i) } .acc-item .ava.cls_j{ background:var(--cls-j) } .acc-item .ava.cls_k{ background:var(--cls-k); color:#2d2d2d } .acc-item .ava.cls_l{ background:var(--cls-l); color:#2d2d2d } .acc-item .ava.cls_m{ background:var(--cls-m) } .acc-item .ava.cls_n{ background:var(--cls-n) } .acc-item .ava.cls_o{ background:var(--cls-o) } .acc-item .ava.cls_p{ background:var(--cls-p) } .acc-item .ava.cls_q{ background:var(--cls-q) } .acc-item .ava.cls_r{ background:var(--cls-r) } .acc-item .ava.cls_s{ background:var(--cls-s) } .acc-item .ava.cls_t{ background:var(--cls-t) } .acc-item .ava.cls_u{ background:var(--cls-u) } .acc-item .ava.cls_v{ background:var(--cls-v) } .acc-item .ava.cls_w{ background:var(--cls-w) } .acc-item .ava.cls_x{ background:var(--cls-x) } .acc-item .ava.cls_y{ background:var(--cls-y) } .acc-item .ava.cls_z{ background:var(--cls-z) } /* ===== Mobile ===== */ @media (max-width: 900px) { .auth-container { flex-direction: column; } /* En móvil ocultamos el brand-panel y mostramos el clon en el auth-panel. */ .brand-panel { display: none; } .brand-mark-mobile { display: flex; } .auth-panel { padding: var(--space-lg); } .auth-card { max-width: none; } } .mox-captcha { margin-bottom: var(--space-md); }