/* ============================================================================
   Añadidos mínimos para que la maqueta corra como HTML suelto.
   `estilos.css` es una copia sin tocar de arkano-hub/app/globals.css: no se
   edita, se importa. Todo lo de aquí es lo que en la app real pone Next.js
   (las fuentes) o React (cambiar de pantalla).
   ========================================================================== */

:root{
  /* En la app las inyecta next/font. Aquí caen a las del sistema. */
  --font-inter: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* El menú de la app son <a>; aquí son <button> para poder cambiar de vista
   sin recargar. Se le devuelven los estilos que un botón pierde. */
.nl{width:100%;text-align:left;border:none;background:none;font-family:inherit}
.nl.sub2{padding-left:36px;font-size:12.8px}

/* Cambio de pantalla: en la app lo hace el router. */
.view{display:none}
.view.on{display:block}

/* Etiqueta «nuevo» para señalar lo que este rediseño agrega. Solo existe en
   la maqueta: no es parte del sistema de diseño del Hub. */
.nw{display:inline-flex;align-items:center;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;background:var(--cy);color:#04252A;padding:2px 6px;
  border-radius:4px;font-weight:800;vertical-align:2px;margin-left:7px}
.nw.wa{background:var(--wa);color:#fff}
.nw.er{background:var(--er);color:#fff}

/* Pies de tabla: el Hub todavía no los usa, la maqueta sí para los totales. */
tfoot td{border-top:2px solid var(--n20);border-bottom:none;font-weight:700;background:#FAFCFC}

/* Segunda línea gris dentro de una celda. */
.sm2{font-size:11.5px;color:var(--n50);margin-top:3px;font-weight:400}

/* `.fase .fl` es un <ul> en la app y React le quita las viñetas. */
.fl{list-style:none}

/* Iconos. En la app los pinta <Icon> desde lib/icons.tsx; aquí van en un sprite
   con los mismos trazos y los mismos atributos (fill none, stroke currentColor,
   grosor 2, puntas y uniones redondeadas). */
.ic{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ki .ic{width:14px;height:14px;flex:0 0 14px}
.pill .ic{width:13px;height:13px;flex:0 0 13px}
.di .ic{width:19px;height:19px;flex:0 0 19px;stroke-width:1.9}
#sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Barra superior con dos líneas de botones en pantallas chicas. */
.tb{min-height:66px;height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}

/* ── Hoja de cálculo: la Cotización se lee como en el Excel ────────────────
   Cada fase pinta su banda con su color y tiñe sus filas con el lavado. Las
   celdas amarillas son las editables, igual que allá. */
.hoja{width:100%;border-collapse:collapse}
.hoja th{background:var(--d800);color:#DCEAEE;border:1px solid var(--n30);
  text-align:center;padding:8px 9px;font-size:10.5px}
.hoja td{border:1px solid var(--n20);padding:5px 8px;font-size:12.5px;vertical-align:middle}
.hoja tr.fase td{background:var(--f);color:#fff;font-weight:800;border-color:var(--f)}
.hoja tr.fase td b{color:#fff}
.hoja tbody tr td{background:var(--fw)}
.hoja tbody tr.fase td{background:var(--f)}
.hoja .calc{color:var(--n70);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hoja .fija{text-align:right;color:var(--n50);font-variant-numeric:tabular-nums;white-space:nowrap}
.hoja .in{min-height:30px;padding:4px 7px;font-size:12.5px;border-radius:6px}
.hoja textarea.in{resize:vertical;line-height:1.4;min-height:44px;font-family:inherit}
.hoja .in.ed{background:#FFF8C4;border-color:#E0CF6A;color:var(--n90);font-weight:600;text-align:left}
.hoja .in.ed:focus{background:#fff}
.hoja td.h .in.ed{text-align:right}
.hoja tbody.f1{--f:var(--fase1);--fw:var(--fase1w)} .hoja tbody.f2{--f:var(--fase2);--fw:var(--fase2w)}
.hoja tbody.f3{--f:var(--fase3);--fw:var(--fase3w)} .hoja tbody.f4{--f:var(--fase4);--fw:var(--fase4w)}
.hoja tbody.f5{--f:var(--fase5);--fw:var(--fase5w)} .hoja tbody.f6{--f:var(--fase6);--fw:var(--fase6w)}
.hojaw{overflow-x:auto}
.hoja{min-width:1000px}

/* ── Gráficos del P&G ──────────────────────────────────────────────────────
   Marcas finas, extremos redondeados de 4px, 2px de aire entre segmentos y
   ejes discretos. Los colores salen de la paleta del Hub y pasaron el
   validador: azul, naranja, verde, rosa y violeta para categorías; ámbar,
   violeta y verde para la cascada; verde y rojo para entra/sale. */
.gwrap{display:flex;flex-direction:column;gap:14px}

/* barra horizontal con su etiqueta y su valor */
.gbar{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:14px;align-items:center}
.gbar .gl{font-size:12.5px;color:var(--n70);min-width:0}
.gbar .gl b{display:block;font-weight:650;color:var(--n90)}
.gbar .gl span{font-size:11px;color:var(--n50)}
.gbar .gt{position:relative;height:18px;background:var(--n10);border-radius:4px;overflow:hidden}
.gbar .gt i{position:absolute;inset:0 auto 0 0;border-radius:4px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.gbar .gt i.hatch{background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(255,255,255,.55) 5px 10px)}
.gbar .gv{font-size:13px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:96px;text-align:right}
.gbar .gv small{display:block;font-size:10.5px;font-weight:600;color:var(--n50)}

/* barra apilada al 100% */
.g100{display:flex;gap:2px;height:34px;margin:4px 0 12px}
.g100 span{position:relative;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:750;color:#fff;min-width:2px}
.g100 span:first-child{border-radius:4px 0 0 4px}
.g100 span:last-child{border-radius:0 4px 4px 0}

/* leyenda */
.gleg{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--n70)}
.gleg span{display:inline-flex;align-items:center;gap:7px}
.gleg i{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.gleg b{font-variant-numeric:tabular-nums}

/* eje de referencia discreto */
.gejes{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:14px;
  font-size:10.5px;color:var(--n50);font-variant-numeric:tabular-nums}
.gejes .gt{display:flex;justify-content:space-between;border-top:1px solid var(--n20);padding-top:5px}
.gejes .gv{min-width:96px}

/* el número grande cuando el dato es uno solo */
.hero{font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.hero.neg{color:var(--er)} .hero.pos{color:var(--ok)}
.herol{font-size:12px;color:var(--n50);margin-top:7px;line-height:1.5}

@media(max-width:640px){
  .gbar{grid-template-columns:1fr auto;gap:6px 12px}
  .gbar .gt{grid-column:1/-1}
  .gejes{display:none}
}

/* ── Selector de usuario en el pie de la barra lateral ─────────────────────
   Es una maqueta: en la app de verdad el rol sale de la sesión, no se elige.
   Sirve para que los socios vean con sus propios ojos qué alcanza a ver un
   colaborador y qué no. */
.wsel{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid transparent;cursor:pointer;text-align:left;
  transition:.13s;font:inherit}
.wsel:hover{background:rgba(255,255,255,.09)}
.wsel.on{background:rgba(0,212,216,.13);border-color:rgba(0,212,216,.3)}
.wsel .wn,.wsel .wr{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}