/* ============================================================================
TRRANU · app.css · hoja principal (login, app, registro, ventas, crónico, responsive)
----------------------------------------------------------------------------
Extraído de default.php SIN modificar una sola regla. Se carga desde el
con . EL ORDEN IMPORTA y es:
app.css -> admin.css -> modales.css
Motivo: existen dos @keyframes llamados 'pulse' con cuerpos distintos (uno
en app.css y otro en modales.css). El del final es el que debe ganar, tal
como ocurría cuando todo estaba dentro de default.php. Si inviertes el
orden de los , las animaciones cambian de aspecto.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
/* ===== LOGIN ===== */
/* ============================================================
LOGIN — ahora también en V3.
Antes era el único fondo OSCURO de toda la web (el degradado azul marino con la
rejilla al 4%). Se pasa al fondo único porque el criterio es "un solo fondo para todo".
Si algún día quieres recuperar el oscuro, es SOLO esta regla: se restaura el
radial-gradient de abajo y listo. El resto de la web no se entera.
background:radial-gradient(ellipse at top,#1e293b 0%,#0f172a 60%,#020617 100%);
============================================================ */
#loginPage {
width:100%; min-height:100vh; display:flex; justify-content:center; align-items:center;
/* El fondo malva se pinta AQUÍ, en la capa de contenido (no en el lienzo html/body). El
fondo del lienzo se propaga al canvas del navegador y ESE canvas es el que el
compositor soltaba (parpadeo a gris) con tantos backdrop-filter. En una capa de
contenido normal es inmune a ese parpadeo. Opaco y sin 'fixed'. */
background-color:#EDE8FC;
background-image: var(--fondo-puntos), var(--fondo-malva);
background-size: 16px 16px, cover;
background-position: center center, center center;
background-repeat: repeat, no-repeat;
color:#0F172A; font-family:'Poppins','Segoe UI',Arial,sans-serif;
position:relative; overflow:hidden;
}
/* Los halos de color latían sobre el fondo oscuro. Sobre claro ensucian: se apagan. */
#loginPage::before { display:none; }
/* La rejilla blanca al 4% se veía PORQUE el fondo era oscuro. Sobre claro es invisible,
y su sitio lo ocupan ahora los puntos del fondo único. */
#loginPage::after { display:none; }
@keyframes bgPulse { 0% { opacity:.8; } 100% { opacity:1; } }
.glass-card {
position:relative; z-index:2;
background:linear-gradient(145deg,rgba(30,41,59,0.85) 0%,rgba(15,23,42,0.92) 100%);
backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
border:1px solid rgba(148,163,184,0.18); border-radius:22px;
padding:42px 38px 32px; width:100%; max-width:400px; text-align:center;
box-shadow:
0 30px 70px -10px rgba(0,0,0,0.75),
0 0 0 1px rgba(255,255,255,0.04) inset,
0 1px 0 rgba(255,255,255,0.08) inset;
animation:slideUp 0.6s cubic-bezier(.16,1,.3,1);
}
.glass-card::before {
content:""; position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px;
border-radius:22px; pointer-events:none;
background:linear-gradient(135deg,rgba(99,102,241,0.5),transparent 30%,transparent 70%,rgba(139,92,246,0.5));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
opacity:.6;
}
@keyframes slideUp { from { opacity:0; transform:translateY(20px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
.login-shield {
width:64px; height:64px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
border-radius:18px; background:linear-gradient(135deg,#6366f1,#8b5cf6);
box-shadow:0 14px 40px -8px rgba(99,102,241,.6),0 0 0 1px rgba(255,255,255,.1) inset;
position:relative;
}
.login-shield svg { width:32px; height:32px; fill:white; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.login-shield::after {
content:""; position:absolute; inset:-3px; border-radius:21px; pointer-events:none;
background:linear-gradient(135deg,#6366f1,#8b5cf6); opacity:.4; filter:blur(12px); z-index:-1;
}
h2 { font-weight:600; margin:0 0 6px; letter-spacing:.4px; font-size:22px; color:#f1f5f9; }
.glass-card p.subtitle { color:#94a3b8; font-size:13px; margin:0 0 26px; letter-spacing:.2px; }
.input-group { text-align:left; margin-bottom:14px; }
.input-group label { display:block; font-size:10px; text-transform:uppercase; color:#a5b4fc; font-weight:700; margin-bottom:6px; letter-spacing:1.2px; }
.input-wrap { position:relative; }
.input-wrap .input-icon {
position:absolute; left:14px; top:50%; transform:translateY(-50%);
width:18px; height:18px; pointer-events:none; opacity:.55;
}
.input-wrap .input-icon svg { width:100%; height:100%; stroke:#cbd5e1; fill:none; stroke-width:2; }
select, input[type="password"], input[type="text"].login-input, .input-wrap input {
width:100%; padding:13px 14px 13px 42px; background:rgba(15,23,42,0.55);
border:1px solid rgba(148,163,184,0.18); border-radius:12px;
color:#f1f5f9; caret-color:#f1f5f9; font-size:14px; margin-bottom:0;
font-family:'Poppins',sans-serif; outline:none;
transition:border-color .25s,box-shadow .25s,background .25s;
box-sizing:border-box;
}
.input-wrap input:focus { border-color:#818cf8; background:rgba(15,23,42,0.85); box-shadow:0 0 0 3px rgba(129,140,248,.18); }
/* Campos del login: FONDO BLANCO y texto oscuro para que SIEMPRE se lea lo que se escribe
(usuario y contraseña), escribas normal o autocomplete el navegador. */
.input-wrap input, .input-wrap input:focus {
background:#ffffff !important; color:#0f172a !important;
caret-color:#0f172a !important; -webkit-text-fill-color:#0f172a !important;
border-color:rgba(148,163,184,0.5) !important;
}
.input-wrap input::placeholder { color:#94a3b8 !important; -webkit-text-fill-color:#94a3b8 !important; }
.input-wrap .input-icon svg { stroke:#94a3b8 !important; }
.input-wrap input:-webkit-autofill,
.input-wrap input:-webkit-autofill:hover,
.input-wrap input:-webkit-autofill:focus,
.input-wrap input:-webkit-autofill:active {
-webkit-text-fill-color:#0f172a !important;
caret-color:#0f172a !important;
-webkit-box-shadow:0 0 0 1000px #ffffff inset !important;
box-shadow:0 0 0 1000px #ffffff inset !important;
transition:background-color 9999s ease-in-out 0s;
}
select:focus, input[type="password"]:focus { border-color:#818cf8; }
select option { background:#1e293b; color:white; }
.pass-wrapper { position:relative; }
.pass-wrapper .eye-toggle { right:14px !important; }
.btn-main {
width:100%; padding:14px; background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
color:white; border:none; border-radius:12px; font-size:14px; font-weight:700;
cursor:pointer; transition:all .25s; box-shadow:0 10px 30px -6px rgba(99,102,241,.5);
font-family:'Poppins',sans-serif; letter-spacing:1.2px; text-transform:uppercase;
position:relative; overflow:hidden; margin-top:6px;
}
.btn-main::before {
content:""; position:absolute; top:0; left:-100%; width:100%; height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
transition:left .6s;
}
.btn-main:hover { transform:translateY(-1px); box-shadow:0 14px 36px -6px rgba(99,102,241,.65); }
.btn-main:hover::before { left:100%; }
.btn-main:active { transform:translateY(0); }
.btn-main:disabled { background:#334155; cursor:not-allowed; box-shadow:none; transform:none; }
.otpcell {
width:44px; height:54px; text-align:center; font-size:23px; font-weight:800;
font-family:'Poppins',monospace; color:#0f172a; background:#fff;
border:2px solid #cbd5e1; border-radius:12px; outline:none; padding:0;
transition:border-color .15s, box-shadow .15s; -moz-appearance:textfield; caret-color:#6366f1;
}
.otpcell::-webkit-outer-spin-button,.otpcell::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.otpcell:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.20); }
.otpcell.filled { border-color:#8b5cf6; }
@media (max-width:420px){ .otpcell{ width:40px; height:50px; font-size:21px; } #twoFaCodeBoxes{ gap:6px; } }
#msg { margin-top:14px; font-size:13px; min-height:18px; }
.error-msg { color:#f87171; font-weight:600; }
.success-msg { color:#34d399; font-weight:bold; font-size:18px; }
.secure-tag {
display:flex; align-items:center; justify-content:center; gap:6px;
margin-top:22px; padding-top:18px; border-top:1px solid rgba(148,163,184,.12);
font-size:11px; color:#64748b; letter-spacing:.4px;
}
.secure-tag svg { width:12px; height:12px; stroke:#22c55e; fill:none; stroke-width:2.5; }
.hidden { display:none !important; }
/* ===== APP ===== */
#appPage { display:none; font-family:'Poppins','Segoe UI',Arial,sans-serif; }
/* BARRA NAV FIJA (ABAJO) */
/* ============================================================
BARRA FIJA — gradiente azul → verde, tono Oscuro 3.
El blanco llega a 14.2:1 sobre este fondo (AAA de sobra): los iconos y las etiquetas
resaltan sin necesidad de ponerle color a cada botón. Antes cada uno traía su tono y
seis colores juntos solo hacían ruido; ahora el color lo pone el fondo, una vez.
============================================================ */
#navBar {
position:fixed; bottom:0; left:0; width:100%;
background:linear-gradient(100deg,#082a52 0%,#06423a 100%);
border-top:1px solid rgba(255,255,255,0.10);
z-index:9999; display:flex; align-items:center; justify-content:center;
padding:0 12px; height:60px; gap:2px;
box-shadow:0 -4px 20px rgba(0,0,0,0.28);
overflow-x:auto; overflow-y:hidden;
}
#navBar::-webkit-scrollbar { height:3px; }
#navBar::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.2); border-radius:3px; }
/* Botón de la barra: icono arriba, nombre debajo. El icono se reconoce antes que la
palabra — con el cliente al teléfono eso se nota. */
.nav-btn {
padding:6px 10px; border:none !important; border-radius:10px; cursor:pointer;
font-weight:600; color:rgba(255,255,255,0.92) !important; font-size:11px;
letter-spacing:0.1px; transition:background .15s, transform .12s; white-space:nowrap;
font-family:'Poppins',sans-serif; position:relative; overflow:hidden;
flex-shrink:0; width:auto; min-width:52px; text-align:center;
background:transparent !important; text-transform:none;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
line-height:1.15;
}
.nav-btn .nb-ic { display:block; width:18px; height:18px; }
.nav-btn .nb-ic svg { width:18px; height:18px; display:block; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-btn::before { display:none; }
.nav-btn:hover { background:rgba(255,255,255,0.10) !important; transform:none; }
.nav-btn:active { transform:scale(.95); }
.nav-btn.nav-on { background:rgba(255,255,255,0.20) !important; color:#fff !important; font-weight:700; }
/* ============================================================
LA MANCHA GRIS DE LOS CAMPOS — corregida.
------------------------------------------------------------
CAUSA: ningún campo del sistema declaraba color de fondo, y la web nunca declaró
'color-scheme'. Cuando el navegador o el sistema están en MODO OSCURO, Chrome pinta
los controles de formulario con SU color por defecto: gris oscuro. Por eso la casilla
de contraseña del panel salía como una mancha gris con el texto casi invisible,
mientras el resto de la tarjeta seguía en blanco. No era el color de ningún botón:
era el navegador rellenando el hueco que el CSS había dejado.
SOLUCIÓN: la web se declara en modo CLARO y todos los campos llevan su fondo blanco
escrito. Así se ven igual en cualquier equipo, tenga el modo que tenga.
============================================================ */
/* ============================================================
FONDO ÚNICO DE TODA LA WEB (V3)
------------------------------------------------------------
EL PROBLEMA: cada sección traía su propio fondo. Nueve en total — el registro en
índigo, Ventas en celeste, la IA en verde, el panel y la Papelera en morado, Crónico
en azul, el Historial en gris... Cambiabas de pantalla y cambiaba el suelo. Nada
parecía del mismo sitio.
LA SOLUCIÓN: el fondo se define UNA vez, aquí, sobre el lienzo de la página. Todas las
secciones pasan a ser transparentes y lo dejan pasar. Una sola verdad; si mañana hay
que cambiar el fondo, se cambia en estas cuatro líneas y afecta a todo.
· Degradado malva de TRES paradas: arranca casi blanco (donde está el formulario),
se toma su tiempo en el 45% y aterriza profundo abajo. Esa parada intermedia es
lo que evita que se vea como una transición plana.
· Puntos de 16px en negro al 7%: se leen como grafito suave, no como trama.
· 'fixed': el degradado cubre la pantalla, no se repite ni se estira con el scroll.
============================================================ */
:root {
color-scheme: light;
--fondo-puntos: radial-gradient(rgba(15,23,42,.07) 1.15px, transparent 1.15px);
--fondo-malva: linear-gradient(160deg, #FBFAFF 0%, #EDE8FC 45%, #CFC3F2 100%);
}
/* ============================================================
EL FONDO QUE SE BORRABA — corregido de raíz (v3).
------------------------------------------------------------
CAUSA: el fondo se pintaba en una CAPA que el navegador promueve a una capa de
composición propia — primero como body::before (position:fixed, z-index:-1) y luego como
background-attachment:fixed en . En ambos casos, al repintar la página (los
backdrop-filter del menú y las tarjetas, más el refresco de cada segundo del chat y la
presencia) el navegador SOLTABA esa capa de forma intermitente y dejaba ver el gris
#ececec del lienzo. En el vídeo el fondo malva brincaba a gris cada uno o dos segundos.
SOLUCIÓN (v3): el fondo lo pinta el propio SIN 'fixed' ni pseudo-elementos, es
decir en el flujo normal del lienzo. Así el fondo forma parte del propio lienzo (no es una
capa aparte que se pueda soltar) y se queda SIEMPRE. Como no es 'fixed', se desliza junto
con la página al hacer scroll, que es un cambio menor a cambio de eliminar el parpadeo por
completo.
============================================================ */
html {
min-height:100vh;
/* Base malva OPACA pintada directamente en el lienzo: aunque el degradado tardara un
instante en un repintado, se ve malva y NUNCA el gris del lienzo. */
background-color:#EDE8FC;
background-image: var(--fondo-puntos), var(--fondo-malva);
background-size: 16px 16px, cover;
background-position: center center, center center;
background-repeat: repeat, no-repeat;
/* IMPORTANTE: a propósito SIN 'background-attachment:fixed'. Ese 'fixed' promovía el
fondo a una capa de composición propia que el navegador soltaba al repintar (por los
backdrop-filter del menú/tarjetas y el refresco de cada segundo del chat/presencia),
y ESO era lo que lo hacía brincar a gris. Pintado en el flujo normal del lienzo, el
fondo forma parte del propio lienzo: no se puede soltar y se queda SIEMPRE. */
}
/* El MISMO fondo también en , opaco y sin 'fixed': así hay DOS capas pintadas en el
flujo normal (html y body) que el compositor no puede soltar. Si una fallara, la otra
sigue mostrando el malva; el gris del lienzo no puede aparecer por ningún lado. */
body {
min-height:100vh;
background-color:#EDE8FC;
background-image: var(--fondo-puntos), var(--fondo-malva);
background-size: 16px 16px, cover;
background-position: center center, center center;
background-repeat: repeat, no-repeat;
}
/* Todas las secciones dejan pasar el fondo del lienzo. Incluye las páginas dinámicas que
se creen más adelante: si llevan .section-page, heredan el fondo sin tocar nada. */
#appPage, .section-page,
#secMain, #secVentas, #secAdmin, #secCreator, #secScript,
#secAIResult, #secDocForm, #secDocResult, #secAIHist,
#secHistorial, #secBiblioteca, #secCronic, #secTrashPage,
#secAdminScript, #secAdminCierre, #secAdminDesastre, #secBtnManager, #secBtnEdit {
background:transparent !important;
}
html { color-scheme: light; }
input, select, textarea { color-scheme: light; }
.admin-login-card input,
.pass-wrapper input,
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="date"], input[type="time"], select, textarea {
background-color:#FFFFFF;
color:#0F172A;
}
input::placeholder, textarea::placeholder { color:#94A3B8; opacity:1; }
/* ============================================================
SELECTORES — el desplegable feo del navegador, fuera.
El