/* =====================================================================
   GRUPO QBK · Pulse Meta Ads
   public/assets/css/pulse.css

   Portado del prototipo aprobado (qbk-pulse-meta-ads.jsx). Los tokens
   son los mismos y están además en app/Helpers/ui.php, porque las
   gráficas se dibujan como SVG desde PHP y necesitan el color literal.

   Montserrat va primero en la pila y con alternativas del sistema
   detrás: la política de seguridad no admite recursos remotos, así que
   no se carga desde Google Fonts. Donde esté instalada se ve idéntica
   al prototipo; donde no, cae en la sans del sistema sin romper nada.
   ===================================================================== */

:root {
  --canvas:      #EEF0F2;
  --surface:     #FFFFFF;
  --surface-alt: #F6F8F9;
  --ink:         #0F1519;
  --muted:       #68757F;
  --line:        #D9DEE2;
  --line-soft:   #EAEEF0;
  --pine:        #0E6B54;
  --olive:       #5B8C3E;
  --neutro:      #5C6B75;
  --amber:       #C1811A;
  --red:         #B03A2B;

  --sans: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --r:    7px;
  --paso: .12s ease;

  /* Escala de espacio. Todo el aire de la interfaz sale de aquí: con
     seis valores fijos las pantallas quedan alineadas entre sí sin que
     nadie tenga que acordarse de cuántos píxeles usó la anterior. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 18px;
  --e5: 26px;
  --e6: 38px;

  /* Sombras muy suaves: la interfaz es de papel, no de tarjetas
     flotantes. Solo se usan para separar lo que se superpone. */
  --s1: 0 1px 2px rgba(15,21,25,.05);
  --s2: 0 4px 14px rgba(15,21,25,.09);
  --s3: 0 10px 30px rgba(15,21,25,.14);
}

* { box-sizing: border-box; font-variant-numeric: tabular-nums; }

/* Los componentes con display propio ignorarían el atributo hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { padding-left: 16px; }
img { max-width: 100%; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; color: var(--ink); }

::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------------------------------------------------------------------
   Cabecera y navegación

   La cabecera queda fija al desplazar. En una aplicación de nueve
   secciones donde las tablas son largas, tener que volver arriba para
   cambiar de pestaña o de empresa es el roce que más se nota.
   --------------------------------------------------------------------- */
.p-header {
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
  transition: box-shadow var(--paso);
}
.p-header.desplazado { box-shadow: var(--s2); }

.p-header-fila {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e3) 20px; padding: 11px var(--e4);
  max-width: 1320px; margin: 0 auto;
}

.p-marca { display: flex; align-items: center; gap: 12px; }
.p-marca img { height: 30px; width: auto; }
.p-marca .sep { width: 1px; height: 26px; background: var(--line); }
.p-marca .t { font-size: 14.5px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.p-marca .t span { font-weight: 400; color: var(--muted); }

.p-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

.p-header-acciones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }

.p-seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.p-seg a, .p-seg button {
  padding: 6px 12px; font-size: 11.5px; font-weight: 700; border: 0;
  background: transparent; color: var(--muted); transition: background var(--paso);
}
.p-seg a:hover { text-decoration: none; background: var(--surface-alt); }
.p-seg .on { color: #fff; }
.p-seg .on:hover { background: inherit; }

.p-nav {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--e4); max-width: 1320px; margin: 0 auto;
}
.p-nav::-webkit-scrollbar { display: none; }
.p-nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; font-size: 12px; font-weight: 600;
  color: var(--muted); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--paso), border-color var(--paso);
}
.p-nav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line); }
.p-nav a.on { color: var(--ink); border-bottom-color: var(--ink); }
.p-nav a.on .p-ic { opacity: 1; }
.p-nav .p-ic { opacity: .55; transition: opacity var(--paso); }
.p-nav a:hover .p-ic { opacity: .9; }

.p-avatar {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; color: #fff; flex-shrink: 0;
}

.p-usuario { display: flex; align-items: center; gap: 8px; }
.p-usuario .n { font-size: 11.5px; font-weight: 700; line-height: 1.15; }
.p-usuario .r { font-size: 10px; color: var(--muted); }

/* ---------------------------------------------------------------------
   Estructura
   --------------------------------------------------------------------- */
.p-main { max-width: 1260px; margin: 0 auto; padding: 22px 18px 34px; }
.p-pila { display: flex; flex-direction: column; gap: 18px; }
.p-pila-sm { display: flex; flex-direction: column; gap: 10px; }
.p-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-fila-fin { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.p-der { margin-left: auto; }

.p-rejilla { display: grid; gap: 12px; }
.p-r-150 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.p-r-230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.p-r-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.p-r-186 { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }
.p-r-118 { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px 20px; }

.p-h2 h2 { font-size: 19px; font-weight: 800; letter-spacing: -.03em; margin-top: 2px; }
.p-h2 p { font-size: 12px; color: var(--muted); margin-top: 5px; max-width: 660px; line-height: 1.6; }

.p-sep-mes {
  display: flex; align-items: center; gap: 12px; padding-top: 4px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.p-sep-mes .l { flex: 1; height: 1px; background: var(--line); }
.p-sep-mes .d { font-size: 10.5px; color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }

/* ---------------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------------- */
.p-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--s1);
}
.p-card.pad   { padding: var(--e4); }
.p-card.pad-s { padding: var(--e3); }
.p-card-t { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.01em; }

/* Las cifras del panel llevan un filete del color de su banda. Es lo
   que permite leer el estado del mes sin leer los números. */
.p-kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--e3); box-shadow: var(--s1);
  position: relative; overflow: hidden;
}
.p-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--filete, transparent);
}
.p-kpi .v { font-size: 20px; font-weight: 800; letter-spacing: -.035em; margin-top: 4px; line-height: 1.15; }
.p-kpi .s { font-size: 10.5px; color: var(--muted); margin-top: 3px; }

.p-vacio {
  display: flex; flex-direction: column; align-items: center; gap: var(--e3);
  padding: var(--e6) var(--e5); text-align: center;
}
.p-vacio .ic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-alt); color: var(--muted); border: 1px solid var(--line-soft);
}
.p-vacio p { font-size: 12.5px; color: var(--muted); max-width: 430px; line-height: 1.6; }

.p-nota {
  padding: 11px 13px; border-radius: 6px; font-size: 11.5px; line-height: 1.6;
}
.p-nota.amber { background: rgba(193,129,26,.11); }
.p-nota.pine  { background: rgba(14,107,84,.08); }
.p-nota.red   { background: rgba(176,58,43,.09); }
.p-nota.gris  { background: var(--surface-alt); border: 1px solid var(--line-soft); }

/* ---------------------------------------------------------------------
   Píldoras, chips y botones
   --------------------------------------------------------------------- */
.p-chip {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}

.p-btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 8px 15px; font-size: 12.5px; font-weight: 600; border-radius: 6px;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  transition: opacity var(--paso), background var(--paso), transform var(--paso), box-shadow var(--paso);
}
.p-btn:hover { text-decoration: none; opacity: .9; box-shadow: var(--s1); }
.p-btn:active { transform: translateY(1px); box-shadow: none; }
.p-btn.sm { padding: 5px 10px; font-size: 11.5px; }
.p-btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.p-btn.ghost:hover { background: var(--surface-alt); opacity: 1; }
.p-btn.quiet { background: transparent; color: var(--muted); border-color: transparent; }
.p-btn.quiet:hover { color: var(--ink); background: var(--surface-alt); opacity: 1; }
.p-btn.danger { background: transparent; color: var(--red); border-color: rgba(176,58,43,.25); }
.p-btn.danger:hover { background: rgba(176,58,43,.07); opacity: 1; }
.p-btn[disabled], .p-btn.off { opacity: .45; pointer-events: none; }

.p-link { font-size: 11px; font-weight: 700; color: var(--muted); background: none; border: 0; padding: 0; }
.p-link:hover { color: var(--ink); }
.p-link.red:hover { color: var(--red); }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
.p-campo { display: flex; flex-direction: column; gap: 4px; }
.p-campo > span.l { font-size: 11px; font-weight: 600; }
.p-campo > span.h { font-size: 10.5px; color: var(--muted); line-height: 1.45; }

.p-in, .p-sel, .p-ta {
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px;
  font-size: 13px; background: var(--surface); width: 100%; outline: none;
  transition: border-color var(--paso), box-shadow var(--paso);
}
.p-ta { min-height: 66px; resize: vertical; line-height: 1.5; }
.p-in:focus, .p-sel:focus, .p-ta:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(15,21,25,.08);
}
.p-in.num { text-align: right; }
.p-in.mini { padding: 4px 6px; font-size: 11.5px; }
.p-sel {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2368757F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; padding-right: 26px;
}
.p-sel.auto { width: auto; font-size: 11.5px; font-weight: 600; padding: 6px 24px 6px 9px; }
input[type="file"] { font-size: 11px; font-family: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.p-grupo { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 4px; }
.p-grupo:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */
.p-scroll { overflow-x: auto; }
.p-tabla { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.p-tabla th {
  text-align: left; padding: 9px 10px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.p-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.p-tabla tr:last-child td { border-bottom: 0; }
.p-tabla .num { text-align: right; }
.p-tabla .fuerte { font-weight: 700; }
.p-tabla tbody tr:hover { background: var(--surface-alt); }
.p-tabla tr.total td { border-top: 2px solid var(--ink); font-weight: 800; background: var(--surface); }
.p-tabla tr.apagada { opacity: .45; }
.p-sub { font-size: 10px; color: var(--muted); font-weight: 600; }

/* ---------------------------------------------------------------------
   Gráficas y medidor
   --------------------------------------------------------------------- */
.p-graf { display: block; overflow: visible; }
.p-graf text.g-tick, svg text.g-tick { font-size: 9.5px; fill: var(--muted); font-family: var(--sans); }
.p-graf-vacia {
  display: grid; place-items: center; font-size: 11.5px; color: var(--muted);
  background: var(--surface-alt); border-radius: 6px;
}
.p-leyenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 10.5px; color: var(--muted); }
.p-leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

.p-medidor-caja { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.p-medidor { overflow: visible; }

/* El arco se dibuja al aparecer. No es adorno: el recorrido hace ver
   que el número se construye sobre una escala, y que el 50 del centro
   es el punto de partida y no el mínimo. */
.p-medidor .arco { animation: arco .7s cubic-bezier(.22,.75,.3,1) both; }
@keyframes arco { from { stroke-dasharray: 0 999; } }
@media (prefers-reduced-motion: reduce) { .p-medidor .arco { animation: none; } }
.p-medidor-n { font-size: 30px; font-weight: 800; fill: var(--ink); letter-spacing: -.03em; font-family: var(--sans); }
.p-medidor-b { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; font-family: var(--sans); }
.p-medidor-pie { font-size: 9.5px; color: var(--muted); margin-top: -2px; }

.p-scorebox {
  display: grid; place-items: center; border-radius: 8px;
  font-size: 16px; font-weight: 800; letter-spacing: -.03em; flex-shrink: 0;
}

/* Cascada del Score */
.p-casc { display: flex; flex-direction: column; gap: 8px; }
.p-casc-fila { display: flex; flex-direction: column; gap: 4px; }
.p-casc-cab, .p-casc-pie {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 9px; border-radius: 5px; background: var(--surface-alt);
}
.p-casc-cab span:first-child, .p-casc-pie span:first-child { font-size: 11.5px; font-weight: 700; }
.p-casc-cab span:last-child { font-size: 12px; font-weight: 800; }
.p-casc-pie span:last-child { font-size: 15px; font-weight: 800; }
.p-casc-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p-casc-t .n { font-size: 11.5px; font-weight: 600; }
.p-casc-t .d { font-size: 12px; font-weight: 800; }
.p-casc-t .d em { color: var(--muted); font-weight: 600; font-size: 10px; font-style: normal; }
.p-casc-barra { position: relative; height: 6px; background: var(--line-soft); border-radius: 3px; }
.p-casc-barra .cero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line); }
.p-casc-barra .v { position: absolute; top: 0; height: 6px; border-radius: 3px; }
.p-casc-fila .exp { font-size: 10.5px; color: var(--muted); line-height: 1.45; }

/* ---------------------------------------------------------------------
   Cinta de los doce meses
   --------------------------------------------------------------------- */
.p-cinta { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); }
.p-cinta a {
  border: 1px solid var(--line-soft); border-radius: var(--r); padding: 9px 6px;
  background: var(--surface-alt); text-align: center; display: block;
  transition: transform var(--paso);
}
.p-cinta a:hover { text-decoration: none; transform: translateY(-1px); }
.p-cinta .m { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.p-cinta .s { font-size: 19px; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
.p-cinta .c { font-size: 9.5px; color: var(--muted); font-weight: 600; }

/* ---------------------------------------------------------------------
   Ficha de campaña
   --------------------------------------------------------------------- */
.p-ficha { border-left: 3px solid var(--line); }
.p-ficha summary {
  display: flex; align-items: center; gap: 14px; padding: 13px;
  cursor: pointer; list-style: none;
}
.p-ficha summary::-webkit-details-marker { display: none; }
.p-ficha summary:hover { background: var(--surface-alt); }
.p-ficha[open] summary { border-bottom: 1px solid var(--line-soft); }
.p-ficha .cuerpo { padding: 14px 13px 16px; display: flex; gap: 22px; flex-wrap: wrap; }
.p-ficha .cuerpo .izq { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 152px; }
.p-ficha .cuerpo .der { flex: 1 1 380px; display: flex; flex-direction: column; gap: 16px; }
.p-ficha .titulo { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.p-ficha .alias { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .05em; }
.p-ficha .meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.p-ficha .cifras { display: flex; gap: 20px; flex-shrink: 0; }
.p-ficha .cifras .v { font-size: 12.5px; font-weight: 700; margin-top: 1px; }
.p-ficha .mas { color: var(--muted); font-size: 15px; flex-shrink: 0; }
@media (max-width: 900px) { .p-ficha .cifras { display: none; } }

.p-dato .l { font-size: 10px; color: var(--muted); font-weight: 600; }
.p-dato .v { font-size: 12.5px; font-weight: 700; }

.p-pre {
  font-size: 10.5px; line-height: 1.6; margin-top: 5px; white-space: pre-wrap;
  font-family: inherit; background: var(--surface-alt); padding: 8px;
  border-radius: 5px; border: 1px solid var(--line-soft); color: var(--muted);
}

.p-retro { padding: 12px; border-radius: 6px; }
.p-retro p { font-size: 11.5px; line-height: 1.6; margin-top: 4px; }
.p-retro .de { font-size: 10px; margin-top: 6px; font-weight: 600; }

.p-lista-alerta { display: flex; flex-direction: column; gap: 10px; }
.p-lista-alerta .it { padding-left: 12px; border-left: 2px solid var(--line); }
.p-lista-alerta .it span.t { font-size: 12.5px; font-weight: 700; }
.p-lista-alerta .it p { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------------------------------
   Tablero de solicitudes
   --------------------------------------------------------------------- */
.p-col-cab {
  display: flex; align-items: center; gap: 8px; padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
}
.p-col-cab .t { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.p-col-cab .n { font-size: 10.5px; color: var(--muted); margin-left: auto; font-weight: 700; }
.p-col-vacia { font-size: 10.5px; color: var(--muted); padding: 8px 2px; }
.p-tarjeta-sol { padding: 12px; border-left: 3px solid var(--line); }
.p-tarjeta-sol .t { font-size: 11.5px; font-weight: 700; line-height: 1.35; }
.p-tarjeta-sol .o { font-size: 10.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.p-tarjeta-sol .m { font-size: 11px; font-weight: 700; margin-top: 6px; }

/* ---------------------------------------------------------------------
   Pruebas A/B
   --------------------------------------------------------------------- */
.p-ab { display: flex; gap: 12px; flex-wrap: wrap; }
.p-ab > div { flex: 1 1 260px; padding: 12px; border-radius: 6px; border: 1px solid var(--line-soft); background: var(--surface-alt); }
.p-ab .letra {
  width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; background: var(--line); color: var(--muted);
}
.p-ab .rej { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 8px; }

/* ---------------------------------------------------------------------
   Línea de tiempo del ciclo
   --------------------------------------------------------------------- */
.p-paso { display: flex; gap: 12px; }
.p-paso .col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.p-paso .n {
  width: 22px; height: 22px; border-radius: 6px; color: #fff;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800;
}
.p-paso .linea { width: 1px; flex: 1; background: var(--line); margin-top: 3px; }
.p-paso .cuando { font-size: 12px; font-weight: 700; }
.p-paso .que { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.6; }

/* ---------------------------------------------------------------------
   Recordatorios
   --------------------------------------------------------------------- */
.p-rec { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.p-rec:first-child { border-top: 0; }
.p-rec.hecho { opacity: .45; }
.p-rec.hecho .t { text-decoration: line-through; }
.p-rec .t { font-size: 11.5px; line-height: 1.5; }
.p-rec .caja {
  width: 16px; height: 16px; border-radius: 4px; margin-top: 2px; flex-shrink: 0;
  border: 1.5px solid var(--line); background: transparent; color: #fff;
  font-size: 10px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.p-rec .caja.on { border-color: var(--pine); background: var(--pine); }

/* ---------------------------------------------------------------------
   Ingreso
   --------------------------------------------------------------------- */
.p-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.p-login .caja { width: 100%; max-width: 390px; }
.p-login .p-card { padding: 26px; }
.p-login h1 { font-size: 18px; font-weight: 800; letter-spacing: -.03em; margin-top: 2px; }
.p-login p.s { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.p-login .campos { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.p-login .pie { font-size: 10.5px; color: var(--muted); text-align: center; margin-top: 14px; line-height: 1.6; }

/* ---------------------------------------------------------------------
   Avisos flotantes
   --------------------------------------------------------------------- */
.p-flash { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: 8px; align-items: center; max-width: 92vw; }
.p-flash div {
  display: flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 600; box-shadow: var(--s3);
  animation: sube .22s ease both;
}
.p-flash div.error { background: var(--red); }
.p-flash div.aviso { background: var(--amber); }
.p-flash div.yendose { animation: baja .3s ease both; }
@keyframes sube { from { opacity: 0; transform: translateY(10px); } }
@keyframes baja { to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .p-flash div, .p-flash div.yendose { animation: none; }
}

.p-banda-error { background: rgba(193,129,26,.14); font-size: 11.5px; padding: 8px 18px; }

/* ---------------------------------------------------------------------
   Pie
   --------------------------------------------------------------------- */
.p-footer {
  max-width: 1260px; margin: 0 auto; padding: 0 18px 30px;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  font-size: 10.5px; color: var(--muted);
}

/* ---------------------------------------------------------------------
   Ayuda y diagnóstico
   --------------------------------------------------------------------- */
.p-ayuda h3 {
  font-size: 13.5px; font-weight: 800; letter-spacing: -.015em;
  margin: var(--e4) 0 var(--e2); scroll-margin-top: 110px;
}
.p-ayuda h3:first-child { margin-top: 0; }
.p-ayuda p, .p-ayuda li { font-size: 12px; line-height: 1.7; }
.p-ayuda ul, .p-ayuda ol { margin: var(--e2) 0; padding-left: var(--e4); }
.p-ayuda li { margin-bottom: var(--e1); }
.p-ayuda code, .p-cmd {
  font-family: "Consolas", "SF Mono", ui-monospace, monospace;
  font-size: 11.5px; background: var(--surface-alt);
  border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 5px;
}
.p-cmd {
  display: block; padding: 10px 12px; margin: var(--e2) 0;
  white-space: pre-wrap; word-break: break-all; line-height: 1.6; color: var(--ink);
}
.p-sintoma {
  border-left: 3px solid var(--line); padding: var(--e2) 0 var(--e2) var(--e3);
  margin-bottom: var(--e3);
}
.p-sintoma .q { font-size: 12.5px; font-weight: 700; }
.p-sintoma .a { font-size: 11.5px; color: var(--muted); line-height: 1.65; margin-top: 3px; }
.p-indice {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  padding: var(--e3); background: var(--surface-alt);
  border: 1px solid var(--line-soft); border-radius: var(--r);
}
.p-indice a { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.p-indice a:hover { color: var(--ink); }

.p-chequeo { display: flex; align-items: center; gap: var(--e2); padding: 7px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.p-chequeo:last-child { border-bottom: 0; }
.p-chequeo .marca { width: 18px; font-weight: 800; text-align: center; flex-shrink: 0; }
.p-chequeo .det { margin-left: auto; color: var(--muted); font-size: 11px; text-align: right; }

/* ---------------------------------------------------------------------
   Pantallas angostas
   La aplicación se usa en el escritorio, pero el director la abre en el
   teléfono para mirar el panel. Que eso funcione es suficiente; no hay
   que llevar la tabla de cargue mensual a 375 px.
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
  .p-main { padding: var(--e4) var(--e3) var(--e5); }
  .p-header-fila { padding: 10px var(--e3); gap: var(--e2) var(--e3); }
  .p-nav { padding: 0 var(--e3); }
  .p-header-acciones { width: 100%; margin-left: 0; }
  .p-usuario .n, .p-usuario .r { display: none; }
  .p-marca .t { font-size: 13.5px; }
  .p-ficha summary { flex-wrap: wrap; gap: var(--e2); }
  .p-ficha .cuerpo { gap: var(--e4); }
  .p-ficha .cuerpo .izq { min-width: 100%; }
  .p-fila-fin { gap: var(--e3); }
  .p-h2 h2 { font-size: 17px; }
  .p-rejilla { gap: var(--e2); }
}

/* ---------------------------------------------------------------------
   Impresión
   La ficha del informe se maqueta aparte, en A4 y sin color de fondo.
   --------------------------------------------------------------------- */
@media print {
  .no-print { display: none !important; }
  html, body { background: #fff; font-size: 9pt; }
  .p-main { padding: 0; max-width: none; }
  .p-card { border-color: #CCC; break-inside: avoid; }
  .p-tabla th { position: static; }
  a { text-decoration: none; }
  @page { margin: 14mm; size: A4; }
}

.p-ficha-pdf { display: none; }
@media print { .p-ficha-pdf { display: block; } }
.p-ficha-pdf h1 { font-size: 13pt; font-weight: 800; letter-spacing: -.02em; }
.p-ficha-pdf .cab { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 12px; }
.p-ficha-pdf .cab img { height: 26px; }
.p-ficha-pdf .sub { font-size: 8pt; color: #555; }
.p-ficha-pdf .kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 12px; }
.p-ficha-pdf .kpis div { border: 1px solid #CCC; border-radius: 4px; padding: 6px 7px; }
.p-ficha-pdf .kpis .l { font-size: 6.5pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #666; }
.p-ficha-pdf .kpis .v { font-size: 11pt; font-weight: 800; letter-spacing: -.03em; margin-top: 2px; }
.p-ficha-pdf h2 { font-size: 10pt; font-weight: 800; margin-bottom: 5px; }
.p-ficha-pdf table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.p-ficha-pdf th { text-align: left; padding: 4px 6px; font-size: 7pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #555; border-bottom: 1px solid #999; }
.p-ficha-pdf td { padding: 4px 6px; font-size: 8pt; border-bottom: 1px solid #E5E5E5; }
.p-ficha-pdf tr { break-inside: avoid; }
.p-ficha-pdf .nota { border-top: 1px solid #CCC; padding-top: 6px; font-size: 7pt; color: #666; line-height: 1.5; }

/* ---------------------------------------------------------------------
   Accesibilidad: saltar al contenido y textos solo para lectores
   El enlace vive fuera de la pantalla hasta que alguien lo enfoca con el
   teclado. Quien navega con tabulador no tiene que recorrer todo el menu
   en cada pagina para llegar a lo que vino a hacer.
   --------------------------------------------------------------------- */
.qbk-saltar{
  position:absolute;left:-9999px;top:0;z-index:100000;
  background:#0E1B21;color:#fff;padding:10px 16px;border-radius:0 0 4px 0;
  font:600 14px/1 ui-sans-serif,"Segoe UI",system-ui,sans-serif;text-decoration:none;
}
.qbk-saltar:focus{left:0;}
.qbk-solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =====================================================================
   FRENTE A FRENTE
   Las empresas comparadas medida por medida. Cada medida reparte una
   escala común entre las dos barras, así que la más larga es de verdad
   la mayor: se ve quién gana sin leer una sola cifra.
   ===================================================================== */

.p-careo{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:20px 30px;
  margin-top:16px;
}
.p-careo-titulo{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
  padding-bottom:9px;
  margin-bottom:10px;
  border-bottom:1px solid var(--line-soft);
}
.p-careo-pista{
  letter-spacing:0;
  text-transform:none;
  font-weight:500;
  font-size:10px;
  color:var(--muted);
  opacity:.75;
}

.p-careo-linea{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 74px;
  align-items:center;
  gap:10px;
  margin-bottom:9px;
}
.p-careo-linea:last-child{ margin-bottom:0; }

.p-careo-quien{
  font-size:11.5px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.p-careo-riel{
  height:9px;
  border-radius:5px;
  background:var(--line-soft);
  overflow:hidden;
}
.p-careo-barra{
  display:block;
  height:100%;
  /* El extremo redondeado apoya en la línea de salida y solo curva el
     lado que crece: la barra se lee como una medida, no como una píldora */
  border-radius:0 5px 5px 0;
  min-width:3px;
}
.p-careo-cifra{
  font-size:12.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  text-align:right;
  color:var(--ink);
  white-space:nowrap;
}
/* Quien gana la medida lleva un punto, no solo un color: el color solo
   no distingue nada para quien no separa bien los tonos. */
.p-careo-cifra.gana::before{
  content:"";
  display:inline-block;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--pine);
  margin-right:5px;
  vertical-align:middle;
}

@media (max-width:640px){
  .p-careo{ grid-template-columns:1fr; gap:18px; }
  .p-careo-linea{ grid-template-columns:56px minmax(0,1fr) 66px; }
}