/* ── resumen.css — La sub-pestaña Resumen de Ventas ──
   Se importa desde styles.css. Aparte porque es una pantalla entera y
   mezclarla con el resto haria styles.css inmanejable. */

/* ── Sub-pestañas ── */
.sub-nav{display:flex;gap:4px;margin-bottom:1rem;border-bottom:1px solid var(--border)}
.sub-btn{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;padding:8px 14px;
         border:0;background:none;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;
         margin-bottom:-1px}
.sub-btn:hover{color:var(--text2)}
.sub-btn.on{color:var(--accent);border-bottom-color:var(--accent)}
.sub-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:2px}
.sub-panel{display:none}
.sub-panel.on{display:block}

.res-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
         flex-wrap:wrap;margin-bottom:.75rem}
.vent{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;color:var(--text2);
      background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 12px}
.vent b{color:var(--text1);font-weight:500}
.cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
     flex-wrap:wrap;margin-bottom:.8rem}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;padding:4px 11px;
      border-radius:20px;border:1px solid var(--border);background:transparent;
      color:var(--text2);cursor:pointer}
.pill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pill[disabled]{opacity:.4;cursor:not-allowed}
.pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Dos columnas exactas, no `auto-fit`: en una pantalla de 2000px caben
   tres y la reticula dejaba una tarjeta sola en la segunda fila. Un 2x2
   es un 2x2.

   `minmax(0,1fr)` y no `1fr` a secas: por defecto un elemento de
   rejilla no encoge por debajo del ancho de su contenido, asi que la
   tabla empujaba la celda y el `overflow-x` de dentro no llegaba a
   activarse nunca. Ese era el desbordamiento. */
.par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.par > .card{min-width:0}
@media (max-width:820px){ .par{grid-template-columns:minmax(0,1fr)} }

/* ── Resumen general ── */
.res{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
     background:var(--border);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.res > div{background:var(--surface);padding:.8rem .95rem}
.res-t{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.06em;
       text-transform:uppercase;color:var(--text3);display:flex;align-items:center;gap:6px;
       margin-bottom:.55rem}
.res-t .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.res dl{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;
        font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px}
.res dt{color:var(--text2)} .res dt.big{align-self:center}
.res dd{color:var(--text1);text-align:right;font-variant-numeric:tabular-nums}
.res dd.big{font-size:15px;font-weight:500}

/* ── Tablas ──
   El scroll vive DENTRO de la tarjeta, no en la pagina: una tabla de
   doce columnas arrastraria el tablero entero de lado. */
/* El scroll vive dentro de la tarjeta. `min-width:0` por lo mismo de
   arriba: sin el, el contenedor crece con la tabla en vez de recortarla. */
.tabla-scroll, .sub-panel .ancho{overflow-x:auto;min-width:0}
.sub-panel table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.sub-panel th, .sub-panel td{padding:.45rem .55rem;text-align:right;white-space:nowrap}
.sub-panel th{font-family:'Helvetica Neue',Arial,sans-serif;font-size:9.5px;letter-spacing:.06em;
              text-transform:uppercase;color:var(--text3);font-weight:400;
              border-bottom:1px solid var(--border);padding-bottom:.5rem}
.sub-panel th.l, .sub-panel td.l{text-align:left}
.sub-panel tbody td{font-size:12.5px;color:var(--text2);border-bottom:1px solid #eef2f7}
.sub-panel tbody td.l{color:var(--text1)}
.sub-panel tbody tr:hover td{background:#f8fafd}
.sub-panel tfoot td{font-size:12.5px;color:var(--text1);font-weight:500;padding-top:.6rem;
                    border-top:1px solid var(--border)}

/* Ordenar: la cabecera es un boton de verdad, para que funcione con
   teclado y lo anuncie un lector de pantalla. */
.sub-panel th button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
                     display:inline-flex;align-items:center;gap:4px;letter-spacing:inherit;
                     text-transform:inherit}
.sub-panel th button:hover{color:var(--text2)}
.sub-panel th button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.sub-panel th.act button{color:var(--accent)}
.sub-panel th .fl{opacity:.35;font-size:8px}
.sub-panel th.act .fl{opacity:1}

/* La barra es la cuota del total del periodo, y arranca del borde
   izquierdo de la celda para que las filas se comparen entre si. */
.sub-panel .barra{position:relative;isolation:isolate;display:inline-block;width:100%}
.sub-panel .barra::before{content:'';position:absolute;inset:-2px auto -2px 0;z-index:-1;
                          width:var(--w);background:rgba(16,47,207,.11);border-radius:2px}
/* El medidor y su cifra, en dos anchos fijos: sin ellos cada fila
   empezaba en una x distinta segun midiera "46.7%" o "9.4%", y la
   columna de barras salia en zigzag. */
.sub-panel .occ{display:inline-flex;align-items:center;gap:7px;cursor:help;justify-content:flex-end}
.sub-panel .occ b{font-weight:inherit;min-width:5ch;text-align:right}
.sub-panel .occ i{display:block;width:44px;height:5px;border-radius:3px;background:#e9eef6;
                  position:relative;flex:0 0 44px}
.sub-panel .occ i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);
                         background:var(--accent);border-radius:3px}

/* El signo acompaña al color: en gris, o para quien no distingue rojo de
   verde, el color solo no dice nada. */
.sub-panel .d{font-size:12px}
.sub-panel .d.up{color:#2f7d54} .sub-panel .d.dn{color:#b4432c} .sub-panel .d.nu{color:var(--text3)}
.sub-panel .vacio{color:var(--text3);cursor:help}
.sub-panel .post{color:#b4432c;cursor:help}
/* Un plan de tarifa puede medir cuarenta caracteres y rompe la fila
   entera. Se recorta y el valor completo queda en el title. */
.sub-panel .trunc{display:inline-block;max-width:15ch;overflow:hidden;text-overflow:ellipsis;
                  white-space:nowrap;vertical-align:bottom}
.sub-panel .canal{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;padding:2px 8px;
                  border-radius:20px;border:1px solid;white-space:nowrap}

/* ── Lista: el mismo dato en estrecho ── */
.sub-panel .angosto{display:none}
@media (max-width:820px){
  #resMeses .ancho, #resCat .ancho, #resCanal .ancho, #resTramos .ancho{display:none}
  .sub-panel .angosto{display:block}
}
.li{padding:.65rem 0;border-bottom:1px solid #eef2f7}
.li:last-child{border-bottom:0}
.li-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.li-k{font-size:13.5px;color:var(--text1)}
.li-k small{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10.5px;color:var(--text3);margin-left:6px}
.li-v{font-size:13.5px;color:var(--text1);font-variant-numeric:tabular-nums;white-space:nowrap}
.li-bar{height:5px;border-radius:3px;background:#eef2f7;margin:.4rem 0 .35rem;position:relative}
.li-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--accent);
          opacity:.55;border-radius:3px}
.li-sub{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10.5px;color:var(--text3);
        font-variant-numeric:tabular-nums}
.li-yoy{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.35rem;
        font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px}
.li-yoy span{color:var(--text3)}
.li-yoy .d{margin-left:4px}
.li-tot{padding-top:.7rem;margin-top:.2rem;border-top:1px solid var(--border);
        display:flex;justify-content:space-between;font-size:13px;font-weight:500}
.li-tot small{font-family:'Helvetica Neue',Arial,sans-serif;font-size:10.5px;color:var(--text3);font-weight:400}

/* ── Anticipación ──
   El punto de color mantiene la rampa de los tramos ahora que la barra
   segmentada ya no está: sin él, LM y EBB120 se leen como dos filas
   cualesquiera en vez de como los dos extremos de una escala. */
.sub-panel .pt{display:inline-block;width:8px;height:8px;border-radius:2px;
               margin-right:7px;vertical-align:-1px}

/* ── Avisos y hechos ── */
.aviso{background:#fdf6e7;border:1px solid #f0dfb8;border-left:3px solid #d9a441;
       border-radius:var(--r-sm);padding:.6rem .8rem;margin-bottom:.8rem;
       font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px;line-height:1.55;color:#7a5a1e}
.aviso b{color:#5c4315}
.hl{display:flex;flex-direction:column;gap:.55rem}
.hl p{font-size:13px;line-height:1.55;color:var(--text2);padding-left:.75rem;
      border-left:2px solid var(--border)}
.hl p.destaca{border-left-color:#C3D945}
.hl p.alerta{border-left-color:#b4432c}
.hl b{color:var(--text1);font-weight:500;font-variant-numeric:tabular-nums}

/* ── Tooltip de elementos sueltos ──
   El `title` nativo tarda un segundo en aparecer, no admite formato y en
   táctil no existe. Una barra cuya longitud hay que adivinar no comunica. */
.dom-tip{position:fixed;z-index:70;max-width:290px;background:#1b2437;color:#fff;
         border-radius:var(--r-sm);padding:.55rem .7rem;
         font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px;line-height:1.5;
         box-shadow:0 6px 24px rgba(0,0,0,.22);pointer-events:none;
         opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s}
.dom-tip.ver{opacity:1;transform:translateY(0)}
.dom-tip .t{font-weight:500;margin-bottom:.3rem}
.dom-tip .r{display:flex;justify-content:space-between;gap:1.2rem;color:rgba(255,255,255,.72)}
.dom-tip .r b{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.dom-tip .n{color:rgba(255,255,255,.55);margin-top:.35rem;font-size:10.5px;line-height:1.45}
@media (prefers-reduced-motion:reduce){.dom-tip{transition:none}}
.sub-panel [data-tip]{cursor:help}

/* ── El resumen en palabras ──
   Borde izquierdo en lima, como los "destaca" de los hechos: es texto
   generado y conviene que se distinga de las cifras, que son calculadas. */
.ia-card{border-left:3px solid var(--lima, #C3D945)}
/* Vacia: ni marco ni sombra ni relleno. Solo el boton. */
.ia-card.vacia{background:transparent;border:0;box-shadow:none;padding:0;margin-bottom:12px}
.ia-gen{display:inline-flex;align-items:center;gap:7px;
        font-family:'Helvetica Neue',Arial,sans-serif;font-size:11.5px;
        padding:6px 14px;border-radius:20px;border:1px dashed var(--border);
        background:transparent;color:var(--text3);cursor:pointer}
.ia-gen:hover{color:var(--accent);border-color:var(--accent);border-style:solid;
              background:var(--surface)}
.ia-gen:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ia-chispa{font-size:12px;line-height:1}
.ia-pie{justify-content:flex-end}
.ia-txt{font-size:13.5px;line-height:1.65;color:var(--text1)}
.ia-txt p{margin:0 0 .6rem}
.ia-txt p:last-child{margin-bottom:0}
.ia-vacio{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;color:var(--text3);line-height:1.55}
.ia-error{font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;color:#b4432c;line-height:1.55}
.ia-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
        margin-top:.75rem;font-family:'Helvetica Neue',Arial,sans-serif;font-size:10px;color:var(--text3)}
.ia-btn{font-family:'Helvetica Neue',Arial,sans-serif;font-size:11px;padding:5px 12px;
        border-radius:20px;border:1px solid var(--border);background:var(--surface);
        color:var(--text2);cursor:pointer;white-space:nowrap}
.ia-btn:hover{color:var(--text1);border-color:var(--text3)}
.ia-btn-p{background:var(--accent);border-color:var(--accent);color:#fff}
.ia-btn-p:hover{background:var(--accent2);color:#fff}
.ia-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}


/* ── La tabla del libro contra el año pasado ──
   Encabezados centrados sobre su columna, y sin barra en Revenue: ahi la
   cuota del total no dice nada util -- el libro no es un reparto de un
   periodo, es lo que hay en cada mes. */
#resMeses th{text-align:center}
#resMeses th.l{text-align:left}
#resMeses th button{justify-content:center}
#resMeses .barra::before{display:none}