/* Panel del infoproductor: tarjetas, filtros y tablas del mismo sistema (tokens.css); acá solo lo propio del panel. Sin colores sueltos: todo sale de los tokens, así el acento
   que elija el cliente también se aplica acá. */

#v-panel .card .lede + form { margin-top: 4px; }
#v-panel .card h3 { font-size: 14px; font-weight: 650; margin: 20px 0 8px; }
#v-panel .card > .lede:last-child { margin-bottom: 0; }

/* Texto solo para lectores de pantalla (el encabezado de la columna de botones) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Cifras del mes y dominios */
.panel-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.panel-cifra { padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.panel-cifra .k { display: block; font-size: 12.5px; color: var(--muted); }
.panel-cifra .v { display: block; margin-top: 6px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.panel-cifra .v small { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

/* Alumnos: filtros, búsqueda y paginación */
.panel-buscador { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.panel-buscador .form-group { flex: 1; min-width: 200px; margin: 0; }
.panel-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--muted); }
.panel-pie .btn-group { margin: 0; }
.panel-persona { display: block; font-weight: 650; overflow-wrap: anywhere; }
.panel-persona + .muted { display: block; font-size: 12.5px; overflow-wrap: anywhere; }
td.acciones, th.acciones { text-align: right; white-space: nowrap; }

/* Informe del CSV */
.panel-informe { margin-top: 14px; }
.panel-informe ul { margin: 8px 0 0 18px; font-size: 13px; }
.panel-informe li { margin-bottom: 3px; overflow-wrap: anywhere; }

/* Marca: color, logo */
.panel-color { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-color input[type='color'] { width: 56px; height: 46px; padding: 3px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; }
.panel-color input[type='color']:disabled { opacity: .45; cursor: not-allowed; }
.panel-logo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-logo img { display: block; max-width: 160px; max-height: 64px; width: auto; height: auto; padding: 8px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); object-fit: contain; }
.panel-logo input[type='file'] { max-width: 100%; font-size: 14px; color: var(--ink); }

/* Claves: una tarjeta por clave vigente, con los valores ocultos hasta que se piden; las revocadas, plegadas */
.panel-tarjetas-claves { display: grid; gap: 12px; margin-top: 16px; }
.panel-tarjeta-clave { padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.panel-tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-tarjeta-cabeza .panel-persona .muted { font-weight: 500; }
.panel-fechas { margin: 4px 0 10px; font-size: 12.5px; }
.panel-valores { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; }
.panel-valores dt { color: var(--muted); }
.panel-valores dd { margin: 0; overflow-wrap: anywhere; }
.panel-tarjeta-clave .btn-group { margin-top: 12px; }
.panel-seleccion { margin-top: 12px; }
.panel-seleccion .form-input { width: 100%; font-size: 13px; resize: vertical; }
.panel-revocadas { margin-top: 18px; }
.panel-revocadas summary { font-weight: 650; }
.panel-revocadas ul { margin: 10px 0 0; padding: 0; list-style: none; }
.panel-revocadas li { padding: 10px 0; border-top: 1px solid var(--line); }
.panel-revocadas li .muted { display: block; font-size: 12.5px; }

@media (max-width: 720px) {
  .panel-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .panel-cifra { padding: 14px; border-radius: 18px; }
  .panel-cifra .v { font-size: 21px; }
  .panel-buscador .btn { width: 100%; }
  .panel-pie { flex-direction: column; align-items: stretch; }
  .panel-pie .btn-group .btn { flex: 1; }
  .panel-logo img { max-width: 100%; }
  .panel-valores { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .panel-valores dd { margin-bottom: 8px; }
  .panel-tarjeta-clave .btn-group .btn { flex: 1 1 100%; }
}