/* Plataforma CCC400 — sistema de diseño (base.css)
   Lenguaje aprobado por Max 20/09/2026: barra vertical izquierda, profundidad y sombras en capas,
   paleta azul/turquesa/ámbar. Las variables --acento la cambia cada inquilino desde su identidad. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --azul:#0F2C4A; --azul-2:#123959; --azul-3:#0A2039;
  --acento:#2EC4B6; --acento-claro:#E7F7F5; --acento-oscuro:#1D9E92;
  /* Los calcula el servidor con los colores del negocio (comun.contexto). Estos son el respaldo. */
  --lado-1:#123959; --lado-2:#0A2039; --acento-luz:#46D8C8; --acento-sombra:#23B0A2;
  --fondo-1:rgba(46,196,182,.12); --fondo-2:rgba(15,44,74,.12);
  --ambar:#F2A03D; --ambar-claro:#FEF3E4;
  --texto:#152430; --suave:#5D6E7C; --tenue:#8A9BA8;
  --linea:#E3EAF1; --fondo:#F4F7FA; --blanco:#fff;
  --ok:#0E8A63; --alerta:#C2410C; --info:#2563EB;
  --sombra:0 1px 2px rgba(16,42,67,.05),0 16px 38px rgba(16,42,67,.07);
  --radio:14px;
}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,sans-serif;color:var(--texto);
  -webkit-font-smoothing:antialiased;background:
  radial-gradient(900px 520px at 88% -10%,var(--fondo-1),transparent 62%),
  radial-gradient(760px 460px at 2% 106%,var(--fondo-2),transparent 64%),var(--fondo)}
a{color:inherit;text-decoration:none}
.app{display:flex;min-height:100vh}
/* ---------------- barra lateral ---------------- */
.side{width:262px;flex:none;background:linear-gradient(178deg,var(--lado-1) 0%,var(--lado-2) 100%);
  color:#E8EFF6;padding:20px 14px 16px;display:flex;flex-direction:column;gap:16px;position:relative;
  box-shadow:14px 0 40px rgba(9,28,50,.12),inset -1px 0 0 rgba(255,255,255,.06)}
.side:after{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent)}
.marca{display:flex;align-items:center;gap:10px;padding:2px 8px 4px;position:relative}
.marca-con-logo{flex-direction:column;align-items:flex-start;gap:8px;padding:2px 8px 8px}
.marca-con-logo .marca-logo{max-width:172px;height:44px}
.marca-con-logo .marca-txt{width:100%}
.marca-punto{position:absolute;right:9px;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--acento2);flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.20)}
.monograma{width:40px;height:40px;border-radius:12px;background:var(--acento);flex:none;display:grid;
  place-items:center;font-weight:800;font-size:15px;color:var(--acento-texto);
  box-shadow:0 12px 26px var(--acento-brillo),inset 0 1px 0 rgba(255,255,255,.55)}
.marca-txt{min-width:0;flex:1}          /* que el texto ceda espacio al logo, no al revés */
.marca-txt b{display:block;font-size:14px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.marca-txt span{font-size:11px;color:#93A9BC;letter-spacing:.7px;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;display:block}
/* Cada bloque se separa con una línea fina y su título en una banda apenas más clara,
   con una marca de color al costado: se ve dónde empieza cada grupo sin gritar. */
.grupo{display:flex;flex-direction:column;gap:2px;border-top:1px solid rgba(255,255,255,.075);
  padding-top:7px;margin-top:2px}
.grupo:first-of-type{border-top:none;padding-top:0}
.grupo>summary{list-style:none;cursor:pointer;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:#93AAC0;padding:8px 10px 8px 9px;font-weight:700;display:flex;align-items:center;gap:8px;
  border-radius:9px;background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,0) 82%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.grupo>summary:before{content:'';width:3px;height:13px;border-radius:2px;background:rgba(255,255,255,.22);
  flex:none}
.grupo.con-activo>summary{color:#DCE8F2}
.grupo.con-activo>summary:before{background:var(--acento);box-shadow:0 0 8px var(--acento-brillo)}
.grupo>summary:hover{color:#E4EEF7;background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,0) 82%)}
.grupo>summary::-webkit-details-marker{display:none}
.grupo>summary .chev{margin-left:auto;opacity:.75;transition:transform .25s}
.grupo[open]>summary .chev{transform:rotate(0)}
.grupo:not([open])>summary .chev{transform:rotate(-90deg)}
.grupo>summary .cuenta{font-size:10px;font-weight:700;color:#9DB2C6;background:rgba(255,255,255,.10);
  border-radius:999px;padding:1px 7px;margin-left:auto}
.nav{display:flex;align-items:center;gap:11px;padding:9px 11px 9px 19px;border-radius:10px;font-size:13.5px;
  color:#C8D6E2;position:relative;font-weight:500}
.nav svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.nav:hover{background:rgba(255,255,255,.05);color:#fff}
.nav.on{background:var(--acento-suave);color:#fff;font-weight:650;
  box-shadow:0 8px 20px var(--acento-suave),inset 0 1px 0 rgba(255,255,255,.10)}
.nav.on:before{content:'';position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;
  background:var(--acento)}
.nav .pico{margin-left:auto;background:var(--acento2);color:var(--acento2-texto);font-size:10.5px;font-weight:700;
  border-radius:999px;padding:2px 7px}
.abajo{margin-top:auto;border-top:1px solid rgba(255,255,255,.09);padding-top:14px}
.usuario{display:flex;align-items:center;gap:10px;padding:8px}
.avatar{width:34px;height:34px;border-radius:10px;background:var(--acento);color:var(--acento-texto);font-weight:700;
  display:grid;place-items:center;font-size:12.5px}
.usuario b{font-size:13px;display:block}
.usuario span{font-size:11px;color:#93A9BC}
/* ---------------- contenido ---------------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.top{background:var(--blanco);border-bottom:1px solid var(--linea);padding:16px 26px;display:flex;
  align-items:center;gap:14px 18px;position:relative;z-index:2;flex-wrap:wrap;
  box-shadow:0 8px 22px rgba(16,42,67,.05)}
/* El encabezado tiene muchos controles (selector de negocio, buscador, riel, fijar, acción).
   Se le da aire al título para que no se aplaste en una columna y los controles bajen de renglón. */
.top>div:first-child{min-width:300px;flex:1}
.top h1{font-size:19px;font-weight:700;letter-spacing:-.3px}
.top p{font-size:12.5px;color:var(--suave);margin-top:3px}
.top .der{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.sello{font-size:11.5px;font-weight:700;border-radius:999px;padding:5px 11px;background:var(--acento-claro);
  color:var(--acento-oscuro)}
.contenido{padding:24px 26px 34px;display:flex;flex-direction:column;gap:20px}
.btn{border:none;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:600;display:inline-flex;
  align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
.btn.primario{background:linear-gradient(180deg,var(--acento-luz),var(--acento-sombra));color:var(--acento-texto);
  box-shadow:0 7px 18px rgba(46,196,182,.34),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.oscuro{background:linear-gradient(180deg,var(--lado-1),var(--lado-2));color:#fff;
  box-shadow:0 7px 18px rgba(15,44,74,.28),inset 0 1px 0 rgba(255,255,255,.12)}
.btn.fantasma{background:var(--blanco);border:1px solid var(--linea);color:var(--texto);
  box-shadow:0 1px 2px rgba(16,42,67,.06),inset 0 1px 0 #fff}
.btn.mini{padding:7px 12px;font-size:12px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi,.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);position:relative}
.kpi{padding:17px 18px}
.kpi:before,.tarjeta:before{content:'';position:absolute;left:16px;right:16px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.kpi span{font-size:12px;color:var(--suave);font-weight:600}
.kpi b{display:block;font-size:27px;font-weight:750;letter-spacing:-.8px;margin:7px 0 4px;text-shadow:0 1px 0 #fff}
.kpi em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ok)}
.tarjeta>header{padding:15px 18px;border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:12px}
.tarjeta>header h2{font-size:14.5px;font-weight:700}
.tarjeta>header .der{margin-left:auto;font-size:12px;color:var(--acento-oscuro);font-weight:600}
.tabla{width:100%;border-collapse:collapse}
.tabla th{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--tenue);text-align:left;
  padding:12px 18px;background:linear-gradient(180deg,#FCFEFF,#F5F9FC);font-weight:700}
.tabla td{padding:13px 18px;border-top:1px solid var(--linea);font-size:13px}
.tabla tbody tr:nth-child(even) td{background:#FCFDFE}
.pila{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:999px;
  padding:4px 10px;background:var(--acento-claro);color:var(--acento-oscuro)}
.pila:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.iniciales{width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;font-size:11px;
  font-weight:700;color:var(--suave);margin-right:9px;vertical-align:middle;
  background:linear-gradient(180deg,#fff,#EFF4F8);border:1px solid var(--linea);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,42,67,.08)}
.tags{display:flex;gap:5px;flex-wrap:wrap;max-width:240px}
.tag{font-size:10.5px;font-weight:700;border-radius:6px;padding:3px 8px;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.vacio{padding:34px 18px;text-align:center;color:var(--tenue);font-size:13px}
.vacio b{display:block;color:var(--texto);font-size:14.5px;margin-bottom:6px}
.fila{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
.pie{display:flex;align-items:center;gap:10px;color:var(--tenue);font-size:11.5px}
/* ---------------- acceso ---------------- */
.acceso{min-height:100vh;display:grid;place-items:center;background:
  radial-gradient(900px 520px at 80% -10%,rgba(46,196,182,.18),transparent 60%),
  radial-gradient(700px 420px at 0% 100%,rgba(15,44,74,.20),transparent 62%),
  linear-gradient(178deg,#0F2C4A,#0A2039)}
.acceso-caja{width:392px;background:var(--blanco);border-radius:20px;padding:32px 30px 28px;
  box-shadow:0 30px 70px rgba(4,16,30,.45),inset 0 1px 0 #fff}
.acceso-caja .monograma{margin-bottom:16px;width:46px;height:46px;font-size:17px}
.acceso-caja h1{font-size:20px;letter-spacing:-.4px;margin-bottom:6px}
.acceso-caja p{font-size:13px;color:var(--suave);margin-bottom:20px}
label{display:block;font-size:12px;font-weight:700;color:var(--suave);margin:0 0 6px}
input,select,textarea{width:100%;border:1px solid var(--linea);border-radius:10px;padding:11px 13px;font-size:13.5px;
  font-family:inherit;color:var(--texto);background:var(--blanco);box-shadow:inset 0 1px 2px rgba(16,42,67,.05)}
.campo{margin-bottom:15px}
.aviso{background:#FEF3E4;border:1px solid #F6E3C6;color:#8A5A16;font-size:12.5px;border-radius:10px;
  padding:11px 13px;margin-bottom:15px}

/* ---------------- riel de íconos (navegación aprobada 20/09/2026) ----------------
   Con el riel encendido la barra queda sólo en íconos y devuelve ~180 px de ancho al trabajo real.
   La preferencia vive en la base (usuario_preferencias), no en el navegador. */
#riel-boton, #favorito-boton, #buscador-boton{font-weight:600}
.tecla{background:rgba(15,44,74,.09);border-radius:5px;padding:1px 5px;font-size:10px;margin-left:5px}
body.riel .side{width:80px;padding:18px 10px 14px}
body.riel .marca-txt{display:none}
body.riel .marca-logo{max-width:54px;height:34px}
body.riel .marca-con-logo{align-items:center}
body.riel .marca-punto{position:static;margin-top:4px}
body.riel .marca{justify-content:center;padding:2px 0 6px}
body.riel .grupo>summary,body.riel .grupo-tit{display:none}
body.riel .nav span,body.riel .nav .pronto-tag{display:none}
body.riel .nav{justify-content:center;padding:10px 0}
body.riel .nav.on:before{display:none}
body.riel .usuario>div{display:none}
body.riel .usuario{justify-content:center;padding:8px 0}
body.riel .abajo .usuario a.nav{justify-content:center}
.nav.pronto{opacity:.45;cursor:default}
.pronto-tag{margin-left:auto;font-size:9.5px;font-weight:700;color:#9DB2C6;background:rgba(255,255,255,.10);
  border-radius:999px;padding:1px 6px}
.grupo-fav{border-top:none;padding-top:2px}
.grupo-tit{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#93AAC0;padding:8px 10px 6px 9px;
  font-weight:700}

/* ---------------- buscador de acciones (Ctrl + K) ---------------- */
.buscador-fondo{position:fixed;inset:0;background:rgba(8,20,34,.55);z-index:50;display:flex;
  align-items:flex-start;justify-content:center;padding-top:12vh}
.buscador-fondo[hidden]{display:none}
.buscador-caja{width:min(620px,92vw);background:var(--blanco);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px rgba(4,16,30,.45),inset 0 1px 0 #fff}
.buscador-caja input{border:none;border-bottom:1px solid var(--linea);border-radius:0;font-size:15px;
  padding:16px 18px;box-shadow:none}
.buscador-lista{max-height:330px;overflow-y:auto}
.buscador-item{display:flex;flex-direction:column;gap:2px;padding:11px 18px;border-bottom:1px solid #F1F5F9}
.buscador-item b{font-size:13.5px}
.buscador-item span{font-size:11.5px;color:var(--tenue)}
.buscador-item.on{background:var(--acento-claro)}
.buscador-vacio{padding:22px 18px;font-size:12.5px;color:var(--tenue);text-align:center}
.buscador-pie{padding:9px 18px;font-size:11px;color:var(--tenue);background:#F8FAFC;border-top:1px solid var(--linea)}

@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.fila{grid-template-columns:1fr}}


/* ---------------- identidad del inquilino: paleta de colores y logo (23/09/2026) ----------------
   La paleta se maneja con radios de verdad (nada de JavaScript obligatorio para guardar):
   cada cuadro lleva su código escrito debajo y el elegido se marca con aro y tilde. */
.pista{font-weight:500;color:var(--tenue);font-size:11.5px}
.paleta{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin:2px 0 4px}
.muestra{display:inline-flex;flex-direction:column;align-items:center;gap:5px;margin:0;cursor:pointer;
  font-size:10.5px;font-weight:600;color:var(--tenue);position:relative}
.muestra input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.muestra .caja{width:34px;height:34px;border-radius:10px;display:block;
  box-shadow:0 0 0 1px rgba(16,42,67,.14),inset 0 1px 0 rgba(255,255,255,.35);transition:.15s}
.muestra:hover .caja{transform:translateY(-1px);box-shadow:0 6px 14px rgba(16,42,67,.18)}
.muestra.on .caja{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--texto)}
.muestra.on .codigo{color:var(--texto)}
/* la tilde va en un círculo abajo a la derecha: se ve igual de bien sobre cualquier color */
.muestra.on .caja:after{content:'✓';position:absolute;right:-4px;bottom:12px;width:16px;height:16px;
  display:grid;place-items:center;font-size:10.5px;font-weight:800;color:#fff;background:var(--texto);
  border-radius:50%;box-shadow:0 1px 3px rgba(16,42,67,.35)}
.muestra .codigo{letter-spacing:.2px;text-transform:none;white-space:nowrap}
.caja-auto{background:repeating-linear-gradient(135deg,#2EC4B6 0 7px,#0F2C4A 7px 14px)}
.muestra-otro{position:relative}
.muestra-otro input.libre{width:34px!important;height:34px;border-radius:10px;border:1px dashed #B9C7D3;
  padding:2px;background:var(--blanco);cursor:pointer;display:block}
.muestra-otro.on input.libre{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--texto)}
.muestra-otro.on .codigo{color:var(--texto)}
.elegido{font-size:12px;color:var(--suave);margin:10px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip-color{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linea);border-radius:999px;
  padding:4px 11px 4px 5px;background:var(--blanco);font-size:12px}
.chip-color i{width:19px;height:19px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.chip-color b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.3px}
.par-colores{display:inline-flex;align-items:center;gap:6px}
.par-colores i{width:17px;height:17px;border-radius:6px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.par-colores i+i{margin-left:-5px}
.par-colores .cod{color:var(--tenue);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* vista previa de la marca */
.previa{border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:var(--blanco)}
.previa-barra{display:flex;align-items:center;gap:9px;padding:11px 13px;background:#F7FAFC;border-bottom:1px solid var(--linea)}
.previa-barra .mono{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:11px;
  font-weight:800;background:#2EC4B6;color:#08222F;transition:.15s}
.previa-barra b{font-size:12.5px}
.previa-cuerpo{padding:14px 13px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.previa-chip{font-size:11px;font-weight:700;color:#fff;border-radius:999px;padding:4px 11px;background:#1D9E92;transition:.15s}
.previa-btn{font-size:11.5px;font-weight:700;color:#fff;border-radius:9px;padding:8px 13px;background:#2EC4B6;transition:.15s}
.previa-enlace{font-size:11.5px;font-weight:700;color:#1D9E92;text-decoration:underline;transition:.15s}


/* ---------------- identidad del negocio en el armazón y casillas (23/09/2026) ----------------
   El logo del negocio ocupa el lugar de las iniciales cuando existe. */
.marca-logo{height:40px;max-width:106px;object-fit:contain;flex:none;border-radius:11px;background:#fff;
  padding:4px;box-shadow:0 8px 20px rgba(6,22,38,.35)}

/* Las casillas de marcar: sin esto heredaban el ancho 100% de los campos y quedaban desalineadas
   respecto de su texto (observación de Max). */
input[type=checkbox],input[type=radio]{width:auto;padding:0;margin:0;flex:none;accent-color:var(--acento)}
.casilla{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--texto);
  margin:6px 0;cursor:pointer}
.casilla input{width:16px;height:16px}
.casilla .detalle{color:var(--tenue);font-size:11.5px;font-weight:400}
.todos{display:flex;align-items:center;gap:9px;margin:2px 0 10px;padding:9px 12px;border-radius:10px;
  background:#F7FAFC;border:1px solid var(--linea);font-size:12.5px;font-weight:700;color:var(--suave);
  cursor:pointer}

/* La clave temporal se muestra en una ventana emergente (pedido de Max 23/09/2026). */
.modal-fondo{position:fixed;inset:0;background:rgba(9,25,42,.55);display:grid;place-items:center;
  z-index:60;padding:22px}
.modal{background:var(--blanco);border-radius:16px;box-shadow:0 24px 60px rgba(6,22,38,.32);
  max-width:560px;width:100%;padding:26px 26px 22px}
.modal h2{font-size:17px;margin-bottom:10px}
.modal p{font-size:13px;color:var(--suave);line-height:1.6}
.clave-caja{margin:15px 0;padding:16px;border-radius:12px;background:var(--azul);color:#fff;font-size:21px;
  letter-spacing:2.5px;text-align:center;font-weight:700;user-select:all;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}