/* ==========================================================================
ADMIN.CSS — Mando Central v3
"terminal / command deck" — negro real, sin glassmorphism. Acento azul
+ verde señal, con motivo de agua (ondas, gotas, brillo líquido) en los
estados interactivos. Tipografía técnica (mono para datos), sidebar en
vez de nav superior, tarjetas planas con borde fino en vez de vidrio
esmerilado con blur.
========================================================================== */
:root{
--bg:#08090a;
--surface:#121316;
--surface-2:#181a1e;
--surface-3:#1e2126;
--border:#242730;
--border-strong:#34394a;
--blue:#4fd6ff;
--blue-2:#0072ff;
--signal:#00e5a0;
--danger:#ff4d5e;
/* Estas dos se usaban en varios sitios sin estar declaradas: los elementos
salían sin color. Verde de "todo bien" y ámbar de "ojo con esto". */
--ok:#5eead4;
--warn:#ffb340;
--violet:#8b7bff;
--text:#eef0f2;
--text-dim:#9aa0ab;
--text-faint:#5b6270;
--radius:10px;
--radius-sm:6px;
--radius-lg:16px;
--font-display:'Space Grotesk', 'Outfit', sans-serif;
--font-body:'Inter', system-ui, sans-serif;
--font-mono:'JetBrains Mono', 'SF Mono', Consolas, monospace;
}
*{ box-sizing:border-box; }
/* Red de seguridad: [hidden] siempre gana, sin importar qué display defina
una clase más abajo (así fue como "Crear tienda" se veía de más — ver
.btn[hidden] — y para que no vuelva a pasar con otra clase futura). */
[hidden]{ display:none !important; }
html,body{ height:100%; margin:0; }
body{
background:var(--bg);
color:var(--text);
font-family:var(--font-body);
font-size:14px;
line-height:1.5;
min-height:100vh;
position:relative;
}
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
/* Los nav-item ya tienen su propio lenguaje visual para "esto está activo"
(barra + fondo). El anillo de foco del teclado encima de otro item se veía
como una segunda selección fantasma — quitado a propósito solo aquí. */
.nav-item:focus-visible{ outline:none; }
.mono, .num, td.num, th{ font-variant-numeric:tabular-nums; }
/* Grano muy fino sobre todo — el detalle que hace que el negro plano se sienta como
material y no como un div de color sólido. Ruido generado con SVG inline, sin pedir
ninguna imagen externa. */
body::after{
content:'';
position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
/* Textura de fondo: reja de puntos muy tenue, no manchas de luz difuminadas —
a propósito distinto del "aurora" del diseño anterior. */
body::before{
content:'';
position:fixed; inset:0; z-index:-1; pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
background-size:26px 26px;
-webkit-mask-image:radial-gradient(ellipse 90% 70% at 30% 0%, #000 0%, transparent 78%);
mask-image:radial-gradient(ellipse 90% 70% at 30% 0%, #000 0%, transparent 78%);
}
::selection{ background:rgba(79,214,255,.28); color:#fff; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#2a2d35; border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:#3a3f4b; background-clip:padding-box; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; color:#fff; letter-spacing:-.01em; }
.mono{ font-family:var(--font-mono); }
/* ==========================================================================
LAYOUT — sidebar fija a la izquierda + topbar + contenido
========================================================================== */
.shell{ display:flex; min-height:100vh; }
.sidebar{
width:250px; flex:none; position:sticky; top:0; height:100vh;
border-right:1px solid var(--border);
background:var(--surface);
display:flex; flex-direction:column;
padding:22px 16px;
overflow-y:auto;
}
.brand{
display:flex; align-items:center; gap:11px; padding:0 6px 22px; margin-bottom:18px;
border-bottom:1px solid var(--border);
}
.brand-mark{
width:34px; height:34px; border-radius:9px; flex:none;
background:linear-gradient(135deg, var(--blue), var(--blue-2));
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:700; font-size:15px; color:#0a0a0a;
box-shadow:0 0 0 1px rgba(79,214,255,.35), 0 8px 22px -8px rgba(0,114,255,.55);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text strong{ font-family:var(--font-display); font-size:14.5px; color:#fff; }
.brand-text span{ font-size:11px; color:var(--text-faint); font-family:var(--font-mono); letter-spacing:.03em; }
.nav-label{
font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
color:var(--text-faint); padding:16px 10px 8px;
}
.nav-label:first-of-type{ padding-top:4px; }
.nav-item{
display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--radius-sm);
color:var(--text-dim); text-decoration:none; font-size:13.5px; font-weight:500; cursor:pointer;
border:1px solid transparent; position:relative; margin-bottom:2px;
transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.nav-item:hover{ background:var(--surface-2); color:var(--text); }
.nav-item .nix{
font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); width:16px; flex:none;
}
.nav-item.active{
background:
linear-gradient(120deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%),
rgba(79,214,255,.08);
background-repeat:no-repeat;
background-size:220% 100%, 100% 100%;
background-position:-160% 0, 0 0;
color:#a8e4ff; border-color:rgba(79,214,255,.28);
animation:water-shimmer 5.5s ease-in-out infinite;
}
.nav-item.active::before{
content:''; position:absolute; left:-16px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0;
background:linear-gradient(180deg, var(--blue), var(--blue-2));
box-shadow:0 0 12px rgba(79,214,255,.7);
}
/* "01" del item activo: un par de anillos concéntricos como onda de agua expandiéndose */
.nav-item.active .nix{ color:var(--blue); position:relative; }
.nav-item.active .nix::before,
.nav-item.active .nix::after{
content:''; position:absolute; inset:-7px; border:1px solid var(--blue); border-radius:50%;
opacity:0; pointer-events:none; animation:water-ripple 2.8s ease-out infinite;
}
.nav-item.active .nix::after{ animation-delay:1.4s; }
@keyframes water-shimmer{
0%, 55%{ background-position:-160% 0, 0 0; }
100%{ background-position:160% 0, 0 0; }
}
@keyframes water-ripple{
0%{ transform:scale(.35); opacity:.6; }
100%{ transform:scale(2.1); opacity:0; }
}
.sidebar-foot{
margin-top:auto; padding-top:16px; border-top:1px solid var(--border);
display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-faint);
}
.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 8px var(--signal); flex:none; }
.status-dot.is-error{ background:var(--danger); box-shadow:0 0 8px var(--danger); animation:none; }
.status-dot.is-checking{ background:var(--text-faint); box-shadow:none; }
/* ---- columna principal ---- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
height:64px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:20px;
padding:0 28px; border-bottom:1px solid var(--border);
background:rgba(8,9,10,.7); backdrop-filter:blur(10px);
position:sticky; top:0; z-index:20;
}
.topbar-title{ display:flex; flex-direction:column; gap:1px; }
.topbar-title h2{ font-size:15.5px; }
.topbar-title span{ font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); }
.topbar-right{ display:flex; align-items:center; gap:10px; min-width:0; }
.avatar{
width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#2a2d35,#1a1c21);
border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
font-family:var(--font-mono); font-size:12px; color:var(--text-dim);
}
.content{ padding:28px 32px 60px; max-width:1180px; width:100%; margin:0 auto; }
/* Vistas: admin-router.js muestra/oculta según en qué nav-item real (con
data-view) hiciste clic. Las secciones sin función todavía no tienen
.view — sus nav-item siguen siendo enlaces inertes, tal cual. */
.view{ display:none; }
.view.active{ display:block; animation:view-in .35s ease; }
@keyframes view-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.page-head{ margin-bottom:22px; }
.page-head .eyebrow{
font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
color:var(--blue); margin-bottom:6px; display:flex; align-items:center; gap:8px;
}
.page-head .eyebrow::before{ content:''; width:14px; height:1px; background:var(--blue); }
.page-head h1{ font-size:25px; }
.page-head p{ color:var(--text-dim); font-size:13.5px; margin:6px 0 0; max-width:640px; }
.section-title{
font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
color:var(--text-faint); margin:36px 0 12px; display:flex; align-items:center; gap:10px;
}
.section-title::after{ content:''; flex:1; height:1px; background:var(--border); }
.section-title:first-of-type{ margin-top:0; }
/* ==========================================================================
STAT CARDS
========================================================================== */
.grid-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; perspective:800px; }
.stat-card{
background:linear-gradient(180deg, var(--surface-2), var(--surface));
border:1px solid var(--border); border-radius:var(--radius);
padding:18px 18px 16px; position:relative; overflow:hidden;
box-shadow:0 1px 0 0 rgba(255,255,255,.03) inset, 0 22px 44px -26px rgba(0,0,0,.75);
transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover{
border-color:var(--border-strong);
box-shadow:0 1px 0 0 rgba(255,255,255,.05) inset, 0 30px 54px -24px rgba(0,0,0,.8);
}
.stat-card .stat-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.stat-card .stat-label{ font-size:12px; color:var(--text-dim); }
.stat-card .stat-icon{
width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center;
background:var(--surface-3); font-size:12.5px;
}
.stat-card .stat-value{ font-family:var(--font-mono); font-size:26px; font-weight:600; color:#fff; letter-spacing:-.01em; }
.stat-card .stat-delta{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-family:var(--font-mono); margin-top:8px; }
.stat-delta.up{ color:var(--signal); }
.stat-delta.down{ color:var(--danger); }
/* Barra fina de acento arriba de cada tarjeta, colores rotando por variante */
.stat-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--border-strong); }
.stat-card.v-blue::before{ background:linear-gradient(90deg,var(--blue),var(--blue-2)); }
.stat-card.v-signal::before{ background:var(--signal); }
.stat-card.v-violet::before{ background:var(--violet); }
/* ==========================================================================
TARJETA GENÉRICA / PANEL
========================================================================== */
.panel{
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
padding:22px; margin-bottom:16px;
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.panel-head h3{ font-size:14.5px; }
.panel-head .sub{ font-size:12px; color:var(--text-faint); margin-top:3px; }
/* ==========================================================================
BOTONES
========================================================================== */
.btn[hidden]{ display:none; }
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
font-family:var(--font-body); font-weight:600; font-size:13px; cursor:pointer;
padding:10px 17px; border-radius:var(--radius-sm); border:1px solid transparent;
background:linear-gradient(180deg, var(--blue) 0%, var(--blue-2) 100%); color:#0a0a0a;
box-shadow:0 1px 0 0 rgba(255,255,255,.35) inset, 0 1px 0 0 rgba(0,0,0,.15);
transition:filter .12s ease, transform .07s ease, box-shadow .16s ease;
position:relative; overflow:hidden;
}
.btn:hover{ filter:brightness(1.08); box-shadow:0 1px 0 0 rgba(255,255,255,.4) inset, 0 8px 22px -6px rgba(79,214,255,.5); }
.btn:active{ transform:scale(.97); }
.btn.ghost{ background:var(--surface-2); border-color:var(--border-strong); color:var(--text); box-shadow:none; }
.btn.ghost:hover{ background:var(--surface-3); box-shadow:none; }
.btn.danger{ background:var(--danger); color:#2a0508; }
.btn.signal{ background:var(--signal); color:#022019; }
.btn.small{ padding:7px 12px; font-size:12px; }
.btn.icon-only{ padding:9px; width:36px; }
/* ==========================================================================
BADGES — con vida: entran con rebote, el punto respira y hace un anillo
tipo onda de agua (mismo motivo que el nav activo). Solo "muted" se queda
quieto a propósito: es un estado apagado (expirado), no tiene sentido que
lata como los demás.
========================================================================== */
.badge{
display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono);
font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; font-weight:600;
padding:3px 8px; border-radius:99px; border:1px solid transparent;
position:relative; cursor:default;
transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
animation:badge-pop .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.badge:hover{ transform:translateY(-2px) scale(1.06); }
.badge:nth-of-type(1){ animation-delay:.03s; }
.badge:nth-of-type(2){ animation-delay:.09s; }
.badge:nth-of-type(3){ animation-delay:.15s; }
.badge:nth-of-type(4){ animation-delay:.21s; }
.badge:nth-of-type(5){ animation-delay:.27s; }
.badge::before{
content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none;
animation:badge-breathe 2.2s ease-in-out infinite;
}
.badge:not(.muted)::after{
content:''; position:absolute; left:8px; top:50%; width:5px; height:5px;
border-radius:50%; border:1px solid currentColor; opacity:0; pointer-events:none;
transform:translateY(-50%) scale(1);
animation:badge-ring 2.2s ease-out infinite;
}
.badge.ok{ background:rgba(0,229,160,.1); color:var(--signal); border-color:rgba(0,229,160,.28); }
.badge.warn{ background:rgba(79,214,255,.1); color:var(--blue); border-color:rgba(79,214,255,.28); }
.badge.danger{ background:rgba(255,77,94,.1); color:var(--danger); border-color:rgba(255,77,94,.28); }
.badge.muted{ background:var(--surface-3); color:var(--text-dim); border-color:var(--border); }
.badge.muted::before{ animation:none; }
.badge.violet{ background:rgba(139,123,255,.1); color:var(--violet); border-color:rgba(139,123,255,.28); }
@keyframes badge-pop{
from{ opacity:0; transform:translateY(5px) scale(.7); }
to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes badge-breathe{
0%,100%{ opacity:1; transform:scale(1); }
50%{ opacity:.4; transform:scale(.7); }
}
@keyframes badge-ring{
0%{ transform:translateY(-50%) scale(1); opacity:.6; }
100%{ transform:translateY(-50%) scale(3.2); opacity:0; }
}
/* ==========================================================================
TABLA
========================================================================== */
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:12px 10px; border-bottom:1px solid var(--border); font-size:13px; }
th{
font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
color:var(--text-faint); font-weight:600;
}
tbody tr{ transition:background .12s ease; }
tbody tr:hover{ background:var(--surface-2); }
tbody tr:last-child td{ border-bottom:none; }
td.num{ font-family:var(--font-mono); color:var(--text-dim); }
/* ==========================================================================
FORMULARIOS
========================================================================== */
label{ font-size:12px; color:var(--text-dim); display:block; margin-bottom:6px; }
input[type="text"], input[type="password"], input[type="number"], input[type="email"], textarea, select{
width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
padding:10px 12px; border-radius:var(--radius-sm); font-size:13.5px; font-family:var(--font-body);
outline:none; transition:border-color .14s ease, box-shadow .14s ease;
}
input:focus, textarea:focus, select:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,214,255,.14); }
.field{ margin-bottom:14px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hint{ font-size:11px; color:var(--text-faint); margin-top:5px; }
/* Valor de solo lectura (datos reales de conexión, no editables desde aquí) */
.field .value{
font-family:var(--font-mono); font-size:13.5px; color:var(--text);
padding:10px 12px; background:var(--surface-2); border:1px solid var(--border);
border-radius:var(--radius-sm);
}
/* Ícono del botón "Actualizar" gira mientras espera respuesta real del servidor */
.spin-icon{ display:inline-block; }
.btn.is-loading{ pointer-events:none; opacity:.75; }
.btn.is-loading .spin-icon{ animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.switch{ position:relative; display:inline-block; width:38px; height:22px; flex:none; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch-track{ position:absolute; inset:0; background:var(--surface-3); border:1px solid var(--border); border-radius:999px; transition:background .15s ease, border-color .15s ease; }
.switch-track::after{ content:''; position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%; background:var(--text-faint); transition:transform .15s ease, background .15s ease; }
.switch input:checked + .switch-track{ background:rgba(79,214,255,.25); border-color:var(--blue); }
.switch input:checked + .switch-track::after{ transform:translateX(16px); background:var(--blue); }
/* ==========================================================================
MODAL — demo funcional sin JS, con el truco del checkbox oculto
========================================================================== */
.modal-toggle{ position:absolute; opacity:0; pointer-events:none; }
.modal-scrim{
position:fixed; inset:0; background:rgba(4,4,5,.72); backdrop-filter:blur(2px);
display:flex; align-items:center; justify-content:center; z-index:300;
opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.modal-toggle:checked ~ .modal-scrim{ opacity:1; pointer-events:auto; }
/* La confirmación sí/no se abre ENCIMA de otro modal ya abierto (ej.
"Eliminar tienda" desde dentro del asistente) — sin esto empataban en
z-index y ganaba el que estuviera después en el HTML, tapando los botones
de verdad aunque se vieran "por encima" en algunos recortes de pantalla. */
#confirm-scrim{ z-index:400; }
/* Modales que abre JS directo (sin el checkbox-hack), como el asistente de tiendas */
.modal-scrim.is-open{ opacity:1; pointer-events:auto; }
.modal-box{
width:400px; max-width:90vw; background:var(--surface-2); border:1px solid var(--border-strong);
border-radius:var(--radius-lg); padding:24px; transform:scale(.94) translateY(10px);
transition:transform .22s cubic-bezier(.16,1,.3,1); box-shadow:0 40px 80px -24px rgba(0,0,0,.7);
}
.modal-toggle:checked ~ .modal-scrim .modal-box,
.modal-scrim.is-open .modal-box{ transform:scale(1) translateY(0); }
.modal-box h3{ font-size:16px; margin-bottom:6px; }
.modal-box p{ color:var(--text-dim); font-size:13px; line-height:1.55; margin:0 0 18px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
/* ==========================================================================
TIENDAS — grilla de tiendas reales + asistente de 3 pasos para crear una
========================================================================== */
.store-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.store-card{
background:linear-gradient(180deg, var(--surface-2), var(--surface));
border:1px solid var(--border); border-radius:var(--radius);
padding:16px; position:relative; overflow:hidden; cursor:pointer;
transition:transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s ease, box-shadow .18s ease;
animation:badge-pop .45s cubic-bezier(.34,1.56,.64,1) backwards;
}
.store-card:hover{
transform:translateY(-3px); border-color:var(--border-strong);
box-shadow:0 16px 36px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(79,214,255,.12);
}
.store-card::before{
content:''; position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg, var(--t1,var(--blue)), var(--t2,var(--blue-2)));
}
/* El logo solo existe si la tienda tiene uno: no hay hueco reservado ni
marcador de posición cuando falta. */
.store-card .store-logo{
width:44px; height:44px; margin:6px 0 8px; border-radius:8px;
background:rgba(255,255,255,.05); border:1px solid var(--border);
display:flex; align-items:center; justify-content:center; overflow:hidden;
}
/* width/height al 100% con padding propio: así el logo ocupa todo el marco
menos el respiro, en vez de quedar chico por resolver porcentajes contra
una caja flexible. object-fit:contain evita que se deforme. */
.store-card .store-logo img{ width:100%; height:100%; padding:7px; object-fit:contain; display:block; }
.store-card .store-name{ font-family:var(--font-display); font-size:15px; font-weight:600; margin:6px 0 2px; }
.store-card .store-id{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
.store-card .store-meta{ display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
/* 10 temas ya no caben en una pantalla corta sin scroll — el título y los
pasos quedan fijos arriba, los botones fijos abajo, y solo el contenido
de en medio (theme-grid, campos) se desplaza. Antes el modal completo
simplemente se salía de la pantalla y "Siguiente" quedaba inalcanzable. */
.wizard-box{
width:820px; max-width:94vw; max-height:88vh;
display:flex; flex-direction:column; padding:24px 24px 0;
overflow:hidden;
}
.wizard-title{ font-family:var(--font-display); font-size:16px; font-weight:600; color:#fff; margin-bottom:16px; flex:none; }
.wizard-body{ flex:1; min-height:0; overflow-y:auto; padding-right:4px; margin-right:-4px; }
.wizard-box .modal-actions{ flex:none; padding-bottom:24px; }
#w-eliminar{ margin-right:auto; }
.wizard-steps{ display:flex; gap:8px; margin-bottom:20px; flex:none; }
.wizard-step{
flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint);
text-transform:uppercase; letter-spacing:.05em;
padding-bottom:10px; border-bottom:2px solid var(--border);
transition:border-color .2s ease, color .2s ease;
}
.wizard-step em{
font-style:normal; width:20px; height:20px; border-radius:50%; background:var(--surface-3);
display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-dim);
transition:background .2s ease, color .2s ease;
}
.wizard-step.active{ color:var(--blue); border-color:var(--blue); }
.wizard-step.active em{ background:var(--blue); color:#0a0a0a; }
.wizard-step.done{ color:var(--signal); border-color:var(--signal); }
.wizard-step.done em{ background:var(--signal); color:#022019; }
.wizard-panel{ display:none; }
.wizard-panel.active{ display:block; animation:view-in .3s ease; }
.wizard-panel h3{ font-size:16px; margin-bottom:4px; }
.wizard-panel .sub{ color:var(--text-dim); font-size:12.5px; margin:0 0 14px; }
.wizard-error{ color:var(--danger); font-size:11.5px; min-height:14px; margin-top:6px; }
.slogan-list{ margin-bottom:10px; }
.slogan-row{ display:grid; grid-template-columns:1fr 64px 30px; gap:8px; margin-bottom:8px; align-items:center; }
.slogan-row input[type="number"]{ text-align:center; }
.slogan-remove{
width:30px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--border);
background:var(--surface-2); color:var(--text-faint); cursor:pointer; font-size:15px; line-height:1;
transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.slogan-remove:hover{ background:rgba(255,77,94,.12); color:var(--danger); border-color:rgba(255,77,94,.3); }
/* ---- Cargador de logo (paso 1 del asistente) ---- */
.opcional{
font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
color:var(--text-faint); border:1px solid var(--border); border-radius:99px; padding:1px 6px; margin-left:6px;
}
.logo-drop{
border:1.5px dashed var(--border-strong); border-radius:var(--radius);
background:var(--surface-2); padding:14px; cursor:pointer;
transition:border-color .15s ease, background .15s ease;
}
.logo-drop:hover{ border-color:var(--blue); background:var(--surface-3); }
.logo-drop.is-drag{ border-color:var(--blue); background:rgba(79,214,255,.08); }
.logo-vacio{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; padding:8px 0; }
.logo-vacio .logo-icono{ font-size:20px; }
.logo-vacio strong{ font-size:12.5px; font-weight:600; }
.logo-vacio .logo-sub{ font-size:11px; color:var(--text-faint); }
.logo-lleno{ display:flex; align-items:center; gap:14px; }
/* Cuadro de tablero de ajedrez: deja ver la transparencia real del PNG */
.logo-preview{
width:74px; height:74px; flex:none; border-radius:var(--radius-sm); overflow:hidden;
border:1px solid var(--border);
background-color:#0e0f12;
background-image:
linear-gradient(45deg, #1b1d22 25%, transparent 25%, transparent 75%, #1b1d22 75%),
linear-gradient(45deg, #1b1d22 25%, transparent 25%, transparent 75%, #1b1d22 75%);
background-size:12px 12px; background-position:0 0, 6px 6px;
display:flex; align-items:center; justify-content:center;
}
.logo-preview img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.logo-datos{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.logo-datos strong{ font-family:var(--font-mono); font-size:12.5px; }
.logo-datos span{ font-size:11px; color:var(--text-faint); }
.logo-acciones{ display:flex; gap:8px; margin-top:8px; }
.theme-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px; }
.theme-card{
background:var(--surface-3); border:1px solid var(--border); border-radius:var(--radius);
padding:0; overflow:hidden; cursor:pointer; text-align:left; font-family:inherit; color:var(--text);
transition:transform .18s cubic-bezier(.34,1.56,.64,1), border-color .15s ease, box-shadow .2s ease;
}
.theme-card:hover{ transform:translateY(-3px); border-color:var(--border-strong); }
.theme-card.selected{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,214,255,.18); }
.theme-swatch{
display:block; height:58px; position:relative; overflow:hidden;
background:linear-gradient(135deg, var(--t1), var(--t2));
}
.theme-swatch::after{
content:''; position:absolute; inset:0;
background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
background-size:220% 100%; background-position:-160% 0;
transition:background-position .6s ease;
}
.theme-card:hover .theme-swatch::after{ background-position:160% 0; }
.theme-name{ display:block; font-weight:600; font-size:12.5px; padding:9px 11px 1px; }
.theme-card.selected .theme-name::after{ content:' ✓'; color:var(--blue); }
.theme-tag{ display:block; font-size:10.5px; color:var(--text-faint); padding:0 11px 10px; line-height:1.4; }
/* ==========================================================================
MINIATURAS DE TEMA — cada uno de los 3 temas de tienda trae su propia
familia visual, ninguna se repite (grid de hacker, rayos girando, rayas
diagonales). Se generan con absolutamente posicionados dentro de
.theme-swatch — puro CSS, sin imágenes.
========================================================================== */
.theme-swatch i{ position:absolute; display:block; }
/* ---- grid: piso en perspectiva + scanline + cursor de terminal ---- */
.mk-floor{
left:-6px; right:-6px; bottom:0; top:42%; overflow:hidden;
background-image:
repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 1px, transparent 1px 11px),
repeating-linear-gradient(0deg, rgba(255,255,255,.4) 0 1px, transparent 1px 6px);
transform:perspective(50px) rotateX(58deg);
transform-origin:bottom;
}
.mk-scanline{
left:6px; right:6px; top:6px; height:2px; border-radius:2px;
background:rgba(255,255,255,.95); box-shadow:0 0 8px 1px rgba(255,255,255,.8);
animation:mk-scan 2.6s ease-in-out infinite;
}
.mk-cursor{ left:9px; top:8px; width:5px; height:9px; background:rgba(255,255,255,.9); animation:mk-blink 1s steps(1) infinite; }
@keyframes mk-scan{ 0%{ top:6px; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ top:44px; opacity:0; } }
@keyframes mk-blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
/* ---- rayos: haces girando desde un núcleo central ---- */
.mk-rays{ left:50%; top:50%; width:1px; height:1px; animation:mk-spin 7s linear infinite; }
.mk-rays i{ left:-.5px; top:0; width:1.5px; height:27px; background:linear-gradient(to top, rgba(255,255,255,.9), transparent); transform-origin:50% 0; }
.mk-rays i:nth-child(1){ transform:rotate(0deg); }
.mk-rays i:nth-child(2){ transform:rotate(60deg); }
.mk-rays i:nth-child(3){ transform:rotate(120deg); }
.mk-rays i:nth-child(4){ transform:rotate(180deg); }
.mk-rays i:nth-child(5){ transform:rotate(240deg); }
.mk-rays i:nth-child(6){ transform:rotate(300deg); }
.mk-rays-core{
left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
background:rgba(255,255,255,.95); box-shadow:0 0 12px 3px rgba(255,255,255,.65);
}
@keyframes mk-spin{ to{ transform:rotate(360deg); } }
/* ---- rayas: franjas diagonales alternadas ---- */
.mk-stripes{ left:-10px; right:-10px; top:-10px; bottom:-10px; display:flex; gap:7px; transform:rotate(-20deg) scale(1.25); }
.mk-stripes i{ position:static; flex:1; background:rgba(255,255,255,.6); }
.mk-stripes i:nth-child(2n){ background:rgba(255,255,255,.22); }
/* ---- tormenta: nube + relámpago que destella + lluvia diagonal ---- */
.mk-cloud{
left:8px; top:5px; width:34px; height:12px; border-radius:99px; background:rgba(255,255,255,.34);
box-shadow:12px 3px 0 -2px rgba(255,255,255,.26), -6px 3px 0 -3px rgba(255,255,255,.22);
}
.mk-bolt{
left:26px; top:14px; width:12px; height:26px; background:#fff;
clip-path:polygon(58% 0, 16% 54%, 46% 54%, 30% 100%, 88% 40%, 52% 40%);
filter:drop-shadow(0 0 6px rgba(255,255,255,.9));
animation:mk-flash 3.4s steps(1) infinite;
}
.mk-drops{
inset:0; opacity:.5;
background-image:repeating-linear-gradient(72deg, rgba(255,255,255,.7) 0 1px, transparent 1px 9px);
animation:mk-fall .7s linear infinite;
}
@keyframes mk-flash{ 0%,88%,100%{ opacity:.25; } 90%{ opacity:1; } 92%{ opacity:.3; } 94%{ opacity:1; } }
@keyframes mk-fall{ to{ background-position:-9px 18px; } }
/* ---- liquido: dos gotas deformándose + ola abajo ---- */
.mk-drop-a{
left:9px; top:8px; width:22px; height:22px; background:rgba(255,255,255,.4);
border-radius:58% 42% 46% 54% / 52% 48% 52% 48%;
animation:mk-morph 4.5s ease-in-out infinite;
}
.mk-drop-b{
right:11px; top:16px; width:16px; height:16px; background:rgba(255,255,255,.28);
border-radius:44% 56% 60% 40% / 46% 58% 42% 54%;
animation:mk-morph 3.6s ease-in-out infinite reverse;
}
.mk-wave{
left:-14px; right:-14px; bottom:-9px; height:20px; border-radius:44%;
background:rgba(255,255,255,.55);
animation:mk-sway 3.2s ease-in-out infinite;
}
@keyframes mk-morph{
0%,100%{ border-radius:58% 42% 46% 54% / 52% 48% 52% 48%; transform:translateY(0); }
50%{ border-radius:38% 62% 63% 37% / 41% 57% 43% 59%; transform:translateY(-3px); }
}
@keyframes mk-sway{ 0%,100%{ transform:translateX(-5px) rotate(-3deg); } 50%{ transform:translateX(5px) rotate(3deg); } }
/* ---- circuito: pistas de placa + pulso que las recorre + nodos ---- */
.mk-pistas{
inset:4px; opacity:.55;
background-image:
repeating-linear-gradient(0deg, transparent 0 11px, rgba(255,255,255,.75) 11px 12px),
repeating-linear-gradient(90deg, transparent 0 15px, rgba(255,255,255,.5) 15px 16px);
}
.mk-pulso{
inset:4px;
background-image:linear-gradient(90deg, transparent, rgba(255,255,255,.95) 45%, transparent 60%);
background-size:180% 100%; background-repeat:no-repeat;
-webkit-mask-image:repeating-linear-gradient(0deg, #000 0 1.5px, transparent 1.5px 12px);
mask-image:repeating-linear-gradient(0deg, #000 0 1.5px, transparent 1.5px 12px);
animation:mk-pulso-corre 2.2s linear infinite;
}
.mk-nodo{
left:22%; top:34%; width:6px; height:6px; border-radius:50%;
background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.8);
animation:mk-nodo-late 1.8s ease-in-out infinite;
}
.mk-nodo-2{ left:auto; right:24%; top:auto; bottom:28%; animation-delay:.9s; }
@keyframes mk-pulso-corre{ from{ background-position:-80% 0; } to{ background-position:180% 0; } }
@keyframes mk-nodo-late{ 0%,100%{ opacity:.35; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.2); } }
/* ---- warp: estrellas disparándose desde el centro ---- */
.mk-warp{
left:50%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%;
background:repeating-conic-gradient(from 0deg,
rgba(255,255,255,.85) 0deg 1.4deg, transparent 1.4deg 13deg);
-webkit-mask-image:radial-gradient(circle, transparent 8%, #000 42%, transparent 78%);
mask-image:radial-gradient(circle, transparent 8%, #000 42%, transparent 78%);
animation:mk-warp-out 1.8s linear infinite;
}
.mk-warp-2{ animation-delay:.9s; }
.mk-warp-core{
left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%;
background:#fff; box-shadow:0 0 14px 4px rgba(255,255,255,.9);
}
@keyframes mk-warp-out{
0%{ transform:scale(.15); opacity:0; }
25%{ opacity:1; }
100%{ transform:scale(2.4); opacity:0; }
}
/* ---- glitch: barras RGB desplazadas + líneas de señal ---- */
.mk-glitch-a, .mk-glitch-b{
left:12%; right:12%; top:34%; height:16px; border-radius:2px;
}
.mk-glitch-a{ background:rgba(255,255,255,.9); animation:mk-glitch-x 2.4s steps(1) infinite; }
.mk-glitch-b{
background:rgba(255,255,255,.35); mix-blend-mode:screen;
animation:mk-glitch-x 2.4s steps(1) infinite reverse;
}
.mk-glitch-lines{
inset:0; opacity:.5;
background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 5px);
animation:mk-glitch-roll 3s linear infinite;
}
@keyframes mk-glitch-x{
0%,72%,100%{ transform:translateX(0); }
76%{ transform:translateX(-7px); }
80%{ transform:translateX(5px); }
84%{ transform:translateX(-3px); }
}
@keyframes mk-glitch-roll{ to{ background-position:0 -20px; } }
/* ---- sonar: anillos expandiéndose + aguja de radar ---- */
.mk-ping{
left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
border:1.5px solid rgba(255,255,255,.9); opacity:0;
animation:mk-ping-out 2.4s ease-out infinite;
}
.mk-ping-2{ animation-delay:1.2s; }
.mk-sweep{
left:50%; top:50%; width:1px; height:1px;
box-shadow:0 0 0 2px rgba(255,255,255,.95);
animation:mk-sweep-spin 2.4s linear infinite;
}
.mk-sweep::before{
content:''; position:absolute; left:0; top:-26px; width:1.5px; height:26px;
background:linear-gradient(to top, rgba(255,255,255,.95), transparent);
transform-origin:50% 100%;
}
@keyframes mk-ping-out{ 0%{ transform:scale(.3); opacity:.9; } 100%{ transform:scale(3.4); opacity:0; } }
@keyframes mk-sweep-spin{ to{ transform:rotate(360deg); } }
/* ==========================================================================
MINIATURAS DE ACCESO — 3 acomodos de login, sin color propio: heredan
--t1/--t2 del tema de tienda elegido (ver admin-tiendas.js). Solo cambia
estructura, botón y tipografía, nunca fondo ni paleta. Cada miniatura
anima justo el detalle que distingue a su acomodo (la píldora que se
desliza, el hilo editorial, el panel que entra por el borde).
========================================================================== */
/* ---- Cápsula flotante: tarjeta compacta con píldora deslizante ---- */
.lc-capsula{ display:flex; align-items:center; justify-content:center; height:100%; }
.lc-capsula .card{
position:static; width:74%; height:74%; border-radius:11px;
background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.75);
box-shadow:0 0 14px rgba(255,255,255,.35);
display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 7px;
animation:lc-lift 3s ease-in-out infinite;
}
.lc-capsula .card i{ position:static; }
.lc-capsula .pill{
display:flex; background:rgba(0,0,0,.3); border-radius:99px; padding:1.5px; height:9px;
}
.lc-capsula .pill i{
width:50%; height:100%; border-radius:99px; background:#fff;
animation:lc-slide 2.6s cubic-bezier(.65,0,.35,1) infinite;
}
.lc-capsula .f{ height:4px; border-radius:99px; background:rgba(255,255,255,.3); }
.lc-capsula .b{ height:6px; border-radius:99px; background:rgba(255,255,255,.95); margin-top:1px; }
@keyframes lc-slide{ 0%,42%{ transform:translateX(0); } 50%,92%{ transform:translateX(100%); } 100%{ transform:translateX(0); } }
@keyframes lc-lift{ 0%,100%{ transform:translateY(2px); } 50%{ transform:translateY(-2px); } }
/* ---- Escaparate dividido: mitad marca con la inicial, mitad formulario ---- */
.lc-escaparate{ display:flex; align-items:center; justify-content:center; height:100%; }
.lc-escaparate i{ position:static; }
.lc-escaparate .card{
display:flex; width:86%; height:76%; border-radius:7px; overflow:hidden;
border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.08);
}
.lc-escaparate .marca{
width:40%; display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.22); position:relative; overflow:hidden;
}
.lc-escaparate .marca::after{
content:''; position:absolute; inset:0;
background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%);
background-size:260% 100%; animation:lc-brillo 3s ease-in-out infinite;
}
.lc-escaparate .ini{ font-size:15px; font-weight:800; color:#fff; line-height:1; }
.lc-escaparate .body{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 6px; }
.lc-escaparate .tabs{ display:flex; gap:3px; }
.lc-escaparate .tabs i{ flex:1; height:5px; border-radius:2px; background:rgba(255,255,255,.28); }
.lc-escaparate .tabs i:first-child{ background:#fff; }
.lc-escaparate .f{ height:4px; border-radius:2px; background:rgba(255,255,255,.3); }
.lc-escaparate .b{ height:6px; border-radius:2px; background:#fff; }
@keyframes lc-brillo{ 0%{ background-position:-130% 0; } 60%,100%{ background-position:130% 0; } }
/* ---- Boleto perforado: cabecera, línea de troquel con muescas, cuerpo ---- */
.lc-boleto{ display:flex; align-items:center; justify-content:center; height:100%; }
.lc-boleto i{ position:static; }
.lc-boleto .card{
width:66%; border-radius:5px; overflow:hidden;
border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.08);
display:flex; flex-direction:column;
}
.lc-boleto .head{ display:flex; gap:3px; padding:5px 6px; background:rgba(255,255,255,.3); }
.lc-boleto .head i{ flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.45); }
.lc-boleto .head i:first-child{ background:#fff; }
.lc-boleto .corte{
height:0; border-top:1.5px dashed rgba(255,255,255,.75); margin:0 5px; position:relative;
animation:lc-troquel 2.6s ease-in-out infinite;
}
.lc-boleto .corte::before, .lc-boleto .corte::after{
content:''; position:absolute; top:-4px; width:7px; height:7px; border-radius:50%;
background:var(--t1); border:1px solid rgba(255,255,255,.5);
}
.lc-boleto .corte::before{ left:-9px; }
.lc-boleto .corte::after{ right:-9px; }
.lc-boleto .body{ display:flex; flex-direction:column; gap:3px; padding:6px; }
.lc-boleto .f{ height:4px; border-radius:1px; background:rgba(255,255,255,.3); }
.lc-boleto .b{ height:6px; border-radius:1px; background:#fff; margin-top:1px; }
@keyframes lc-troquel{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
/* ---- Banda cinemática: franja de ancho completo entre dos barras negras ---- */
.lc-banda{ display:flex; flex-direction:column; height:100%; }
.lc-banda i{ position:static; }
.lc-banda .barra{ flex:1; background:rgba(0,0,0,.5); }
.lc-banda .band{
display:flex; align-items:center; gap:5px; padding:0 8px; height:24px;
background:rgba(255,255,255,.16);
border-top:1px solid rgba(255,255,255,.7); border-bottom:1px solid rgba(255,255,255,.7);
position:relative; overflow:hidden;
}
.lc-banda .band::after{
content:''; position:absolute; inset:0;
background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
background-size:250% 100%; animation:lc-brillo 3.4s ease-in-out infinite;
}
.lc-banda .f{ flex:1; height:5px; border-radius:2px; background:rgba(255,255,255,.32); }
.lc-banda .b{ width:22%; height:7px; border-radius:2px; background:#fff; }
/* ---- Panel lateral: franja completa pegada al borde derecho ---- */
.lc-lateral{ display:flex; height:100%; }
.lc-lateral i{ position:static; }
.lc-lateral .stage{ flex:1; display:flex; align-items:center; justify-content:center; }
.lc-lateral .mark{ width:13px; height:13px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85); }
.lc-lateral .panel{
width:46%; background:rgba(0,0,0,.34); border-left:1.5px solid rgba(255,255,255,.8);
display:flex; flex-direction:column; justify-content:center; gap:3px; padding:0 7px;
animation:lc-enter 3.2s ease-in-out infinite;
}
.lc-lateral .seg{ height:6px; border-radius:2px; background:rgba(255,255,255,.85); width:70%; }
.lc-lateral .f{ height:4px; border-radius:1px; background:rgba(255,255,255,.28); }
.lc-lateral .b{ height:6px; border-radius:2px; background:#fff; margin-top:1px; }
@keyframes lc-enter{ 0%,100%{ transform:translateX(14%); opacity:.55; } 45%,70%{ transform:translateX(0); opacity:1; } }
/* ==========================================================================
ACTIVIDAD — feed en vivo. Cada función real que conectemos (BD, categorías,
etc.) empuja aquí su propio evento vía window.addActivity(tipo, icono, texto)
desde admin-status.js. Entra con rebote, no con fundido plano — que se sienta
vivo y no una alerta de formulario.
========================================================================== */
.activity-log{ display:flex; flex-direction:column; gap:8px; }
.activity-log .hint{ margin:0; }
.toast{
display:flex; align-items:center; gap:10px; background:var(--surface-2);
border:1px solid var(--border); border-left:3px solid var(--border-strong); border-radius:10px;
padding:11px 15px; font-size:13px; box-shadow:0 14px 34px -14px rgba(0,0,0,.6);
animation:toast-in .5s cubic-bezier(.34,1.56,.64,1);
}
.toast .toast-icon{ flex:none; font-size:14px; }
.toast .toast-time{
margin-left:auto; flex:none; font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
}
.toast.ok{ border-left-color:var(--signal); }
.toast.warn{ border-left-color:var(--blue); }
.toast.danger{ border-left-color:var(--danger); }
@keyframes toast-in{
from{ opacity:0; transform:translateY(-10px) scale(.94); }
to{ opacity:1; transform:translateY(0) scale(1); }
}
/* ==========================================================================
MISC
========================================================================== */
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.status-dot{ animation:pulse 2.4s ease-in-out infinite; }
/* ==========================================================================
MOVIL — el panel en una mano
--------------------------------------------------------------------------
Antes, por debajo de 900px la barra lateral simplemente se escondia y el
panel se quedaba SIN forma de cambiar de seccion. Ahora se convierte en un
cajon que entra desde la izquierda con el boton de la barra de arriba.
Todo lo demas de aqui abajo es lo mismo: dejar respirar lo que en una
pantalla estrecha se apretuja.
========================================================================== */
/* El boton de las tres rayas: escondido salvo en pantallas estrechas */
.nav-abrir{
display:none; flex:none; width:38px; height:38px; margin-left:-6px;
flex-direction:column; align-items:center; justify-content:center; gap:4px;
border-radius:10px; cursor:pointer;
background:var(--surface-2); border:1px solid var(--border);
}
.nav-abrir span{
display:block; width:16px; height:1.5px; border-radius:2px; background:var(--text-dim);
transition:transform .22s ease, opacity .18s ease;
}
.nav-abrir:hover span{ background:var(--blue); }
/* Con el cajon abierto las rayas se cruzan: se ve que ese mismo boton cierra */
body.nav-abierta .nav-abrir span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
body.nav-abierta .nav-abrir span:nth-child(2){ opacity:0; }
body.nav-abierta .nav-abrir span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
.nav-scrim{
position:fixed; inset:0; z-index:59; background:rgba(0,0,0,.55);
backdrop-filter:blur(2px); opacity:0; transition:opacity .22s ease;
}
body.nav-abierta .nav-scrim{ opacity:1; }
@media (max-width:900px){
.nav-abrir{ display:flex; }
/* La barra lateral pasa a ser un cajon: sigue siendo el MISMO elemento, asi
que los permisos y el router no se enteran de nada. */
.sidebar{
position:fixed; top:0; left:0; bottom:0; z-index:60;
width:min(280px, 84vw); max-width:none;
overflow-y:auto; -webkit-overflow-scrolling:touch;
background:var(--surface); border-right:1px solid var(--border-strong);
box-shadow:18px 0 45px rgba(0,0,0,.5);
transform:translateX(-102%); transition:transform .26s cubic-bezier(.4,0,.2,1);
}
body.nav-abierta .sidebar{ transform:translateX(0); }
/* Con el cajon abierto, el fondo no se mueve al arrastrar */
body.nav-abierta{ overflow:hidden; }
/* La barra de arriba: que crezca en vez de recortar el titulo. Y sin
space-between, que con el boton del menu delante empujaba el titulo al
centro y lo dejaba en 74px de ancho. */
.topbar{
height:auto; min-height:58px; padding:9px 16px; gap:10px;
justify-content:flex-start;
}
.topbar-title{ flex:1; min-width:0; }
.topbar-title h2{
font-size:14.5px; line-height:1.25;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* El subtitulo se cae: en 375px se come tres lineas y no dice nada nuevo */
.topbar-title span{ display:none; }
.topbar-right{ margin-left:auto; flex:none; gap:7px; }
/* El avatar repite la inicial del nombre que ya esta al lado */
.avatar{ display:none; }
.content{ padding:18px 16px 48px; }
.page-head{ margin-bottom:18px; }
.page-head h1{ font-size:21px; }
.page-head p{ font-size:13px; }
.section-title{ margin:26px 0 10px; }
.field-row{ grid-template-columns:1fr; }
.grid-stats{ grid-template-columns:1fr 1fr; gap:10px; }
}
@media (max-width:520px){
.grid-stats{ grid-template-columns:1fr; }
.content{ padding:16px 13px 44px; }
.page-head h1{ font-size:19px; }
/* En pantallas asi el nombre estorba: basta el rango y el boton de salir */
.sesion-chip #sesion-alias{ display:none; }
}
@media (prefers-reduced-motion: reduce){
*{ animation:none !important; transition:none !important; }
}
/* Con GSAP activo (admin-fx.js) estas dos transiciones las controla JS para que no compitan
por el mismo transform/opacity. Si admin-fx.js no carga, .js-fx-active nunca se agrega y
el modal sigue abriendo con su transición CSS normal. */
.js-fx-active .modal-box{ transition:none; }
.js-fx-active .stat-card{ transition:border-color .18s ease, box-shadow .18s ease; }
/* Destello de clic estilo salpicadura de agua: núcleo claro + anillo azul que se desvanece */
.ripple-fx{
position:absolute; border-radius:50%; pointer-events:none; transform:scale(0);
background:radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(79,214,255,.35) 45%, rgba(79,214,255,0) 72%);
border:1px solid rgba(255,255,255,.35);
}
/* ==========================================================================
PASO 4 — opciones del interior de la tienda.
Cada tarjeta lleva una miniatura hecha con tres : son puro CSS, sin
imágenes, y cada una imita de verdad lo que hace la opción (dónde queda la
barra, cómo entra la sección, cómo se marca la activa).
========================================================================== */
/* Cinco por fila. Fijas y no auto-fill: con auto-fill, según el ancho, la
quinta se caía sola a una segunda fila y quedaba huérfana. */
.opt-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; }
@media (max-width:900px){ .opt-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:620px){ .opt-grid{ grid-template-columns:repeat(2, 1fr); } }
.opt-card{
background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
padding:0 0 9px; overflow:hidden; cursor:pointer; text-align:left;
font-family:inherit; color:var(--text);
transition:transform .16s cubic-bezier(.34,1.56,.64,1), border-color .15s ease, box-shadow .2s ease;
}
.opt-card:hover{ transform:translateY(-2px); border-color:var(--border-strong); }
.opt-card.selected{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,214,255,.16); }
.opt-nombre{ display:block; font-weight:600; font-size:12px; padding:8px 10px 1px; }
.opt-card.selected .opt-nombre::after{ content:' ✓'; color:var(--blue); }
.opt-tag{ display:block; font-size:10px; color:var(--text-faint); padding:0 10px; line-height:1.35; }
/* Lienzo de la miniatura */
.opt-mini{
display:block; position:relative; height:52px; overflow:hidden;
background:#0c0d11; border-bottom:1px solid var(--border);
}
.opt-mini i{ position:absolute; display:block; background:rgba(255,255,255,.22); border-radius:2px; }
/* La cuarta pieza solo la usan efecto e indicador. En los demás ejes se
esconde: si no, queda un elemento suelto sin posición ni tamaño. */
.opt-barra-lateral i:nth-child(4), .opt-barra-superior i:nth-child(4),
.opt-barra-inferior i:nth-child(4), .opt-barra-flotante i:nth-child(4),
.opt-barra-cajon i:nth-child(4),
[class*="opt-anuncio-"] i:nth-child(4),
[class*="opt-productos-"] i:nth-child(4){ display:none; }
/* --- dónde va la barra --- */
.opt-barra-lateral i:nth-child(1){ left:0; top:0; bottom:0; width:26%; background:var(--blue); opacity:.75; }
.opt-barra-lateral i:nth-child(2){ left:32%; right:8%; top:10px; height:6px; }
.opt-barra-lateral i:nth-child(3){ left:32%; right:20%; top:22px; height:18px; opacity:.5; }
.opt-barra-superior i:nth-child(1){ left:0; right:0; top:0; height:26%; background:var(--blue); opacity:.75; border-radius:0; }
.opt-barra-superior i:nth-child(2){ left:10%; right:10%; top:22px; height:6px; }
.opt-barra-superior i:nth-child(3){ left:10%; right:30%; top:33px; height:12px; opacity:.5; }
.opt-barra-inferior i:nth-child(1){ left:0; right:0; bottom:0; height:26%; background:var(--blue); opacity:.75; border-radius:0; }
.opt-barra-inferior i:nth-child(2){ left:10%; right:10%; top:9px; height:6px; }
.opt-barra-inferior i:nth-child(3){ left:10%; right:30%; top:20px; height:12px; opacity:.5; }
.opt-barra-flotante i:nth-child(1){ left:18%; right:18%; bottom:6px; height:12px; border-radius:99px; background:var(--blue); opacity:.85; }
.opt-barra-flotante i:nth-child(2){ left:10%; right:10%; top:9px; height:6px; }
.opt-barra-flotante i:nth-child(3){ left:10%; right:30%; top:20px; height:12px; opacity:.5; }
/* --------------------------------------------------------------------------
EFECTO AL CAMBIAR DE CATEGORÍA
Antes las cuatro eran "una barra azul que aparece" y no se distinguían.
Ahora cada miniatura dibuja una PÁGINA de verdad: el marco fijo del menú a
la izquierda y el panel que entra haciendo su efecto en bucle.
Piezas: 1 marco/menú · 2 el panel · 3 la línea de contenido · 4 el extra
propio de cada efecto (el filo de la cortina, la estela, etc.)
-------------------------------------------------------------------------- */
[class*="opt-efecto-"] i:nth-child(1){
left:0; top:0; bottom:0; width:20%; border-radius:0;
background:rgba(255,255,255,.14);
}
[class*="opt-efecto-"] i:nth-child(2){
left:26%; right:8%; top:9px; bottom:9px; border-radius:3px;
background:linear-gradient(140deg, var(--blue), rgba(79,214,255,.35));
}
[class*="opt-efecto-"] i:nth-child(3){
left:31%; right:26%; top:16px; height:4px; border-radius:2px;
background:rgba(255,255,255,.75); z-index:2;
}
[class*="opt-efecto-"] i:nth-child(4){ display:none; }
/* 1) FUNDIDO — no se mueve nada: aparece desenfocado y se aclara */
.opt-efecto-fundido i:nth-child(2),
.opt-efecto-fundido i:nth-child(3){ animation:opt-fundido 2.6s ease-in-out infinite; }
@keyframes opt-fundido{
0%, 8%{ opacity:0; filter:blur(4px); }
42%, 78%{ opacity:1; filter:blur(0); }
100%{ opacity:0; filter:blur(4px); }
}
/* 2) DESLIZAR — entra desde el borde derecho, con estela detrás */
.opt-efecto-deslizar i:nth-child(2),
.opt-efecto-deslizar i:nth-child(3){ animation:opt-deslizar 2.6s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes opt-deslizar{
0%, 8%{ transform:translateX(56px); opacity:0; }
42%, 78%{ transform:none; opacity:1; }
100%{ transform:translateX(56px); opacity:0; }
}
.opt-efecto-deslizar i:nth-child(4){
display:block; right:0; top:9px; bottom:9px; width:16px; border-radius:0;
background:linear-gradient(90deg, transparent, rgba(79,214,255,.55));
animation:opt-desliz-estela 2.6s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes opt-desliz-estela{
0%, 8%{ opacity:.8; } 40%, 100%{ opacity:0; }
}
/* 3) ZOOM — nace pequeño en el centro y se pasa de largo */
.opt-efecto-zoom i:nth-child(2),
.opt-efecto-zoom i:nth-child(3){
transform-origin:center;
animation:opt-zoom 2.6s cubic-bezier(.34,1.5,.64,1) infinite;
}
@keyframes opt-zoom{
0%, 8%{ transform:scale(.28); opacity:0; }
38%{ transform:scale(1.08); opacity:1; }
50%, 78%{ transform:scale(1); opacity:1; }
100%{ transform:scale(.28); opacity:0; }
}
/* 4) CORTINA — se descubre de arriba abajo con un filo de luz por delante */
.opt-efecto-cortina i:nth-child(2),
.opt-efecto-cortina i:nth-child(3){ animation:opt-cortina 2.6s cubic-bezier(.16,1,.3,1) infinite; }
@keyframes opt-cortina{
0%, 8%{ clip-path:inset(0 0 100% 0); }
42%, 78%{ clip-path:inset(0 0 0 0); }
100%{ clip-path:inset(0 0 100% 0); }
}
.opt-efecto-cortina i:nth-child(4){
display:block; left:26%; right:8%; height:2px; border-radius:0;
background:var(--blue); box-shadow:0 0 9px 1px var(--blue); z-index:3;
animation:opt-cortina-filo 2.6s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes opt-cortina-filo{
0%, 8%{ top:9px; opacity:1; }
42%{ top:calc(100% - 11px); opacity:1; }
46%, 100%{ opacity:0; }
}
/* 5) GLITCH — el panel se parte en bandas y se recompone */
.opt-efecto-glitch i:nth-child(2){ animation:opt-glitch-panel 2.2s steps(1) infinite; }
@keyframes opt-glitch-panel{
0%, 6%{ opacity:0; clip-path:inset(0 0 70% 0); transform:translateX(-7px); }
14%{ opacity:1; clip-path:inset(46% 0 26% 0); transform:translateX(8px); }
22%{ clip-path:inset(14% 0 52% 0); transform:translateX(-5px); }
30%{ clip-path:inset(70% 0 0 0); transform:translateX(4px); }
40%, 82%{ clip-path:inset(0 0 0 0); transform:none; opacity:1; }
100%{ opacity:0; clip-path:inset(0 0 70% 0); transform:translateX(-7px); }
}
.opt-efecto-glitch i:nth-child(3){ animation:opt-glitch-linea 2.2s steps(1) infinite; }
@keyframes opt-glitch-linea{
0%, 6%{ opacity:0; }
14%{ opacity:1; transform:translateX(-9px); }
22%{ transform:translateX(7px); }
30%{ transform:translateX(-4px); }
40%, 82%{ transform:none; opacity:1; }
100%{ opacity:0; }
}
/* La copia desplazada en otro color: la separación RGB */
.opt-efecto-glitch i:nth-child(4){
display:block; left:26%; right:8%; top:9px; bottom:9px; border-radius:3px;
background:var(--signal); opacity:0; mix-blend-mode:screen;
animation:opt-glitch-rgb 2.2s steps(1) infinite;
}
@keyframes opt-glitch-rgb{
0%, 10%{ opacity:0; }
14%{ opacity:.5; transform:translateX(9px); }
22%{ opacity:.4; transform:translateX(-7px); }
30%{ opacity:.5; transform:translateX(5px); }
36%, 100%{ opacity:0; transform:none; }
}
/* --------------------------------------------------------------------------
CÓMO SE MARCA LA CATEGORÍA ACTIVA
Un menú de tres filas y la marca saltando entre ellas. La geometría está
cuadrada a mano: la fila va de 22% a 84%, y cada marca se coloca pegada a
ella. Antes el resplandor era un borrón más grande que la propia fila y
los corchetes caían en el borde de la miniatura, no alrededor del texto.
Piezas: 1,2,3 las filas · 4 la marca
-------------------------------------------------------------------------- */
[class*="opt-indicador-"] i:nth-child(1),
[class*="opt-indicador-"] i:nth-child(2),
[class*="opt-indicador-"] i:nth-child(3){
left:22%; right:16%; height:6px; border-radius:2px;
background:rgba(255,255,255,.28); box-shadow:none;
}
[class*="opt-indicador-"] i:nth-child(1){ top:9px; }
[class*="opt-indicador-"] i:nth-child(2){ top:23px; }
[class*="opt-indicador-"] i:nth-child(3){ top:37px; }
/* La marca salta de fila en fila: 14px de salto entre centros */
@keyframes ind-salta{
0%, 26%{ transform:translateY(0); }
33%, 59%{ transform:translateY(14px); }
66%, 92%{ transform:translateY(28px); }
100%{ transform:translateY(0); }
}
/* 1) BARRA — filete vertical pegado al costado de la fila */
.opt-indicador-barra i:nth-child(4){
left:15%; top:5px; width:3px; height:14px; border-radius:0 2px 2px 0;
background:var(--blue); box-shadow:0 0 9px 1px var(--blue);
animation:ind-salta 4.2s cubic-bezier(.34,1.4,.64,1) infinite;
}
/* 2) PÍLDORA — cápsula rellena justo alrededor de la fila */
.opt-indicador-pildora i:nth-child(4){
left:17%; right:11%; top:4px; height:16px; border-radius:99px;
background:linear-gradient(100deg, var(--blue), rgba(79,214,255,.6));
box-shadow:0 3px 10px -3px var(--blue);
animation:ind-salta 4.2s cubic-bezier(.34,1.4,.64,1) infinite;
}
/* La fila marcada se lee en negativo, encima de la cápsula */
.opt-indicador-pildora i:nth-child(1),
.opt-indicador-pildora i:nth-child(2),
.opt-indicador-pildora i:nth-child(3){ z-index:2; }
/* 3) RESPLANDOR — no rellena: solo el halo, y del tamaño de la fila */
.opt-indicador-resplandor i:nth-child(4){
left:17%; right:11%; top:4px; height:16px; border-radius:5px;
background:transparent;
animation:ind-salta 4.2s cubic-bezier(.34,1.4,.64,1) infinite,
ind-mini-halo 1.8s ease-in-out infinite;
}
@keyframes ind-mini-halo{
0%, 100%{ box-shadow:0 0 8px -2px var(--blue), inset 0 0 6px -3px var(--blue); }
50%{ box-shadow:0 0 16px 0 var(--blue), inset 0 0 12px -2px var(--blue); }
}
/* 4) SUBRAYADO — línea justo debajo de la fila, del mismo ancho.
Se dibuja de izquierda a derecha al llegar, pero pasa la mayor parte del
tiempo entera: si no, en una captura parece que no hay nada. */
.opt-indicador-subrayado i:nth-child(4){
left:22%; right:16%; top:17px; height:2.5px; border-radius:2px;
background:var(--blue); box-shadow:0 2px 8px -1px var(--blue);
transform-origin:left center;
animation:ind-salta-sub 4.2s cubic-bezier(.34,1.4,.64,1) infinite;
}
@keyframes ind-salta-sub{
0%{ transform:translateY(0) scaleX(.15); }
7%, 26%{ transform:translateY(0) scaleX(1); }
30%{ transform:translateY(14px) scaleX(.15); }
38%, 59%{ transform:translateY(14px) scaleX(1); }
63%{ transform:translateY(28px) scaleX(.15); }
71%, 92%{ transform:translateY(28px) scaleX(1); }
100%{ transform:translateY(0) scaleX(.15); }
}
/* 5) CORCHETES — abrazan la fila, no la miniatura */
.opt-indicador-corchete i:nth-child(4){
left:17%; right:11%; top:4px; height:16px; border-radius:0;
background:transparent; box-shadow:none;
border-left:2px solid var(--signal); border-right:2px solid var(--signal);
animation:ind-salta 4.2s cubic-bezier(.34,1.4,.64,1) infinite,
ind-corchete-aprieta 2.1s ease-in-out infinite;
}
@keyframes ind-corchete-aprieta{
0%, 100%{ opacity:.65; }
50%{ opacity:1; }
}
/* ==========================================================================
PASO 5 — métodos de pago
========================================================================== */
.pago-bloque{
border:1px solid var(--border); border-radius:var(--radius);
background:var(--surface-2); margin-bottom:12px; overflow:hidden;
transition:border-color .18s ease;
}
.pago-bloque.activo{ border-color:rgba(79,214,255,.45); }
.pago-cabecera{
display:flex; align-items:center; justify-content:space-between; gap:14px;
padding:14px 16px;
}
.pago-cabecera strong{ display:block; font-size:13.5px; }
.pago-cabecera span{ display:block; font-size:11.5px; color:var(--text-faint); margin-top:2px; }
.pago-campos{
padding:4px 16px 14px; border-top:1px solid var(--border);
animation:view-in .3s ease;
}
/* Sub-líneas de la tabla de clientes (correo, IP, detalles del aparato) */
.cli-sub{ font-size:11px; color:var(--text-faint); margin-top:2px; }
/* --- dónde va el anuncio (el eslogan de dentro de la tienda) --- */
/* El tercer de cada miniatura es SIEMPRE el anuncio, en verde señal para
distinguirlo de la maqueta gris de alrededor. Cada una imita la mecánica
real: la placa barre, la cinta respira, la marquesina corre y la burbuja
late. Así se elige viendo lo que va a pasar, no leyendo el nombre. */
/* 1) PLACA — rótulo bajo el título, con la luz recorriéndolo */
.opt-anuncio-cabecera i:nth-child(1){ left:10%; right:40%; top:9px; height:7px; }
.opt-anuncio-cabecera i:nth-child(2){ left:10%; right:10%; bottom:8px; height:16px; opacity:.35; }
.opt-anuncio-cabecera i:nth-child(3){
left:10%; right:30%; top:20px; height:11px; border-radius:2px 5px 5px 2px;
background:linear-gradient(100deg,
color-mix(in srgb, var(--signal) 55%, transparent), transparent 75%);
border-left:2px solid var(--signal);
box-shadow:-3px 0 9px -3px var(--signal);
opacity:1; overflow:hidden;
}
.opt-anuncio-cabecera i:nth-child(3)::after{
content:''; position:absolute; top:0; bottom:0; width:34%; left:-40%;
background:linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
animation:opt-placa 3.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes opt-placa{ 0%{ left:-40%; } 60%,100%{ left:110%; } }
/* 2) CINTA — franja arriba con el tubo de neón latiendo debajo */
.opt-anuncio-cinta i:nth-child(1){ left:10%; right:44%; top:22px; height:6px; }
.opt-anuncio-cinta i:nth-child(2){ left:10%; right:10%; bottom:8px; height:16px; opacity:.35; }
.opt-anuncio-cinta i:nth-child(3){
left:0; right:0; top:0; height:11px; border-radius:0;
background:linear-gradient(90deg,
color-mix(in srgb, var(--signal) 18%, transparent),
color-mix(in srgb, var(--signal) 60%, transparent) 50%,
color-mix(in srgb, var(--signal) 18%, transparent));
opacity:1;
}
.opt-anuncio-cinta i:nth-child(3)::after{
content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
background:linear-gradient(90deg, transparent, var(--signal) 25%, #fff 50%, var(--signal) 75%, transparent);
box-shadow:0 0 8px var(--signal);
animation:opt-cinta 2.6s ease-in-out infinite;
}
@keyframes opt-cinta{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
/* 3) MARQUESINA — el texto cruza, con los bordes difuminados */
.opt-anuncio-marquesina i:nth-child(1){ left:10%; right:44%; top:22px; height:6px; }
.opt-anuncio-marquesina i:nth-child(2){ left:10%; right:10%; bottom:8px; height:16px; opacity:.35; }
.opt-anuncio-marquesina i:nth-child(3){
left:0; right:0; top:0; height:11px; border-radius:0;
background:color-mix(in srgb, var(--signal) 14%, transparent);
border-bottom:1px solid color-mix(in srgb, var(--signal) 55%, transparent);
opacity:1; overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.opt-anuncio-marquesina i:nth-child(3)::after{
content:''; position:absolute; top:3px; height:5px; width:44%; border-radius:99px;
background:var(--signal); box-shadow:0 0 7px var(--signal);
animation:opt-marquesina 3.4s linear infinite;
}
@keyframes opt-marquesina{
from{ transform:translateX(150px); }
to{ transform:translateX(-100%); }
}
/* 4) BURBUJA — globo en la esquina con su aro respirando */
.opt-anuncio-flotante i:nth-child(1){ left:10%; right:44%; top:9px; height:6px; }
.opt-anuncio-flotante i:nth-child(2){ left:10%; right:10%; top:20px; height:14px; opacity:.35; }
.opt-anuncio-flotante i:nth-child(3){
right:7px; bottom:7px; width:46%; height:15px;
border-radius:7px 7px 1px 7px;
background:color-mix(in srgb, var(--signal) 34%, transparent);
border:1px solid var(--signal);
opacity:1;
animation:opt-burbuja 3s ease-in-out infinite;
}
@keyframes opt-burbuja{
0%,100%{ box-shadow:0 0 5px -2px var(--signal); }
50%{ box-shadow:0 0 16px -1px var(--signal); }
}
/* ==========================================================================
MOVIMIENTO EN LAS MINIATURAS DEL PASO 4
Cada una imita lo que hace la opción de verdad, no un adorno cualquiera:
la del anuncio en cabecera rota como rota el eslogan, la cinta brilla, la
burbuja aparece de golpe, etc. Así se entiende la opción sin leerla.
========================================================================== */
/* ---- Anuncio ---- */
/* Bajo el título: la frase se desvanece y vuelve, igual que al rotar */
/* ---- Dónde va la barra: el menú late para señalar dónde queda ---- */
.opt-barra-lateral i:nth-child(1),
.opt-barra-superior i:nth-child(1),
.opt-barra-inferior i:nth-child(1),
.opt-barra-flotante i:nth-child(1){
animation:opt-barra-late 2.6s ease-in-out infinite;
}
@keyframes opt-barra-late{
0%, 100%{ opacity:.7; }
50%{ opacity:1; box-shadow:0 0 12px 0 rgba(79,214,255,.55); }
}
/* La flotante además se mece un poco, que para eso está despegada */
.opt-barra-flotante i:nth-child(1){ animation:opt-barra-late 2.6s ease-in-out infinite, opt-barra-flota 3.4s ease-in-out infinite; }
@keyframes opt-barra-flota{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
/* ==========================================================================
FICHA DEL CLIENTE — se abre al hacer clic en una fila de la tabla
========================================================================== */
.fila-clicable{ cursor:pointer; }
.fila-clicable:hover{ background:var(--surface-2); }
.ficha-box{
width:720px; max-width:94vw; max-height:88vh;
display:flex; flex-direction:column; padding:0; overflow:hidden;
}
.ficha-cabecera{
display:flex; align-items:center; gap:14px; flex:none;
padding:20px 22px; border-bottom:1px solid var(--border);
background:linear-gradient(180deg, var(--surface-3), var(--surface-2));
}
.ficha-avatar{
width:46px; height:46px; flex:none; border-radius:12px;
background:linear-gradient(135deg, var(--blue), var(--blue-2));
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:700; font-size:20px; color:#06121a;
box-shadow:0 0 0 1px rgba(79,214,255,.35), 0 8px 22px -10px rgba(0,114,255,.6);
}
.ficha-identidad{ min-width:0; flex:1; }
.ficha-identidad h3{ font-size:17px; margin:0; }
.ficha-correo{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin-top:2px; }
.ficha-cerrar{
flex:none; width:30px; height:30px; border-radius:8px; cursor:pointer;
background:var(--surface-3); border:1px solid var(--border); color:var(--text-dim);
font-size:13px; line-height:1;
transition:background .15s ease, color .15s ease;
}
.ficha-cerrar:hover{ background:rgba(255,77,94,.14); color:var(--danger); border-color:rgba(255,77,94,.3); }
.ficha-cuerpo{ flex:1; min-height:0; overflow-y:auto; padding:20px 22px; }
.ficha-box .modal-actions{ flex:none; padding:0 22px 20px; margin-top:0; }
.ficha-titulo{
font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
color:var(--text-faint); margin:22px 0 10px; display:flex; align-items:center; gap:10px;
}
.ficha-titulo::after{ content:''; flex:1; height:1px; background:var(--border); }
.ficha-titulo:first-child{ margin-top:0; }
.ficha-rejilla{
display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 16px;
}
.ficha-dato{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ficha-dato-etiqueta{
font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint);
}
.ficha-dato-valor{ font-size:13px; color:var(--text); word-break:break-word; }
/* ---- Tarjeta de cada aparato ---- */
.aparato-card{
border:1px solid var(--border); border-radius:var(--radius);
background:var(--surface-2); padding:14px; margin-bottom:10px;
}
.aparato-card.es-diario{
border-color:rgba(0,229,160,.35);
box-shadow:inset 3px 0 0 0 var(--signal);
}
.aparato-cabecera{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.aparato-icono{ font-size:19px; flex:none; }
.aparato-titulo{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.aparato-titulo strong{ font-size:13.5px; }
.aparato-titulo span{ font-size:11px; color:var(--text-faint); }
.aparato-marcas{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.aparato-ua{
margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
font-size:10.5px; color:var(--text-faint);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* ---- Botones de mantenimiento en la tabla de la base ---- */
.tabla-acciones{ white-space:nowrap; }
.tabla-acciones .btn{ margin-right:6px; }
.tabla-acciones .btn:last-child{ margin-right:0; }
/* ==========================================================================
VISOR DE TABLA — se abre al hacer clic en una tabla de la base.
Se ven las filas y se marcan las que se quieren borrar: nunca hay un botón
de borrar suelto al lado de cada fila, justo para no borrar de más por un
clic mal dado.
========================================================================== */
.tabla-box{
width:1000px; max-width:96vw; max-height:90vh;
display:flex; flex-direction:column; padding:0; overflow:hidden;
}
.tabla-avatar{ background:linear-gradient(135deg, var(--surface-3), var(--surface-2)); font-size:20px; }
.tabla-barra{
flex:none; display:flex; align-items:center; gap:14px;
padding:12px 22px; border-bottom:1px solid var(--border); background:var(--surface);
}
.tabla-marcar-todo{
display:flex; align-items:center; gap:7px; margin:0;
font-size:12.5px; color:var(--text-dim); cursor:pointer;
}
.tabla-marcar-todo input{ width:auto; margin:0; cursor:pointer; }
.tabla-contador{
font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); margin-left:auto;
}
.tabla-barra .btn[disabled]{ opacity:.4; pointer-events:none; }
.tabla-cuerpo{ flex:1; min-height:0; overflow:auto; padding:0; }
.aviso-sin-clave{
margin:0; padding:12px 22px;
background:rgba(255,159,10,.1); border-bottom:1px solid rgba(255,159,10,.28);
color:#ffc76b;
}
.tabla-cuerpo > .hint{ padding:22px; }
.tabla-datos-scroll{ overflow-x:auto; overflow-y:hidden; }
.tabla-datos{ width:100%; border-collapse:collapse; }
.tabla-datos th{
position:sticky; top:0; z-index:2;
background:var(--surface-3); border-bottom:1px solid var(--border-strong);
padding:9px 12px; white-space:nowrap;
}
.tabla-datos td{
padding:8px 12px; border-bottom:1px solid var(--border);
font-size:12.5px; font-family:var(--font-mono);
max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tabla-datos tbody tr{ cursor:pointer; transition:background .12s ease; }
.tabla-datos tbody tr:hover{ background:var(--surface-2); }
/* Fila marcada: se ve de un vistazo qué se va a borrar */
.tabla-datos tbody tr:has(.fila-check:checked){
background:rgba(255,77,94,.1);
box-shadow:inset 3px 0 0 0 var(--danger);
}
.tabla-datos .col-check{ width:38px; text-align:center; padding-left:16px; }
.tabla-datos .col-check input{ width:auto; margin:0; cursor:pointer; }
.tabla-datos th.es-clave{ color:var(--blue); }
.tabla-datos td.es-clave{ color:var(--blue); }
.valor-nulo{ color:var(--text-faint); font-style:italic; }
/* Las dos acciones que afectan a la tabla entera van escondidas detrás de un
desplegable, para que no se pulsen sin querer. */
.tabla-pie{ justify-content:space-between !important; align-items:center; padding:14px 22px !important; border-top:1px solid var(--border); }
.zona-peligro{ font-size:12px; }
.zona-peligro summary{
cursor:pointer; color:var(--text-faint); font-family:var(--font-mono);
font-size:11px; letter-spacing:.06em; text-transform:uppercase; list-style:none;
}
.zona-peligro summary::-webkit-details-marker{ display:none; }
.zona-peligro summary::before{ content:'▸ '; }
.zona-peligro[open] summary::before{ content:'▾ '; }
.zona-peligro summary:hover{ color:var(--danger); }
.zona-peligro-cuerpo{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.zona-peligro-cuerpo .hint{ margin:0 0 6px; width:100%; }
/* ==========================================================================
PUERTA DE ENTRADA — tapa el panel hasta que hay sesión
========================================================================== */
.puerta{
position:fixed; inset:0; z-index:500;
display:flex; align-items:center; justify-content:center; padding:20px;
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(79,214,255,.1), transparent 65%),
var(--bg);
}
.puerta-caja{
width:420px; max-width:94vw;
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
padding:26px; box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
animation:view-in .4s ease;
}
.puerta-marca{
display:flex; align-items:center; gap:12px;
padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border);
}
.puerta-marca strong{ display:block; font-family:var(--font-display); font-size:15px; color:#fff; }
.puerta-marca span{ display:block; font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); }
.puerta-texto{ font-size:12.5px; color:var(--text-dim); line-height:1.55; margin:0 0 16px; }
.puerta-form .btn{ width:100%; margin-top:6px; }
.puerta-error{ color:var(--danger); font-size:11.5px; min-height:15px; margin:6px 0; }
/* ==========================================================================
SESIÓN EN LA BARRA SUPERIOR
========================================================================== */
.sesion-chip{
display:flex; align-items:center; gap:9px;
background:var(--surface-2); border:1px solid var(--border);
border-radius:999px; padding:5px 6px 5px 12px; font-size:12.5px;
}
.sesion-rol{
font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em;
padding:2px 7px; border-radius:99px;
}
.sesion-rol.owner{ background:rgba(139,123,255,.16); color:var(--violet); border:1px solid rgba(139,123,255,.35); }
.sesion-rol.staff{ background:rgba(79,214,255,.12); color:var(--blue); border:1px solid rgba(79,214,255,.3); }
/* ==========================================================================
TABLA DE PERMISOS — una fila por sección, una casilla por acción
========================================================================== */
.permisos-tabla{
border:1px solid var(--border); border-radius:var(--radius);
background:var(--surface-2); overflow:hidden; margin-bottom:6px;
}
.permisos-fila{
display:grid; grid-template-columns:1fr repeat(4, 62px);
align-items:center; padding:7px 12px; border-bottom:1px solid var(--border);
}
.permisos-fila:last-child{ border-bottom:none; }
.permisos-fila:hover:not(.permisos-cabecera){ background:var(--surface-3); }
.permisos-cabecera{
background:var(--surface-3); font-family:var(--font-mono);
font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
}
.permisos-cabecera .permisos-acc{ justify-content:center; }
.permisos-nombre{ font-size:13px; }
.permisos-acc{
display:flex; align-items:center; justify-content:center; margin:0; cursor:pointer;
}
.permisos-acc input{ width:auto; margin:0; cursor:pointer; }
.permisos-grupo{
padding:8px 12px 5px; font-family:var(--font-mono);
font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
color:var(--text-faint); background:var(--surface);
border-bottom:1px solid var(--border);
}
/* ==========================================================================
CÓDIGO GENERADO — se enseña una sola vez
========================================================================== */
/* Caja para tablas anchas: se deslizan dentro y no estiran la pagina */
.tabla-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.codigo-caja{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
background:var(--surface-3); border:1px dashed var(--border-strong);
border-radius:var(--radius); padding:14px 16px; margin-bottom:10px;
}
.codigo-valor{
flex:1; font-size:19px; font-weight:600; letter-spacing:.06em; color:var(--blue);
user-select:all;
/* Aqui dentro caen cosas largas y sin espacios (la URL de retorno de
Spotify, por ejemplo). Sin esto no parten y estiran la pagina entera:
en movil el panel se iba a 669px de ancho por una sola linea. */
min-width:0; overflow-wrap:anywhere;
}
/* Actividad del staff dentro de su ficha */
.accion-lista{ display:flex; flex-direction:column; gap:6px; }
.accion-item{
display:flex; align-items:center; gap:10px;
padding:8px 10px; border-radius:var(--radius-sm);
background:var(--surface-2); border:1px solid var(--border);
}
.accion-texto{ flex:1; font-size:12.5px; min-width:0; }
.accion-hora{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); flex:none; }
@media (max-width:640px){
.permisos-fila{ grid-template-columns:1fr repeat(4, 46px); }
.permisos-nombre{ font-size:12px; }
}
/* ==========================================================================
PERMISOS CON DESPLIEGUE PROGRESIVO
Una tarjeta por sección con un solo interruptor. Al encenderlo se abren
debajo sus permisos de detalle; apagado, esas casillas ni se dibujan.
========================================================================== */
.permisos-lista{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.permiso-card{
border:1px solid var(--border); border-radius:var(--radius);
background:var(--surface-2); overflow:hidden;
transition:border-color .18s ease, background .18s ease;
}
.permiso-card.activa{
border-color:rgba(79,214,255,.42);
background:linear-gradient(180deg, rgba(79,214,255,.06), var(--surface-2));
}
.permiso-cabecera{
display:flex; align-items:flex-start; gap:11px;
padding:12px 14px; margin:0; cursor:pointer;
}
.permiso-cabecera input{ width:auto; margin:2px 0 0; flex:none; cursor:pointer; }
.permiso-textos{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.permiso-textos strong{ font-size:13.5px; }
.permiso-resumen{ font-size:11.5px; color:var(--text-faint); line-height:1.4; }
.permiso-card.activa .permiso-resumen{ color:var(--blue); }
/* El detalle solo existe cuando la sección está encendida */
.permiso-detalle{
border-top:1px solid var(--border);
background:rgba(0,0,0,.22);
padding:8px 14px 12px 38px;
display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:4px 14px;
animation:permiso-abre .25s ease;
}
@keyframes permiso-abre{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.permiso-sub{
display:flex; align-items:flex-start; gap:9px;
padding:7px 8px; margin:0; border-radius:var(--radius-sm); cursor:pointer;
transition:background .14s ease;
}
.permiso-sub:hover{ background:var(--surface-3); }
.permiso-sub input{ width:auto; margin:2px 0 0; flex:none; cursor:pointer; }
.permiso-sub-textos{ display:flex; flex-direction:column; min-width:0; }
.permiso-sub-textos strong{ font-size:12.5px; font-weight:600; text-transform:capitalize; }
.permiso-sub-textos span{ font-size:10.5px; color:var(--text-faint); line-height:1.35; }
.permisos-grupo{
padding:10px 2px 2px; font-family:var(--font-mono);
font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
color:var(--text-faint); background:none; border:none;
}
/* Aviso de lo que NUNCA se puede ceder */
.aviso-owner{
display:flex; align-items:flex-start; gap:9px;
background:rgba(139,123,255,.09); border:1px solid rgba(139,123,255,.3);
border-radius:var(--radius); padding:12px 14px;
font-size:12px; color:var(--text-dim); line-height:1.5;
}
.aviso-owner strong{ color:var(--violet); }
@media (max-width:640px){
.permiso-detalle{ grid-template-columns:1fr; padding-left:20px; }
}
/* Sección todavía sin construir: se puede pre-autorizar, pero se ve que hoy no hace nada */
.permiso-card.pendiente .permiso-titulo strong{ color:var(--text-dim); }
.permiso-titulo{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Lo que nunca se cede, dentro del detalle de la sección */
.permiso-bloqueado{
grid-column:1 / -1;
font-size:11px; color:var(--text-faint); line-height:1.45;
padding:8px 10px; border-radius:var(--radius-sm);
background:rgba(139,123,255,.07); border:1px solid rgba(139,123,255,.22);
}
/* ==========================================================================
AJUSTES — filas con interruptor
========================================================================== */
.ajuste-fila{
display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
padding:14px 0; border-bottom:1px solid var(--border);
}
.ajuste-fila:last-child{ border-bottom:none; }
.ajuste-textos{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ajuste-textos strong{ font-size:13.5px; display:flex; align-items:center; gap:8px; }
.ajuste-textos span{ font-size:11.5px; color:var(--text-faint); line-height:1.5; }
#aj-2fa-alta, #aj-2fa-baja{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
#aj-dispositivos .aparato-card{ margin-bottom:10px; }
/* --- Preferencias aplicadas: apagar textos de ayuda y animaciones --- */
body.sin-ayuda .hint{ display:none; }
body.sin-ayuda .page-head p{ display:none; }
/* Los avisos con información de seguridad se quedan: no son "ayuda" */
body.sin-ayuda .aviso-owner, body.sin-ayuda .aviso-sin-clave,
body.sin-ayuda .wizard-error, body.sin-ayuda .permiso-bloqueado{ display:block; }
body.sin-animaciones *, body.sin-animaciones *::before, body.sin-animaciones *::after{
animation:none !important; transition:none !important;
}
/* ==========================================================================
ALTA DEL DOBLE FACTOR — QR a la izquierda, pasos a la derecha
========================================================================== */
.dosfa-alta{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.dosfa-qr{
flex:none; display:flex; flex-direction:column; align-items:center; gap:8px;
padding:14px; border-radius:var(--radius);
background:#fff; border:1px solid var(--border-strong);
box-shadow:0 14px 34px -18px rgba(0,0,0,.7);
}
.dosfa-qr img{ display:block; width:200px; height:200px; image-rendering:pixelated; }
.dosfa-qr span{ font-size:11px; color:#3a4250; font-weight:600; }
.dosfa-pasos{ flex:1; min-width:260px; }
.dosfa-pasos ol{ margin:0 0 14px; padding-left:20px; }
.dosfa-pasos li{ font-size:13px; color:var(--text-dim); margin-bottom:6px; line-height:1.5; }
.dosfa-pasos li strong{ color:var(--text); }
.dosfa-manual{ margin-bottom:6px; }
.dosfa-manual summary{
cursor:pointer; font-size:12px; color:var(--blue);
list-style:none; padding:6px 0;
}
.dosfa-manual summary::-webkit-details-marker{ display:none; }
.dosfa-manual summary::before{ content:'▸ '; }
.dosfa-manual[open] summary::before{ content:'▾ '; }
.dosfa-manual .codigo-caja{ margin-top:6px; }
.dosfa-manual .codigo-valor{ font-size:13px; letter-spacing:.04em; word-break:break-all; }
@media (max-width:640px){
.dosfa-qr{ margin:0 auto; }
.dosfa-qr img{ width:170px; height:170px; }
}
/* ==========================================================================
PRODUCTOS
========================================================================== */
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.prod-card{
background:linear-gradient(180deg, var(--surface-2), var(--surface));
border:1px solid var(--border); border-radius:var(--radius);
padding:14px; cursor:pointer; overflow:hidden;
display:flex; flex-direction:column; gap:9px;
transition:transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s ease, box-shadow .18s ease;
}
.prod-card:hover{
transform:translateY(-3px); border-color:var(--border-strong);
box-shadow:0 16px 36px -18px rgba(0,0,0,.7);
}
.prod-card.es-cat{ border-left:3px solid var(--violet); }
.prod-foto{
height:120px; margin:-14px -14px 0; overflow:hidden;
background:var(--surface-3); display:flex; align-items:center; justify-content:center;
}
.prod-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.prod-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.prod-tit{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.prod-tit strong{ font-size:14.5px; font-family:var(--font-display); }
.prod-tienda{ font-size:11px; color:var(--text-faint); }
.prod-marcas{ display:flex; flex-direction:column; gap:4px; align-items:flex-end; flex:none; }
.prod-desc{
font-size:12px; color:var(--text-dim); margin:0; line-height:1.5;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.prod-precio{
font-family:var(--font-mono); font-size:20px; font-weight:600; color:var(--signal);
margin-top:auto;
}
.prod-items{
margin-top:auto; padding-top:9px; border-top:1px solid var(--border);
display:flex; flex-direction:column; gap:5px;
}
.prod-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; }
.prod-item span{ color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prod-item strong{ font-family:var(--font-mono); color:var(--signal); flex:none; }
.prod-item span:not(.prod-item-foto){ flex:1; }
.prod-item-foto{
width:22px; height:22px; flex:none; border-radius:6px; overflow:hidden;
background:var(--surface-3); border:1px solid var(--border);
}
.prod-item-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Sin foto propia: se marca en flojito para que se note que hereda */
.prod-item-foto.heredada{ border-style:dashed; opacity:.4; }
/* --- Filas de los productos dentro de una categoría (formulario) --- */
.prod-switch{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:6px 0 14px; }
#pr-items{ margin-bottom:10px; }
.item-fila{
display:grid; grid-template-columns:38px 1fr 110px 1.2fr 32px; gap:8px;
margin-bottom:8px; align-items:start;
}
/* Miniatura de cada producto de dentro. Vacía enseña un +; con foto, la foto.
Clic izquierdo cambia, clic derecho quita. */
.item-foto-zona{ position:relative; width:38px; height:38px; flex:none; }
.item-foto-x{
position:absolute; top:-5px; right:-5px; z-index:2;
width:17px; height:17px; border-radius:50%; cursor:pointer; padding:0;
background:var(--danger); border:1px solid rgba(0,0,0,.5); color:#fff;
font-size:11px; line-height:1; font-family:inherit;
display:flex; align-items:center; justify-content:center;
transition:transform .1s ease;
}
.item-foto-x:hover{ transform:scale(1.15); }
.item-foto{
width:38px; height:38px; padding:0; flex:none; cursor:pointer;
border-radius:9px; overflow:hidden;
background:var(--surface-3); border:1px dashed var(--border-strong);
color:var(--text-faint); font-size:15px; line-height:1; font-family:inherit;
display:flex; align-items:center; justify-content:center;
transition:border-color .15s ease, color .15s ease, opacity .15s ease;
}
.item-foto:hover{ border-color:var(--blue); color:var(--blue); }
.item-foto.con-foto{ border-style:solid; border-color:var(--border); }
.item-foto.cargando{ opacity:.45; cursor:progress; }
.item-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.item-fila input{ margin:0; }
/* La descripción crece si le metes Enters, pero arranca a la altura del resto
para que la fila no se vea desalineada cuando está vacía. */
.item-fila .item-desc{
margin:0; min-height:38px; height:38px; padding:9px 12px;
resize:none; overflow:hidden; line-height:1.3; font-family:inherit;
}
.item-precio{ text-align:right; }
.item-quitar{
width:32px; height:38px; border-radius:var(--radius-sm);
border:1px solid var(--border); background:var(--surface-2);
color:var(--text-faint); cursor:pointer; font-size:16px; line-height:1;
transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.item-quitar:hover{ background:rgba(255,77,94,.12); color:var(--danger); border-color:rgba(255,77,94,.3); }
textarea{
width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
padding:10px 12px; border-radius:var(--radius-sm); font-size:13.5px;
font-family:var(--font-body); outline:none; resize:vertical;
transition:border-color .14s ease, box-shadow .14s ease;
}
textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,214,255,.14); }
@media (max-width:640px){
.item-fila{ grid-template-columns:38px 1fr 90px 32px; }
.item-fila .item-desc{ grid-column:2 / -1; }
}
/* --- Cómo se ve el escaparate: cada miniatura imita su acomodo real ---
Las cinco piezas son cuadradas; lo que cambia es cuánta información
enseñan y cómo tratan la foto. La miniatura lo refleja: más rayitas de
texto = más datos en la tarjeta. */
/* 1) REJILLA — foto arriba, dos líneas de datos debajo */
.opt-productos-rejilla i:nth-child(4){ display:none; }
.opt-productos-rejilla i:nth-child(1){ left:8%; width:38%; top:14%; height:44%; background:var(--blue); opacity:.85; }
.opt-productos-rejilla i:nth-child(2){ left:8%; width:38%; top:64%; height:8%; opacity:.55; }
.opt-productos-rejilla i:nth-child(3){ left:8%; width:24%; top:78%; height:8%; background:var(--signal); opacity:.9; }
.opt-productos-rejilla{
background-image:
linear-gradient(var(--blue), var(--blue)),
linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),
linear-gradient(var(--signal), var(--signal));
background-repeat:no-repeat;
background-size:38% 44%, 38% 8%, 24% 8%;
background-position:54% 14%, 54% 64%, 54% 78%;
animation:opt-rejilla 3s ease-in-out infinite;
}
@keyframes opt-rejilla{ 0%,100%{ opacity:.8; } 50%{ opacity:1; } }
/* 2) FICHA — foto chica y CUATRO líneas: es la que más cuenta */
.opt-productos-ficha i:nth-child(1){ left:12%; width:20%; top:14%; height:26%; background:var(--blue); opacity:.9; border-radius:4px; }
.opt-productos-ficha i:nth-child(2){ left:12%; right:16%; top:47%; height:8%; opacity:.6; }
.opt-productos-ficha i:nth-child(3){ left:12%; right:28%; top:60%; height:6%; opacity:.32; }
.opt-productos-ficha i:nth-child(4){ left:12%; width:22%; top:73%; height:8%; background:var(--signal); opacity:.9; }
.opt-productos-ficha{ animation:opt-ficha 3.2s ease-in-out infinite; }
@keyframes opt-ficha{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }
/* 3) VITRINA — la foto lo ocupa todo y los datos flotan encima */
.opt-productos-vitrina i:nth-child(1){ inset:12% 20%; background:var(--blue); opacity:.85; border-radius:5px; }
.opt-productos-vitrina i:nth-child(2){
left:20%; right:20%; bottom:12%; height:34%; border-radius:0 0 5px 5px;
background:linear-gradient(to top, rgba(0,0,0,.92), transparent);
opacity:1;
}
.opt-productos-vitrina i:nth-child(3){ left:25%; width:26%; bottom:20%; height:7%; background:#fff; opacity:.9; }
.opt-productos-vitrina i:nth-child(4){ display:none; }
.opt-productos-vitrina i:nth-child(1){ animation:opt-vitrina 3.4s ease-in-out infinite; }
@keyframes opt-vitrina{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
/* 4) MOSAICO — muro de cuadrados con una pieza doble */
.opt-productos-mosaico i{ background:var(--blue); border-radius:2px; }
.opt-productos-mosaico i:nth-child(1){ left:6%; width:30%; top:16%; height:58%; opacity:.95; }
.opt-productos-mosaico i:nth-child(2){ left:40%; width:26%; top:16%; height:26%; opacity:.7; }
.opt-productos-mosaico i:nth-child(3){ left:70%; width:24%; top:16%; height:26%; opacity:.55; }
.opt-productos-mosaico i:nth-child(4){ left:40%; right:6%; top:48%; height:26%; opacity:.4; }
.opt-productos-mosaico{ animation:opt-mosaico 3.2s ease-in-out infinite; }
@keyframes opt-mosaico{ 0%,100%{ opacity:.78; } 50%{ opacity:1; } }
/* 5) CARRUSEL — una fila de cuadrados que se arrastra */
.opt-productos-carrusel i{ background:var(--blue); border-radius:3px; }
.opt-productos-carrusel i:nth-child(1){ left:6%; width:27%; top:20%; height:52%; opacity:.9; }
.opt-productos-carrusel i:nth-child(2){ left:37%; width:27%; top:20%; height:52%; opacity:.75; }
.opt-productos-carrusel i:nth-child(3){ left:68%; width:27%; top:20%; height:52%; opacity:.45; }
.opt-productos-carrusel i:nth-child(4){ left:6%; width:20%; top:78%; height:6%; background:var(--signal); opacity:.85; }
.opt-productos-carrusel{ animation:opt-carrusel 3.6s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes opt-carrusel{
0%, 18%{ transform:translateX(0); }
46%, 64%{ transform:translateX(-26px); }
92%, 100%{ transform:translateX(0); }
}
/* ==========================================================================
REPRODUCTOR — barra fija abajo, estilo consola
========================================================================== */
/* ---- Reproductor, dentro de la barra de arriba ----
Antes era una barra fija abajo. Ahora va junto al buscador: todo el
bloque cabe en la altura del topbar, así que nada tapa la página. */
.mus-mini{
display:flex; align-items:center; gap:9px;
padding:5px 10px 5px 6px; border-radius:99px;
background:var(--surface-2); border:1px solid var(--border);
}
.mus-portada{
width:30px; height:30px; flex:none; border-radius:50%; overflow:hidden;
background:var(--surface-3); border:1px solid var(--border);
display:flex; align-items:center; justify-content:center;
color:var(--text-faint); font-size:12px;
}
.mus-portada img{ width:100%; height:100%; object-fit:cover; }
.mus-txt{ display:flex; flex-direction:column; min-width:0; width:104px; line-height:1.25; }
.mus-txt strong{ font-size:11px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mus-txt span{ font-size:10px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mus-controles{ display:flex; align-items:center; gap:3px; flex:none; }
.mus-btn{
width:24px; height:24px; border-radius:50%; cursor:pointer;
background:transparent; border:1px solid transparent;
color:var(--text-dim); font-size:10px; line-height:1; font-family:inherit;
transition:background .14s ease, color .14s ease, transform .08s ease;
}
.mus-btn:hover{ background:var(--surface-3); color:var(--text); }
.mus-btn:active{ transform:scale(.9); }
.mus-btn.play{
width:28px; height:28px; font-size:11px;
background:var(--blue); border-color:transparent; color:#04121a;
}
.mus-btn.play:hover{ filter:brightness(1.12); background:var(--blue); }
#mus-volumen{ width:58px; accent-color:var(--blue); cursor:pointer; flex:none; }
/* El buscador vive en la barra de arriba: la lista tiene que desplegarse
hacia ABAJO, al revés que cuando el reproductor era una barra en el pie. */
.mus-buscador.arriba{ width:300px; max-width:300px; flex:none; }
.mus-buscador.arriba .mus-resultados{
bottom:auto; top:calc(100% + 8px);
box-shadow:0 24px 50px -20px rgba(0,0,0,.9);
}
.mus-buscador{ flex:1; position:relative; min-width:0; max-width:460px; }
.mus-buscador input{
width:100%; background:var(--surface-2); border:1px solid var(--border);
color:var(--text); padding:9px 14px; border-radius:99px; font-size:12.5px;
outline:none; font-family:inherit;
transition:border-color .14s ease, box-shadow .14s ease;
}
.mus-buscador input:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,214,255,.14); }
.mus-resultados{
position:absolute; left:0; right:0; bottom:calc(100% + 10px);
max-height:340px; overflow-y:auto;
background:var(--surface-2); border:1px solid var(--border-strong);
border-radius:var(--radius); padding:6px;
box-shadow:0 -20px 50px -20px rgba(0,0,0,.9);
animation:view-in .2s ease;
}
.mus-res{
display:flex; align-items:center; gap:10px; width:100%; text-align:left;
padding:7px 8px; border-radius:var(--radius-sm); cursor:pointer;
background:none; border:none; font-family:inherit;
transition:background .12s ease;
}
.mus-res:hover{ background:var(--surface-3); }
.mus-res-portada{
width:34px; height:34px; flex:none; border-radius:6px; overflow:hidden;
background:var(--surface-3); display:flex; align-items:center; justify-content:center;
color:var(--text-faint); font-size:13px;
}
.mus-res-portada img{ width:100%; height:100%; object-fit:cover; display:block; }
.mus-res-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.mus-res-txt strong{ font-size:12.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mus-res-txt span{ font-size:11px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mus-vacio{ padding:14px; font-size:12px; color:var(--text-faint); text-align:center; }
/* La barra de arriba se llena rápido: se van soltando piezas del
reproductor conforme falta sitio, y el buscador es lo último en caer. */
@media (max-width:1400px){ #mus-volumen{ display:none; } }
@media (max-width:1250px){ .mus-txt{ display:none; } }
@media (max-width:1100px){ .mus-buscador.arriba{ width:190px; max-width:190px; } }
@media (max-width:900px){ .mus-mini, .mus-buscador.arriba{ display:none; } }
/* Ayuda para registrar la URL de retorno de Spotify */
.mus-ayuda{
margin-top:16px; padding:14px 16px; border-radius:var(--radius);
background:rgba(255,159,10,.07); border:1px solid rgba(255,159,10,.28);
}
.mus-ayuda strong{ display:block; font-size:13px; color:#ffc76b; margin-bottom:6px; }
.mus-ayuda p{ margin:0 0 10px; font-size:12px; color:var(--text-dim); line-height:1.6; }
.mus-ayuda b{ color:var(--text); }
.mus-ayuda .codigo-caja{ margin-bottom:0; }
.mus-ayuda .codigo-valor{ font-size:13px; letter-spacing:.01em; word-break:break-all; }
.mus-ayuda-nota:empty{ display:none; }
.mus-ayuda-nota{ margin:10px 0 0 !important; color:#ffc76b !important; font-size:11.5px !important; }
/* Pegar una URL de retorno distinta, la que ya esté en el dashboard */
.mus-alterna{ margin-top:16px; padding-top:14px; border-top:1px dashed rgba(255,159,10,.3); }
.mus-alterna>summary{ cursor:pointer; font-size:12px; color:var(--text-faint); padding:4px 0;
list-style:none; user-select:none; transition:color .15s; }
.mus-alterna>summary::-webkit-details-marker{ display:none; }
.mus-alterna>summary::before{ content:'▸ '; }
.mus-alterna[open]>summary::before{ content:'▾ '; }
.mus-alterna>summary:hover{ color:var(--text); }
.mus-alterna p strong{ color:var(--text); }
.mus-alterna p{ margin:0 0 10px; font-size:11.5px; color:var(--text-faint); line-height:1.55; }
.mus-alterna-fila{ display:flex; gap:8px; align-items:center; }
.mus-alterna-fila input{ flex:1; font-size:12.5px; }
.mus-alterna-fila .btn{ flex:none; }
.mus-redirect-aviso{ font-size:11.5px; min-height:14px; margin-top:8px; line-height:1.5; }
.mus-redirect-aviso.es-ok{ color:var(--ok); }
.mus-redirect-aviso.es-warn{ color:#ff9f0a; }
.mus-redirect-aviso.es-mal{ color:var(--danger); }
.mus-ayuda.es-staff{ border-color:rgba(94,234,212,.28); background:rgba(94,234,212,.05); }
.mus-ayuda.es-staff strong{ color:var(--ok); }
.mus-nota-staff{ margin-top:14px; padding-top:12px; border-top:1px dashed rgba(255,159,10,.3); }
#mus-abrir-usuarios{ margin-top:6px; }
/* ==========================================================================
NOTIFICACIONES — sección del panel
========================================================================== */
.noti-tipos{
display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
gap:14px; margin-bottom:30px;
}
/* Cada clase con su color y su filo encendido arriba: se distinguen sin leer */
.noti-tipo{
position:relative; overflow:hidden;
display:flex; flex-direction:column; gap:12px; align-items:flex-start;
padding:20px 20px 18px; border-radius:var(--radius);
background:linear-gradient(165deg, rgba(255,255,255,.045), var(--surface-2));
border:1px solid var(--border);
transition:border-color .18s ease, transform .18s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease;
}
.noti-tipo::before{
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg, transparent, var(--tono), transparent);
opacity:.6; transition:opacity .2s ease;
}
.noti-tipo:hover{
transform:translateY(-3px);
border-color:color-mix(in srgb, var(--tono) 55%, transparent);
box-shadow:0 16px 34px -20px rgba(0,0,0,.9),
0 0 26px -14px var(--tono);
}
.noti-tipo:hover::before{ opacity:1; }
/* Los tonos: uno por clase */
.noti-tipo.tono-ambar{ --tono:var(--warn); }
.noti-tipo.tono-verde{ --tono:var(--ok); }
.noti-tipo.tono-azul{ --tono:var(--blue); }
.noti-tipo.tono-gris{ --tono:var(--text-faint); }
.noti-tipo.es-pendiente{ opacity:.5; }
.noti-tipo.es-pendiente:hover{ transform:none; box-shadow:none; border-color:var(--border); }
.noti-tipo-cab{ display:flex; align-items:center; gap:13px; }
.noti-tipo-icono{
width:44px; height:44px; flex:none; border-radius:13px;
display:flex; align-items:center; justify-content:center; font-size:19px;
background:color-mix(in srgb, var(--tono) 14%, var(--surface-3));
border:1px solid color-mix(in srgb, var(--tono) 40%, transparent);
box-shadow:inset 0 0 18px -10px var(--tono);
}
.noti-tipo-cab strong{
display:block; font-family:'Space Grotesk', sans-serif;
font-size:16px; font-weight:700; color:var(--text); line-height:1.2;
}
.noti-tipo-cab span{
display:block; margin-top:2px;
font-size:10px; letter-spacing:.11em; text-transform:uppercase;
color:color-mix(in srgb, var(--tono) 85%, var(--text-dim));
}
.noti-tipo p{ margin:0; font-size:12.5px; line-height:1.65; color:var(--text-dim); flex:1; }
.noti-tipo-nota{ font-size:11px; color:var(--text-faint); font-style:italic; line-height:1.5; }
.noti-tipo .btn{ margin-top:auto; }
.noti-tipo .badge{ margin-top:auto; }
/* --- Selector de diseño (asistente y panel de mandar) --- */
.bienvenida-bloque input,
.bienvenida-bloque textarea{ margin-bottom:8px; }
.bv-estilos{
display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
gap:8px; margin-top:4px;
}
.bv-estilo{
position:relative; overflow:hidden; cursor:pointer; text-align:left;
padding:10px 12px; border-radius:10px; font-family:inherit;
background:var(--surface-2); border:1px solid var(--border); color:var(--text);
transition:border-color .15s ease, background .15s ease;
}
.bv-estilo:hover{ border-color:var(--border-strong); }
.bv-estilo.selected{ border-color:var(--blue); background:rgba(79,214,255,.09); }
.bv-estilo strong{ display:block; font-size:12.5px; margin-bottom:2px; }
.bv-estilo span{ display:block; font-size:10.5px; color:var(--text-faint); line-height:1.4; }
/* La barrita de arriba imita el diseño real de cada uno */
.bv-estilo i{ position:absolute; top:0; left:0; right:0; height:3px; display:block; }
.noti-mini.noti-aviso i{ background:var(--blue); width:22%; }
.noti-mini.noti-promo i{ background:linear-gradient(90deg, var(--blue), transparent); }
.noti-mini.noti-fiesta i{ background:repeating-linear-gradient(90deg, var(--blue) 0 5px, transparent 5px 11px); }
.noti-mini.noti-urgente i{ background:var(--danger); animation:bv-late 1.6s ease-in-out infinite; }
.noti-mini.noti-nota i{ background:var(--warn); opacity:.7; }
@keyframes bv-late{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
/* --- Opciones de la encuesta --- */
.opcion-fila{ display:grid; grid-template-columns:1fr 32px; gap:8px; margin-bottom:8px; align-items:center; }
.opcion-fila input{ margin:0; }
.mini-label{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin:12px 0 8px; }
/* --- Historial --- */
.noti-lista{ display:flex; flex-direction:column; gap:12px; }
.noti-fila{
position:relative; overflow:hidden;
padding:14px 16px; border-radius:var(--radius);
background:var(--surface-2); border:1px solid var(--border);
border-left:3px solid var(--border-strong);
}
.noti-fila.noti-promo{ border-left-color:var(--blue); }
.noti-fila.noti-fiesta{ border-left-color:var(--ok); }
.noti-fila.noti-urgente{ border-left-color:var(--danger); }
.noti-fila.noti-nota{ border-left-color:var(--warn); }
.noti-fila.noti-aviso{ border-left-color:var(--text-faint); }
.noti-fila-cab{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.noti-fila-cab strong{ font-size:14px; color:var(--text); }
.noti-chip{
font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
padding:3px 8px; border-radius:99px; flex:none;
background:var(--surface-3); border:1px solid var(--border); color:var(--text-dim);
}
.noti-chip.tipo-global{ color:var(--blue); border-color:rgba(79,214,255,.35); }
.noti-chip.tipo-privada{ color:var(--ok); border-color:rgba(94,234,212,.32); }
.noti-chip.tipo-bienvenida{ color:var(--warn); border-color:rgba(255,159,10,.32); }
.noti-fila-cuerpo{ margin:0 0 10px; font-size:12.5px; line-height:1.6; color:var(--text-dim); white-space:pre-line; }
.noti-fila-pie{
display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
font-size:11px; color:var(--text-faint);
}
.noti-fijada{ font-style:italic; }
/* Resultados de la encuesta en el panel */
.noti-encuesta{ margin:10px 0; padding:12px 14px; border-radius:10px; background:var(--surface-3); }
.noti-encuesta-preg{ display:block; font-size:12.5px; color:var(--text); margin-bottom:9px; font-weight:600; }
.noti-barra{ display:grid; grid-template-columns:1fr 2fr 34px; gap:10px; align-items:center; margin-bottom:6px; }
.noti-barra-txt{ font-size:11.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.noti-barra-pista{ height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.noti-barra-pista i{ display:block; height:100%; background:var(--blue); border-radius:99px; transition:width .5s ease; }
.noti-barra-n{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); text-align:right; }
.noti-encuesta-total{ display:block; margin-top:8px; font-size:11px; color:var(--text-faint); }
/* ==========================================================================
PASO 2 — separador entre los dos temas
========================================================================== */
.wizard-separador{
display:flex; align-items:center; gap:14px;
margin:26px 0 20px;
font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
color:var(--text-faint);
}
.wizard-separador::before,
.wizard-separador::after{ content:''; flex:1; height:1px; background:var(--border); }
/* ==========================================================================
PASO 4 — qué secciones tiene la tienda
Cada fila es una sección con su interruptor. Apagada se ve atenuada, para
que de un vistazo sepas cuáles tiene esta tienda y cuáles no.
========================================================================== */
.cats-lista{ display:flex; flex-direction:column; gap:9px; }
.cat-fila{
border-radius:var(--radius); overflow:hidden;
background:var(--surface-2); border:1px solid var(--border);
transition:border-color .16s ease, background .16s ease, opacity .16s ease;
opacity:.55;
}
.cat-fila.encendida{ opacity:1; border-color:var(--border-strong); }
.cat-cab{
display:flex; align-items:center; gap:12px;
padding:13px 15px;
}
/* El nombre y el icono pliegan; el interruptor enciende. Son dos cosas
distintas y por eso solo esa zona lleva el cursor de mano. */
.cat-cab .cat-icono, .cat-cab .cat-txt{ cursor:pointer; }
.cat-cab .cat-txt{ transition:opacity .15s ease; }
.cat-cab .cat-txt:hover{ opacity:.78; }
/* El plegador: al principio de la fila, que es donde se busca, y lejos del
interruptor para no confundirlos. */
.cat-plegar{
width:30px; height:30px; flex:none; cursor:pointer; padding:0;
border-radius:8px; background:var(--surface-3); border:1px solid var(--border-strong);
color:var(--text-dim); font-size:12px; line-height:1; font-family:inherit;
display:flex; align-items:center; justify-content:center;
transition:background .15s ease, color .15s ease, border-color .15s ease;
}
/* Hueco del mismo ancho en las filas que no tienen nada que plegar */
.cat-hueco{ width:30px; flex:none; }
/* El rótulo del interruptor: dice qué hace, para que no se toque por error */
.cat-estado{
font-size:10px; letter-spacing:.1em; text-transform:uppercase; flex:none;
margin-left:auto; padding-right:12px;
color:color-mix(in srgb, var(--signal) 85%, var(--text-dim));
}
.cat-estado.apagada{ color:var(--text-faint); }
.cat-plegar:hover{ background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
.cat-plegar span{ display:block; transition:transform .25s cubic-bezier(.34,1.4,.64,1); }
.cat-plegar.plegado span{ transform:rotate(-90deg); }
.cat-icono{
width:34px; height:34px; flex:none; border-radius:9px;
background:var(--surface-3); border:1px solid var(--border);
display:flex; align-items:center; justify-content:center; font-size:15px;
transition:border-color .16s ease;
}
.cat-fila.encendida .cat-icono{ border-color:color-mix(in srgb, var(--blue) 42%, transparent); }
.cat-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cat-txt strong{ font-size:13px; color:var(--text); }
.cat-txt span{ font-size:11px; color:var(--text-faint); line-height:1.45; }
.cat-glob{
font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
padding:1px 5px; border-radius:4px; vertical-align:middle;
background:var(--surface-3); border:1px solid var(--border); color:var(--text-faint);
}
.cat-cab .switch{ flex:none; }
/* El diseño propio de una sección cuelga de su fila y solo se ve encendida */
.cat-diseno{
padding:4px 15px 15px; border-top:1px solid var(--border);
animation:view-in .25s ease;
}
.cat-diseno .mini-label{ margin-top:12px; }
/* ==========================================================================
MINIATURAS DE LAS OPCIONES NUEVAS (la quinta de cada eje)
Cada una imita su mecánica real, igual que las otras cuatro.
========================================================================== */
/* --- Barra: CAJÓN — escondida, sale con un botón --- */
.opt-barra-cajon i:nth-child(1){
left:0; top:0; bottom:0; width:9%; border-radius:0;
background:var(--blue); opacity:.8;
}
.opt-barra-cajon i:nth-child(2){ left:16%; right:10%; top:10px; height:7px; opacity:.35; }
.opt-barra-cajon i:nth-child(3){
left:0; top:0; bottom:0; width:38%; border-radius:0 4px 4px 0;
background:var(--blue); opacity:.45;
animation:opt-cajon 3.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes opt-cajon{
0%, 12%{ transform:translateX(-100%); opacity:0; }
30%, 62%{ transform:none; opacity:.5; }
82%, 100%{ transform:translateX(-100%); opacity:0; }
}
/* --- Anuncio: TIRA LATERAL — franja vertical en el borde derecho --- */
.opt-anuncio-tira i:nth-child(1){ left:8%; right:36%; top:9px; height:7px; }
.opt-anuncio-tira i:nth-child(2){ left:8%; right:26%; top:22px; height:16px; opacity:.35; }
.opt-anuncio-tira i:nth-child(3){
right:0; top:0; bottom:0; width:11px; border-radius:0;
background:linear-gradient(180deg,
color-mix(in srgb, var(--signal) 18%, transparent),
color-mix(in srgb, var(--signal) 55%, transparent) 50%,
color-mix(in srgb, var(--signal) 18%, transparent));
opacity:1; overflow:hidden;
}
/* El tubo de neón del borde interior, latiendo */
.opt-anuncio-tira i:nth-child(3)::after{
content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
background:linear-gradient(180deg, transparent, var(--signal) 25%, #fff 50%, var(--signal) 75%, transparent);
box-shadow:0 0 8px var(--signal);
animation:opt-tira 2.8s ease-in-out infinite;
}
@keyframes opt-tira{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
/* ==========================================================================
MINIATURAS DE LOS TEMAS NUEVOS
Cada una imita la mecánica real del tema, no solo su color.
========================================================================== */
/* --- Panal Cuántico: hexágonos de verdad, con celdas encendiéndose --- */
.mk-panal{
position:absolute; inset:-20%;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='50' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50'/%3E%3Cpath d='M28 34L56 50'/%3E%3C/g%3E%3C/svg%3E");
background-size:20px 36px; opacity:.5;
animation:mk-panal-deriva 14s linear infinite;
}
@keyframes mk-panal-deriva{ to{ background-position:0 72px; } }
.mk-panal-luz{
position:absolute; inset:0;
background:
radial-gradient(15px 15px at 26% 34%, var(--t2), transparent 60%),
radial-gradient(12px 12px at 68% 58%, #fff, transparent 62%),
radial-gradient(17px 17px at 44% 78%, var(--t2), transparent 58%);
opacity:.85; filter:blur(1px);
animation:mk-panal-celdas 5s ease-in-out infinite alternate;
}
@keyframes mk-panal-celdas{
0%{ opacity:.45; transform:translate(0,0); }
100%{ opacity:1; transform:translate(-4px, 3px); }
}
.mk-panal-onda{
position:absolute; inset:-40%;
background:linear-gradient(115deg, transparent 44%, rgba(255,255,255,.55) 50%, transparent 56%);
animation:mk-panal-onda 4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes mk-panal-onda{
0%{ transform:translate(-45%,-30%); opacity:0; }
20%{ opacity:1; }
70%,100%{ transform:translate(45%,30%); opacity:0; }
}
/* --- Nebulosa Fría: nubes densas de color girando --- */
.mk-gas{
position:absolute; inset:-45%;
background:
radial-gradient(38% 32% at 34% 40%, var(--t2), transparent 62%),
radial-gradient(32% 28% at 62% 58%, #818cf8, transparent 64%),
radial-gradient(28% 24% at 50% 26%, #38bdf8, transparent 64%);
opacity:.9; filter:blur(6px) saturate(150%);
animation:mk-gas-gira 16s linear infinite;
}
.mk-gas-2{
background:
radial-gradient(26% 22% at 64% 46%, #e0f2fe, transparent 60%),
radial-gradient(22% 20% at 34% 64%, #67e8f9, transparent 62%);
opacity:.5; filter:blur(9px); mix-blend-mode:screen;
animation:mk-gas-gira 26s linear infinite reverse;
}
@keyframes mk-gas-gira{ to{ transform:rotate(360deg); } }
.mk-estrellas{
position:absolute; inset:0;
background-image:
radial-gradient(1.4px 1.4px at 14% 22%, #fff, transparent),
radial-gradient(1.1px 1.1px at 38% 58%, #e0f2fe, transparent),
radial-gradient(1.6px 1.6px at 62% 30%, #fff, transparent),
radial-gradient(1.2px 1.2px at 80% 66%, #bae6fd, transparent),
radial-gradient(1.3px 1.3px at 28% 80%, #fff, transparent),
radial-gradient(1.1px 1.1px at 90% 40%, #fff, transparent);
animation:mk-estrellas 5s ease-in-out infinite alternate;
}
@keyframes mk-estrellas{
0%{ transform:scale(1); opacity:.65; }
100%{ transform:scale(1.22); opacity:1; }
}
/* --- Cristal Roto: placas con aristas marcadas y prisma --- */
.mk-esquirlas{
position:absolute; inset:-20%;
background:
linear-gradient(118deg, rgba(255,255,255,.26) 0 22%, transparent 22%),
linear-gradient(-64deg, rgba(165,180,252,.32) 0 28%, transparent 28%),
linear-gradient(34deg, rgba(255,255,255,.18) 0 40%, transparent 40%),
linear-gradient(-142deg, rgba(56,189,248,.28) 0 32%, transparent 32%);
animation:mk-esquirlas 7s ease-in-out infinite alternate;
}
@keyframes mk-esquirlas{
0%{ transform:translate(0,0) rotate(0deg); }
100%{ transform:translate(-3px,2px) rotate(-2deg); }
}
/* Las grietas: el filo brillante de cada placa */
.mk-brillo{
position:absolute; inset:-20%;
background:
linear-gradient(118deg, transparent 21.4%, rgba(255,255,255,.9) 22%, transparent 22.6%),
linear-gradient(-64deg, transparent 27.4%, rgba(224,242,254,.8) 28%, transparent 28.6%),
linear-gradient(34deg, transparent 39.4%, rgba(255,255,255,.7) 40%, transparent 40.6%),
linear-gradient(-142deg, transparent 31.4%, rgba(186,230,253,.8) 32%, transparent 32.6%);
animation:mk-esquirlas 7s ease-in-out infinite alternate;
}
.mk-prisma{
position:absolute; inset:-40%;
background:linear-gradient(108deg, transparent 42%,
#38bdf8 46%, #fff 49%, #a78bfa 52%, #2dd4bf 55%, transparent 59%);
filter:blur(2px); opacity:.9;
animation:mk-prisma 4.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes mk-prisma{
0%{ transform:translateX(-62%); opacity:0; }
16%{ opacity:.95; }
64%{ opacity:.95; }
80%,100%{ transform:translateX(62%); opacity:0; }
}
/* ==========================================================================
MINIATURAS DE LOS ACOMODOS DE ACCESO NUEVOS
========================================================================== */
/* --- Terminal: ventana de consola con su barra de título --- */
.lc-terminal{ display:flex; align-items:center; justify-content:center; height:100%; }
.lc-terminal .card{
width:74%; border-radius:4px; overflow:hidden;
background:rgba(0,0,0,.6); border:1px solid color-mix(in srgb, var(--t2) 60%, transparent);
}
.lc-terminal .tbar{
display:flex; align-items:center; gap:3px; padding:4px 5px;
background:rgba(255,255,255,.1);
border-bottom:1px solid color-mix(in srgb, var(--t2) 34%, transparent);
}
.lc-terminal .tbar i{
width:3px; height:3px; border-radius:50%;
background:color-mix(in srgb, var(--t2) 80%, transparent);
}
.lc-terminal .tbar i:last-child{ animation:lc-term-cursor 1.2s steps(1) infinite; }
@keyframes lc-term-cursor{ 0%,50%{ opacity:1; } 51%,100%{ opacity:.2; } }
.lc-terminal .body{ padding:6px 6px 7px; display:flex; flex-direction:column; gap:3px; }
.lc-terminal .f{ height:5px; border-radius:1px; background:rgba(255,255,255,.24); }
.lc-terminal .b{ height:6px; border-radius:1px; background:var(--t2); margin-top:2px; }
/* --- Marco Neón: el rótulo encajado en el borde de arriba --- */
.lc-marco{ display:flex; align-items:center; justify-content:center; height:100%; }
.lc-marco .card{
position:relative; width:66%; padding:9px 8px 8px;
display:flex; flex-direction:column; gap:4px;
border-radius:7px; background:rgba(0,0,0,.55);
border:2px solid var(--t2);
box-shadow:0 0 12px -3px var(--t2), inset 0 0 14px -8px var(--t2);
animation:lc-marco-enciende 2.8s ease-in-out infinite;
}
@keyframes lc-marco-enciende{
0%,44%,100%{ opacity:1; }
48%{ opacity:.45; }
52%{ opacity:1; }
56%{ opacity:.65; }
60%{ opacity:1; }
}
.lc-marco .rot{
position:absolute; top:-3px; left:50%; transform:translateX(-50%);
width:52%; height:5px; border-radius:2px;
background:#0c0d11;
}
.lc-marco .rot::after{
content:''; position:absolute; inset:1px 3px;
border-radius:1px; background:var(--t2);
box-shadow:0 0 7px var(--t2);
}
.lc-marco .f{ height:5px; border-radius:1px; background:rgba(255,255,255,.24); }
.lc-marco .b{ height:6px; border-radius:2px; background:var(--t2); margin-top:2px; }
/* --- Ficha Doble: placas superpuestas y giradas --- */
.lc-ficha{ position:relative; display:flex; align-items:center; justify-content:center; height:100%; }
.lc-ficha .atras{
position:absolute; left:22%; right:16%; top:32%; bottom:16%;
border-radius:5px; background:color-mix(in srgb, var(--t2) 22%, transparent);
border:1px solid color-mix(in srgb, var(--t2) 45%, transparent);
transform:rotate(4deg);
animation:lc-ficha-atras 4s ease-in-out infinite alternate;
}
@keyframes lc-ficha-atras{ to{ transform:rotate(1.5deg); } }
.lc-ficha .rot{
position:absolute; top:16%; left:50%; z-index:3;
width:44%; height:9px; border-radius:3px;
background:linear-gradient(140deg, color-mix(in srgb, var(--t2) 55%, transparent), rgba(0,0,0,.8));
border:1px solid var(--t2);
transform:translateX(-50%) rotate(-3deg);
animation:lc-ficha-rot 4s ease-in-out infinite alternate;
}
@keyframes lc-ficha-rot{ to{ transform:translateX(-50%) rotate(0deg); } }
.lc-ficha .card{
position:relative; z-index:2; width:62%; margin-top:8px;
padding:9px 8px 8px; display:flex; flex-direction:column; gap:4px;
border-radius:6px; background:rgba(0,0,0,.72);
border:1px solid color-mix(in srgb, var(--t2) 60%, transparent);
}
.lc-ficha .f{ height:5px; border-radius:1px; background:rgba(255,255,255,.24); }
.lc-ficha .b{ height:6px; border-radius:2px; background:var(--t2); margin-top:2px; }
/* ==========================================================================
ANUNCIO — sus tres ejes de estilo (tamaño, letra, neón)
Van en rejilla de 3 porque solo hay tres opciones de cada uno.
========================================================================== */
.opt-grid-3{ grid-template-columns:repeat(3, 1fr) !important; }
@media (max-width:620px){ .opt-grid-3{ grid-template-columns:repeat(2, 1fr) !important; } }
.bloque-anuncio{ border:1px solid var(--border); border-radius:var(--radius); padding:14px 15px; }
.bloque-anuncio .mini-label:first-of-type{ margin-top:0; }
#w-anuncio-ajustes{ animation:view-in .25s ease; }
/* --- Tamaño: la misma frase a tres escalas, sobre la misma caja --- */
[class*="opt-anuncioTam-"] i:nth-child(1){ left:8%; right:8%; top:8px; height:5px; opacity:.28; }
[class*="opt-anuncioTam-"] i:nth-child(2){
left:8%; top:50%; transform:translateY(-50%); border-radius:2px;
background:var(--signal); opacity:1;
}
[class*="opt-anuncioTam-"] i:nth-child(3){ left:8%; right:8%; bottom:8px; height:5px; opacity:.28; }
[class*="opt-anuncioTam-"] i:nth-child(4){ display:none; }
.opt-anuncioTam-chico i:nth-child(2){ width:34%; height:5px; }
.opt-anuncioTam-normal i:nth-child(2){ width:52%; height:8px; }
.opt-anuncioTam-grande i:nth-child(2){ width:76%; height:13px; }
/* --- Letra: cada una dibuja su propio ritmo de trazos --- */
[class*="opt-anuncioLetra-"] i:nth-child(1){ left:10%; right:10%; top:10px; height:5px; opacity:.25; }
[class*="opt-anuncioLetra-"] i:nth-child(2){ left:10%; right:10%; top:22px; height:9px; background:none; opacity:1; }
[class*="opt-anuncioLetra-"] i:nth-child(3){ left:10%; right:40%; bottom:9px; height:5px; opacity:.25; }
[class*="opt-anuncioLetra-"] i:nth-child(4){ display:none; }
/* Bloque: trazos gruesos y pegados */
.opt-anuncioLetra-bloque i:nth-child(2){
background-image:repeating-linear-gradient(90deg, var(--signal) 0 9px, transparent 9px 12px);
}
/* Monoespaciada: trazos iguales y muy separados */
.opt-anuncioLetra-mono i:nth-child(2){
background-image:repeating-linear-gradient(90deg, var(--signal) 0 4px, transparent 4px 13px);
}
/* Fina: trazos delgados, altos y sueltos */
.opt-anuncioLetra-fina i:nth-child(2){
top:20px; height:12px;
background-image:repeating-linear-gradient(90deg, var(--signal) 0 2px, transparent 2px 11px);
opacity:.85;
}
/* --- Neón: la misma barra con tres intensidades --- */
[class*="opt-anuncioNeon-"] i:nth-child(1){ left:12%; right:12%; top:11px; height:5px; opacity:.25; }
[class*="opt-anuncioNeon-"] i:nth-child(2){
left:12%; right:12%; top:23px; height:8px; border-radius:2px;
background:var(--signal); opacity:1;
}
[class*="opt-anuncioNeon-"] i:nth-child(3){ left:12%; right:44%; bottom:10px; height:5px; opacity:.25; }
[class*="opt-anuncioNeon-"] i:nth-child(4){ display:none; }
.opt-anuncioNeon-limpio i:nth-child(2){ box-shadow:none; }
.opt-anuncioNeon-halo i:nth-child(2){ box-shadow:0 0 11px 1px var(--signal); }
.opt-anuncioNeon-tubo i:nth-child(2){
box-shadow:0 0 8px 1px var(--signal), 0 0 22px 4px var(--signal);
animation:opt-tubo 3.2s cubic-bezier(.16,1,.3,1) infinite;
}
/* Parpadea al encender, igual que el de verdad */
@keyframes opt-tubo{
0%{ opacity:.2; } 8%{ opacity:1; } 13%{ opacity:.25; }
19%{ opacity:1; } 25%{ opacity:.4; } 32%, 88%{ opacity:1; } 100%{ opacity:.2; }
}
/* ==========================================================================
MINIATURAS: por dónde entra el panel de compra
Cada una dibuja el catálogo detrás (piezas 1-2) y el panel entrando desde
su lado (pieza 3), en bucle. Se ve el movimiento, no solo la posición.
========================================================================== */
.opt-grid-4{ grid-template-columns:repeat(4, 1fr) !important; }
@media (max-width:760px){ .opt-grid-4{ grid-template-columns:repeat(2, 1fr) !important; } }
[class*="opt-compra-"] i:nth-child(1){ left:8%; width:24%; top:10px; height:16px; opacity:.3; }
[class*="opt-compra-"] i:nth-child(2){ left:38%; width:24%; top:10px; height:16px; opacity:.3; }
[class*="opt-compra-"] i:nth-child(4){ display:none; }
/* 1) CAJÓN — entra desde la derecha y ocupa media pantalla de alto completo */
.opt-compra-cajon i:nth-child(3){
right:0; top:0; bottom:0; width:44%; border-radius:0;
background:linear-gradient(140deg, var(--signal), color-mix(in srgb, var(--signal) 45%, transparent));
opacity:1; animation:opt-compra-cajon 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes opt-compra-cajon{
0%, 10%{ transform:translateX(100%); }
34%, 72%{ transform:none; }
94%, 100%{ transform:translateX(100%); }
}
/* 2) CENTRO — una ventana que crece en el medio */
.opt-compra-centro i:nth-child(3){
left:26%; right:26%; top:10px; bottom:10px; border-radius:5px;
background:linear-gradient(140deg, var(--signal), color-mix(in srgb, var(--signal) 45%, transparent));
opacity:1; transform-origin:center;
animation:opt-compra-centro 3.2s cubic-bezier(.34,1.5,.64,1) infinite;
}
@keyframes opt-compra-centro{
0%, 10%{ transform:scale(.35); opacity:0; }
34%, 72%{ transform:scale(1); opacity:1; }
94%, 100%{ transform:scale(.35); opacity:0; }
}
/* 3) HOJA — sube desde abajo y se queda a media altura */
.opt-compra-hoja i:nth-child(3){
left:12%; right:12%; bottom:0; height:60%; border-radius:6px 6px 0 0;
background:linear-gradient(160deg, var(--signal), color-mix(in srgb, var(--signal) 45%, transparent));
opacity:1; animation:opt-compra-hoja 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
/* El tirador de la hoja */
.opt-compra-hoja i:nth-child(3)::after{
content:''; position:absolute; top:4px; left:50%; transform:translateX(-50%);
width:26%; height:2px; border-radius:99px; background:rgba(0,0,0,.45);
}
@keyframes opt-compra-hoja{
0%, 10%{ transform:translateY(100%); }
34%, 72%{ transform:none; }
94%, 100%{ transform:translateY(100%); }
}
/* 4) PANTALLA — lo cubre todo, con la foto grande arriba */
.opt-compra-pantalla i:nth-child(3){
inset:0; border-radius:0;
background:
radial-gradient(22px 22px at 50% 30%, color-mix(in srgb, var(--signal) 90%, white), transparent 62%),
linear-gradient(160deg, color-mix(in srgb, var(--signal) 70%, transparent), color-mix(in srgb, var(--signal) 28%, transparent));
opacity:1; animation:opt-compra-pantalla 3.2s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes opt-compra-pantalla{
0%, 10%{ transform:scale(1.18); opacity:0; }
34%, 72%{ transform:none; opacity:1; }
94%, 100%{ transform:scale(1.18); opacity:0; }
}
/* ==========================================================================
MINIATURAS: cómo se enseñan las opciones de una categoría
Cada una dibuja las opciones con su acomodo real.
========================================================================== */
[class*="opt-catPanel-"] i:nth-child(1){ left:10%; width:34%; top:7px; height:5px; opacity:.3; }
[class*="opt-catPanel-"] i:nth-child(4){ display:none; }
/* 1) TARJETAS — cuatro piezas con foto, en rejilla */
.opt-catPanel-tarjetas i:nth-child(2),
.opt-catPanel-tarjetas i:nth-child(3){
width:36%; height:15px; border-radius:3px; background:var(--signal); opacity:.9;
}
.opt-catPanel-tarjetas i:nth-child(2){ left:10%; top:17px; }
.opt-catPanel-tarjetas i:nth-child(3){ left:52%; top:17px; }
.opt-catPanel-tarjetas{ animation:opt-cat-tarjetas 3s ease-in-out infinite; }
@keyframes opt-cat-tarjetas{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }
/* 2) LISTA — filas finas apiladas */
.opt-catPanel-lista i:nth-child(2),
.opt-catPanel-lista i:nth-child(3){
left:10%; right:10%; height:8px; border-radius:2px; background:var(--signal); opacity:.85;
}
.opt-catPanel-lista i:nth-child(2){ top:17px; }
.opt-catPanel-lista i:nth-child(3){ top:29px; }
/* El precio, a la derecha de cada fila */
.opt-catPanel-lista i:nth-child(2)::after,
.opt-catPanel-lista i:nth-child(3)::after{
content:''; position:absolute; right:3px; top:2px; width:16px; height:4px;
border-radius:1px; background:rgba(0,0,0,.5);
}
/* Un repaso de arriba abajo, como quien recorre la lista con la vista */
.opt-catPanel-lista i:nth-child(2){ animation:opt-cat-lista 3s ease-in-out infinite; }
.opt-catPanel-lista i:nth-child(3){ animation:opt-cat-lista 3s ease-in-out infinite 1.5s; }
@keyframes opt-cat-lista{
0%, 40%, 100%{ opacity:.55; transform:translateX(0); }
15%, 28%{ opacity:1; transform:translateX(3px); }
}
/* 3) COMPARATIVA — columnas iguales, el precio arriba y bien grande */
.opt-catPanel-comparativa i:nth-child(2),
.opt-catPanel-comparativa i:nth-child(3){
width:26%; top:16px; height:24px; border-radius:3px;
background:linear-gradient(180deg, var(--signal) 0 9px, color-mix(in srgb, var(--signal) 30%, transparent) 9px);
opacity:.95;
}
.opt-catPanel-comparativa i:nth-child(2){ left:20%; }
.opt-catPanel-comparativa i:nth-child(3){ left:54%; }
.opt-catPanel-comparativa i:nth-child(3){ animation:opt-cat-comp 2.6s ease-in-out infinite; }
@keyframes opt-cat-comp{
0%,100%{ box-shadow:none; transform:translateY(0); }
50%{ box-shadow:0 0 12px -2px var(--signal); transform:translateY(-2px); }
}
/* 4) CARRUSEL — una fila que se arrastra de lado */
.opt-catPanel-carrusel i:nth-child(2),
.opt-catPanel-carrusel i:nth-child(3){
top:16px; height:22px; border-radius:3px; background:var(--signal);
}
.opt-catPanel-carrusel i:nth-child(2){ left:10%; width:30%; opacity:.95; }
.opt-catPanel-carrusel i:nth-child(3){ left:46%; width:30%; opacity:.6; }
.opt-catPanel-carrusel{ animation:opt-cat-carrusel 3.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes opt-cat-carrusel{
0%, 18%{ transform:translateX(0); }
48%, 66%{ transform:translateX(-26px); }
92%, 100%{ transform:translateX(0); }
}
/* --------------------------------------------------------------------------
MINIATURAS: por dónde entra la caja de una categoría
Mismas cuatro formas que el panel de compra — el gesto es el mismo, así que
la miniatura también, pero con varias opciones dentro en vez de una ficha.
-------------------------------------------------------------------------- */
[class*="opt-catAbre-"] i:nth-child(1){ left:8%; width:24%; top:10px; height:16px; opacity:.3; }
[class*="opt-catAbre-"] i:nth-child(2){ left:38%; width:24%; top:10px; height:16px; opacity:.3; }
[class*="opt-catAbre-"] i:nth-child(4){ display:none; }
/* El relleno son dos opciones, no una ficha: se nota que es una categoría */
[class*="opt-catAbre-"] i:nth-child(3){
background:
linear-gradient(var(--signal), var(--signal)) 14% 30% / 32% 40% no-repeat,
linear-gradient(var(--signal), var(--signal)) 54% 30% / 32% 40% no-repeat,
color-mix(in srgb, var(--signal) 26%, rgba(0,0,0,.75));
opacity:1;
}
.opt-catAbre-cajon i:nth-child(3){
right:0; top:0; bottom:0; width:48%; border-radius:0;
animation:opt-compra-cajon 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
.opt-catAbre-centro i:nth-child(3){
left:20%; right:20%; top:10px; bottom:10px; border-radius:5px;
transform-origin:center;
animation:opt-compra-centro 3.2s cubic-bezier(.34,1.5,.64,1) infinite;
}
.opt-catAbre-hoja i:nth-child(3){
left:10%; right:10%; bottom:0; height:64%; border-radius:6px 6px 0 0;
animation:opt-compra-hoja 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
.opt-catAbre-pantalla i:nth-child(3){
inset:0; border-radius:0;
animation:opt-compra-pantalla 3.2s cubic-bezier(.16,1,.3,1) infinite;
}
/* La casilla de "igual que el escaparate" y su bloque plegable */
#w-cat-estilo{ animation:view-in .25s ease; }
/* Quién mandó cada notificación, en el historial del panel */
.noti-quien{ display:flex; align-items:center; gap:9px; }
.noti-autor{
font-size:10px; letter-spacing:.06em;
padding:2px 8px; border-radius:99px;
background:var(--surface-3); border:1px solid var(--border);
color:var(--text-dim);
}
.noti-autor::before{ content:'✍ '; opacity:.6; }
/* El historial vacío, menos soso */
.noti-lista .hint{
padding:34px 20px; text-align:center; font-size:12.5px;
border:1px dashed var(--border); border-radius:var(--radius);
background:var(--surface-2);
}
/* ==========================================================================
MINIATURAS: AJUSTES, NOTIFICACIONES Y SONIDOS
========================================================================== */
.bloque-sonidos{ border:1px solid var(--border); border-radius:var(--radius); padding:14px 15px; }
.bloque-sonidos .mini-label:first-of-type{ margin-top:0; }
#w-sonidos-ajustes{ animation:view-in .25s ease; }
/* --- Cómo se le presentan los ajustes al cliente ---
Cada miniatura enseña lo que distingue al acomodo: los filetes de luz de
los bloques, la píldora de las pestañas, el marcador lateral del acordeón
y la marca deslizante del panel. */
[class*="opt-ajustesVista-"] i:nth-child(4){ display:none; }
/* Bloques: tres cajas con su filete encendido arriba */
.opt-ajustesVista-bloques i:nth-child(1),
.opt-ajustesVista-bloques i:nth-child(2),
.opt-ajustesVista-bloques i:nth-child(3){
left:12%; right:12%; height:12px; border-radius:3px;
background:rgba(255,255,255,.14);
box-shadow:inset 0 2px 0 -1px var(--signal);
}
.opt-ajustesVista-bloques i:nth-child(1){ top:5px; }
.opt-ajustesVista-bloques i:nth-child(2){ top:20px; }
.opt-ajustesVista-bloques i:nth-child(3){ top:35px; box-shadow:inset 0 2px 0 -1px var(--signal); }
.opt-ajustesVista-bloques i:nth-child(2){ animation:opt-aj-brilla 3s ease-in-out infinite; }
@keyframes opt-aj-brilla{ 0%,100%{ box-shadow:inset 0 2px 0 -1px var(--signal); } 50%{ box-shadow:inset 0 2px 0 -1px var(--signal), 0 0 12px -3px var(--signal); } }
/* Pestañas: la barra segmentada con la píldora activa saltando */
.opt-ajustesVista-pestanas i:nth-child(1){
left:10%; right:10%; top:7px; height:14px; border-radius:99px;
background:rgba(255,255,255,.09); opacity:1;
}
.opt-ajustesVista-pestanas i:nth-child(2){
left:12%; width:24%; top:9px; height:10px; border-radius:99px;
background:var(--signal); opacity:.95;
animation:opt-aj-pildora 4s cubic-bezier(.34,1.4,.64,1) infinite;
}
@keyframes opt-aj-pildora{
0%,22%{ transform:translateX(0); }
30%,55%{ transform:translateX(26px); }
63%,88%{ transform:translateX(52px); }
100%{ transform:translateX(0); }
}
.opt-ajustesVista-pestanas i:nth-child(3){ left:10%; right:10%; top:26px; bottom:7px; opacity:.32; border-radius:5px; }
/* Acordeón: el abierto con su filete vertical al costado */
.opt-ajustesVista-acordeon i:nth-child(1){ left:12%; right:12%; top:5px; height:8px; opacity:.3; border-radius:3px; }
.opt-ajustesVista-acordeon i:nth-child(2){
left:12%; right:12%; top:17px; height:20px; border-radius:4px;
background:rgba(255,255,255,.1); opacity:1;
box-shadow:inset 3px 0 0 -1px var(--signal), 0 0 14px -6px var(--signal);
animation:opt-acordeon 3.2s ease-in-out infinite;
}
@keyframes opt-acordeon{ 0%,100%{ height:20px; } 50%{ height:9px; } }
.opt-ajustesVista-acordeon i:nth-child(3){ left:12%; right:12%; top:41px; height:8px; opacity:.3; border-radius:3px; }
/* Panel: menú lateral con la marca deslizante y el detalle al lado */
.opt-ajustesVista-panel i:nth-child(1){
left:6%; width:28%; top:6px; bottom:6px; border-radius:6px;
background:rgba(255,255,255,.09); opacity:1;
}
.opt-ajustesVista-panel i:nth-child(2){
left:7%; width:3px; top:11px; height:9px; border-radius:0 2px 2px 0;
background:var(--signal); opacity:1; box-shadow:0 0 8px var(--signal);
animation:opt-aj-marca 4s cubic-bezier(.34,1.4,.64,1) infinite;
}
@keyframes opt-aj-marca{
0%,22%{ transform:translateY(0); }
30%,55%{ transform:translateY(12px); }
63%,88%{ transform:translateY(24px); }
100%{ transform:translateY(0); }
}
.opt-ajustesVista-panel i:nth-child(3){ left:40%; right:6%; top:6px; bottom:6px; opacity:.32; border-radius:6px; }
/* --- Cómo se ve la lista de notificaciones --- */
[class*="opt-notisVista-"] i:nth-child(4){ display:none; }
/* Muro: dos bloques altos, texto completo, uno levantándose */
.opt-notisVista-muro i:nth-child(1){
left:10%; right:10%; top:5px; height:19px; border-radius:4px;
background:rgba(255,255,255,.14); opacity:1;
box-shadow:inset 0 2px 0 -1px var(--signal);
animation:opt-noti-sube 3.2s ease-in-out infinite;
}
@keyframes opt-noti-sube{ 0%,100%{ transform:none; } 50%{ transform:translateY(-2px); } }
.opt-notisVista-muro i:nth-child(2){
left:10%; right:10%; top:28px; height:19px; border-radius:4px;
background:rgba(255,255,255,.09); opacity:1;
}
.opt-notisVista-muro i:nth-child(3){ display:none; }
/* Bandeja: filas pegadas con su punto a la izquierda */
.opt-notisVista-bandeja i:nth-child(1),
.opt-notisVista-bandeja i:nth-child(2),
.opt-notisVista-bandeja i:nth-child(3){
left:10%; right:10%; height:11px; border-radius:0;
background:rgba(255,255,255,.12); opacity:1;
}
.opt-notisVista-bandeja i:nth-child(1){ top:8px; border-radius:4px 4px 0 0;
background:
radial-gradient(2.5px 2.5px at 7px 50%, var(--signal), transparent 60%),
rgba(255,255,255,.16);
}
.opt-notisVista-bandeja i:nth-child(2){ top:20px;
background:
radial-gradient(2.5px 2.5px at 7px 50%, var(--signal), transparent 60%),
rgba(255,255,255,.1); }
.opt-notisVista-bandeja i:nth-child(3){ top:32px; border-radius:0 0 4px 4px;
background:
radial-gradient(2.5px 2.5px at 7px 50%, var(--signal), transparent 60%),
rgba(255,255,255,.1); }
/* Línea: el hilo que se apaga y los nodos colgando */
.opt-notisVista-linea i:nth-child(1){
left:15%; top:6px; bottom:6px; width:2px; border-radius:2px;
background:linear-gradient(180deg, var(--signal), rgba(255,255,255,.1));
opacity:.85;
}
.opt-notisVista-linea i:nth-child(2){
left:13%; width:7px; height:7px; top:11px; border-radius:50%;
background:var(--signal); opacity:1;
box-shadow:0 0 0 2px #0c0d11, 0 0 0 3px rgba(0,229,160,.4), 0 0 10px var(--signal);
animation:opt-noti-nodo 3.4s ease-in-out infinite;
}
@keyframes opt-noti-nodo{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(15px); }
}
.opt-notisVista-linea i:nth-child(3){
left:26%; right:12%; top:9px; height:11px; border-radius:3px;
background:rgba(255,255,255,.13); opacity:1;
box-shadow:0 15px 0 -1px rgba(255,255,255,.09), 0 30px 0 -1px rgba(255,255,255,.09);
}
/* Tarjetas: rejilla de fichas, una levantada */
.opt-notisVista-tarjetas i:nth-child(1){
left:8%; width:40%; top:7px; height:18px; border-radius:4px;
background:rgba(255,255,255,.16); opacity:1;
box-shadow:inset 0 2px 0 -1px var(--signal);
animation:opt-noti-sube 3.2s ease-in-out infinite;
}
.opt-notisVista-tarjetas i:nth-child(2){ left:52%; width:40%; top:7px; height:18px; border-radius:4px; background:rgba(255,255,255,.1); opacity:1; }
.opt-notisVista-tarjetas i:nth-child(3){ left:8%; width:40%; top:29px; height:18px; border-radius:4px; background:rgba(255,255,255,.1); opacity:1;
box-shadow:44px 0 0 0 rgba(255,255,255,.06); }
/* --- Al abrir una notificación: mismas cuatro formas que los paneles --- */
[class*="opt-notisAbre-"] i:nth-child(1){ left:9%; right:9%; top:8px; height:7px; opacity:.3; }
[class*="opt-notisAbre-"] i:nth-child(2){ left:9%; right:9%; bottom:8px; height:7px; opacity:.3; }
[class*="opt-notisAbre-"] i:nth-child(4){ display:none; }
[class*="opt-notisAbre-"] i:nth-child(3){ background:var(--signal); opacity:1; }
.opt-notisAbre-inline i:nth-child(3){
left:9%; right:9%; top:19px; height:14px; border-radius:3px;
animation:opt-inline 3s ease-in-out infinite;
}
@keyframes opt-inline{ 0%,100%{ height:6px; } 50%{ height:16px; } }
.opt-notisAbre-centro i:nth-child(3){
left:22%; right:22%; top:11px; bottom:11px; border-radius:5px;
animation:opt-compra-centro 3.2s cubic-bezier(.34,1.5,.64,1) infinite;
}
.opt-notisAbre-hoja i:nth-child(3){
left:12%; right:12%; bottom:0; height:62%; border-radius:6px 6px 0 0;
animation:opt-compra-hoja 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
.opt-notisAbre-lateral i:nth-child(3){
right:0; top:0; bottom:0; width:48%; border-radius:0;
animation:opt-compra-cajon 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
/* --- Sonidos: cada receta dibuja su propia onda con barras --- */
[class*="opt-son"] i:nth-child(1){ left:0; right:0; top:50%; height:1px; opacity:.18; border-radius:0; }
[class*="opt-son"] i:nth-child(3),
[class*="opt-son"] i:nth-child(4){ display:none; }
[class*="opt-son"] i:nth-child(2){
left:10%; right:10%; top:14px; height:24px; border-radius:0;
background-color:transparent; background-repeat:no-repeat;
animation:opt-onda 2.4s ease-in-out infinite;
}
@keyframes opt-onda{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
/* Campana: un pico que se apaga despacio */
.opt-sonEntrar-campana i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal));
background-size:3px 100%, 3px 74%, 3px 50%, 3px 30%, 3px 14%;
background-position:6% 50%, 26% 50%, 46% 50%, 66% 50%, 86% 50%;
}
/* Arpegio: tres escalones subiendo */
.opt-sonEntrar-arpegio i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal));
background-size:5px 34%, 5px 64%, 5px 96%;
background-position:14% 50%, 48% 50%, 82% 50%;
}
/* Pulso: dos barras gordas y graves */
.opt-sonEntrar-pulso i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal));
background-size:9px 96%, 9px 52%;
background-position:26% 50%, 62% 50%;
}
/* Burbuja: rampa continua hacia arriba */
.opt-sonEntrar-burbuja i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal));
background-size:4px 20%, 4px 44%, 4px 70%, 4px 96%;
background-position:12% 50%, 38% 50%, 64% 50%, 90% 50%;
}
/* Clic: los cuatro son cortos; cambia el grosor y cuántos golpes */
.opt-sonClic-tic i:nth-child(2){
background-image:linear-gradient(var(--signal),var(--signal));
background-size:3px 96%; background-position:50% 50%;
}
.opt-sonClic-gota i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal));
background-size:4px 96%, 4px 56%, 4px 24%;
background-position:34% 50%, 52% 50%, 70% 50%;
}
.opt-sonClic-suave i:nth-child(2){
background-image:linear-gradient(var(--signal),var(--signal));
background-size:14px 34%; background-position:50% 50%; opacity:.55;
}
.opt-sonClic-digital i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal));
background-size:6px 96%, 6px 96%;
background-position:38% 50%, 58% 50%;
}
/* Notificación: más presencia que el clic */
.opt-sonNoti-ding i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal));
background-size:4px 96%, 4px 60%, 4px 28%;
background-position:34% 50%, 54% 50%, 74% 50%;
}
.opt-sonNoti-doble i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal));
background-size:7px 80%, 7px 96%;
background-position:32% 50%, 62% 50%;
}
.opt-sonNoti-radar i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal));
background-size:4px 96%, 4px 70%, 4px 46%, 4px 22%;
background-position:14% 50%, 38% 50%, 62% 50%, 86% 50%;
}
.opt-sonNoti-cristal i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal));
background-size:2px 96%, 2px 74%, 2px 96%, 2px 54%, 2px 80%, 2px 34%;
background-position:8% 50%, 24% 50%, 40% 50%, 56% 50%, 72% 50%, 88% 50%;
}
/* --- Ondas de los sonidos nuevos --- */
/* Cada barra es un tono: su alto es el volumen y su sitio, cuándo suena.
Barras juntas = notas simultáneas; separadas = una detrás de otra. */
/* Portal: rampa que sube y se queda sostenida al final */
.opt-sonEntrar-portal i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal));
background-size:3px 26%, 3px 54%, 3px 82%, 9px 96%;
background-position:8% 50%, 28% 50%, 48% 50%, 82% 50%;
}
/* Coro: tres barras juntas y del mismo alto — suenan a la vez */
.opt-sonEntrar-coro i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal));
background-size:5px 96%, 5px 84%, 5px 72%;
background-position:40% 50%, 50% 50%, 60% 50%;
}
/* Arranque: sube en rampa y remata con un golpe fino */
.opt-sonEntrar-arranque i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal));
background-size:7px 34%, 7px 62%, 7px 90%, 2px 96%;
background-position:10% 50%, 32% 50%, 54% 50%, 84% 50%;
}
/* Eco: la misma barra, cada vez más baja */
.opt-sonEntrar-eco i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal));
background-size:4px 96%, 4px 56%, 4px 26%;
background-position:18% 50%, 48% 50%, 78% 50%;
}
/* Madera: una sola barra gorda y grave */
.opt-sonClic-madera i:nth-child(2){
background-image:linear-gradient(var(--signal),var(--signal));
background-size:11px 70%; background-position:50% 50%;
}
/* Chispa: dos hilos finísimos y altos */
.opt-sonClic-chispa i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal));
background-size:2px 96%, 2px 76%;
background-position:46% 50%, 56% 50%;
}
/* Pop: dos barras que saltan hacia arriba, muy pegadas */
.opt-sonClic-pop i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal));
background-size:5px 48%, 5px 96%;
background-position:44% 50%, 56% 50%;
}
/* Palanca: dos golpes cuadrados, uno más alto */
.opt-sonClic-palanca i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal));
background-size:6px 62%, 6px 96%;
background-position:38% 50%, 60% 50%;
}
/* Campanita: la nota y dos armónicos apagándose */
.opt-sonNoti-campanita i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal));
background-size:4px 96%, 3px 66%, 3px 40%, 3px 20%;
background-position:14% 50%, 38% 50%, 60% 50%, 82% 50%;
}
/* Triple: tres barras iguales y seguidas */
.opt-sonNoti-triple i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal));
background-size:5px 80%, 5px 80%, 5px 96%;
background-position:30% 50%, 50% 50%, 70% 50%;
}
/* Sonar: el ping y su rebote bajando */
.opt-sonNoti-sonar i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal));
background-size:5px 96%, 3px 68%, 3px 48%, 3px 32%, 3px 18%;
background-position:8% 50%, 30% 50%, 48% 50%, 66% 50%, 86% 50%;
}
/* Alerta: sube y vuelve a bajar */
.opt-sonNoti-alerta i:nth-child(2){
background-image:
linear-gradient(var(--signal),var(--signal)), linear-gradient(var(--signal),var(--signal)),
linear-gradient(var(--signal),var(--signal));
background-size:5px 62%, 5px 96%, 5px 62%;
background-position:28% 50%, 50% 50%, 72% 50%;
}
/* ==========================================================================
TICKETS — el soporte visto desde el panel
========================================================================== */
/* Los cuatro contadores de arriba: dónde está el trabajo, de un vistazo */
.tk-resumen{
display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
gap:12px; margin-bottom:24px;
}
.tk-dato{
position:relative; overflow:hidden;
padding:16px 18px; border-radius:var(--radius);
background:linear-gradient(165deg, rgba(255,255,255,.04), var(--surface-2));
border:1px solid var(--border);
}
.tk-dato::before{
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg, transparent, var(--tono), transparent); opacity:.7;
}
.tk-dato strong{
display:block; font-family:var(--font-display); font-size:26px; font-weight:700;
color:var(--tono); line-height:1;
}
.tk-dato span{ display:block; margin-top:5px; font-size:11px; color:var(--text-dim); }
.tk-dato.tono-ambar{ --tono:var(--warn); }
.tk-dato.tono-azul{ --tono:var(--blue); }
.tk-dato.tono-verde{ --tono:var(--ok); }
.tk-dato.tono-violeta{ --tono:var(--violet); }
/* La cabecera del panel: los filtros y el botón en una sola fila alineada.
Sin esto el "Actualizar" se caía debajo y quedaba pisando los filtros. */
.view[data-view="tickets"] .panel-head{
display:flex; align-items:center; justify-content:space-between;
gap:16px; flex-wrap:wrap;
}
.view[data-view="tickets"] .panel-acciones{
display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto;
}
/* Filtros */
.tk-filtros{ display:flex; gap:4px; padding:3px; border-radius:99px; flex:none;
background:var(--surface-3); border:1px solid var(--border); }
.tk-filtro{
padding:6px 14px; border-radius:99px; cursor:pointer; font-family:inherit;
font-size:11.5px; background:none; border:none; color:var(--text-dim);
transition:background .15s ease, color .15s ease;
}
.tk-filtro:hover{ color:var(--text); }
.tk-filtro.activo{ background:var(--surface); color:var(--text); font-weight:600; }
/* La lista */
.tk-lista{ display:flex; flex-direction:column; }
.tk-fila{
position:relative; display:flex; align-items:center; gap:14px; cursor:pointer;
padding:14px 16px 14px 18px;
border-bottom:1px solid var(--border);
transition:background .15s ease, padding-left .18s ease;
}
.tk-fila:last-child{ border-bottom:none; }
.tk-fila:hover{ background:var(--surface-2); padding-left:22px; }
/* El filete de estado, al costado */
.tk-fila::before{
content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px;
border-radius:0 3px 3px 0; background:var(--tono);
}
.tk-fila.est-ambar{ --tono:var(--warn); }
.tk-fila.est-azul{ --tono:var(--blue); }
.tk-fila.est-verde{ --tono:var(--ok); }
.tk-fila.est-gris{ --tono:var(--text-faint); }
.tk-fila.es-escalado{ background:rgba(139,123,255,.05); }
.tk-avatar{
width:38px; height:38px; flex:none; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:700; font-size:14px;
background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text-dim);
}
.tk-centro{ flex:1; min-width:0; }
.tk-fila-cab{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:4px; }
.tk-fila-cab strong{ font-size:13.5px; color:var(--text); }
.tk-fila-sub{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:11.5px; color:var(--text-faint); }
.tk-punto{ opacity:.4; }
.tk-atiende{ color:var(--text-dim); }
.tk-atiende.es-mio{ color:var(--blue); font-weight:600; }
.tk-der{ display:flex; align-items:center; gap:12px; flex:none; }
.tk-fecha{ font-size:11px; color:var(--text-faint); white-space:nowrap; }
.tk-chip{
font-size:9px; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
padding:3px 9px; border-radius:99px; flex:none;
}
.tk-chip.ambar{ background:rgba(255,179,64,.14); border:1px solid rgba(255,179,64,.42); color:var(--warn); }
.tk-chip.azul{ background:rgba(79,214,255,.14); border:1px solid rgba(79,214,255,.42); color:var(--blue); }
.tk-chip.verde{ background:rgba(94,234,212,.14); border:1px solid rgba(94,234,212,.42); color:var(--ok); }
.tk-chip.gris{ background:rgba(255,255,255,.05); border:1px solid var(--border-strong); color:var(--text-faint); }
.tk-chip.violeta{ background:rgba(139,123,255,.16); border:1px solid rgba(139,123,255,.5); color:var(--violet); }
/* La conversación */
.tk-box{ width:760px; max-width:94vw; height:82vh; }
.tk-barra{
display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:none;
padding:12px 20px; border-bottom:1px solid var(--border); background:var(--surface-2);
}
.tk-lleva{ font-size:11.5px; color:var(--text-dim); }
.tk-acciones{ display:flex; gap:7px; flex-wrap:wrap; margin-left:auto; }
.tk-cuerpo{ flex:1; min-height:0; padding:0; overflow:hidden; display:flex; }
.tk-hilo{
flex:1; overflow-y:auto; padding:18px 20px;
display:flex; flex-direction:column; gap:14px;
}
.tk-msg{ display:flex; gap:11px; align-items:flex-start; }
.tk-msg.es-cliente{ flex-direction:row-reverse; }
.tk-msg-avatar{
width:30px; height:30px; flex:none; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:700; font-size:12px;
background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text-dim);
}
.tk-msg-avatar.es-staff{
background:rgba(79,214,255,.16); border-color:rgba(79,214,255,.5); color:var(--blue);
}
.tk-msg-cuerpo{ min-width:0; max-width:76%; }
.tk-msg.es-cliente .tk-msg-cab{ flex-direction:row-reverse; }
.tk-msg-cab{ display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.tk-msg-cab strong{ font-size:12.5px; color:var(--text); }
.tk-msg-rol{
font-size:8.5px; letter-spacing:.09em; text-transform:uppercase;
padding:2px 7px; border-radius:99px;
background:var(--surface-3); border:1px solid var(--border); color:var(--text-faint);
}
.tk-msg-hora{ font-size:10.5px; color:var(--text-faint); font-family:var(--font-mono); }
.tk-msg-texto{
padding:11px 14px; border-radius:14px 14px 14px 4px;
background:var(--surface-2); border:1px solid var(--border);
}
.tk-msg.es-cliente .tk-msg-texto{
border-radius:14px 14px 4px 14px;
background:rgba(79,214,255,.08); border-color:rgba(79,214,255,.24);
}
.tk-msg-texto p{ margin:0 0 5px; font-size:13px; line-height:1.6; color:var(--text); }
.tk-msg-texto p:last-child{ margin-bottom:0; }
.tk-sistema{
align-self:center; max-width:82%; text-align:center;
padding:6px 15px; border-radius:99px; font-size:11px;
background:var(--surface-2); border:1px dashed var(--border-strong); color:var(--text-faint);
}
.tk-responder{
display:flex; gap:10px; align-items:flex-end; flex:none;
padding:14px 20px; border-top:1px solid var(--border); background:var(--surface-2);
}
.tk-responder textarea{ flex:1; margin:0; resize:vertical; min-height:44px; }
.tk-responder .btn{ flex:none; }
@media (max-width:640px){
.tk-fila{ flex-wrap:wrap; }
.tk-der{ width:100%; justify-content:space-between; }
.tk-msg-cuerpo{ max-width:86%; }
}
/* --- Cómo se ve el chat de soporte --- */
[class*="opt-soporteVista-"] i:nth-child(4){ display:none; }
/* Burbujas: uno a cada lado */
.opt-soporteVista-burbujas i:nth-child(1){ left:10%; width:46%; top:8px; height:12px; border-radius:7px 7px 7px 2px; background:rgba(255,255,255,.22); opacity:1; }
.opt-soporteVista-burbujas i:nth-child(2){ right:10%; width:40%; top:24px; height:12px; border-radius:7px 7px 2px 7px; background:var(--signal); opacity:.9; }
.opt-soporteVista-burbujas i:nth-child(3){ left:10%; width:34%; top:40px; height:9px; border-radius:6px 6px 6px 2px; background:rgba(255,255,255,.16); opacity:1; }
/* Los cuatro acomodos comparten el lado: soporte a la izquierda (en el color
del tema) y cliente a la derecha (en blanco). Las miniaturas lo enseñan,
porque es lo primero que se ve al abrir el chat de verdad. */
/* Hilo: bloques planos y anchos, esquinas rectas */
.opt-soporteVista-hilo i:nth-child(1){ left:6%; width:66%; top:6px; height:13px; border-radius:0; background:color-mix(in srgb, var(--signal) 22%, transparent); opacity:1;
box-shadow:inset 3px 0 0 -1px var(--signal); }
.opt-soporteVista-hilo i:nth-child(2){ right:6%; width:60%; top:21px; height:13px; border-radius:0; background:rgba(255,255,255,.12); opacity:1;
box-shadow:inset -3px 0 0 -1px rgba(255,255,255,.6); }
.opt-soporteVista-hilo i:nth-child(3){ left:6%; width:52%; top:36px; height:13px; border-radius:0; background:color-mix(in srgb, var(--signal) 22%, transparent); opacity:1;
box-shadow:inset 3px 0 0 -1px var(--signal); }
/* Consola: renglones de registro, el del cliente alineado a la derecha */
.opt-soporteVista-consola i:nth-child(1){ left:8%; width:14%; top:9px; height:6px; background:var(--signal); opacity:.9; border-radius:1px;
box-shadow:26px 0 0 0 rgba(255,255,255,.28), 46px 0 0 0 rgba(255,255,255,.28), 0 26px 0 0 var(--signal), 26px 26px 0 0 rgba(255,255,255,.28); }
.opt-soporteVista-consola i:nth-child(2){ right:8%; width:14%; top:22px; height:6px; background:rgba(255,255,255,.65); opacity:1; border-radius:1px;
box-shadow:-26px 0 0 0 rgba(255,255,255,.28), -46px 0 0 0 rgba(255,255,255,.28); }
.opt-soporteVista-consola i:nth-child(3){ left:34%; width:26%; top:9px; height:6px; opacity:.28; border-radius:1px;
box-shadow:0 26px 0 0 rgba(255,255,255,.24); }
/* Fichas: tarjetas redondeadas, cada una en su lado */
.opt-soporteVista-fichas i:nth-child(1){ left:8%; width:64%; top:6px; height:14px; border-radius:4px; background:rgba(255,255,255,.14); opacity:1;
box-shadow:inset 3px 0 0 -1px var(--signal); }
.opt-soporteVista-fichas i:nth-child(2){ right:8%; width:58%; top:23px; height:14px; border-radius:4px; background:rgba(255,255,255,.09); opacity:1;
box-shadow:inset -3px 0 0 -1px rgba(255,255,255,.6); }
.opt-soporteVista-fichas i:nth-child(3){ left:8%; width:50%; top:40px; height:11px; border-radius:4px; background:rgba(255,255,255,.14); opacity:1;
box-shadow:inset 3px 0 0 -1px var(--signal); }
/* --------------------------------------------------------------------------
LA LLAMADA — cuando un staff escala, al Owner le entra como una llamada:
arriba del todo, latiendo, hasta que la atiende.
-------------------------------------------------------------------------- */
.tk-llamada{
position:relative; overflow:hidden;
display:flex; align-items:center; gap:16px;
padding:16px 18px; margin-bottom:16px; border-radius:var(--radius);
background:linear-gradient(120deg, rgba(139,123,255,.16), rgba(139,123,255,.05));
border:1px solid rgba(139,123,255,.5);
animation:tk-llamada-late 1.6s ease-in-out infinite;
}
@keyframes tk-llamada-late{
0%,100%{ box-shadow:0 0 0 0 rgba(139,123,255,.4), 0 10px 30px -20px rgba(0,0,0,.9); }
50%{ box-shadow:0 0 30px -4px rgba(139,123,255,.6), 0 10px 30px -20px rgba(0,0,0,.9); }
}
/* La onda que sale del icono, como el timbre de un teléfono */
.tk-llamada-ico{
position:relative; width:44px; height:44px; flex:none; border-radius:50%;
display:flex; align-items:center; justify-content:center; font-size:19px;
background:rgba(139,123,255,.2); border:1px solid rgba(139,123,255,.55);
animation:tk-timbre 1.1s ease-in-out infinite;
}
@keyframes tk-timbre{
0%,100%{ transform:rotate(0deg); }
20%{ transform:rotate(-14deg); }
40%{ transform:rotate(12deg); }
60%{ transform:rotate(-8deg); }
80%{ transform:rotate(5deg); }
}
.tk-llamada-ico::after{
content:''; position:absolute; inset:-6px; border-radius:50%;
border:2px solid rgba(139,123,255,.6);
animation:tk-onda 1.6s ease-out infinite;
}
@keyframes tk-onda{
0%{ transform:scale(.85); opacity:.9; }
100%{ transform:scale(1.5); opacity:0; }
}
.tk-llamada-txt{ flex:1; min-width:0; }
.tk-llamada-txt strong{
display:block; font-family:var(--font-display); font-size:15px; color:var(--text);
}
.tk-llamada-txt span{
display:block; margin-top:3px; font-size:11.5px; color:var(--text-dim);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tk-llamada-btn{
flex:none; padding:11px 24px; border-radius:99px; cursor:pointer;
font-family:inherit; font-size:13px; font-weight:700; border:none;
background:var(--violet); color:#0a0812;
transition:filter .15s ease, transform .08s ease;
}
.tk-llamada-btn:hover{ filter:brightness(1.12); }
.tk-llamada-btn:active{ transform:scale(.97); }
@media (max-width:640px){
.tk-llamada{ flex-wrap:wrap; }
.tk-llamada-btn{ width:100%; }
}
/* --- Adjuntar foto en un ticket -------------------------------------------
El clip a la izquierda, el campo en medio y Mandar a la derecha: los tres
alineados abajo, para que la barra no se descuadre al crecer el textarea. */
.tk-responder{ align-items:flex-end; }
.tk-campo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.tk-campo textarea{ width:100%; margin:0; resize:vertical; min-height:44px; }
.tk-clip{
flex:none; width:44px; height:44px; border-radius:var(--radius-sm); cursor:pointer;
display:flex; align-items:center; justify-content:center; font-size:16px;
background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text-dim);
transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.tk-clip:hover{ border-color:var(--blue); color:var(--blue); background:rgba(79,214,255,.08); }
/* Mandar a la misma altura que el clip: la fila lee como un solo bloque */
.tk-responder #tk-mandar{ height:44px; padding-inline:20px; }
/* La foto elegida, esperando a mandarse */
.tk-adjunto{ position:relative; width:96px; }
.tk-adjunto img{
display:block; width:96px; height:72px; object-fit:cover;
border-radius:var(--radius-sm); border:1px solid var(--border-strong);
}
.tk-adjunto button{
position:absolute; top:-7px; right:-7px; width:21px; height:21px; padding:0;
border-radius:50%; cursor:pointer; font-size:10px; line-height:1;
display:flex; align-items:center; justify-content:center;
background:var(--surface); border:1px solid var(--border-strong); color:var(--text-dim);
}
.tk-adjunto button:hover{ border-color:var(--danger); color:var(--danger); }
/* Ya mandada, dentro del mensaje */
.tk-msg-foto{
display:block; margin-top:8px; max-width:260px; max-height:220px;
border-radius:10px; cursor:zoom-in;
border:1px solid var(--border-strong);
transition:border-color .15s ease, transform .15s ease;
}
.tk-msg-foto:first-child{ margin-top:0; }
.tk-msg-foto:hover{ border-color:var(--blue); transform:scale(1.015); }
/* ==========================================================================
DASHBOARD DEL OWNER — el resumen de todo el negocio
========================================================================== */
.stat-card.v-ok::before{ background:linear-gradient(90deg, var(--ok), var(--signal)); }
.stat-card.v-warn::before{ background:linear-gradient(90deg, var(--warn), #ff7a45); }
.stat-card.v-ok .stat-value{ color:var(--ok); }
.stat-card.v-warn .stat-value{ color:var(--warn); }
.stat-card.v-violet .stat-value{ color:var(--violet); }
/* Dos columnas en pantallas anchas, una sola en el móvil */
.res-dos{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; align-items:start; }
@media (max-width:900px){ .res-dos{ grid-template-columns:1fr; } }
.res-lista{ display:flex; flex-direction:column; }
.res-fila{
display:flex; align-items:center; gap:12px;
padding:11px 2px; border-bottom:1px solid var(--border);
}
.res-fila:last-child{ border-bottom:none; }
.res-ini{
width:32px; height:32px; flex:none; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:700; font-size:12.5px;
background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text-dim);
}
.res-ini.es-owner{
background:rgba(139,123,255,.16); border-color:rgba(139,123,255,.5); color:var(--violet);
}
.res-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.res-txt strong{ font-size:13px; color:var(--text); }
.res-txt span{ font-size:11.5px; color:var(--text-faint); }
.res-cuando{ flex:none; font-size:11px; color:var(--text-faint); white-space:nowrap; }
.res-cuando.es-baja{ color:var(--danger); }
/* ==========================================================================
MOVIMIENTOS DEL PANEL — el registro de quién hizo qué
Antes era una línea de texto plano. Ahora cada fila lleva icono, quién,
su rango, el verbo y dónde: se busca algo concreto de un vistazo, y para
eso el color y el icono valen más que leer la frase entera.
========================================================================== */
.res-mov{
position:relative;
display:flex; align-items:center; gap:12px;
padding:11px 14px 11px 12px;
border-bottom:1px solid var(--border);
font-size:12.5px;
transition:background .14s ease;
}
.res-mov:last-child{ border-bottom:none; }
.res-mov:hover{ background:var(--surface-2); }
/* El filete del costado dice de qué clase es sin leer nada */
.res-mov::before{
content:''; position:absolute; left:0; top:9px; bottom:9px; width:2px;
border-radius:0 2px 2px 0; background:var(--tono); opacity:.75;
}
.res-mov.tono-neutro { --tono:var(--text-faint); }
.res-mov.tono-azul { --tono:var(--blue); }
.res-mov.tono-verde { --tono:var(--ok); }
.res-mov.tono-violeta{ --tono:var(--violet); }
.res-mov.tono-rojo { --tono:var(--danger); }
.res-mov-ico{
width:26px; height:26px; flex:none; border-radius:8px;
display:flex; align-items:center; justify-content:center;
font-size:12px; line-height:1;
background:color-mix(in srgb, var(--tono) 14%, transparent);
border:1px solid color-mix(in srgb, var(--tono) 38%, transparent);
color:var(--tono);
}
/* Quién, con su rango al lado */
.res-mov-quien{ flex:none; display:flex; align-items:center; gap:7px; min-width:0; }
.res-mov-quien strong{ font-size:12.5px; color:var(--text); font-weight:600; }
.res-rango{
flex:none; padding:2px 7px; border-radius:99px;
font-family:var(--font-display); font-size:8.5px; font-weight:700;
letter-spacing:.09em; line-height:1.5;
}
.res-rango.owner{
background:rgba(139,123,255,.16); border:1px solid rgba(139,123,255,.5); color:var(--violet);
}
.res-rango.staff{
background:rgba(79,214,255,.13); border:1px solid rgba(79,214,255,.42); color:var(--blue);
}
/* Cuenta suspendida: el rango sigue siendo el suyo, pero apagado */
.res-rango.de-baja{ opacity:.45; text-decoration:line-through; }
/* Qué hizo */
.res-mov-que{
flex:1; min-width:0; display:flex; align-items:baseline; gap:7px;
overflow:hidden;
}
.res-mov-verbo{ flex:none; color:var(--text-dim); }
.res-mov-detalle{
min-width:0; color:var(--text-faint);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* En qué sección */
.res-mov-donde{
flex:none; padding:2px 8px; border-radius:5px;
font-family:var(--font-mono); font-size:10px;
background:var(--surface-3); border:1px solid var(--border); color:var(--text-faint);
}
@media (max-width:760px){
.res-mov{ flex-wrap:wrap; gap:8px 10px; }
.res-mov-que{ flex:1 1 100%; padding-left:38px; }
.res-mov-donde{ margin-left:38px; }
}
/* ==========================================================================
AVISO DE TICKETS — suena y se ve estés en la sección que estés
========================================================================== */
.nav-globo{
margin-left:auto; min-width:19px; height:19px; padding:0 6px;
border-radius:99px; display:inline-flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-size:10.5px; font-weight:700; line-height:1;
background:var(--warn); color:#1a1206;
}
.nav-globo.es-llamada{
background:var(--violet); color:#0d0a1f;
animation:globo-late 1.4s ease-in-out infinite;
}
@keyframes globo-late{
0%,100%{ box-shadow:0 0 0 0 rgba(139,123,255,.55); }
50% { box-shadow:0 0 0 6px rgba(139,123,255,0); }
}
/* El globito de aviso arriba a la derecha */
.tk-avisos{
position:fixed; top:74px; right:22px; z-index:400;
display:flex; flex-direction:column; gap:10px;
pointer-events:none;
}
.tk-aviso{
pointer-events:auto; cursor:pointer;
display:flex; align-items:center; gap:12px;
width:min(330px, calc(100vw - 44px));
padding:13px 16px; border-radius:var(--radius);
background:linear-gradient(160deg, rgba(255,255,255,.06), var(--surface-2));
border:1px solid var(--border-strong);
box-shadow:0 20px 44px -22px rgba(0,0,0,.9);
animation:aviso-entra .34s cubic-bezier(.16,1,.3,1);
transition:border-color .16s ease, transform .16s ease;
}
.tk-aviso:hover{ border-color:var(--blue); transform:translateX(-3px); }
.tk-aviso.se-va{ animation:aviso-sale .38s ease forwards; }
.tk-aviso-ico{
width:34px; height:34px; flex:none; border-radius:10px;
display:flex; align-items:center; justify-content:center; font-size:16px;
background:rgba(79,214,255,.13); border:1px solid rgba(79,214,255,.4);
}
.tk-aviso div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tk-aviso strong{ font-size:13px; color:var(--text); }
.tk-aviso span:not(.tk-aviso-ico){ font-size:11.5px; color:var(--text-faint); }
@keyframes aviso-entra{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:none; } }
@keyframes aviso-sale { to{ opacity:0; transform:translateX(28px); } }
/* ==========================================================================
TU PROPIA APP DE SPOTIFY — el paso a paso
========================================================================== */
.mus-app{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.mus-app-cab strong{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text); }
.mus-app-cab p{ margin:6px 0 0; font-size:12.5px; line-height:1.6; color:var(--text-faint); }
/* Ya conectado, los pasos estorban: se pliegan y basta con pulsar para verlos */
.mus-app.esta-listo .mus-pasos{ display:none; }
.mus-app.esta-listo .mus-app-cab p{ display:none; }
.mus-pasos{ list-style:none; margin:18px 0 0; padding:0;
display:flex; flex-direction:column; gap:2px; counter-reset:none; }
.mus-pasos li{
display:flex; gap:14px; padding:14px 0;
border-bottom:1px solid var(--border);
}
.mus-pasos li:last-child{ border-bottom:none; padding-bottom:0; }
.mus-paso-n{
width:26px; height:26px; flex:none; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-size:12px; font-weight:700;
background:rgba(79,214,255,.13); border:1px solid rgba(79,214,255,.42); color:var(--blue);
}
.mus-pasos li > div{ flex:1; min-width:0; }
.mus-pasos strong{ display:block; font-size:13px; color:var(--text); margin-bottom:4px; }
.mus-pasos p{ margin:0 0 10px; font-size:12.5px; line-height:1.6; color:var(--text-faint); }
.mus-pasos p:last-child{ margin-bottom:0; }
.mus-pasos b{ color:var(--text-dim); font-weight:600; }
/* Las dos casillas de las claves */
.mus-claves{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:11px; }
@media (max-width:720px){ .mus-claves{ grid-template-columns:1fr; } }
.mus-claves label{ display:flex; flex-direction:column; gap:6px; }
.mus-claves span{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); }
.mus-claves input{ width:100%; margin:0; font-size:12.5px; }
.mus-claves-pie{ display:flex; gap:9px; flex-wrap:wrap; }
/* ==========================================================================
TICKETS — los cuadros que piden algo escrito
confirmarAccion solo sirve para sí/no; cerrar un ticket pide un motivo,
y transferirlo pide elegir persona. De ahí este cuadro aparte.
========================================================================== */
.tk-pregunta-fondo{
position:fixed; inset:0; z-index:500;
display:flex; align-items:center; justify-content:center; padding:20px;
background:rgba(4,5,8,.72); backdrop-filter:blur(5px);
animation:tkp-fondo .18s ease;
}
@keyframes tkp-fondo{ from{ opacity:0; } to{ opacity:1; } }
.tk-pregunta{
width:440px; max-width:100%; padding:22px;
border-radius:var(--radius); background:var(--surface);
border:1px solid var(--border-strong);
box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
animation:tkp-caja .26s cubic-bezier(.16,1,.3,1);
}
@keyframes tkp-caja{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.tk-pregunta h3{ margin:0 0 7px; font-size:16px; color:var(--text); }
.tk-pregunta > p{ margin:0 0 15px; font-size:12.5px; line-height:1.6; color:var(--text-faint); }
.tk-pregunta textarea{ width:100%; margin:0; resize:vertical; font-size:13px; }
.tk-pregunta-error{ min-height:17px; margin-top:7px; font-size:12px; color:var(--danger); }
.tk-pregunta-pie{ display:flex; justify-content:flex-end; gap:9px; margin-top:12px; }
/* A quién se le pasa el ticket */
.tk-gente{
display:flex; flex-direction:column; gap:6px; margin-bottom:13px;
max-height:210px; overflow-y:auto;
}
.tk-gente-fila{
display:flex; align-items:center; gap:11px; width:100%;
padding:9px 11px; border-radius:var(--radius-sm); cursor:pointer;
font-family:inherit; text-align:left;
background:var(--surface-2); border:1px solid var(--border);
transition:border-color .15s ease, background .15s ease;
}
.tk-gente-fila:hover{ border-color:var(--border-strong); background:var(--surface-3); }
.tk-gente-fila.elegido{ border-color:var(--blue); background:rgba(79,214,255,.09); }
.tk-gente-ini{
width:30px; height:30px; flex:none; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:700; font-size:12px;
background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text-dim);
}
.tk-gente-fila.elegido .tk-gente-ini{
background:rgba(79,214,255,.16); border-color:rgba(79,214,255,.5); color:var(--blue);
}
.tk-gente-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.tk-gente-txt strong{ font-size:13px; color:var(--text); }
.tk-gente-txt span{ font-size:11px; color:var(--text-faint); }
/* El motivo del cierre, en la barra del ticket */
.tk-motivo{
font-size:11.5px; font-style:italic; color:var(--text-dim);
max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* ==========================================================================
SINTONIZAR AL ENCARGADO
No es audio compartido — Spotify no lo permite. Es saber qué suena en su
cuenta para poner lo mismo en la tuya, así que se ve como una ficha de
"ahora mismo", no como un reproductor con mandos.
========================================================================== */
.mus-sintonia{
margin-top:16px; padding:15px 17px; border-radius:var(--radius);
background:linear-gradient(150deg, rgba(139,123,255,.09), var(--surface-2));
border:1px solid var(--border-strong);
transition:border-color .3s ease;
}
.mus-sintonia.sonando{ border-color:rgba(139,123,255,.45); }
.mus-sintonia-cab{ display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.mus-sintonia-cab strong{ display:block; font-size:13px; color:var(--text); }
.mus-sintonia-cab span{ font-size:11.5px; color:var(--text-faint); }
/* Las cuatro barritas: quietas en pausa, bailando mientras suena */
.mus-sintonia-onda{ display:flex; align-items:flex-end; gap:2px; height:17px; flex:none; }
/* Se anima con transform y no con height: la altura no siempre se puede
interpolar y quedaba la barrita quieta. Con scaleY va suave y, de paso,
no obliga al navegador a recalcular la maquetación en cada fotograma. */
.mus-sintonia-onda i{
width:3px; height:17px; border-radius:2px; background:var(--violet); opacity:.45;
transform-origin:bottom; transform:scaleY(.3);
}
.mus-sintonia.sonando .mus-sintonia-onda i{
opacity:1; animation:sint-onda .9s ease-in-out infinite;
}
.mus-sintonia.sonando .mus-sintonia-onda i:nth-child(2){ animation-delay:.15s; }
.mus-sintonia.sonando .mus-sintonia-onda i:nth-child(3){ animation-delay:.3s; }
.mus-sintonia.sonando .mus-sintonia-onda i:nth-child(4){ animation-delay:.45s; }
@keyframes sint-onda{ 0%,100%{ transform:scaleY(.3); } 50%{ transform:scaleY(1); } }
.mus-sintonia-tema{ display:flex; align-items:center; gap:13px; }
.mus-sintonia-portada{
width:46px; height:46px; flex:none; border-radius:9px;
display:flex; align-items:center; justify-content:center; font-size:17px;
background:var(--surface-3); border:1px solid var(--border-strong); color:var(--text-faint);
background-size:cover; background-position:center;
}
.mus-sintonia-portada.con-foto span{ display:none; }
.mus-sintonia-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.mus-sintonia-txt strong{
font-size:13.5px; color:var(--text);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mus-sintonia-txt span{
font-size:11.5px; color:var(--text-faint);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mus-sintonia-tema .btn{ flex:none; }
@media (max-width:600px){
.mus-sintonia-tema{ flex-wrap:wrap; }
.mus-sintonia-tema .btn{ width:100%; }
}
/* --- Miniaturas: abrir un ticket (5) -------------------------------------
Cada una dibuja SU acomodo: una columna, dos columnas, escalones sobre un
raíl, anclado abajo o portada ancha. --- */
[class*="opt-soporteAbrir-"] i:nth-child(4){ display:none; }
/* Centrado: una columna en medio */
.opt-soporteAbrir-tarjeta i:nth-child(1){ left:40%; width:20%; top:5px; height:10px; border-radius:3px; background:var(--signal); opacity:.85; }
.opt-soporteAbrir-tarjeta i:nth-child(2){ left:22%; right:22%; top:20px; height:7px; border-radius:3px; opacity:.32;
box-shadow:0 11px 0 0 rgba(255,255,255,.16); }
.opt-soporteAbrir-tarjeta i:nth-child(3){ left:22%; right:22%; top:43px; height:7px; border-radius:99px; background:var(--signal); opacity:.9; }
/* Dos columnas: bloque teñido a la izquierda, campos a la derecha */
.opt-soporteAbrir-panel i:nth-child(1){ left:0; width:42%; top:0; bottom:0; height:auto; border-radius:0; opacity:1;
background:linear-gradient(160deg, color-mix(in srgb, var(--signal) 30%, transparent), transparent); }
.opt-soporteAbrir-panel i:nth-child(2){ left:48%; right:7%; top:9px; height:8px; border-radius:3px; opacity:.35;
box-shadow:0 12px 0 0 rgba(255,255,255,.16); }
.opt-soporteAbrir-panel i:nth-child(3){ left:48%; width:24%; top:36px; height:8px; border-radius:99px; background:var(--signal); opacity:.9; }
/* Escalones: raíl vertical y campos sangrados */
.opt-soporteAbrir-formulario i:nth-child(1){ left:16%; width:2px; top:8px; bottom:8px; height:auto; border-radius:2px; background:var(--signal); opacity:.5; }
.opt-soporteAbrir-formulario i:nth-child(2){ left:24%; right:8%; top:9px; height:7px; border-radius:2px; opacity:.32;
box-shadow:0 13px 0 0 rgba(255,255,255,.16); }
.opt-soporteAbrir-formulario i:nth-child(3){ left:24%; width:26%; top:37px; height:7px; border-radius:2px; background:var(--signal); opacity:.9; }
/* Anclado: texto arriba, campos pegados al borde de abajo */
.opt-soporteAbrir-cinta i:nth-child(1){ left:36%; width:28%; top:6px; height:8px; border-radius:3px; background:var(--signal); opacity:.7; }
.opt-soporteAbrir-cinta i:nth-child(2){ left:6%; right:6%; top:32px; height:7px; border-radius:99px; opacity:.3; }
.opt-soporteAbrir-cinta i:nth-child(3){ left:6%; right:6%; top:43px; height:7px; border-radius:99px; background:var(--signal); opacity:.9; }
/* Portada: banda ancha arriba y dos columnas debajo */
.opt-soporteAbrir-mostrador i:nth-child(1){ left:0; right:0; top:0; height:18px; border-radius:0; opacity:1;
background:linear-gradient(180deg, color-mix(in srgb, var(--signal) 34%, transparent), transparent); }
.opt-soporteAbrir-mostrador i:nth-child(2){ left:7%; width:38%; top:24px; height:7px; border-radius:3px; opacity:.35;
box-shadow:0 10px 0 0 rgba(255,255,255,.16); }
.opt-soporteAbrir-mostrador i:nth-child(3){ right:7%; width:38%; top:24px; height:17px; border-radius:3px; background:var(--signal); opacity:.45; }
/* --- Miniaturas: historial (5) --- */
[class*="opt-soporteHist-"] i:nth-child(4){ display:none; }
/* Lista: filas seguidas */
.opt-soporteHist-lista i:nth-child(1){ left:7%; right:7%; top:8px; height:10px; border-radius:3px; opacity:.3; }
.opt-soporteHist-lista i:nth-child(2){ left:7%; right:7%; top:21px; height:10px; border-radius:3px; opacity:.3; }
.opt-soporteHist-lista i:nth-child(3){ left:7%; right:7%; top:34px; height:10px; border-radius:3px; background:var(--signal); opacity:.55; }
/* Tarjetas: rejilla de dos */
.opt-soporteHist-tarjetas i:nth-child(1){ left:8%; width:38%; top:8px; height:17px; border-radius:4px; opacity:.32;
box-shadow:0 21px 0 0 rgba(255,255,255,.14); }
.opt-soporteHist-tarjetas i:nth-child(2){ right:8%; width:38%; top:8px; height:17px; border-radius:4px; background:var(--signal); opacity:.5; }
.opt-soporteHist-tarjetas i:nth-child(3){ right:8%; width:38%; top:29px; height:17px; border-radius:4px; opacity:.2; }
/* Línea: cronología con puntos */
.opt-soporteHist-linea i:nth-child(1){ left:11%; width:3px; top:6px; bottom:6px; height:auto; border-radius:2px; background:var(--signal); opacity:.4; }
.opt-soporteHist-linea i:nth-child(2){ left:8%; width:9px; height:9px; top:11px; border-radius:50%; background:var(--signal); opacity:1;
box-shadow:0 15px 0 0 var(--signal), 0 30px 0 0 rgba(255,255,255,.3); }
.opt-soporteHist-linea i:nth-child(3){ left:24%; right:8%; top:13px; height:6px; border-radius:2px; opacity:.3;
box-shadow:0 15px 0 0 rgba(255,255,255,.22), 0 30px 0 0 rgba(255,255,255,.14); }
/* Archivo: tabla apretada */
.opt-soporteHist-archivo i:nth-child(1){ left:0; right:0; top:6px; height:9px; border-radius:0; opacity:1;
background:color-mix(in srgb, var(--signal) 26%, transparent); }
.opt-soporteHist-archivo i:nth-child(2){ left:0; right:0; top:17px; height:8px; border-radius:0; opacity:.16;
box-shadow:0 10px 0 0 rgba(255,255,255,.1), 0 20px 0 0 rgba(255,255,255,.16); }
.opt-soporteHist-archivo i:nth-child(3){ left:46%; width:2px; top:6px; bottom:6px; height:auto; border-radius:0; opacity:.3; }
/* Plegado: una abierta, las demás cerradas */
.opt-soporteHist-plegado i:nth-child(1){ left:7%; right:7%; top:6px; height:19px; border-radius:4px; background:var(--signal); opacity:.42; }
.opt-soporteHist-plegado i:nth-child(2){ left:7%; right:7%; top:29px; height:7px; border-radius:3px; opacity:.28;
box-shadow:0 10px 0 0 rgba(255,255,255,.18); }
.opt-soporteHist-plegado i:nth-child(3){ right:11%; width:7px; height:7px; top:12px; border-radius:2px; opacity:.85; }
/* Papel: el quinto chat — sin cajas, solo texto sangrado */
.opt-soporteVista-papel i:nth-child(1){ left:8%; width:20%; top:7px; height:5px; border-radius:2px; background:var(--signal); opacity:.9; }
.opt-soporteVista-papel i:nth-child(2){ left:8%; right:20%; top:16px; height:5px; border-radius:2px; opacity:.28;
box-shadow:0 9px 0 0 rgba(255,255,255,.2); }
.opt-soporteVista-papel i:nth-child(3){ right:8%; width:20%; top:34px; height:5px; border-radius:2px; background:rgba(255,255,255,.7); opacity:.9;
box-shadow:0 9px 0 0 rgba(255,255,255,.22); }
/* ==========================================================================
RESCATE Y COPIAS — lo que solo importa el día que algo sale mal
========================================================================== */
.resc-caja{
margin-top:14px; padding:16px 18px; border-radius:var(--radius);
background:rgba(255,179,64,.07); border:1px solid rgba(255,179,64,.35);
}
.resc-aviso{ margin:0 0 12px; font-size:12.5px; line-height:1.6; color:var(--warn); }
.resc-caja .codigo-valor{ font-size:15px; letter-spacing:.06em; }
.resc-caja .btn.ghost{ margin-top:12px; }
.cop-lista{ display:flex; flex-direction:column; }
.cop-fila{
display:flex; align-items:center; gap:12px;
padding:11px 2px; border-bottom:1px solid var(--border);
}
.cop-fila:last-child{ border-bottom:none; }
.cop-ico{
width:30px; height:30px; flex:none; border-radius:8px;
display:flex; align-items:center; justify-content:center; font-size:14px;
background:var(--surface-3); border:1px solid var(--border-strong);
}
/* La más reciente se marca: es la que sirve si hay que restaurar */
.cop-fila.es-nueva .cop-ico{
background:rgba(94,234,212,.14); border-color:rgba(94,234,212,.45);
}
.cop-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cop-txt strong{ font-size:13px; color:var(--text); }
.cop-txt span{ font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); }
.cop-fila .btn{ flex:none; }
/* --- Miniaturas: de qué lado cae cada quien (5) --- */
[class*="opt-soporteLado-"] i:nth-child(4){ display:none; }
/* Cliente derecha: el del tema a la izquierda, el blanco a la derecha */
.opt-soporteLado-derecha i:nth-child(1){ left:8%; width:46%; top:8px; height:11px; border-radius:5px; background:var(--signal); opacity:.55; }
.opt-soporteLado-derecha i:nth-child(2){ right:8%; width:40%; top:24px; height:11px; border-radius:5px; background:rgba(255,255,255,.5); opacity:1; }
.opt-soporteLado-derecha i:nth-child(3){ left:8%; width:34%; top:40px; height:9px; border-radius:5px; background:var(--signal); opacity:.4; }
/* Cliente izquierda: al revés */
.opt-soporteLado-izquierda i:nth-child(1){ right:8%; width:46%; top:8px; height:11px; border-radius:5px; background:var(--signal); opacity:.55; }
.opt-soporteLado-izquierda i:nth-child(2){ left:8%; width:40%; top:24px; height:11px; border-radius:5px; background:rgba(255,255,255,.5); opacity:1; }
.opt-soporteLado-izquierda i:nth-child(3){ right:8%; width:34%; top:40px; height:9px; border-radius:5px; background:var(--signal); opacity:.4; }
/* Alterno: zigzag */
.opt-soporteLado-alterno i:nth-child(1){ left:8%; width:44%; top:8px; height:11px; border-radius:5px; background:var(--signal); opacity:.5; }
.opt-soporteLado-alterno i:nth-child(2){ right:8%; width:44%; top:24px; height:11px; border-radius:5px; background:rgba(255,255,255,.45); opacity:1; }
.opt-soporteLado-alterno i:nth-child(3){ left:8%; width:44%; top:40px; height:9px; border-radius:5px; background:var(--signal); opacity:.5; }
/* Plano: todos a la izquierda, escalonados */
.opt-soporteLado-plano i:nth-child(1){ left:8%; width:60%; top:8px; height:11px; border-radius:5px; background:var(--signal); opacity:.5; }
.opt-soporteLado-plano i:nth-child(2){ left:8%; width:52%; top:24px; height:11px; border-radius:5px; background:rgba(255,255,255,.45); opacity:1; }
.opt-soporteLado-plano i:nth-child(3){ left:8%; width:44%; top:40px; height:9px; border-radius:5px; background:var(--signal); opacity:.5; }
/* Ancho: filas completas con su filete */
.opt-soporteLado-ancho i:nth-child(1){ left:6%; right:6%; top:8px; height:11px; border-radius:2px; opacity:.22;
box-shadow:inset 3px 0 0 -1px var(--signal); }
.opt-soporteLado-ancho i:nth-child(2){ left:6%; right:6%; top:24px; height:11px; border-radius:2px; opacity:.3;
box-shadow:inset 3px 0 0 -1px rgba(255,255,255,.7); }
.opt-soporteLado-ancho i:nth-child(3){ left:6%; right:6%; top:40px; height:9px; border-radius:2px; opacity:.22;
box-shadow:inset 3px 0 0 -1px var(--signal); }
/* --- Clientes: suspensión y acciones de la ficha --- */
.cli-chip{ margin-left:8px; vertical-align:middle; }
tr.es-suspendido td{ opacity:.55; }
tr.es-suspendido strong{ text-decoration:line-through; }
.cli-suspendido{
padding:14px 16px; margin-bottom:14px; border-radius:var(--radius);
background:rgba(255,77,94,.08); border:1px solid rgba(255,77,94,.35);
}
.cli-suspendido strong{ display:block; font-size:13px; color:var(--danger); margin-bottom:6px; }
.cli-suspendido p{ margin:0 0 4px; font-size:12.5px; line-height:1.6; color:var(--text-dim); }
.cli-suspendido p:last-child{ margin-bottom:0; }
.cli-acciones{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:10px; }
/* ==========================================================================
STOCK — inventario de cuentas
========================================================================== */
.st-tabs{
display:flex; gap:4px; padding:4px; margin:0 0 20px;
border-radius:99px; width:fit-content; max-width:100%; flex-wrap:wrap;
background:var(--surface-3); border:1px solid var(--border);
}
.st-tab{
display:inline-flex; align-items:center; gap:8px;
padding:8px 18px; border-radius:99px; cursor:pointer;
font-family:inherit; font-size:12.5px;
background:none; border:none; color:var(--text-dim);
transition:background .15s ease, color .15s ease;
}
.st-tab:hover{ color:var(--text); }
.st-tab.activa{ background:var(--surface); color:var(--text); font-weight:600; }
.st-tab-num{
min-width:19px; padding:1px 6px; border-radius:99px;
font-family:var(--font-display); font-size:10px; font-weight:700; line-height:1.6;
background:var(--violet); color:#0d0a1f;
}
.st-panel{ display:none; }
.st-panel.activo{ display:block; animation:aj-entra .3s cubic-bezier(.16,1,.3,1); }
.st-form{ display:flex; flex-direction:column; }
.st-form textarea{
width:100%; margin:0 0 6px; resize:vertical;
font-family:var(--font-mono); font-size:12.5px; line-height:1.6;
}
.st-select{
padding:10px 12px; border-radius:var(--radius-sm);
background:var(--surface-2); color:var(--text);
border:1px solid var(--border-strong); font-family:inherit; font-size:13px;
}
.st-select.ancho{ width:100%; margin-bottom:6px; }
/* Soltar los .txt */
.st-soltar{
display:flex; flex-direction:column; align-items:center; gap:6px;
padding:26px 20px; margin-bottom:10px; text-align:center;
border-radius:var(--radius);
background:var(--surface-2); border:1px dashed var(--border-strong);
transition:border-color .16s ease, background .16s ease;
}
.st-soltar.encima{
border-color:var(--blue); background:rgba(79,214,255,.07);
}
.st-soltar-ico{ font-size:26px; }
.st-soltar p{ margin:0; font-size:13px; color:var(--text-dim); }
.st-enlace{
background:none; border:none; padding:0; cursor:pointer;
font-family:inherit; font-size:13px; color:var(--blue); text-decoration:underline;
}
.st-contador{ margin-bottom:12px; font-size:12px; color:var(--text-faint); }
.st-contador.tiene{ color:var(--ok); font-weight:600; }
/* La key: se dicta por teléfono, así que grande y monoespaciada */
.st-key{
display:inline-block; padding:3px 9px; border-radius:6px;
font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.04em;
background:rgba(79,214,255,.12); border:1px solid rgba(79,214,255,.4); color:var(--blue);
}
/* La cuenta va tapada: esta tabla se mira con gente delante */
.st-cuenta{
padding:4px 10px; border-radius:6px; cursor:pointer;
font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
background:var(--surface-3); border:1px solid var(--border); color:var(--text-faint);
transition:color .15s ease, border-color .15s ease;
}
.st-cuenta:hover{ border-color:var(--border-strong); }
.st-cuenta.vista{ color:var(--text); letter-spacing:0; border-color:var(--warn); }
.st-orden{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); }
/* Cómo quedó el reparto */
.st-reparto{ margin-top:16px; }
.st-reparto h4{ margin:0 0 10px; font-size:13.5px; color:var(--text); }
.st-reparto-fila{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
padding:10px 12px; border-bottom:1px solid var(--border);
font-size:12.5px;
}
.st-reparto-fila:last-child{ border-bottom:none; }
.st-reparto-fila strong{ flex:none; min-width:130px; color:var(--text); }
.st-reparto-mov{ font-family:var(--font-mono); color:var(--text-faint); }
.st-reparto-fila.recibio .st-reparto-mov{ color:var(--ok); }
.st-reparto-pedian{
padding:2px 8px; border-radius:99px; font-size:10.5px;
background:rgba(139,123,255,.14); border:1px solid rgba(139,123,255,.4); color:var(--violet);
}
/* Solicitudes */
.st-solicitudes{ display:flex; flex-direction:column; }
.st-sol{
display:flex; align-items:center; gap:12px;
padding:11px 4px; border-bottom:1px solid var(--border);
}
.st-sol:last-child{ border-bottom:none; }
.st-sol.atendida{ opacity:.5; }
.st-sol-ico{
width:30px; height:30px; flex:none; border-radius:9px;
display:flex; align-items:center; justify-content:center; font-size:14px;
background:var(--surface-3); border:1px solid var(--border-strong);
}
.st-sol-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.st-sol-txt strong{ font-size:13px; color:var(--text); }
.st-sol-txt span{ font-size:11.5px; color:var(--text-faint); }
@media (max-width:760px){
/* Repartirlas a partes iguales dejaba «Añadir stock» en dos lineas dentro
de su pastilla. Mejor que no se parta ninguna y que la tira se deslice
de lado si no caben todas. */
.st-tabs{
width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.st-tabs::-webkit-scrollbar{ display:none; }
.st-tab{ flex:none; justify-content:center; padding:8px 13px; white-space:nowrap; }
.st-reparto-fila strong{ min-width:0; flex:1 1 100%; }
}
/* ==========================================================================
STOCK — segunda pasada: pasos numerados, barra de tipo y plan de reparto
========================================================================== */
.panel.st-ancho{ max-width:820px; }
/* Los tres pasos de "añadir": el número a la izquierda y su contenido al lado,
igual que los pasos de la app de Spotify. Se lee de arriba abajo. */
.st-paso{
display:flex; gap:16px;
padding:20px 0; border-bottom:1px solid var(--border);
}
.st-paso:first-child{ padding-top:4px; }
.st-paso:last-of-type{ border-bottom:none; }
.st-paso-n{
width:28px; height:28px; flex:none; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-size:12.5px; font-weight:700;
background:rgba(79,214,255,.13); border:1px solid rgba(79,214,255,.42); color:var(--blue);
}
.st-paso-cuerpo{ flex:1; min-width:0; }
.st-opcional{
margin-left:7px; padding:1px 7px; border-radius:99px;
font-size:9.5px; letter-spacing:.05em; text-transform:none;
background:var(--surface-3); border:1px solid var(--border); color:var(--text-faint);
}
/* La barra que dice qué elegiste. El color es el mensaje: verde va directo,
rojo hay que decidir algo más. */
.st-tipo{
display:flex; align-items:center; gap:12px;
margin:10px 0 4px; padding:12px 14px; border-radius:var(--radius-sm);
border:1px solid var(--tono-b); background:var(--tono-f);
}
.st-tipo.es-suelto{ --tono-b:rgba(94,234,212,.45); --tono-f:rgba(94,234,212,.09); --tono:var(--ok); }
.st-tipo.es-categoria{ --tono-b:rgba(255,77,94,.45); --tono-f:rgba(255,77,94,.09); --tono:var(--danger); }
.st-tipo-punto{
width:11px; height:11px; flex:none; border-radius:50%;
background:var(--tono); box-shadow:0 0 12px -2px var(--tono);
}
.st-tipo-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.st-tipo-txt strong{ font-size:13px; color:var(--tono); }
.st-tipo-txt span{ font-size:12px; color:var(--text-dim); }
/* Comprobante o cupón: dos tarjetas, y solo una puede estar elegida */
.st-origen{ margin-top:16px; }
.st-origen-elige{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.st-origen-btn{
flex:1; min-width:150px;
display:flex; flex-direction:column; align-items:flex-start; gap:2px;
padding:13px 15px; border-radius:var(--radius-sm); cursor:pointer;
font-family:inherit; text-align:left;
background:var(--surface-2); border:1px solid var(--border);
transition:border-color .15s ease, background .15s ease;
}
.st-origen-btn:hover{ border-color:var(--border-strong); }
.st-origen-btn.elegido{
border-color:var(--blue); background:rgba(79,214,255,.08);
}
.st-origen-btn span{ font-size:18px; line-height:1; }
.st-origen-btn strong{ font-size:13px; color:var(--text); }
.st-origen-btn small{ font-size:11px; color:var(--text-faint); }
.st-origen-campo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#st-comprobante-vista{
max-width:120px; max-height:90px; border-radius:9px;
border:1px solid var(--border-strong);
}
.st-guardar{ width:100%; margin-top:16px; padding:13px; font-size:14px; }
/* --- El plan de reparto, antes de tocar nada --- */
.st-plan{
margin:16px 0; padding:18px 20px; border-radius:var(--radius);
background:var(--surface-2); border:1px solid var(--border-strong);
animation:aj-entra .3s cubic-bezier(.16,1,.3,1);
}
.st-plan-aviso{ font-size:13px; line-height:1.65; color:var(--text-dim); }
.st-plan-cab{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.st-plan-cab strong{ font-size:16px; color:var(--blue); }
.st-plan-cab span{ font-size:12.5px; color:var(--text-faint); }
.st-plan-fila{
display:flex; align-items:center; gap:12px;
padding:8px 0; font-size:12.5px;
}
.st-plan-fila strong{ flex:none; width:130px; color:var(--text);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* La barra: lo que ya tenía en gris, lo que recibe en color */
.st-plan-barra{
flex:1; min-width:60px; height:9px; display:flex; gap:2px;
border-radius:99px; overflow:hidden; background:var(--surface-3);
}
.st-plan-tenia{ background:var(--text-faint); opacity:.5; }
.st-plan-nuevo{ background:linear-gradient(90deg, var(--blue), var(--blue-2)); }
.st-plan-num{
flex:none; min-width:74px; text-align:right;
font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim);
}
.st-plan-nota{
margin:14px 0 0; padding-top:12px; border-top:1px solid var(--border);
font-size:12px; line-height:1.6; color:var(--text-faint);
}
@media (max-width:760px){
.st-paso{ flex-direction:column; gap:10px; }
.st-plan-fila{ flex-wrap:wrap; }
.st-plan-fila strong{ width:auto; flex:1 1 100%; }
}
/* ==========================================================================
STOCK — centrado y mandos del reparto
========================================================================== */
/* Toda la sección centrada y con un ancho de lectura. Antes se pegaba al
borde izquierdo y en una pantalla ancha quedaba todo el hueco a la derecha:
la vista se leía como si estuviera rota. */
.view[data-view="stock"] > *{
max-width:1080px;
margin-inline:auto;
width:100%;
}
.view[data-view="stock"] .st-tabs{ margin-inline:auto; }
.panel.st-ancho{ max-width:860px; margin-inline:auto; }
/* --- Los mandos de cada tienda --- */
.st-plan-fila{
display:flex; align-items:center; gap:14px;
padding:11px 0; border-bottom:1px solid var(--border);
font-size:12.5px;
}
.st-plan-fila:last-of-type{ border-bottom:none; }
.st-plan-nom{ flex:none; width:150px; display:flex; flex-direction:column; gap:2px; }
.st-plan-nom strong{
font-size:13px; color:var(--text);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.st-plan-piden{
font-size:10.5px; color:var(--violet);
}
.st-plan-barra{
flex:1; min-width:60px; height:10px; display:flex;
border-radius:99px; overflow:hidden; background:var(--surface-3);
}
.st-plan-tenia{ background:var(--text-faint); opacity:.45; transition:width .22s ease; }
.st-plan-nuevo{
background:linear-gradient(90deg, var(--blue), var(--blue-2));
transition:width .22s ease;
}
/* Lo que esta tienda pierde en este reparto: se ve de donde sale lo movido */
.st-plan-fuga{
background:repeating-linear-gradient(45deg,
rgba(255,92,122,.85) 0 4px, rgba(255,92,122,.35) 4px 8px);
transition:width .22s ease;
}
.st-plan-mandos{
flex:none; display:flex; align-items:center; gap:6px;
padding:3px; border-radius:99px;
background:var(--surface-3); border:1px solid var(--border);
}
.st-plan-btn{
width:26px; height:26px; flex:none; border-radius:50%; cursor:pointer;
display:flex; align-items:center; justify-content:center;
font-family:inherit; font-size:15px; line-height:1;
background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.st-plan-btn:hover:not(:disabled){
border-color:var(--blue); color:var(--blue); background:rgba(79,214,255,.09);
}
.st-plan-btn:disabled{ opacity:.3; cursor:not-allowed; }
.st-plan-recibe{
min-width:34px; text-align:center;
font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--blue);
}
.st-plan-num{
flex:none; min-width:70px; text-align:right;
font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim);
}
/* Cuánto queda sin colocar: en ámbar si sobra algo */
.st-plan-resto{
margin-left:auto; padding:3px 10px; border-radius:99px;
font-size:11px;
background:rgba(94,234,212,.13); border:1px solid rgba(94,234,212,.4); color:var(--ok);
}
.st-plan-resto.sobra{
background:rgba(255,179,64,.13); border-color:rgba(255,179,64,.42); color:var(--warn);
}
.st-plan-pie{
display:flex; gap:9px; flex-wrap:wrap;
margin-top:14px; padding-top:14px; border-top:1px solid var(--border);
}
@media (max-width:760px){
.st-plan-fila{ flex-wrap:wrap; gap:10px; }
.st-plan-nom{ width:auto; flex:1 1 100%; }
.st-plan-barra{ order:5; flex:1 1 100%; }
.st-plan-num{ text-align:left; }
}
/* ==========================================================================
STOCK — aire entre bloques
Estaban todos pegados: las tarjetas, las pestañas y el panel se leían como
un solo bloque. Cada cosa necesita su hueco para que se vea dónde termina
una y empieza la otra.
========================================================================== */
.view[data-view="stock"] .grid-stats{ margin-bottom:32px; }
.view[data-view="stock"] .st-tabs{ margin-bottom:26px; }
.view[data-view="stock"] .st-panel .panel{ margin-bottom:0; }
.view[data-view="stock"] .panel-head{ margin-bottom:20px; }
.view[data-view="stock"] .panel{ padding:26px 28px; }
/* La cabecera de "Cuentas guardadas": el selector y el botón en una fila,
no uno debajo del otro como estaban */
.view[data-view="stock"] .panel-acciones{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.view[data-view="stock"] .panel-acciones .st-select{ min-width:220px; }
/* Cuando todavía no se ha elegido producto */
.st-elige{
display:flex; flex-direction:column; align-items:center; gap:12px;
padding:52px 24px; text-align:center;
border-radius:var(--radius);
background:var(--surface-2); border:1px dashed var(--border-strong);
}
.st-elige-ico{
display:flex; align-items:center; justify-content:center;
width:50px; height:50px; border-radius:15px; font-size:22px;
background:var(--surface-3); border:1px solid var(--border-strong);
}
.st-elige p{ margin:0; max-width:340px; font-size:13px; line-height:1.6; color:var(--text-dim); }
/* ==========================================================================
DESPLEGABLES — que no parezcan del sistema operativo
El