/* ===================================================================
   VECTOR · Sistema visual
   Aceleracion Comercial

   Idea rectora: la herramienta se organiza alrededor del TIEMPO,
   no alrededor de tarjetas. El riel de tiempo es el elemento
   estructural de las pantallas de dia y semana, porque la promesa
   del producto es convertir prioridades comerciales en tiempo
   protegido.
   =================================================================== */

:root {
  /* Marca Aceleracion Comercial */
  --navy-900:  #071B32;
  --navy-800:  #0A2540;
  --navy-700:  #0E1B2E;
  --cobalto:   #2B7FFF;
  --cobalto-d: #1A5FD0;
  --dorado:    #FFC629;
  --naranja:   #FF6A1A;

  /* Superficies: blanco frio con sesgo azul, no crema */
  --papel:     #F6F8FB;
  --superficie:#FFFFFF;
  --superficie-2:#F1F4F9;
  --linea:     #DFE5EE;
  --linea-2:   #EDF1F6;

  /* Tinta */
  --tinta:     #0E1B2E;
  --tinta-2:   #4C5B70;
  --tinta-3:   #7A8798;

  /* Semaforo */
  --verde:     #0E9F6E;
  --verde-bg:  #E7F6F0;
  --ambar:     #B77A00;
  --ambar-bg:  #FFF6E0;
  --rojo:      #D92D20;
  --rojo-bg:   #FDECEA;
  --azul-bg:   #EAF2FF;

  --radio-panel: 12px;
  --radio-ctrl:  8px;
  --sombra: 0 1px 2px rgba(14,27,46,.06);
  --nav-w: 232px;

  --fuente: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* --- Reset acotado -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .7rem; max-width: 72ch; }
a  { color: var(--cobalto-d); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .8125rem; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 1.25rem 0; }

:focus-visible {
  outline: 2px solid var(--cobalto);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Estructura ----------------------------------------------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.barra {
  background: var(--navy-900);
  color: #fff;
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1rem;
  position: sticky; top: 0; z-index: 40;
}
.barra .marca {
  font-weight: 700; font-size: 1.05rem; letter-spacing: .08em;
  color: #fff; text-decoration: none;
}
.barra .marca span { color: var(--dorado); }
.barra .empresa {
  font-size: .8125rem; color: #AFC0D8;
  border-left: 1px solid rgba(255,255,255,.18); padding-left: 1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra .derecha { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.barra select {
  background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radio-ctrl); padding: .3rem .5rem; font: inherit; font-size: .8125rem;
}
.barra select option { color: #0E1B2E; }
.barra .usuario { font-size: .8125rem; color: #AFC0D8; }
.barra .salir { color: #AFC0D8; font-size: .8125rem; }
.barra .salir:hover { color: #fff; }

.cuerpo { display: flex; flex: 1; align-items: flex-start; }

.nav {
  width: var(--nav-w); flex: 0 0 var(--nav-w);
  background: var(--superficie); border-right: 1px solid var(--linea);
  padding: 1rem .6rem 2rem; position: sticky; top: 49px; align-self: stretch;
  min-height: calc(100vh - 49px);
}
.nav .grupo { margin-bottom: 1.2rem; }
.nav .grupo > span {
  display: block; font-size: .6875rem; color: var(--tinta-3);
  padding: 0 .6rem .35rem; letter-spacing: .02em;
}
.nav a {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .6rem; border-radius: var(--radio-ctrl);
  color: var(--tinta-2); font-size: .9rem; font-weight: 500;
}
.nav a:hover { background: var(--superficie-2); color: var(--tinta); text-decoration: none; }
.nav a.on { background: var(--azul-bg); color: var(--cobalto-d); font-weight: 600; }
.nav a .n {
  margin-left: auto; background: var(--rojo); color: #fff; font-size: .6875rem;
  min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center;
  padding: 0 5px; font-weight: 600;
}
.nav a.on .n { background: var(--cobalto); }

.principal { flex: 1; min-width: 0; padding: 1.5rem 1.75rem 4rem; }
.contenedor { max-width: 1080px; }
.contenedor.ancho { max-width: 1280px; }

/* --- Encabezado de pagina -------------------------------------- */
.cabecera { margin-bottom: 1.25rem; }
.cabecera .sub { color: var(--tinta-2); font-size: .875rem; margin-top: .15rem; }
.cabecera .acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }

/* --- Panel ------------------------------------------------------ */
.panel {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio-panel); box-shadow: var(--sombra);
  margin-bottom: 1.25rem;
}
.panel > header {
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--linea-2);
  display: flex; align-items: center; gap: .75rem;
}
.panel > header h2, .panel > header h3 { margin: 0; }
.panel > header .der { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.panel .cont { padding: 1.1rem; }
.panel .cont.pegado { padding: 0; }
.panel .pie {
  padding: .75rem 1.1rem; border-top: 1px solid var(--linea-2);
  background: var(--superficie-2); border-radius: 0 0 var(--radio-panel) var(--radio-panel);
  font-size: .875rem; color: var(--tinta-2);
}

.rejilla { display: grid; gap: 1.25rem; }
.rejilla.dos { grid-template-columns: 1fr 1fr; }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
.rejilla.principal-lateral { grid-template-columns: minmax(0,1fr) 320px; }

/* --- Tablero de 5 segundos -------------------------------------
   Las preguntas SON las etiquetas. No son cuatro tarjetas iguales:
   cada respuesta se compone segun lo que tiene que decir.          */
.cinco {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio-panel); overflow: hidden; box-shadow: var(--sombra);
  margin-bottom: 1.25rem;
}
.cinco > div { padding: 1rem 1.1rem; border-right: 1px solid var(--linea-2); min-width: 0; }
.cinco > div:last-child { border-right: 0; }
.cinco .q { font-size: .8125rem; color: var(--tinta-3); margin-bottom: .4rem; }
.cinco .r { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.cinco .r.grande { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.cinco .r small { display: block; font-weight: 400; color: var(--tinta-2); font-size: .8125rem; margin-top: .2rem; }

/* --- Semaforo explicable: una barra, un segmento por criterio --- */
.semaforo { display: flex; flex-direction: column; gap: .45rem; }
.semaforo .barra-s { display: flex; gap: 3px; }
.semaforo .barra-s i {
  height: 6px; flex: 1; border-radius: 3px; background: var(--linea);
}
.semaforo .barra-s i.ok  { background: var(--verde); }
.semaforo .barra-s i.bad { background: var(--rojo); }
.semaforo ul { list-style: none; margin: 0; padding: 0; font-size: .8125rem; }
.semaforo li { display: flex; gap: .4rem; align-items: baseline; color: var(--tinta-2); padding: .1rem 0; }
.semaforo li .pt { font-size: .9em; }
.semaforo li .pt.ok  { color: var(--verde); }
.semaforo li .pt.bad { color: var(--rojo); }

/* --- Riel de tiempo --------------------------------------------
   El elemento memorable de la interfaz: los bloques cuelgan de una
   linea de tiempo, no flotan en una grilla.                        */
.riel { position: relative; padding-left: 62px; }
.riel::before {
  content: ''; position: absolute; left: 54px; top: 6px; bottom: 6px;
  width: 1px; background: var(--linea);
}
.bloque { position: relative; padding: .7rem 0 .9rem; }
.bloque + .bloque { border-top: 1px solid var(--linea-2); }
.bloque .hora {
  position: absolute; left: -62px; top: .75rem; width: 46px; text-align: right;
  font-family: var(--mono); font-size: .8125rem; color: var(--tinta-2); font-weight: 500;
}
.bloque::before {
  content: ''; position: absolute; left: -10px; top: 1.05rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--superficie); border: 2px solid var(--tinta-3);
}
.bloque.hecha::before    { background: var(--verde); border-color: var(--verde); }
.bloque.parcial::before  { background: var(--dorado); border-color: var(--ambar); }
.bloque.no_hecha::before { background: var(--rojo); border-color: var(--rojo); }
.bloque.ahora::before    { border-color: var(--cobalto); box-shadow: 0 0 0 4px var(--azul-bg); }
.bloque .titulo { font-weight: 600; font-size: .95rem; }
.bloque .meta { font-size: .8125rem; color: var(--tinta-2); margin-top: .1rem; }
.bloque .meta .kr { font-family: var(--mono); font-size: .75rem; color: var(--cobalto-d); }
.bloque .si-entonces {
  font-size: .8125rem; color: var(--tinta-2); margin-top: .35rem;
  border-left: 2px solid var(--linea); padding-left: .6rem;
}
.bloque .acts { display: flex; gap: .35rem; margin-top: .55rem; flex-wrap: wrap; }

/* --- Botones ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
  padding: .5rem .9rem; border-radius: var(--radio-ctrl); border: 1px solid var(--linea);
  background: var(--superficie); color: var(--tinta); font: inherit; font-size: .875rem;
  font-weight: 500; cursor: pointer; text-decoration: none; line-height: 1.3;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--superficie-2); text-decoration: none; }
.btn.primario { background: var(--cobalto); border-color: var(--cobalto); color: #fff; }
.btn.primario:hover { background: var(--cobalto-d); border-color: var(--cobalto-d); }
.btn.cta { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.btn.cta:hover { background: #E85B0E; border-color: #E85B0E; }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--tinta-2); }
.btn.fantasma:hover { background: var(--superficie-2); color: var(--tinta); }
.btn.chico { padding: .3rem .6rem; font-size: .8125rem; }
.btn.bloque-full { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.ok-b   { border-color: var(--verde); color: var(--verde); }
.btn.ok-b:hover { background: var(--verde-bg); }
.btn.warn-b { border-color: var(--ambar); color: var(--ambar); }
.btn.warn-b:hover { background: var(--ambar-bg); }
.btn.bad-b  { border-color: var(--rojo); color: var(--rojo); }
.btn.bad-b:hover { background: var(--rojo-bg); }

/* --- Insignias -------------------------------------------------- */
.ins {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
  background: var(--superficie-2); color: var(--tinta-2); white-space: nowrap;
}
.ins.ok      { background: var(--verde-bg); color: var(--verde); }
.ins.warn    { background: var(--ambar-bg); color: var(--ambar); }
.ins.bad     { background: var(--rojo-bg);  color: var(--rojo); }
.ins.neutral { background: var(--azul-bg);  color: var(--cobalto-d); }
.ins.muted   { background: var(--superficie-2); color: var(--tinta-3); }
.cod {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  color: var(--cobalto-d); background: var(--azul-bg);
  padding: .1rem .35rem; border-radius: 4px;
}

/* --- Tablas ----------------------------------------------------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabla th {
  text-align: left; font-weight: 600; font-size: .75rem; color: var(--tinta-3);
  padding: .55rem 1.1rem; border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.tabla td { padding: .7rem 1.1rem; border-bottom: 1px solid var(--linea-2); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr:hover td { background: #FBFCFE; }
.tabla td.num, .tabla th.num { text-align: right; font-family: var(--mono); }
.tabla .princ { font-weight: 600; }
.tabla .sec { color: var(--tinta-2); font-size: .8125rem; }

/* --- Barra de avance -------------------------------------------- */
.avance { height: 5px; background: var(--linea-2); border-radius: 3px; overflow: hidden; min-width: 70px; }
.avance i { display: block; height: 100%; background: var(--cobalto); border-radius: 3px; }
.avance i.ok { background: var(--verde); }
.avance i.warn { background: var(--dorado); }
.avance i.bad { background: var(--rojo); }

/* --- Formularios ------------------------------------------------ */
.campo { margin-bottom: 1rem; }
.campo > label {
  display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .3rem; color: var(--tinta);
}
.campo .ayuda { font-size: .8125rem; color: var(--tinta-3); margin-top: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], select, textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--linea);
  border-radius: var(--radio-ctrl); font: inherit; font-size: .9rem;
  background: var(--superficie); color: var(--tinta);
}
textarea { min-height: 86px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus { border-color: var(--cobalto); outline: none; box-shadow: 0 0 0 3px var(--azul-bg); }
select:focus { border-color: var(--cobalto); outline: none; box-shadow: 0 0 0 3px var(--azul-bg); }
.fila { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.fila.tres { grid-template-columns: 1fr 1fr 1fr; }
.fila.cuatro { grid-template-columns: repeat(4, 1fr); }

/* Opciones tipo radio en tarjeta (ritual: elegir, no escribir) */
.opciones { display: grid; gap: .5rem; }
.opcion {
  display: flex; gap: .65rem; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--linea); border-radius: var(--radio-ctrl); padding: .7rem .85rem;
  background: var(--superficie); transition: border-color .12s ease, background .12s ease;
}
.opcion:hover { border-color: #C6D2E4; background: #FBFCFE; }
.opcion input { margin: .25rem 0 0; accent-color: var(--cobalto); flex: 0 0 auto; width: auto; }
.opcion:has(input:checked) { border-color: var(--cobalto); background: var(--azul-bg); }
.opcion .t { font-weight: 600; font-size: .9rem; }
.opcion .d { font-size: .8125rem; color: var(--tinta-2); }

/* Escala 1-5 */
.escala { display: flex; gap: .4rem; }
.escala label {
  position: relative; flex: 1; text-align: center;
  border: 1px solid var(--linea); border-radius: var(--radio-ctrl);
  padding: .55rem 0; cursor: pointer; font-weight: 600; font-family: var(--mono); font-size: .9rem;
}
.escala label:hover { border-color: #C6D2E4; }
/* El radio sigue siendo accesible por teclado: se oculta a la vista,
   no al lector de pantalla, y el foco se marca sobre la etiqueta. */
.escala input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.escala label:has(input:checked) { background: var(--cobalto); border-color: var(--cobalto); color: #fff; }
.escala label:has(input:focus-visible) { outline: 2px solid var(--cobalto); outline-offset: 2px; }
.escala-pies { display: flex; justify-content: space-between; font-size: .75rem; color: var(--tinta-3); margin-top: .3rem; }

/* --- Avisos ----------------------------------------------------- */
.aviso {
  padding: .7rem .9rem; border-radius: var(--radio-ctrl); font-size: .875rem;
  border: 1px solid var(--linea); background: var(--superficie-2); margin-bottom: 1rem;
}
.aviso.ok   { background: var(--verde-bg); border-color: #BFE6D6; color: #0A6B4C; }
.aviso.warn { background: var(--ambar-bg); border-color: #F3DFAE; color: #7A5200; }
.aviso.bad  { background: var(--rojo-bg);  border-color: #F3C7C3; color: #A4201A; }
.aviso.info { background: var(--azul-bg);  border-color: #C8DDFF; color: #1A4E9E; }
.aviso strong { font-weight: 600; }

/* --- Estado vacio: una invitacion a actuar ---------------------- */
.vacio { text-align: center; padding: 2.5rem 1.25rem; color: var(--tinta-2); }
.vacio h3 { margin-bottom: .35rem; color: var(--tinta); }
.vacio p { margin: 0 auto .9rem; max-width: 44ch; }

/* --- Cola de atencion del coach --------------------------------- */
.cola { list-style: none; margin: 0; padding: 0; }
.cola li {
  display: flex; gap: .85rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--linea-2);
  align-items: flex-start;
}
.cola li:last-child { border-bottom: 0; }
.cola .sev { width: 3px; border-radius: 2px; align-self: stretch; background: var(--tinta-3); flex: 0 0 3px; }
.cola .sev.critica, .cola .sev.alta { background: var(--rojo); }
.cola .sev.media { background: var(--dorado); }
.cola .cuerpo-i { flex: 1; min-width: 0; }
.cola .t { font-weight: 600; font-size: .9rem; }
.cola .d { font-size: .8125rem; color: var(--tinta-2); }
.cola .accs { display: flex; gap: .35rem; align-items: center; }

/* --- Login ------------------------------------------------------ */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(1100px 500px at 15% -10%, #12335C 0%, transparent 60%),
    var(--navy-900);
}
.login-caja {
  width: 100%; max-width: 384px; background: var(--superficie);
  border-radius: var(--radio-panel); padding: 2rem 1.75rem; box-shadow: 0 18px 48px rgba(7,27,50,.4);
}
.login-caja .marca { font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; color: var(--navy-900); }
.login-caja .marca span { color: var(--dorado); }
.login-caja .lema { color: var(--tinta-2); font-size: .875rem; margin: .35rem 0 1.5rem; }
.login-pie { color: #8FA4C0; font-size: .8125rem; text-align: center; margin-top: 1.25rem; }
.login-demo {
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linea-2);
  font-size: .8125rem; color: var(--tinta-2);
}
.login-demo b { color: var(--tinta); font-weight: 600; }
.login-demo code { font-family: var(--mono); font-size: .75rem; }

/* --- Utilidades ------------------------------------------------- */
.flex { display: flex; gap: .6rem; align-items: center; }
.flex.entre { justify-content: space-between; }
.flex.envuelve { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: .35rem; }
.gris { color: var(--tinta-2); }
.gris-2 { color: var(--tinta-3); }
.mono { font-family: var(--mono); }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.mt1 { margin-top: .75rem; } .mb1 { margin-bottom: .75rem; }
.mt2 { margin-top: 1.5rem; } .mb2 { margin-bottom: 1.5rem; }
.centro { text-align: center; }
.der { text-align: right; }
.nowrap { white-space: nowrap; }
.oculto { display: none; }

/* --- Movil: Mi Dia y Mi Semana se usan en celular -------------- */
@media (max-width: 920px) {
  .nav {
    position: static; width: 100%; flex: none; min-height: 0;
    border-right: 0; border-bottom: 1px solid var(--linea);
    padding: .5rem .6rem; display: flex; gap: .3rem; overflow-x: auto;
  }
  .nav .grupo { margin: 0; display: flex; gap: .3rem; }
  .nav .grupo > span { display: none; }
  .nav a { white-space: nowrap; padding: .4rem .7rem; }
  .cuerpo { flex-direction: column; }
  .principal { padding: 1rem .9rem 3rem; width: 100%; }
  .rejilla.dos, .rejilla.tres, .rejilla.principal-lateral { grid-template-columns: 1fr; }
  .cinco { grid-template-columns: 1fr 1fr; }
  .cinco > div:nth-child(2n) { border-right: 0; }
  .cinco > div:nth-child(-n+2) { border-bottom: 1px solid var(--linea-2); }
  .fila, .fila.tres, .fila.cuatro { grid-template-columns: 1fr; }
  h1 { font-size: 1.35rem; }
  .barra .empresa { max-width: 42vw; }
  .barra .usuario { display: none; }
  .tabla th, .tabla td { padding: .6rem .75rem; }
}
@media (max-width: 560px) {
  .cinco { grid-template-columns: 1fr; }
  .cinco > div { border-right: 0; border-bottom: 1px solid var(--linea-2); }
  .cinco > div:last-child { border-bottom: 0; }
  .riel { padding-left: 52px; }
  .riel::before { left: 44px; }
  .bloque .hora { left: -52px; width: 38px; }
  .tabla.apilable thead { display: none; }
  .tabla.apilable tr { display: block; border-bottom: 1px solid var(--linea); padding: .6rem 0; }
  .tabla.apilable td { display: block; border: 0; padding: .15rem .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .barra, .nav, .btn { display: none !important; }
  body { background: #fff; }
  .panel { box-shadow: none; break-inside: avoid; }
}