/* ============================================================================
   panel/assets/modulos/audiencia.css — lo que solo usa Audiencia
   ============================================================================
   Se apoya en los tokens de marca.css y panel.css; no declara colores de marca.
   Va en un archivo y no inyectado desde el JS porque la CSP del panel no
   admite estilos en línea.
   ========================================================================== */

/* El periodo: cuatro chips que valen para toda la pantalla. */
.aud-periodo{display:flex;flex-wrap:wrap;gap:var(--esp-2);margin:calc(var(--esp-3) * -1) 0 var(--esp-tarjeta)}
.aud-chip{font-family:inherit}
.aud-chip-activo{color:var(--sobre-amarillo);background:var(--yellow);box-shadow:none}
.aud-chip-activo:hover{color:var(--sobre-amarillo);background:var(--yellow-alto)}

.aud-prueba{border-left:2px solid var(--yellow);padding-left:var(--esp-3);margin-bottom:var(--esp-4);max-width:70ch}
.aud-nota{color:var(--muted);font-size:var(--tipo-leyenda);line-height:1.5;margin:calc(var(--esp-2) * -1) 0 var(--esp-tarjeta);max-width:70ch}
.aud-subtitulo{color:var(--cream);font-family:var(--fuente-dato);font-size:var(--tipo-dato);margin:var(--esp-caja) 0 var(--esp-3);letter-spacing:var(--tracking-dato)}

/* Tablas: se deslizan dentro de su caja, nunca empujan la página. */
.aud-tabla{overflow-x:auto;margin-bottom:var(--esp-4)}
.aud-tabla .tabla{margin-bottom:0}
/* Dentro de una caja con scroll la cabecera pegajosa se mide contra la caja, no
   contra la ventana: con el top de la barra superior taparía la primera fila. */
.aud-tabla .tabla th{position:static}
.aud-fila-pulsable{cursor:pointer}
.aud-fila-pulsable:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.aud-tabla .pill{margin-top:.35rem;margin-right:.3rem}

/* Gráficas. El SVG lleva sus colores como atributos; aquí solo el marco. */
.aud-grafico{background:var(--sup-1);box-shadow:inset 0 0 0 1px var(--line);padding:var(--esp-4) var(--esp-4) var(--esp-2);margin-bottom:var(--esp-tarjeta)}
.aud-grafico-titulo{font-size:var(--tipo-leyenda);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:var(--esp-2)}
.aud-grafico-lienzo{overflow-x:auto}
.aud-grafico-lienzo svg{display:block;width:100%;min-width:32rem;height:auto;font-family:'Poppins',system-ui,sans-serif}
.aud-barra-pulsable{cursor:pointer}
.aud-barra-pulsable:focus-visible{outline:2px solid var(--yellow)}
.aud-leyenda{display:flex;flex-wrap:wrap;gap:var(--esp-1) var(--esp-4);font-size:var(--tipo-leyenda);color:var(--cream);margin-bottom:var(--esp-2)}
.aud-leyenda span{display:inline-flex;align-items:center;gap:.4rem}
.aud-leyenda i{display:inline-flex}

/* Próximos eventos en el resumen. */
.aud-proximos{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:var(--esp-3);margin-bottom:var(--esp-tarjeta)}
.aud-proximo{display:grid;gap:.3rem;justify-items:start;text-align:left;font-family:inherit;color:var(--cream);
  background:var(--sup-1);border:0;box-shadow:inset 0 0 0 1px var(--line);padding:var(--esp-4);cursor:pointer;
  clip-path:var(--bevel-sm);transition:background var(--t-rapido) var(--curva)}
.aud-proximo:hover{background:var(--sup-2)}
.aud-proximo:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--yellow)}
.aud-proximo strong{font-weight:500}
.aud-proximo-cuando{font-size:var(--tipo-leyenda);text-transform:uppercase;letter-spacing:.1em;color:var(--yellow)}

/* Ficha de evento. */
.aud-volver{margin-bottom:var(--esp-4)}
.aud-ficha-cab{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2) var(--esp-4);margin-bottom:var(--esp-2)}
.aud-ficha-cab h2{color:var(--cream);font-family:var(--fuente-subtitulo);font-size:var(--tipo-subtitulo);letter-spacing:calc(.01em + var(--tracking-subtitulo))}

.aud-embudo{display:grid;gap:var(--esp-2);margin-bottom:var(--esp-tarjeta)}
.aud-paso{display:grid;grid-template-columns:minmax(7.5rem,11rem) 1fr minmax(5.5rem,auto);gap:var(--esp-3);align-items:center;font-size:var(--tipo-descripcion)}
.aud-paso-nombre{color:var(--cream)}
.aud-pista{height:18px;background:var(--sup-2);position:relative}
.aud-pista-barra{position:absolute;inset:0 auto 0 0;background:var(--yellow);clip-path:var(--bevel-xs)}
.aud-paso-pendiente .aud-pista-barra{background:repeating-linear-gradient(135deg,var(--velo-2) 0 6px,transparent 6px 12px)}
.aud-paso-cifra{font-family:var(--fuente-dato);font-weight:700;font-size:var(--tipo-dato);line-height:1;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-dato)}
.aud-paso-cifra small{display:block;font-family:'Poppins',system-ui,sans-serif;font-weight:400;font-size:var(--tipo-leyenda);color:var(--muted);margin-top:.2rem}

.aud-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--esp-4)}

.aud-copiable{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2)}
.aud-copiable code{font-size:var(--tipo-leyenda);color:var(--cream);background:var(--sup-2);padding:.25rem .45rem;overflow-wrap:anywhere}

.aud-ficha-acciones{display:flex;flex-wrap:wrap;gap:var(--esp-3);align-items:center;justify-content:space-between;margin-bottom:var(--esp-4)}
.aud-notas{background:var(--sup-1);box-shadow:inset 3px 0 0 var(--line);padding:var(--esp-3) var(--esp-4);font-size:var(--tipo-descripcion);color:var(--cream);max-width:70ch}
.aud-notas strong{font-weight:500;color:var(--muted)}
.aud-vacio .btn-primary{margin-top:var(--esp-2)}

/* ── Cargar ───────────────────────────────────────────────────────────── */
.aud-pestana-cargar{margin-left:auto}
.aud-subpestanas{display:flex;flex-wrap:wrap;gap:var(--esp-2);margin-bottom:var(--esp-tarjeta)}
.aud-bloque{border:0;padding:0;margin:0 0 var(--esp-tarjeta);min-width:0}
.aud-bloque legend{font-size:var(--tipo-leyenda);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--yellow);margin-bottom:var(--esp-3);padding:0}
.aud-campo-ancho{grid-column:1 / -1;max-width:40rem}
.aud-textarea,
.aud-tabla-carga input{
  font-family:inherit;font-size:var(--tipo-descripcion);color:var(--cream);background:var(--sup-0);
  border:1px solid var(--line);width:100%;min-width:0;
  transition:border-color var(--t-rapido) var(--curva),box-shadow var(--t-rapido) var(--curva);
}
.aud-textarea{padding:.6rem .75rem;resize:vertical;line-height:1.5}
.aud-textarea:focus,.aud-tabla-carga input:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px var(--velo-vivo)}
.aud-tabla-carga td{padding:.35rem .5rem;vertical-align:middle}
.aud-tabla-carga td:first-child{white-space:nowrap;color:var(--cream)}
.aud-tabla-carga input{height:2.25rem;padding:0 .6rem;min-width:6rem;text-align:right;font-variant-numeric:tabular-nums}
.aud-campo-ancho select,.aud-campo-ancho .dp-boton{max-width:40rem}
.campo input[type=file]{padding:.45rem .6rem;height:auto;cursor:pointer}

.aud-plantilla{background:var(--sup-0);box-shadow:inset 0 0 0 1px var(--linea-suave);padding:var(--esp-3) var(--esp-4);margin-bottom:var(--esp-4);display:grid;gap:var(--esp-2);justify-items:start}
.aud-pre{margin:0;font:500 var(--tipo-leyenda)/1.6 ui-monospace,'SFMono-Regular',Menlo,monospace;color:var(--cream);white-space:pre;overflow-x:auto;max-width:100%}
.aud-vista{display:grid;gap:var(--esp-3);margin-top:var(--esp-4);justify-items:start}
.aud-vista > *{max-width:100%}
.aud-vista .aud-tabla{width:100%}
.aud-fila-error td{background:var(--velo-alerta)}
.aud-fila-error td:last-child{color:var(--live)}

.aud-acciones{display:inline-flex;flex-wrap:wrap;gap:var(--esp-2)}
.aud-confirmar{color:var(--live) !important;box-shadow:inset 0 0 0 1px var(--borde-alerta) !important}

/* Definición al pasar el cursor: el nombre subrayado con puntos avisa que hay más. */
.aud-definida{text-decoration:underline dotted var(--brown);text-underline-offset:.25em;cursor:help}

/* Exportar a CSV: el botón bajo su tabla y, si hace falta, el texto para copiar. */
.aud-tabla-csv{display:grid;gap:var(--esp-2);margin-bottom:var(--esp-tarjeta);min-width:0}
.aud-tabla-csv .aud-tabla{margin-bottom:0}
.aud-exportar{display:grid;gap:var(--esp-2);justify-items:start;min-width:0}
.aud-csv-copia{display:grid;gap:var(--esp-2);width:100%;max-width:48rem;padding:var(--esp-3);background:var(--sup-1);box-shadow:inset 0 0 0 1px var(--line)}
.aud-csv-copia .ficha-nota{margin:0}
.aud-csv-texto{font:500 var(--tipo-leyenda)/1.6 ui-monospace,'SFMono-Regular',Menlo,monospace;white-space:pre;overflow-x:auto}

/* Filtro por evento en Origen. */
.aud-filtro{max-width:26rem;margin-bottom:var(--esp-tarjeta)}

/* Resumen para marcas: una hoja en claro sobre el panel oscuro, como el papel
   que se le enseña a un patrocinador. */
.aud-marcas{display:grid;gap:var(--esp-3);max-width:44rem;margin-bottom:var(--esp-tarjeta);padding:var(--esp-tarjeta);
  background:var(--cream);color:var(--ink);clip-path:var(--bevel)}
.aud-marcas-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--esp-2);align-items:baseline;
  padding-bottom:var(--esp-2);border-bottom:2px solid var(--yellow)}
.aud-marcas-firma{font-family:var(--fuente-dato);font-weight:800;font-size:var(--tipo-dato);letter-spacing:calc(.02em + var(--tracking-dato));text-transform:uppercase}
.aud-marcas-cuando{font-size:var(--tipo-leyenda);text-transform:uppercase;letter-spacing:.1em;color:var(--brown)}
.aud-marcas-titulo{font-family:var(--fuente-dato);font-weight:700;font-size:var(--tipo-dato);line-height:1;text-wrap:balance;letter-spacing:var(--tracking-dato)}
.aud-marcas-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--esp-3);margin:0}
.aud-marcas-cifras div{display:grid;gap:.15rem;padding-left:var(--esp-2);border-left:2px solid var(--yellow)}
.aud-marcas-cifras dt{font-size:var(--tipo-leyenda);text-transform:uppercase;letter-spacing:.1em;color:var(--brown)}
.aud-marcas-cifras dd{margin:0;font-family:var(--fuente-dato);font-weight:700;font-size:var(--tipo-dato);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-dato)}
.aud-marcas-cifras dd.aud-marcas-pendiente{color:var(--muted)}
.aud-marcas-redes{font-size:var(--tipo-descripcion)}
.aud-marcas-nota{font-size:var(--tipo-leyenda);color:var(--brown)}
.aud-marcas .btn{color:var(--ink);background:transparent;--filo-color:var(--brown)}
.aud-marcas .btn:hover{background:rgba(88,63,55,.12);color:var(--ink)}

@media (max-width:560px){
  .aud-pestana-cargar{margin-left:0}
  .aud-paso{grid-template-columns:1fr auto}
  .aud-pista{grid-column:1 / -1;grid-row:2}
  .aud-ficha-cab h2{font-size:var(--tipo-dato)}
}