/* =============================================================================
   On Video - paneles (area de clientes y administracion)
   =============================================================================
   Mismo lenguaje visual que la web: claro por defecto, oscuro opcional, todo
   en variables. El admin cambia solo el acento (violeta) para que nunca se
   confunda con el area de clientes cuando uno tiene las dos abiertas.
   ========================================================================== */

:root {
  --fondo:          #f4f6fb;
  --panel:          #ffffff;
  --panel-2:        #f8fafc;
  --panel-3:        #f1f5f9;
  --borde:          rgba(15, 23, 42, .08);
  --borde-fuerte:   rgba(15, 23, 42, .14);
  --texto:          #0b1220;
  --texto-suave:    #475569;
  --texto-tenue:    #8391a7;

  --acento:         #0891b2;
  --acento-2:       #2563eb;
  --acento-suave:   rgba(37, 99, 235, .09);
  --degradado:      linear-gradient(125deg, #06b6d4 0%, #2563eb 55%, #7c3aed 100%);

  --ok:             #059669;
  --pend:           #d97706;
  --error:          #dc2626;
  --info:           #2563eb;

  --lateral-fondo:  #ffffff;
  --sombra:         0 20px 50px -24px rgba(15, 23, 42, .25);
  --sombra-suave:   0 8px 24px -16px rgba(15, 23, 42, .2);
  --radio:          16px;
  --lateral:        272px;
  --transicion:     .3s cubic-bezier(.4, 0, .2, 1);
  --suave:          cubic-bezier(.16, 1, .3, 1);
}

/* Acento del administrador. */
.pnl--admin, .acceso--admin {
  --acento:       #7c3aed;
  --acento-2:     #6366f1;
  --acento-suave: rgba(124, 58, 237, .09);
  --degradado:    linear-gradient(125deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
}

[data-theme="dark"] {
  --fondo:          #070d1a;
  --panel:          #0f1a2f;
  --panel-2:        #0c1628;
  --panel-3:        #13213a;
  --borde:          rgba(148, 178, 226, .12);
  --borde-fuerte:   rgba(148, 178, 226, .2);
  --texto:          #e8eefb;
  --texto-suave:    #a3b3cd;
  --texto-tenue:    #6b7d9c;
  --acento:         #22d3ee;
  --acento-suave:   rgba(34, 211, 238, .1);
  --ok:             #34d399;
  --pend:           #fbbf24;
  --error:          #f87171;
  --info:           #60a5fa;
  --lateral-fondo:  #0b1526;
  --sombra:         0 20px 50px -20px rgba(0, 0, 0, .7);
  --sombra-suave:   0 8px 24px -14px rgba(0, 0, 0, .6);
}
[data-theme="dark"] .pnl--admin, [data-theme="dark"] .acceso--admin { --acento: #a78bfa; --acento-suave: rgba(167, 139, 250, .12); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 15px/1.6 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color .4s, color .4s;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.02em; }
p { margin: 0; }
img { max-width: 100%; display: block; }
.icono { flex-shrink: 0; }
.tenue { color: var(--texto-tenue); }
.suave { color: var(--texto-suave); }
.mono { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .92em; }
.derecha { text-align: right; }
.oculto { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ================================================================ lateral === */

.lateral {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--lateral);
  display: flex; flex-direction: column; padding: 20px 16px;
  background: var(--lateral-fondo); border-right: 1px solid var(--borde);
  transition: transform .45s var(--suave), background-color .4s;
}
.lateral__marca { display: flex; align-items: center; gap: 11px; padding: 6px 10px 22px; font-weight: 700; font-size: 18px; }
.lateral__logo {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff;
  background: var(--degradado); box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .55);
}
.lateral__area { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }

.lateral__nav { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.lateral__grupo { margin: 18px 12px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); }
.lateral__grupo:first-child { margin-top: 0; }

.lateral__enlace {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin: 2px 0; border-radius: 12px;
  color: var(--texto-suave); font-weight: 500;
  transition: background-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.lateral__enlace:hover { background: var(--panel-3); color: var(--texto); transform: translateX(2px); }
.lateral__enlace.es-actual { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
/* Barra que marca la seccion actual, entra desde arriba. */
.lateral__enlace.es-actual::before {
  content: ''; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px;
  background: var(--degradado); animation: marcador .5s var(--suave);
}
@keyframes marcador { from { transform: scaleY(0); } }
.lateral__contador {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; display: grid; place-items: center;
  border-radius: 99px; font-size: 12px; font-weight: 700; color: #fff; background: var(--degradado);
  animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido { 50% { transform: scale(1.08); } }

.lateral__pie {
  margin-top: 14px; padding: 16px; border-radius: 16px; position: relative; overflow: hidden;
  background: var(--degradado); color: #fff;
}
.lateral__pie::after { content: ''; position: absolute; width: 140px; height: 140px; border-radius: 50%; right: -50px; top: -50px; background: rgba(255, 255, 255, .15); }
.lateral__pie b { display: block; font-size: 15px; margin-bottom: 2px; }
.lateral__pie span { font-size: 13px; opacity: .88; }
.lateral__pie a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; font-size: 13.5px; }

/* ============================================================== superior === */

.principal { margin-left: var(--lateral); min-height: 100vh; display: flex; flex-direction: column; }
.superior {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  height: 70px; padding: 0 28px;
  background: color-mix(in srgb, var(--fondo) 78%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
.superior__titulo { font-weight: 600; font-size: 16px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.superior__espacio { flex: 1; }

.btn-icono {
  position: relative; width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--borde-fuerte); background: var(--panel); color: var(--texto);
  cursor: pointer; overflow: hidden; transition: transform var(--transicion), border-color var(--transicion);
}
.btn-icono:hover { transform: translateY(-1px); border-color: var(--acento); }
.menu-movil { display: none; }

/* La animacion va en los span (no en el svg): un span transformado pasa a ser
   el contenedor del svg, y el icono quedaba corrido fuera del boton. */
.tema { position: relative; overflow: hidden; }
.tema > span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .6s var(--suave), opacity .35s; }
.tema .tema-sol { color: #f59e0b; }
.tema .tema-luna { color: #818cf8; opacity: 0; transform: translateY(22px) rotate(-60deg); }
[data-theme="dark"] .tema .tema-sol { opacity: 0; transform: translateY(-22px) rotate(90deg); }
[data-theme="dark"] .tema .tema-luna { opacity: 1; transform: none; }

.usuario { position: relative; }
.usuario__boton {
  display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 14px;
  border: 1px solid var(--borde-fuerte); background: var(--panel); color: var(--texto); cursor: pointer; font: inherit;
  transition: border-color var(--transicion);
}
.usuario__boton:hover { border-color: var(--acento); }
.avatar {
  width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px;
  font-weight: 700; font-size: 13px; color: #fff; background: var(--degradado);
}
.avatar--grande { width: 64px; height: 64px; border-radius: 18px; font-size: 22px; }
.usuario__nombre { font-weight: 600; font-size: 14px; line-height: 1.1; text-align: left; }
.usuario__rol { display: block; font-size: 12px; color: var(--texto-tenue); font-weight: 500; }
.usuario__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 8px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--borde-fuerte); box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top right;
  transition: opacity .2s, transform .25s var(--suave), visibility .2s;
}
.usuario.esta-abierto .usuario__menu { opacity: 1; visibility: visible; transform: none; }
.usuario__menu a, .usuario__menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px;
  color: var(--texto-suave); font: inherit; background: none; border: 0; cursor: pointer; text-align: left;
}
.usuario__menu a:hover, .usuario__menu button:hover { background: var(--panel-3); color: var(--texto); }
.usuario__menu hr { border: 0; border-top: 1px solid var(--borde); margin: 6px 0; }
.usuario__correo { padding: 8px 12px; font-size: 13px; color: var(--texto-tenue); word-break: break-all; }

.suplantando {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px; background: linear-gradient(90deg, #7c3aed, #db2777); color: #fff; font-size: 14px; font-weight: 500;
}
.suplantando a { padding: 4px 12px; border-radius: 8px; background: rgba(255, 255, 255, .2); font-weight: 600; }

/* ============================================================= contenido === */

.contenido { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 30px 28px 60px; }

/* Todo lo de la pagina entra escalonado. */
.contenido > * { animation: subir .7s var(--suave) both; }
.contenido > *:nth-child(2) { animation-delay: .06s; }
.contenido > *:nth-child(3) { animation-delay: .12s; }
.contenido > *:nth-child(4) { animation-delay: .18s; }
.contenido > *:nth-child(5) { animation-delay: .24s; }
.contenido > *:nth-child(n+6) { animation-delay: .3s; }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }

.cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.cabeza h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; }
.cabeza p { color: var(--texto-suave); margin-top: 6px; }
.cabeza__acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.volver { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--texto-tenue); margin-bottom: 8px; transition: color var(--transicion), transform var(--transicion); }
.volver:hover { color: var(--acento); transform: translateX(-3px); }

/* Bienvenida con degradado en el inicio del cliente. */
.bienvenida {
  position: relative; overflow: hidden; isolation: isolate; margin-bottom: 26px;
  padding: 30px 32px; border-radius: 22px; color: #fff; background: var(--degradado); box-shadow: var(--sombra);
}
.bienvenida::before, .bienvenida::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.bienvenida::before { width: 280px; height: 280px; right: -60px; top: -120px; animation: flotar 12s ease-in-out infinite; }
.bienvenida::after { width: 180px; height: 180px; right: 180px; bottom: -110px; animation: flotar 15s ease-in-out infinite reverse; }
@keyframes flotar { 50% { transform: translate(-20px, 16px) scale(1.06); } }
.bienvenida h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-bottom: 6px; }
.bienvenida p { opacity: .92; max-width: 620px; }
.bienvenida .cabeza__acciones { margin-top: 18px; }
.bienvenida .boton--fantasma { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #fff; }
.bienvenida .boton--blanco { background: #fff; color: var(--acento-2); }

/* ================================================================ tarjetas == */

.grilla { display: grid; gap: 20px; }
.grilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grilla--lateral { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.grilla--lateral-izq { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
.pila { display: grid; gap: 20px; }

.tarjeta {
  position: relative; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-suave); transition: box-shadow .4s var(--suave), transform .4s var(--suave), border-color var(--transicion), background-color .4s;
}
.tarjeta--viva:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--borde-fuerte); }
.tarjeta__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--borde); }
.tarjeta__cabeza h2, .tarjeta__cabeza h3 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.tarjeta__cabeza a { font-size: 13.5px; color: var(--acento); font-weight: 600; }
.tarjeta__cuerpo { padding: 22px; }
.tarjeta__cuerpo--sin { padding: 0; }
.tarjeta__pie { padding: 16px 22px; border-top: 1px solid var(--borde); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ------------------------------------------------------------------- kpis */

.kpis { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 22px; }
.kpi {
  position: relative; overflow: hidden; padding: 20px 22px; border-radius: var(--radio);
  background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra-suave);
  transition: transform .4s var(--suave), box-shadow .4s var(--suave);
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.kpi::after {
  content: ''; position: absolute; width: 130px; height: 130px; right: -40px; top: -40px; border-radius: 50%;
  background: var(--acento-suave); transition: transform .6s var(--suave);
}
.kpi:hover::after { transform: scale(1.3); }
.kpi__icono { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--degradado); margin-bottom: 14px; position: relative; z-index: 1; }
.kpi__icono--ok { background: linear-gradient(135deg, #10b981, #059669); }
.kpi__icono--pend { background: linear-gradient(135deg, #f59e0b, #d97706); }
.kpi__icono--rosa { background: linear-gradient(135deg, #ec4899, #db2777); }
.kpi__valor { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; position: relative; z-index: 1; }
.kpi__texto { font-size: 13.5px; color: var(--texto-tenue); position: relative; z-index: 1; }

/* ================================================================== botones == */

.boton {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 14.5px; white-space: nowrap;
  transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton:active { transform: scale(.98); }
.boton--principal { color: #fff; background: var(--degradado); box-shadow: 0 10px 24px -12px rgba(37, 99, 235, .7); }
.boton--principal:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(37, 99, 235, .8); }
.boton--fantasma { color: var(--texto); background: var(--panel); border-color: var(--borde-fuerte); }
.boton--fantasma:hover { border-color: var(--acento); color: var(--acento); }
.boton--peligro { color: var(--error); background: color-mix(in srgb, var(--error) 8%, transparent); border-color: color-mix(in srgb, var(--error) 30%, transparent); }
.boton--peligro:hover { background: var(--error); color: #fff; }
.boton--ok { color: #fff; background: linear-gradient(135deg, #10b981, #059669); }
.boton--chico { padding: 7px 13px; font-size: 13.5px; border-radius: 10px; }
.boton--bloque { width: 100%; }
.boton[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
/* Onda al hacer clic: el JS agrega el span en el punto tocado. */
.onda { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .45); animation: onda .6s ease-out; pointer-events: none; }
.boton--fantasma .onda { background: var(--acento-suave); }
@keyframes onda { to { transform: scale(4); opacity: 0; } }

/* ================================================================== tablas == */

.tabla-envoltura { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla th {
  text-align: left; padding: 12px 18px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-tenue); background: var(--panel-2); border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tabla td { padding: 14px 18px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background-color var(--transicion); }
.tabla tbody tr:hover { background: var(--panel-2); }
.tabla tr[data-href] { cursor: pointer; }
.tabla__principal { font-weight: 600; }
.tabla__sub { display: block; font-size: 13px; color: var(--texto-tenue); }

.insignia {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.insignia::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.insignia--ok     { color: var(--ok);    background: color-mix(in srgb, var(--ok) 12%, transparent); }
.insignia--pend   { color: var(--pend);  background: color-mix(in srgb, var(--pend) 13%, transparent); }
.insignia--error  { color: var(--error); background: color-mix(in srgb, var(--error) 11%, transparent); }
.insignia--info   { color: var(--info);  background: color-mix(in srgb, var(--info) 11%, transparent); }
.insignia--neutro { color: var(--texto-suave); background: var(--panel-3); }
.insignia--pend::before { animation: parpadeo 1.6s ease-in-out infinite; }
@keyframes parpadeo { 50% { opacity: .3; } }

/* ============================================================= formularios == */

.formulario { display: grid; gap: 18px; }
.filas { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filas .ancho { grid-column: 1 / -1; }
.campo { display: grid; gap: 7px; }
.campo__etiqueta { font-size: 13.5px; font-weight: 600; color: var(--texto-suave); }
.campo__ayuda { font-size: 12.5px; color: var(--texto-tenue); }
.campo input:not([type=checkbox]):not([type=radio]):not([type=file]), .campo select, .campo textarea {
  width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--borde-fuerte);
  background: var(--panel-2); color: var(--texto); font: inherit; font-size: 14.5px;
  transition: border-color var(--transicion), box-shadow var(--transicion), background-color .4s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave);
}
.campo textarea { resize: vertical; min-height: 110px; }
/* Campo y boton comparten la fila 2 de la grilla: una ayuda debajo ya no
   corre el ojo fuera del campo. */
.campo--clave > input { grid-row: 2; grid-column: 1; padding-right: 46px; }
.campo--clave button { grid-row: 2; grid-column: 1; justify-self: end; align-self: center; margin-right: 8px; width: 30px; height: 30px; border: 0; background: none; color: var(--texto-tenue); cursor: pointer; border-radius: 8px; }
.campo--clave button:hover { color: var(--acento); background: var(--panel-3); }

/* Interruptor si/no, sobre un checkbox real (accesible con teclado). */
.interruptor { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor__pista {
  flex-shrink: 0; width: 44px; height: 25px; border-radius: 99px; background: var(--borde-fuerte); position: relative; margin-top: 1px;
  transition: background-color var(--transicion);
}
.interruptor__pista::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .35s var(--suave);
}
.interruptor input:checked + .interruptor__pista { background: var(--degradado); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(19px); }
.interruptor input:focus-visible + .interruptor__pista { box-shadow: 0 0 0 4px var(--acento-suave); }
.interruptor b { display: block; font-size: 14.5px; }
.interruptor small { color: var(--texto-tenue); font-size: 12.5px; }

/* Opciones grandes tipo tarjeta (medios de pago, prioridades). */
.opciones { display: grid; gap: 12px; }
.opcion { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--borde-fuerte); background: var(--panel); transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion); }
.opcion:hover { transform: translateY(-2px); }
.opcion input { position: absolute; opacity: 0; }
.opcion__marca { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--borde-fuerte); transition: border-color var(--transicion), border-width var(--transicion); }
.opcion:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.opcion:has(input:checked) .opcion__marca { border: 6px solid var(--acento); }
.opcion__texto b { display: block; }
.opcion__texto small { color: var(--texto-tenue); }
.opcion__precio { margin-left: auto; font-weight: 800; font-size: 17px; }

/* Zona para soltar archivos. */
.zona-archivo {
  display: grid; place-items: center; gap: 8px; padding: 30px 20px; border-radius: 14px; text-align: center; cursor: pointer;
  border: 2px dashed var(--borde-fuerte); background: var(--panel-2); color: var(--texto-suave);
  transition: border-color var(--transicion), background-color var(--transicion);
}
.zona-archivo:hover, .zona-archivo.esta-encima { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); }
.zona-archivo input { display: none; }
.zona-archivo b { color: var(--texto); }

/* ================================================================ pestanas == */

.pestanas { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: var(--panel-3); margin-bottom: 22px; overflow-x: auto; width: fit-content; max-width: 100%; }
.pestanas a { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; color: var(--texto-suave); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background-color var(--transicion), color var(--transicion); }
.pestanas a:hover { color: var(--texto); }
.pestanas a.es-actual { background: var(--panel); color: var(--acento); box-shadow: var(--sombra-suave); }

.pestanas-v { display: grid; gap: 4px; }
.pestanas-v a { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; color: var(--texto-suave); font-weight: 600; transition: background-color var(--transicion), color var(--transicion); }
.pestanas-v a:hover { background: var(--panel); color: var(--texto); }
.pestanas-v a.es-actual { background: var(--panel); color: var(--acento); box-shadow: var(--sombra-suave); }

/* =================================================================== avisos == */

.avisos { position: fixed; top: 84px; right: 22px; z-index: 60; display: grid; gap: 10px; width: min(380px, calc(100vw - 44px)); }
.aviso {
  display: flex; align-items: flex-start; gap: 11px; padding: 14px 16px; border-radius: 14px; font-size: 14.5px;
  background: var(--panel); border: 1px solid var(--borde-fuerte); box-shadow: var(--sombra);
  animation: aviso-entra .6s var(--suave) both;
}
.aviso.se-va { animation: aviso-sale .4s ease forwards; }
@keyframes aviso-entra { from { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes aviso-sale { to { opacity: 0; transform: translateX(40px); } }
.aviso__icono { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; color: #fff; }
.aviso--ok .aviso__icono { background: var(--ok); }
.aviso--error .aviso__icono { background: var(--error); }
.aviso--info .aviso__icono { background: var(--info); }
.aviso button { margin-left: auto; background: none; border: 0; color: var(--texto-tenue); cursor: pointer; padding: 0; }

.nota { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; font-size: 14.5px; }
.nota--info { background: color-mix(in srgb, var(--info) 9%, transparent); color: var(--info); }
.nota--pend { background: color-mix(in srgb, var(--pend) 10%, transparent); color: var(--pend); }
.nota--ok { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); }
.nota--error { background: color-mix(in srgb, var(--error) 9%, transparent); color: var(--error); }
.nota p, .nota div { color: var(--texto-suave); }
.nota b { color: var(--texto); }

/* ==================================================================== vacio == */

.vacio { display: grid; place-items: center; gap: 10px; text-align: center; padding: 44px 20px; }
.vacio__icono {
  width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px; color: var(--acento);
  background: var(--acento-suave); animation: flota 5s ease-in-out infinite;
}
@keyframes flota { 50% { transform: translateY(-8px); } }
.vacio h3 { font-size: 17px; }
.vacio p { color: var(--texto-tenue); max-width: 360px; }

/* ================================================================ servicios == */

.servicio { position: relative; overflow: hidden; padding: 24px; }
.servicio__cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.servicio__logo { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: var(--degradado); box-shadow: 0 10px 24px -12px rgba(37, 99, 235, .7); }
.servicio__cabeza h3 { font-size: 18px; }
.clave-licencia {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--panel-2); border: 1px dashed var(--borde-fuerte);
}
.clave-licencia code { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: 14.5px; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; }
.dato-lista { display: grid; gap: 10px; margin: 16px 0; }
.dato-lista div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.dato-lista dt, .dato-lista span:first-child { color: var(--texto-tenue); }

/* ================================================================ descargas == */

.descarga { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.descarga__icono { width: 54px; height: 54px; flex-shrink: 0; display: grid; place-items: center; border-radius: 16px; color: #fff; }
.descarga__icono--windows { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.descarga__icono--android { background: linear-gradient(135deg, #22c55e, #059669); }
.descarga__icono--archivo, .descarga__icono--mac, .descarga__icono--linux { background: var(--degradado); }
.descarga__info { flex: 1; min-width: 0; }
.descarga__info h3 { font-size: 16px; }
.descarga__info p { font-size: 13.5px; color: var(--texto-tenue); }

/* =================================================================== tienda == */

.producto-t { display: flex; flex-direction: column; overflow: hidden; }
.producto-t__banda { height: 118px; position: relative; overflow: hidden; background: var(--degradado); display: grid; place-items: center; color: #fff; }
.producto-t__banda--radio { background: linear-gradient(125deg, #7c3aed, #c026d3, #db2777); }
.producto-t__banda--contenido { background: linear-gradient(125deg, #f59e0b, #ef4444); }
.producto-t__banda::before, .producto-t__banda::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.producto-t__banda::before { width: 160px; height: 160px; left: -40px; top: -70px; animation: flotar 10s ease-in-out infinite; }
.producto-t__banda::after { width: 110px; height: 110px; right: -20px; bottom: -50px; animation: flotar 13s ease-in-out infinite reverse; }
.producto-t__banda .icono { position: relative; z-index: 1; transition: transform .6s var(--suave); }
.producto-t:hover .producto-t__banda .icono { transform: scale(1.12) rotate(-6deg); }
.producto-t__cuerpo { padding: 22px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.producto-t__cuerpo h3 { font-size: 19px; }
.producto-t__cuerpo p { color: var(--texto-suave); font-size: 14.5px; }
.producto-t__precio { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-top: auto; padding-top: 8px; }
.producto-t__precio small { font-size: 13px; font-weight: 500; color: var(--texto-tenue); }

/* ==================================================================== chat == */

.chat { display: grid; gap: 16px; padding: 22px; }
.burbuja { display: flex; gap: 12px; max-width: 86%; animation: subir .5s var(--suave) both; }
.burbuja--mia { margin-left: auto; flex-direction: row-reverse; }
.burbuja__cuerpo { padding: 14px 16px; border-radius: 16px; background: var(--panel-2); border: 1px solid var(--borde); }
.burbuja--mia .burbuja__cuerpo { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 25%, transparent); }
.burbuja--interna .burbuja__cuerpo { background: color-mix(in srgb, var(--pend) 10%, transparent); border-color: color-mix(in srgb, var(--pend) 35%, transparent); border-style: dashed; }
.burbuja__meta { display: flex; gap: 10px; font-size: 12.5px; color: var(--texto-tenue); margin-bottom: 6px; flex-wrap: wrap; }
.burbuja__meta b { color: var(--texto); }
.burbuja__texto { white-space: pre-line; overflow-wrap: anywhere; }
.responder { padding: 18px 22px; border-top: 1px solid var(--borde); display: grid; gap: 12px; }

/* ================================================================= grafico == */

.grafico { width: 100%; height: 220px; display: block; overflow: visible; }
.grafico__linea { fill: none; stroke: var(--acento); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: var(--largo, 2000); stroke-dashoffset: var(--largo, 2000); animation: dibujar 2s var(--suave) .3s forwards; }
.grafico__area { fill: url(#degradado-grafico); opacity: 0; animation: aparecer 1.2s ease 1s forwards; }
.grafico__punto { fill: var(--panel); stroke: var(--acento); stroke-width: 2.5; opacity: 0; animation: aparecer .4s ease forwards; }
.grafico__guia { stroke: var(--borde); stroke-dasharray: 4 5; }
.grafico__rotulo { fill: var(--texto-tenue); font-size: 11px; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }

.barras-h { display: grid; gap: 14px; }
.barras-h__fila { display: grid; gap: 6px; }
.barras-h__rotulo { display: flex; justify-content: space-between; font-size: 14px; }
.barras-h__pista { height: 9px; border-radius: 99px; background: var(--panel-3); overflow: hidden; }
.barras-h__pista span { display: block; height: 100%; border-radius: 99px; background: var(--degradado); transform-origin: left; animation: crecer 1.2s var(--suave) .4s both; }
@keyframes crecer { from { transform: scaleX(0); } }

/* =============================================================== listas == */

.lista { display: grid; }
.lista__item { display: flex; align-items: center; gap: 12px; padding: 13px 22px; border-bottom: 1px solid var(--borde); transition: background-color var(--transicion); }
.lista__item:last-child { border-bottom: 0; }
a.lista__item:hover { background: var(--panel-2); }
.lista__item .avatar { width: 36px; height: 36px; }
.lista__texto { flex: 1; min-width: 0; }
.lista__texto b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista__texto small { color: var(--texto-tenue); font-size: 13px; }

.acordeon { border-bottom: 1px solid var(--borde); }
.acordeon:last-child { border-bottom: 0; }
.acordeon summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 15px 22px; cursor: pointer; transition: background-color var(--transicion); }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary:hover { background: var(--panel-2); }
.acordeon summary .icono:last-child { margin-left: auto; transition: transform .35s var(--suave); color: var(--texto-tenue); }
.acordeon[open] summary .icono:last-child { transform: rotate(90deg); }
.acordeon__cuerpo { padding: 4px 22px 22px; animation: subir .4s var(--suave); }

.paginacion { display: flex; align-items: center; gap: 6px; padding: 16px 22px; flex-wrap: wrap; }
.paginacion__num { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--texto-suave); border: 1px solid var(--borde); }
.paginacion__num:hover { border-color: var(--acento); color: var(--acento); }
.paginacion__num.es-actual { background: var(--degradado); color: #fff; border-color: transparent; }
.paginacion__total { margin-left: auto; font-size: 13px; color: var(--texto-tenue); }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--borde); }
.buscador { position: relative; flex: 1; min-width: 200px; }
.buscador .icono { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-tenue); }
.buscador input { width: 100%; padding: 10px 14px 10px 40px; border-radius: 12px; border: 1px solid var(--borde-fuerte); background: var(--panel-2); color: var(--texto); font: inherit; }
.buscador input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 7px 13px; border-radius: 99px; font-size: 13px; font-weight: 600; border: 1px solid var(--borde-fuerte); color: var(--texto-suave); transition: all var(--transicion); }
.chip:hover { border-color: var(--acento); color: var(--acento); }
.chip.es-actual { background: var(--degradado); border-color: transparent; color: #fff; }

/* ================================================================== pago == */

.resultado { text-align: center; padding: 50px 30px; position: relative; overflow: hidden; }
.resultado__icono { width: 96px; height: 96px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; animation: pop .8s var(--suave) both; }
.resultado__icono--ok { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 0 0 14px color-mix(in srgb, #10b981 15%, transparent); }
.resultado__icono--pend { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 0 0 14px color-mix(in srgb, #f59e0b 15%, transparent); }
.resultado__icono--error { background: linear-gradient(135deg, #f43f5e, #dc2626); box-shadow: 0 0 0 14px color-mix(in srgb, #f43f5e 15%, transparent); }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } }
.resultado h1 { font-size: 28px; margin-bottom: 8px; }
.resultado p { color: var(--texto-suave); max-width: 520px; margin: 0 auto; }
/* Papelitos de festejo: solo CSS. */
.confeti { position: absolute; top: -12px; width: 9px; height: 15px; border-radius: 2px; opacity: 0; animation: caer 3.2s ease-in forwards; }
@keyframes caer { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(420px) rotate(720deg); } }
.caja-datos { white-space: pre-line; text-align: left; padding: 18px; border-radius: 14px; background: var(--panel-2); border: 1px dashed var(--borde-fuerte); font-size: 14.5px; margin: 20px auto 0; max-width: 480px; }

/* =============================================================== responsive == */

@media (max-width: 1180px) {
  .grilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grilla--lateral { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  .lateral { transform: translateX(-102%); box-shadow: var(--sombra); }
  .pnl.menu-abierto .lateral { transform: none; }
  .velo { position: fixed; inset: 0; z-index: 35; background: rgba(2, 6, 23, .45); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
  .pnl.menu-abierto .velo { opacity: 1; visibility: visible; }
  .principal { margin-left: 0; }
  .menu-movil { display: grid; }
  .grilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grilla--lateral-izq { grid-template-columns: minmax(0, 1fr); }
  .pestanas-v { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
}

@media (max-width: 700px) {
  .superior { padding: 0 16px; }
  .contenido { padding: 22px 16px 50px; }
  .usuario__nombre, .usuario__rol, .superior__titulo { display: none; }
  .usuario__boton { padding: 4px; }
  .grilla--2, .grilla--3, .grilla--4, .filas, .filas--3 { grid-template-columns: minmax(0, 1fr); }
  .bienvenida { padding: 24px 22px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpi { padding: 16px; }
  .kpi__valor { font-size: 22px; }
  .burbuja { max-width: 100%; }

  /* Las tablas pasan a tarjetas: cada celda muestra su rotulo (data-label). */
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: 12px 16px; border-bottom: 1px solid var(--borde); }
  .tabla td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; text-align: right; }
  .tabla td::before { content: attr(data-label); font-size: 12.5px; font-weight: 600; color: var(--texto-tenue); text-align: left; }
  .tabla td:not([data-label])::before { display: none; }
  .descarga { flex-wrap: wrap; }
  .descarga .boton { width: 100%; }
}

/* ==================================================================== acceso == */
/* Pantallas de ingreso: mitad marca animada, mitad formulario. */

.acceso { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.acceso__marca {
  position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 48px;
  display: flex; flex-direction: column; justify-content: space-between; background: var(--degradado);
}
.acceso__marca::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .15) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
}
.burbuja-fondo { position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.burbuja-fondo--1 { width: 380px; height: 380px; right: -120px; top: -100px; animation: flotar 14s ease-in-out infinite; }
.burbuja-fondo--2 { width: 240px; height: 240px; left: -80px; bottom: 60px; animation: flotar 17s ease-in-out infinite reverse; }
.burbuja-fondo--3 { width: 120px; height: 120px; right: 22%; bottom: 18%; animation: flotar 11s ease-in-out infinite; }
.acceso__logo { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 21px; }
.acceso__logo span:first-child { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .2); backdrop-filter: blur(6px); }
.acceso__lema h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1.1; margin-bottom: 16px; }
.acceso__lema p { opacity: .9; font-size: 17px; max-width: 460px; }
.acceso__lista { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.acceso__lista li { display: flex; align-items: center; gap: 12px; font-weight: 500; animation: subir .7s var(--suave) both; }
.acceso__lista li:nth-child(2) { animation-delay: .1s; } .acceso__lista li:nth-child(3) { animation-delay: .2s; }
.acceso__lista .icono { padding: 5px; border-radius: 8px; background: rgba(255, 255, 255, .2); box-sizing: content-box; }
.acceso__pie { font-size: 13.5px; opacity: .75; }

.acceso__lado { position: relative; display: grid; place-items: center; padding: 40px 24px; }
.acceso__arriba { position: absolute; top: 20px; right: 24px; left: 24px; display: flex; justify-content: space-between; align-items: center; }
.acceso__arriba a { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-suave); font-size: 14px; }
.acceso__arriba a:hover { color: var(--acento); }
.acceso__caja { width: 100%; max-width: 420px; animation: subir .8s var(--suave) both; }
.acceso__caja h1 { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.acceso__caja > p { color: var(--texto-suave); margin-bottom: 28px; }
.acceso__pie-form { text-align: center; margin-top: 22px; color: var(--texto-suave); font-size: 14.5px; }
.acceso__pie-form a, .enlace { color: var(--acento); font-weight: 600; }
.acceso .avisos { position: static; width: 100%; margin-bottom: 18px; }

@media (max-width: 900px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso__marca { padding: 28px 24px; min-height: 0; }
  .acceso__lema p, .acceso__lista, .acceso__pie { display: none; }
  .acceso__lema h2 { font-size: 24px; margin: 18px 0 0; }
  .acceso__lado { padding-top: 70px; }
}

/* =============================================================== impresion == */
@media print {
  .no-imprimir { display: none !important; }
}

/* ----------------------------------------------------------------------------
   Verificacion en dos pasos y factura AFIP
   ------------------------------------------------------------------------- */
/* El QR va siempre oscuro sobre blanco, tambien en modo oscuro: los lectores
   de los celulares no leen bien uno invertido. */
.qr { background: #fff; padding: 14px; border-radius: 16px; width: fit-content; max-width: 100%; box-shadow: var(--sombra-suave); }
.qr svg { display: block; max-width: 100%; height: auto; }
.codigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.codigos span { padding: 10px 12px; border-radius: 10px; background: var(--panel-3); text-align: center; font-size: 15px; letter-spacing: .06em; }
.paso-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--degradado); color: #fff; font-size: 13px; margin-right: 4px; }
.pasos { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--texto-suave); }
.pasos b { color: var(--texto); }

/* Usuario y contraseña del programa, dentro de cada servicio. */
.credenciales { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--borde); }