/*
 * interactivos.css
 * Componentes que cambian con JavaScript o muestran un resultado:
 * avisos, estado vacío, selector mensual/anual, filtros, modal y
 * tabla comparativa.
 */

/* Avisos de resultado (éxito o error general) */
.aviso {
  margin-bottom: var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-3);
  border-left: 6px solid var(--verde);
  background: var(--blanco);
  box-shadow: var(--sombra-elevada);
}

.aviso-titulo {
  margin: 0 0 0.25rem;
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--verde);
}

.aviso-error {
  border-left-color: var(--rojo);
}

.aviso-error .aviso-titulo {
  color: var(--rojo);
}

/* Estado vacío */
.estado-vacio {
  padding: var(--espacio-4) var(--espacio-3);
  border: 2px dashed var(--gris-borde);
  border-radius: var(--radio-m);
  text-align: center;
  color: var(--gris-texto);
}

.estado-vacio[hidden] {
  display: none;
}

/* Selector mensual / anual */
.selector-periodo {
  display: inline-flex;
  padding: 4px;
  border: 2px solid var(--negro);
  border-radius: var(--radio-m);
  background: var(--blanco);
}

.selector-opcion {
  min-height: 44px;
  padding: 0.4rem 1.25rem;
  border: 0;
  border-radius: var(--radio-s);
  background: transparent;
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--negro);
  cursor: pointer;
}

.selector-opcion[aria-pressed="true"] {
  background: var(--negro);
  color: var(--blanco);
}

/* Filtros de clases */
.filtros {
  display: grid;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-3);
}

.filtros .campo {
  margin-bottom: 0;
}

.filtros-resumen {
  margin: 0 0 var(--espacio-3);
  font-weight: 500;
  color: var(--gris-texto);
}

@media (min-width: 480px) {
  .filtros {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .filtros {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    max-width: 760px;
  }
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--espacio-2);
  background: var(--velo);
}

.modal[hidden] {
  display: none;
}

/* Evita que la página se desplace detrás del modal abierto */
.sin-scroll {
  overflow: hidden;
}

.modal-caja {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--espacio-4) var(--espacio-3) var(--espacio-3);
  border-top: 6px solid var(--naranja);
  border-radius: var(--radio-m);
  background: var(--blanco);
  box-shadow: var(--sombra-elevada);
}

.modal-cerrar {
  position: absolute;
  top: var(--espacio-1);
  right: var(--espacio-1);
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--negro);
  cursor: pointer;
}

.modal-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espacio-1) var(--espacio-2);
  margin: 0 0 var(--espacio-3);
}

.modal-datos dt {
  font-weight: 700;
}

.modal-datos dd {
  margin: 0;
}

@media (min-width: 768px) {
  .modal {
    align-items: center;
  }
}

/* Tabla comparativa: se desplaza dentro de su caja, nunca la página */
.tabla-contenedor {
  overflow-x: auto;
  border: 2px solid var(--negro);
  border-radius: var(--radio-m);
}

.tabla {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--blanco);
}

.tabla caption {
  padding: var(--espacio-2);
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  text-align: left;
}

.tabla th,
.tabla td {
  padding: 0.75rem var(--espacio-2);
  border-top: 1px solid var(--gris-borde);
  text-align: left;
}

.tabla thead th {
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-size: 1.1rem;
}

.tabla tbody th {
  font-weight: 500;
}

.tabla-si {
  font-weight: 700;
}

.tabla-no {
  color: var(--gris-texto);
}