/* app/static/pagina-panel.css — pantallas del panel de auditoría, sobre estilo.css (copiado de bot-admin).
   Sin estilos en línea en las vistas: la CSP no permite 'unsafe-inline'. */
@layer pantallas {
  /* Login y errores: tarjeta centrada (de pagina-probar.css de bot-admin). */
  .p-tarjeta-sola { max-width: 400px; margin: clamp(var(--esp-4), 8vh, var(--esp-7)) auto 0; padding: var(--esp-5); }
  .p-tarjeta-sola h1 { margin-bottom: var(--esp-2); }
  .p-tarjeta-sola .formulario { margin-top: var(--esp-4); }
  .p-tarjeta-sola .flash { margin: var(--esp-4) 0 0; }
  .p-tarjeta-sola__pie { margin-top: var(--esp-4); padding-top: var(--esp-3); border-top: 1px solid var(--borde); }

  /* Barra: sección todavía no disponible (Administración llega en el Plan 3C). */
  .barra__deshabilitado {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--esp-2);
    font-size: var(--t-nav); color: var(--texto-2); cursor: not-allowed;
  }

  /* Filtros */
  .filtros { margin-bottom: var(--esp-5); }
  .filtros__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin-top: var(--esp-3); }

  /* Indicadores del tablero */
  .seccion + .seccion { margin-top: var(--esp-6); }
  .kpis { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin: 0 0 var(--esp-5); padding: 0; list-style: none; }
  .kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-2); padding: var(--esp-3) var(--esp-4); box-shadow: var(--sombra-1); }
  .kpi__rotulo { display: block; font-size: var(--t-chico); color: var(--texto-2); }
  .kpi__valor { display: block; font-size: var(--t-h1); font-weight: 700; font-variant-numeric: tabular-nums; }
  .kpi__nota { display: block; font-size: var(--t-chico); color: var(--texto-2); }
  .kpi--alerta { border-color: var(--peligro-borde); }
  .kpi--alerta .kpi__valor, .kpi--alerta .kpi__valor a { color: var(--peligro); }
  meter { width: 100%; max-width: 160px; height: 10px; vertical-align: middle; }
  caption { text-align: left; font-weight: 600; padding: var(--esp-2) var(--esp-3); }

  /* Paginación */
  .paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); margin-top: var(--esp-4); }

  /* Detalle: reproductor fijo arriba y transcripción sincronizada */
  .reproductor { position: sticky; top: 0; z-index: 2; background: var(--fondo); padding: var(--esp-2) 0; }
  .reproductor audio { width: 100%; }
  .transcripcion { list-style: none; margin: var(--esp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-1); max-height: 60vh; overflow-y: auto; }
  .seg {
    display: grid; grid-template-columns: auto 5.5em minmax(0, 1fr); gap: var(--esp-2); align-items: start;
    padding: var(--esp-1) var(--esp-2); border-radius: var(--radio-1); border-left: 3px solid transparent;
  }
  .seg--agente { border-left-color: var(--acento-borde); }
  .seg--cliente { border-left-color: var(--borde-campo); }
  .seg--dudoso .seg__texto { color: var(--texto-2); font-style: italic; }
  .seg--actual { background: var(--acento-tenue); }
  .seg__tiempo { min-height: var(--alto-control-chico); padding: 0 var(--esp-2); font-size: var(--t-chico); font-variant-numeric: tabular-nums; }
  .seg__hablante { font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); padding-top: 6px; }
  .seg__texto { padding-top: 4px; overflow-wrap: anywhere; }
  .cita { margin: var(--esp-1) 0 0; padding-left: var(--esp-3); border-left: 3px solid var(--borde); color: var(--texto-2); font-style: italic; }
  .alertas { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-4); }
  .estado--peligro { color: var(--peligro-hover); background: var(--peligro-tenue); }
  /* Supervisión (3B): textos libres con sus saltos de línea, comentarios separados. */
  .texto-preformateado { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
  .comentario { padding-bottom: var(--esp-2); border-bottom: 1px solid var(--borde); }

  /* Ficha del agente: un bloque por canal y tipo de campaña. */
  .grupo-ficha + .grupo-ficha { margin-top: var(--esp-4); }
  .grupo-ficha h4 { margin: var(--esp-3) 0 var(--esp-2); }

  /* Ranking: tendencia (el texto dice "sube"/"baja"; el color solo acompaña). */
  .tendencia--sube { color: var(--ok); }
  .tendencia--baja { color: var(--peligro); }

  @media (max-width: 639.98px) {
    .seg { grid-template-columns: auto minmax(0, 1fr); }
    .seg__texto { grid-column: 1 / -1; }
  }
}