/* ---------------------------------------------------------------------------
   El inicio como tablero de mando (inicio.js, 19 oct 2026).

   Los colores, las letras y los botones de estilo.css; lo nuevo es la jerarquía. Arriba
   la cifra que se lee de un vistazo (lo vendido del mes), con su gráfica y de qué está
   hecha la proyección. Después el día y los siete que siguen, la cola y, al final, un
   acceso grande a cada sección.

   Teléfono primero: una sola columna, todo lo que se toca mide al menos 44 px de alto y
   nada empuja la página hacia el costado (min-width:0 en los hijos de las rejillas y
   textos que se cortan con puntos suspensivos). Desde 1100 px la agenda y la cola van
   lado a lado.

   El texto chico va en --tinta-2 y no en --tinta-3: el gris claro no llega a 4.5 a 1
   sobre blanco, y esto se lee en la calle con el sol encima.
--------------------------------------------------------------------------- */

.ini{max-width:1240px;margin:0 auto;display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.ini > *,.ini-lado > *,.ini-mes > *,.ini-dias > *,.ini-contadores > *,.ini-accesos > *,
.ini-mes-cifras > *,.ini-partes > *{min-width:0}
.ini-lado{display:grid;gap:16px;align-content:start}

@media(min-width:1100px){
  .ini-oficina{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
    grid-template-areas:"mes mes" "agenda lado" "hub hub";align-items:start}
  .ini-oficina > .ini-mes{grid-area:mes}
  .ini-oficina > .ini-agenda{grid-area:agenda}
  .ini-oficina > .ini-lado{grid-area:lado}
  .ini-oficina > .ini-hub{grid-area:hub}
}

/* El rótulo chico en mayúsculas, el de toda la pantalla. */
.ini-rot{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-2);font-weight:700;margin:0}
.ini-nota{font-size:13px;color:var(--tinta-2);line-height:1.5;margin:12px 0 0}
.solo-lector{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* El foco del teclado se ve en todo lo que se toca. */
.ini a:focus-visible,.ini button:focus-visible{outline:2px solid var(--verde-hondo);
  outline-offset:2px;border-radius:8px}

/* ================================ 1. el mes ================================ */

.ini-mes{position:relative;background:linear-gradient(150deg,#fff 55%,var(--verde-mas-suave) 100%);
  border:1px solid var(--linea);border-radius:var(--r-g);padding:22px 20px 20px 24px;
  box-shadow:var(--sombra-2);display:grid;gap:20px;overflow:hidden;
  grid-template-columns:minmax(0,1fr)}
.ini-mes::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--verde) 0%,var(--lima) 100%)}
@media(min-width:860px){
  .ini-mes{grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);gap:20px 32px;padding:26px 28px 24px 32px}
  .ini-mes .ini-proy{grid-column:1 / -1}
}

.ini-grande{font-size:clamp(30px,8.4vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1.05;
  margin:6px 0 10px;font-variant-numeric:tabular-nums;color:var(--tinta);overflow-wrap:anywhere}
.ini-grande-txt{font-size:clamp(24px,6.4vw,32px);letter-spacing:-.025em}
.ini-mes-pie{margin:-4px 0 10px;font-size:13px;color:var(--tinta-2);font-weight:600}
.ini-grande span{font-size:.55em;letter-spacing:-.015em;color:var(--tinta-2);font-weight:700}

.ini-delta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  border-radius:99px;padding:5px 11px;line-height:1.3}
.ini-delta.sube{background:var(--verde-suave);color:var(--verde-mas-hondo)}
.ini-delta.baja{background:var(--alerta-suave);color:var(--alerta)}
.ini-delta.neutro,.ini-delta.igual{background:var(--superficie-2);color:var(--tinta-2)}

.ini-mes-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px;margin-top:18px}
.ini-mes-cifras > *{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-s);
  background:rgba(255,255,255,.75);border:1px solid var(--linea);text-decoration:none;color:var(--tinta)}
/* La cifra no se parte por la mitad ("RD$62,5" arriba y "76" abajo): si no cabe, la
   rejilla baja la cajita a otra fila. */
.ini-mes-cifras b{font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.ini-mes-cifras small{font-size:12px;color:var(--tinta-2);line-height:1.35}
a.ini-mes-cobrar{transition:border-color .14s,background-color .14s;min-height:44px}
a.ini-mes-cobrar:hover{border-color:var(--verde);background:#fff}
a.ini-mes-cobrar.alerta{border-color:#EBC9AE}
a.ini-mes-cobrar.alerta small{color:var(--alerta);font-weight:600}

/* ----------------------------- la gráfica ----------------------------- */
.ini-graf{margin:0;display:flex;flex-direction:column;gap:6px;align-self:end}
.ini-graf-lienzo{position:relative;height:150px}
.ini-graf-lienzo svg{display:block;width:100%;height:100%;overflow:visible}
.ini-graf-rej{stroke:var(--linea);stroke-width:1}
/* El mes pasado en --tinta-2 (19 oct 2026): con --tinta-4 daba 1.85:1 contra el blanco y se
   perdia en la calle. Punteado corto, para no confundirse con la proyeccion (raya larga). */
.ini-graf-antes{fill:none;stroke:var(--tinta-2);stroke-width:1.4;stroke-dasharray:2 3;stroke-linejoin:round}
.ini-graf-area{fill:rgba(12,180,96,.10)}
.ini-graf-mes{fill:none;stroke:var(--verde);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.ini-graf-proy{fill:none;stroke:var(--verde-hondo);stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round}
.ini-graf-hoy{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--verde);
  border:2.5px solid #fff;box-shadow:0 0 0 1px var(--verde-hondo);transform:translate(-50%,-50%)}
.ini-graf-eje{position:relative;display:flex;justify-content:space-between;font-size:11.5px;
  color:var(--tinta-2);font-weight:600;min-height:16px}
.ini-graf-eje-hoy{position:absolute;top:0;transform:translateX(-50%);color:var(--verde-mas-hondo)}
.ini-leyenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--tinta-2)}
.ini-leyenda span{display:inline-flex;align-items:center;gap:6px}

/* Las muestras de color de la leyenda: rayitas para las líneas, cuadritos para la barra. */
.ini-sw{display:inline-block;flex:none;width:16px;height:3px;border-radius:2px;vertical-align:middle}
.ini-sw.mes{background:var(--verde)}
.ini-sw.proy{background:repeating-linear-gradient(90deg,var(--verde-hondo) 0 4px,transparent 4px 7px)}
.ini-sw.antes{background:repeating-linear-gradient(90deg,var(--tinta-2) 0 2px,transparent 2px 5px)}
.ini-sw.vendido,.ini-sw.agendado,.ini-sw.probable{width:11px;height:11px;border-radius:3px}

/* ----------------------- de qué está hecha la proyección ----------------------- */
.ini-proy{border-top:1px solid var(--linea);padding-top:18px}
.ini-proy-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:10px}
.ini-proy-v{font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--verde-mas-hondo);
  font-variant-numeric:tabular-nums}
.ini-proy-pie{font-size:13px;color:var(--tinta-2);font-weight:600;margin-left:auto}
.ini-barra{position:relative;height:14px;border-radius:99px;background:var(--superficie-2);
  display:flex;box-shadow:inset 0 0 0 1px var(--linea)}
.ini-barra-seg{height:100%;flex:none}
.ini-barra-seg:first-child{border-radius:99px 0 0 99px}
/* Los mismos tres verdes de Metricas (tokens --proy-* de estilo.css, 19 oct 2026). */
.ini-barra-seg.vendido,.ini-sw.vendido{background:var(--proy-firme)}
.ini-barra-seg.agendado,.ini-sw.agendado{background:var(--proy-medio)}
.ini-barra-seg.probable,.ini-sw.probable{background:var(--proy-claro)}
/* Dónde cerró el mes pasado: una raya que sobresale de la barra. */
.ini-barra-marca{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;
  background:var(--tinta-2);border-radius:2px}
.ini-partes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 18px;margin:14px 0 0}
.ini-partes div{display:flex;flex-direction:column;gap:2px}
.ini-partes dt{font-size:12.5px;color:var(--tinta-2);font-weight:600;display:flex;align-items:center;gap:7px}
.ini-partes dd{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ini-partes small{display:block;font-size:12px;font-weight:500;letter-spacing:0;color:var(--tinta-2);margin-top:1px}

/* El inicio de antes, si el servidor todavía no manda `ventas`. */
.ini-mes-simple{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ini-cifra{display:flex;flex-direction:column;gap:3px}
.ini-cifra b{font-size:26px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.ini-cifra small{font-size:12.5px;color:var(--tinta-2)}

/* ============================== las secciones ============================== */

.ini-sec{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:16px 16px 18px;
  box-shadow:var(--sombra-1)}
@media(min-width:640px){.ini-sec{padding:18px 20px 20px}}
.ini-sec-cab{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-bottom:12px}
.ini-sec-cab h2{font-size:16.5px;letter-spacing:-.015em}
.ini-sec-der{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.ini-mas{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:9px;
  font:600 13.5px var(--boton);color:var(--verde-mas-hondo);text-decoration:none;
  transition:background-color .14s}
.ini-mas:hover{background:var(--verde-mas-suave)}
.ini-h3{font-size:13px;font-weight:700;color:var(--tinta-2);margin:16px 0 4px;display:flex;
  flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.ini-h3 span{color:var(--alerta);font-variant-numeric:tabular-nums}

/* ============================== 2. la agenda ============================== */

.ini-dias{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:700px){
  .ini-dias{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ini-dia.hoy{grid-column:1 / -1}
}
.ini-dia{border:1px solid var(--linea);border-radius:var(--r-s);padding:12px 12px 8px;background:#fff}
.ini-dia.hoy{border-color:#BFE6CF;background:linear-gradient(180deg,var(--verde-mas-suave) 0%,#fff 70%);
  padding:14px 14px 10px}
.ini-dia.libre{background:var(--ground);padding-bottom:12px}
.ini-dia header{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:8px}
.ini-dia h3{font-size:15px;letter-spacing:-.012em}
.ini-dia.hoy h3{font-size:17px}
.ini-dia h3 span{font-size:13px;font-weight:600;color:var(--tinta-2);letter-spacing:0}
.ini-dia-meta{margin:0 0 0 auto;font-size:12.5px;color:var(--tinta-2);font-weight:600}
.ini-libre{margin:0;font-size:13px;color:var(--tinta-2)}
/* Los dias libres seguidos, en una sola linea a todo lo ancho (19 oct 2026). */
.ini-libres{grid-column:1 / -1;margin:0;padding:10px 12px;border:1px dashed var(--linea-fuerte);
  border-radius:var(--r-s);font-size:13.5px;font-weight:600;color:var(--tinta-2);background:var(--ground)}

/* La regla del día: de 7 a 19, con los trabajos llenos y las horas de Google rayadas. */
.ini-regla{margin:2px 0 6px}
.ini-regla-pista{position:relative;height:20px;border-radius:6px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--linea);overflow:hidden}
.ini-bloque{position:absolute;top:3px;bottom:3px;border-radius:4px}
.ini-bloque.trabajo{background:var(--c,var(--verde))}
.ini-bloque.ocupado{background:repeating-linear-gradient(135deg,rgba(92,98,96,.30) 0 3px,rgba(92,98,96,.06) 3px 6px);
  box-shadow:inset 0 0 0 1.5px var(--c,var(--tinta-3))}
.ini-bloque.todo{top:0;bottom:0;border-radius:0;opacity:.45;box-shadow:none}
.ini-regla-ahora{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--alerta)}
.ini-regla-horas{position:relative;height:15px;font-size:10.5px;color:var(--tinta-2);font-weight:600}
.ini-regla-h{position:absolute;top:1px;transform:translateX(-50%)}
.ini-regla-h:first-child{transform:none}

.ini-items{list-style:none;margin:0;padding:0}
.ini-items li + li{border-top:1px solid var(--linea)}
.ini-it > a,.ini-it.ocupado{display:grid;grid-template-columns:52px minmax(0,1fr) auto;
  grid-template-areas:"hora que que" "hora quien monto";column-gap:10px;row-gap:1px;
  align-items:center;padding:8px 6px;min-height:52px;color:var(--tinta);text-decoration:none;
  border-radius:8px;transition:background-color .14s}
.ini-it > a:hover{background:var(--superficie-2)}
.ini-hora{grid-area:hora;align-self:start;padding-top:1px;font-weight:800;font-size:14px;
  font-variant-numeric:tabular-nums}
.ini-que{grid-area:que;display:flex;flex-direction:column;min-width:0}
.ini-que b{font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ini-que > span{font-size:12.5px;color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ini-quien{grid-area:quien;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tinta-2);
  font-weight:600;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ini-monto{grid-area:monto;font-weight:800;font-size:14px;color:var(--verde-mas-hondo);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* La hora ocupada se lee como algo que estorba, no como un trabajo: gris y rayada. */
.ini-it.ocupado{color:var(--tinta-2);background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(92,98,96,.04) 6px 12px)}
.ini-it.ocupado .ini-hora{font-weight:700;font-size:12.5px}
.ini-it.ocupado .ini-que b{font-weight:600;color:var(--tinta-2)}
/* El nombre se lleva el ancho entero de su fila y el monto baja a la de quién va: en
   una tarjeta de día estrecha, con el monto al lado, el nombre quedaba en "Gabriela Núñ". */
.ini-it .ini-monto{align-self:center;font-size:13.5px}
/* Lo de quien mira lleva su raya verde a la izquierda. */
.ini-it.mio > a{box-shadow:inset 3px 0 0 var(--verde)}

.ini-conmutador{display:inline-flex;background:var(--superficie-2);border-radius:10px;padding:3px;gap:2px}
.ini-conmutador button{border:0;background:none;cursor:pointer;border-radius:8px;padding:0 12px;min-height:38px;
  font:600 13px var(--boton);color:var(--tinta-2)}
.ini-conmutador button[aria-pressed="true"]{background:#fff;color:var(--verde-mas-hondo);box-shadow:var(--sombra-1)}

/* =============================== 3. la cola =============================== */

.ini-contadores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ini-contador{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--r-s);
  border:1px solid var(--linea);background:var(--ground);color:var(--tinta);text-decoration:none;
  min-height:44px;transition:border-color .14s,background-color .14s}
.ini-contador:hover{border-color:var(--verde);background:#fff}
.ini-contador b{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.ini-contador small{font-size:12.5px;color:var(--tinta-2);line-height:1.35}
.ini-viejos{display:block;margin-top:2px;font-weight:500}
.ini-contador.alerta{border-color:#EBC9AE;background:var(--alerta-suave)}
.ini-contador.alerta small{color:var(--alerta);font-weight:700}

.ini-lista{list-style:none;margin:0;padding:0}
.ini-lista li + li{border-top:1px solid var(--linea)}
.ini-lista a{display:flex;align-items:center;gap:10px;justify-content:space-between;min-height:52px;
  padding:7px 6px;color:var(--tinta);text-decoration:none;border-radius:8px;transition:background-color .14s}
.ini-lista a:hover{background:var(--superficie-2)}

/* ============================== 4. los accesos ============================== */

.ini-accesos{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.ini-acceso{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px;min-height:112px;
  border:1px solid var(--linea);border-radius:var(--r);background:#fff;color:var(--tinta);
  text-decoration:none;transition:border-color .14s,box-shadow .14s,transform .12s}
.ini-acceso:hover{border-color:var(--verde);box-shadow:var(--sombra-2);transform:translateY(-1px)}
.ini-acc-ico{width:38px;height:38px;border-radius:11px;background:var(--verde-suave);color:var(--verde-mas-hondo);
  display:grid;place-items:center;margin-bottom:7px;flex:none}
.ini-acc-ico svg{width:20px;height:20px}
.ini-acc-nom{font-weight:800;font-size:14.5px;letter-spacing:-.01em}
.ini-acc-dato{font-size:12.5px;color:var(--tinta-2);line-height:1.35;overflow-wrap:anywhere}
.ini-acceso.alerta .ini-acc-dato{color:var(--alerta);font-weight:700}
.ini-acceso.alerta::after{content:'';position:absolute;top:14px;right:14px;width:8px;height:8px;
  border-radius:50%;background:var(--alerta)}
/* En el telefono, dos por fila y acostados, con el icono a la izquierda (19 oct 2026): los
   trece accesos ocupaban unos 900 px y empujaban todo lo demas. A tres por fila los nombres
   largos ("Cotizaciones") se partian a media palabra. Asi miden 64 px de alto, sobrados
   para el dedo, y caben en la mitad del espacio. */
@media(max-width:639px){
  .ini-accesos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ini-acceso{min-height:64px;padding:10px 12px 10px 52px;gap:1px;justify-content:center}
  .ini-acc-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:32px;height:32px;
    border-radius:9px;margin:0}
  .ini-acc-ico svg{width:17px;height:17px}
  .ini-acc-nom{font-size:13.5px}
  .ini-acc-dato{font-size:12px}
  .ini-acceso.alerta::after{top:9px;right:9px}
}

/* =============================== la brigada =============================== */

.ini-midia{grid-template-columns:minmax(0,1fr)!important}
.ini-midia-donde{margin:0;font-size:14.5px;line-height:1.5;color:var(--tinta)}
.ini-midia-donde span{color:var(--tinta-2);font-size:13px}
.ini-midia-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ini-midia-acc .b{min-height:44px}

@media(prefers-reduced-motion:reduce){
  .ini-acceso,.ini-contador,.ini-lista a,.ini-it > a,.ini-mas{transition:none}
  .ini-acceso:hover{transform:none}
}