/* Punto de quiebre de contenido: con la barra lateral fija (17 rem) el área útil recién
   alcanza para tablas y filas de dos columnas desde 1024 px; por debajo (63.99rem) los
   listados son tarjetas y los formularios van en una columna. */
/* maestros.css — pantallas de maestros (C-18): encabezado con cinta de blobs, barra de
   filtros, listado tabla -> tarjetas, tarjetas de usuarias, formulario, estados y
   revelado de contraseña. Colores: solo tokens. Movimiento: solo transform/opacity,
   <= 300 ms. Hover solo bajo (hover: hover). */

.maestro__vista {
  display: grid;
  gap: var(--esp-6);
}

/* ---- Encabezado de pantalla con cinta decorativa (fondo-blobs, oculta < 480 px) ---- */
.maestro__encabezado {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-4) var(--esp-6);
  padding: var(--esp-6) var(--esp-6) var(--esp-6) var(--esp-8);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
  overflow: hidden;
  isolation: isolate;
}

.maestro__encabezado::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(38%, 22rem);
  border-radius: var(--radio-pildora) 0 0 var(--radio-pildora);
  background: url("/img/cinta-encabezado.svg?v=3") right center / cover no-repeat;
  opacity: 1;
}

.maestro__encabezado .pantalla__subtitulo {
  max-width: 46ch;
}

.maestro__titulos {
  display: grid;
  gap: var(--esp-1);
  min-width: 0;
  max-width: 60%;
}

.maestro__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

.volver {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--esp-1);
  min-height: var(--tactil);
  margin: calc(var(--esp-3) * -1) 0 0 calc(var(--esp-2) * -1);
  padding: 0 var(--esp-2);
  border-radius: var(--radio-sm);
  color: var(--enlace);
  font-size: var(--texto-sm);
  font-weight: var(--peso-extra);
  text-decoration: none;
}

/* ---- Barra de filtros ---- */
.filtros {
  display: grid;
  gap: var(--esp-4);
}

.filtros__busqueda {
  position: relative;
  max-width: 28rem;
}

.filtros__lupa {
  position: absolute;
  top: 50%;
  left: var(--esp-4);
  display: grid;
  color: var(--tinta-marca);
  transform: translateY(-50%);
  pointer-events: none;
}

.filtros__entrada {
  width: 100%;
  height: var(--alto-control);
  padding: 0 var(--esp-4) 0 calc(var(--esp-4) + 1.25rem + var(--esp-3));
  border: 2px solid var(--borde-control);
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-weight: var(--peso-fuerte);
}

.filtros__entrada::placeholder {
  color: var(--texto-suave);
  font-weight: var(--peso-normal);
}

.filtros__entrada:focus-visible {
  border-color: var(--foco);
  outline-offset: 1px;
}

.filtros__grupos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4) var(--esp-8);
}

.filtros__conteo {
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}

.filtros__conteo:empty {
  display: none;
}

/* ---- Estados ---- */
.estado {
  padding-block: var(--esp-8);
}

.vacio__imagen--chica {
  width: min(12rem, 60%);
}

.carga-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--esp-4);
}

.carga-lista--filas {
  grid-template-columns: minmax(0, 1fr);
}

.carga-lista__item {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-6);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

.carga-lista__lineas {
  display: grid;
  flex: 1;
  gap: var(--esp-3);
}

/* ---- Tarjetas de usuarias (U3: tarjetas también en escritorio) ---- */
.usuarias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.usuaria__caja {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--esp-4);
  height: 100%;
  padding: var(--esp-6);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

.usuaria--inactiva .usuaria__caja {
  background: var(--rosa-50);
  box-shadow: none;
  outline: 2px dashed var(--rosa-300);
  outline-offset: -2px;
}

.usuaria__cabecera {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  min-width: 0;
}

.usuaria__avatar {
  width: 3.25rem;
  height: 3.25rem;
  background: var(--rosa-bebe);
  font-size: var(--texto-md);
}

.usuaria--inactiva .usuaria__avatar {
  background: var(--rosa-100);
}

.usuaria__identidad {
  display: grid;
  min-width: 0;
}

.usuaria__nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-md);
  letter-spacing: -0.01em;
}

.usuaria__email {
  overflow: hidden;
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usuaria__insignias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.usuaria__carga {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}

.usuaria__carga .icono {
  color: var(--tinta-marca);
}

.usuaria__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin: 0 calc(var(--esp-2) * -1) calc(var(--esp-2) * -1);
  padding-top: var(--esp-4);
  border-top: 2px solid var(--rosa-100);
}

.usuaria__acciones {
  column-gap: var(--esp-1);
}

.usuaria__acciones .boton--chico .boton__cara {
  padding: 0 var(--esp-3);
}

.usuaria__acciones .boton--texto .boton__cara,
.usuaria__acciones .boton--texto-peligro .boton__cara {
  padding: 0 var(--esp-2);
}

.usuaria__acciones .boton--secundario {
  margin-right: var(--esp-2);
}

/* ---- Formulario de maestro ---- */
.formulario {
  display: grid;
  gap: var(--esp-6);
  max-width: 40rem;
}

.formulario__aviso:empty {
  display: none;
}

.formulario__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--esp-6) var(--esp-4);
}

.formulario__pie {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: var(--esp-3);
  padding-top: var(--esp-2);
}

/* Opciones grandes (radio) para elegir rol: tarjeta con marca, título y explicación. */
.opciones {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.opciones__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--esp-3);
}

.opcion {
  position: relative;
  display: flex;
  cursor: pointer;
}

.opcion__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opcion__cara {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--esp-1) var(--esp-3);
  width: 100%;
  padding: var(--esp-4);
  border: 2px solid var(--borde-control);
  border-radius: var(--radio-md);
  background: var(--superficie);
  transition: transform var(--dur-base) var(--ease-out);
}

.opcion__cara strong {
  color: var(--titulo);
  font-weight: var(--peso-negro);
}

.opcion__cara small {
  grid-column: 2;
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
  line-height: 1.4;
}

.opcion__marca {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--borde-control);
  border-radius: var(--radio-pildora);
  background: var(--superficie);
}

.opcion__marca::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radio-pildora);
  background: var(--acento);
  opacity: 0;
  transform: scale(0.95);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.opcion__radio:checked + .opcion__cara {
  border-color: var(--acento);
  background: var(--rosa-50);
}

.opcion__radio:checked + .opcion__cara .opcion__marca {
  border-color: var(--acento);
}

.opcion__radio:checked + .opcion__cara .opcion__marca::after {
  opacity: 1;
  transform: none;
}

.opcion__radio:focus-visible + .opcion__cara {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.opcion__radio[aria-invalid="true"] + .opcion__cara {
  border-color: var(--peligro);
}

.opcion:active .opcion__cara {
  transform: scale(0.99);
  transition-duration: var(--dur-presion);
}

/* ---- Listado tabla (>= 768 px) -> tarjetas (< 768 px) ---- */
.lista {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radio-lg);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
  overflow: hidden;
}

.lista th,
.lista td {
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--rosa-100);
  text-align: left;
  vertical-align: middle;
}

.lista thead th {
  background: var(--rosa-50);
  color: var(--titulo);
  font-size: var(--texto-xs);
  font-weight: var(--peso-negro);
  letter-spacing: 0.02em;
}

.lista tbody tr:last-child > * {
  border-bottom: 0;
}

.lista__celda--principal {
  color: var(--titulo);
  font-weight: var(--peso-extra);
}

.lista td {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 63.99rem) {
  .lista,
  .lista tbody,
  .lista tr,
  .lista th,
  .lista td {
    display: block;
  }

  .lista {
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .lista thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .lista tbody {
    display: grid;
    gap: var(--esp-3);
  }

  .lista tr {
    padding: var(--esp-4);
    border-radius: var(--radio-lg);
    background: var(--superficie);
    box-shadow: var(--sombra-tarjeta);
  }

  .lista th,
  .lista td {
    display: flex;
    justify-content: space-between;
    gap: var(--esp-4);
    padding: var(--esp-2) 0;
    border-bottom: 0;
    overflow-wrap: anywhere;
  }

  .lista td::before {
    content: attr(data-etiqueta);
    color: var(--texto-suave);
    font-size: var(--texto-sm);
    font-weight: var(--peso-extra);
  }

  .lista__celda--principal {
    padding-bottom: var(--esp-3);
    font-size: var(--texto-md);
  }
}

/* ---- Revelado de la contraseña temporal ---- */
.dialogo--secreto .dialogo__caja {
  text-align: center;
}

.dialogo--secreto .dialogo__descripcion {
  color: var(--texto-suave);
}

.secreto {
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
  padding: var(--esp-5) var(--esp-4);
  border: 2px dashed var(--rosa-300);
  border-radius: var(--radio-md);
  background: var(--rosa-50);
}

/* Grupos INLINE (no flex): así la selección/copia manual no mete saltos de línea. */
.secreto__valor {
  display: block;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--tinta-marca);
  font-family: var(--fuente-mono);
  font-size: var(--texto-lg);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  user-select: all;
}

.secreto__grupo {
  margin-inline: 0.3em;
}

.secreto__estado {
  min-height: 1.4em;
  color: var(--exito);
  font-size: var(--texto-sm);
  font-weight: var(--peso-extra);
}

.secreto__nota {
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}

.secreto__copiar[data-copiada="true"] .icono {
  color: var(--exito);
}

@media (prefers-reduced-motion: no-preference) {
  .secreto__copiar[data-copiada="true"] .icono {
    animation: marca-aparece var(--dur-rapida) var(--ease-out);
  }
}

@keyframes marca-aparece {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}

.secreto__guarda {
  display: grid;
  gap: var(--esp-3);
}

.secreto__pregunta {
  color: var(--alerta);
  font-weight: var(--peso-extra);
}

/* ---- Hover (puntero fino) ---- */
@media (hover: hover) and (pointer: fine) {
  .volver:hover {
    background: var(--rosa-100);
  }

  .filtros__entrada:hover:not(:focus-visible) {
    border-color: var(--tinta-marca);
  }

  .opcion__radio:not(:checked):hover + .opcion__cara {
    background: var(--rosa-50);
  }

  .lista tbody tr:hover > * {
    background: var(--rosa-50);
  }
}

/* ---- Pantallas chicas ---- */
@media (max-width: 63.99rem) {
  .maestro__encabezado {
    padding: var(--esp-5);
  }

  .maestro__titulos {
    max-width: none;
  }

  .usuaria__caja {
    padding: var(--esp-5);
  }

  .filtros .chip__cara {
    padding: 0 var(--esp-3);
  }
}

@media (max-width: 29.99rem) {
  .maestro__encabezado::after {
    display: none;
  }

  .maestro__acciones,
  .maestro__acciones .boton {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opcion__marca::after {
    transform: none;
  }
}

/* ==========================================================================
   C-18 slices 2 y 3: Sociedades, Impuestos, Calendario y Ajustes.
   ========================================================================== */

.maestro__insignias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-1);
}

/* ---- Selects (nativos, con la misma piel que los campos) ---- */
.campo__select,
.filtros__select {
  font: inherit;
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  cursor: pointer;
}

.filtros__select {
  min-height: var(--tactil);
  max-width: 100%;
  padding: 0 var(--esp-3);
  border: 2px solid var(--borde-control);
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  font-size: var(--texto-sm);
}

.filtros__select:focus-visible {
  border-color: var(--foco);
  outline-offset: 1px;
}

.filtros__extra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-self: end;
  gap: var(--esp-2);
}

.boton[aria-pressed="true"] .boton__cara {
  border-color: var(--acento);
  background: var(--rosa-100);
}

/* ---- Casillas ---- */
.casilla {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--tactil);
  cursor: pointer;
}

.casilla--sola {
  justify-content: center;
  min-width: var(--tactil);
}

.casilla__entrada {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  flex: none;
  accent-color: var(--acento);
  cursor: pointer;
}

.casilla__entrada:disabled {
  cursor: not-allowed;
}

.casilla__texto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-1) var(--esp-2);
  min-width: 0;
}

.casillas {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.casillas__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0 var(--esp-4);
}

/* ---- Códigos de impuesto ---- */
.codigos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
}

.codigo {
  display: inline-block;
  padding: 0 var(--esp-2);
  border-radius: var(--radio-sm);
  background: var(--rosa-100);
  color: var(--tinta-marca);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: nowrap;
}

.codigo--grande {
  font-size: var(--texto-sm);
}

/* ---- Listado: detalles de celdas ---- */
.lista__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.lista__enlace {
  color: var(--titulo);
  font-weight: var(--peso-extra);
  text-decoration-color: var(--rosa-300);
}

.lista__celda--dato {
  white-space: nowrap;
}

.lista__vacio {
  color: var(--texto-suave);
  font-size: var(--texto-sm);
}

.lista__fila--inactiva > * {
  background: var(--rosa-50);
}

.lista__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--esp-1);
}

.lista__celda--acciones {
  text-align: right;
}

.lista .lista__celda--casilla {
  width: 1%;
  padding-right: 0;
}

/* ---- Barra de selección en lote (entra desde abajo, 200 ms) ---- */
.seleccion,
.grilla__barra {
  position: sticky;
  bottom: var(--esp-4);
  z-index: var(--z-barra);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-lg);
  background: var(--tinta);
  color: var(--blanco);
  box-shadow: var(--sombra-flotante);
}

.seleccion__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.seleccion .boton--texto,
.grilla__barra .boton--texto {
  --cara-texto: var(--blanco);
}

.seleccion :focus-visible,
.grilla__barra :focus-visible {
  outline-color: var(--rosa-bebe);
}

@media (prefers-reduced-motion: no-preference) {
  .seleccion:not([hidden]),
  .grilla__barra:not([hidden]) {
    animation: barra-sube var(--dur-base) var(--ease-out);
  }
}

@keyframes barra-sube {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* ---- Bloques del detalle ---- */
.bloque {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-6);
}

.bloque__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}

.bloque__titulo {
  font-size: var(--texto-md);
}

.bloque__vacio {
  color: var(--texto-suave);
}

.bloque__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--esp-4);
  margin: 0;
}

.dato dt {
  color: var(--texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-extra);
  letter-spacing: 0.02em;
}

.dato dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  color: var(--titulo);
  font-size: var(--texto-md);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
}

.asignaciones,
.editor__filas,
.grilla__filas {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.asignacion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--rosa-100);
}

.asignacion__texto {
  display: grid;
  min-width: 0;
}

.asignacion__responsable {
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}

.asignacion__marcas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--esp-1);
}

.asignacion__marcas .insignia {
  white-space: normal;
}

.asignacion--error {
  margin-inline: calc(var(--esp-3) * -1);
  padding-inline: var(--esp-3);
  border-radius: var(--radio-sm);
  background: var(--peligro-fondo);
}

/* ---- Editor de impuestos ("Pepe") ---- */
.editor {
  display: grid;
  gap: var(--esp-4);
}

.editor__barra,
.editor__lote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

.editor__barra {
  justify-content: space-between;
}

.editor__ayuda {
  color: var(--texto-suave);
}

.editor__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-2) 0;
  border-top: 1px solid var(--rosa-100);
}

.editor__nombre {
  color: var(--texto-suave);
  font-size: var(--texto-sm);
}

.editor__responsable {
  width: 100%;
}

.editor__error {
  grid-column: 1 / -1;
}

.editor__fila--error {
  margin-inline: calc(var(--esp-3) * -1);
  padding-inline: var(--esp-3);
  border-radius: var(--radio-sm);
  background: var(--peligro-fondo);
}

@media (prefers-reduced-motion: no-preference) {
  .editor__repartida:not([hidden]) {
    animation: marca-aparece var(--dur-base) var(--ease-out);
  }
}

/* ---- Formularios dentro de un diálogo ---- */
.dialogo__formulario {
  display: grid;
  gap: var(--esp-5);
}

.dialogo__resumen {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-md);
  background: var(--rosa-50);
  color: var(--tinta-marca);
  font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte);
}

/* ---- Calendario ---- */
.pestanas {
  display: inline-flex;
  justify-self: start;
  gap: var(--esp-1);
  padding: var(--esp-1);
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}

.pestana {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--tactil);
  padding: 0 var(--esp-4);
  border-radius: var(--radio-pildora);
  color: var(--tinta-marca);
  font-size: var(--texto-sm);
  font-weight: var(--peso-extra);
  text-decoration: none;
}

.pestana[aria-current="page"] {
  background: var(--acento);
  color: var(--blanco);
}

.grilla__controles,
.filtros-servidor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: end;
  gap: var(--esp-4);
  padding: var(--esp-5) var(--esp-6);
}

.filtros-servidor {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.grilla__periodo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--esp-2);
}

.paso {
  display: grid;
  place-items: center;
  width: var(--alto-control);
  height: var(--alto-control);
  padding: 0;
  border: 2px solid var(--borde-control);
  border-radius: var(--radio-md);
  background: var(--superficie);
  color: var(--tinta-marca);
  cursor: pointer;
}

.grilla {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-6);
}

.grilla__nota {
  max-width: 70ch;
  color: var(--texto-suave);
  font-size: var(--texto-sm);
}

.grilla__fila {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-2) 0;
  border-top: 1px solid var(--rosa-100);
}

.grilla__terminacion {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radio-md);
  background: var(--rosa-100);
  color: var(--tinta-marca);
  font-size: var(--texto-md);
  font-weight: var(--peso-negro);
  font-variant-numeric: tabular-nums;
}

.grilla__control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
}

.grilla__fecha {
  width: auto;
  max-width: 100%;
  min-width: 10.5rem;
  font-variant-numeric: tabular-nums;
}

.grilla__valor {
  color: var(--titulo);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
}

.grilla__marcas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--esp-1);
}

.grilla__error {
  grid-column: 2 / -1;
}

.grilla__fila--cambiada .grilla__terminacion {
  background: var(--acento);
  color: var(--blanco);
}

.grilla__pendientes {
  font-weight: var(--peso-extra);
}

.grilla__resumen:empty {
  display: none;
}

/* ---- Ajustes ---- */
.ajuste {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--esp-6);
  max-width: 44rem;
}

.ajuste__imagen {
  width: 8rem;
  height: auto;
}

.ajuste__texto {
  display: grid;
  gap: var(--esp-3);
}

.ajuste__valor {
  color: var(--titulo);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-negro);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ajuste__explicacion {
  max-width: 48ch;
  color: var(--texto-suave);
}

.ajuste__formulario {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-4);
  margin-top: var(--esp-2);
}

.ajuste__formulario .campo__entrada {
  min-width: 9rem;
}

.ajuste__formulario .campo__ayuda {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ajuste__cambio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border-radius: var(--radio-md);
  background: var(--rosa-50);
  color: var(--tinta-suave);
  font-size: var(--texto-xl);
  font-weight: var(--peso-extra);
  font-variant-numeric: tabular-nums;
}

.ajuste__cambio strong {
  color: var(--titulo);
  font-weight: var(--peso-negro);
}

@media (hover: hover) and (pointer: fine) {
  .pestana:not([aria-current="page"]):hover,
  .paso:hover {
    background: var(--rosa-100);
  }

  .filtros__select:hover:not(:focus-visible) {
    border-color: var(--tinta-marca);
  }
}

@media (max-width: 63.99rem) {
  .bloque,
  .grilla {
    padding: var(--esp-5);
  }

  .lista .lista__celda--casilla,
  .lista .lista__celda--acciones {
    width: auto;
  }

  .lista__acciones {
    justify-content: flex-start;
  }

  .asignacion {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .asignacion__marcas {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .editor__fila {
    grid-template-columns: minmax(0, 1fr);
  }

  .grilla__fila {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }

  .grilla__marcas {
    grid-column: 2;
    justify-content: flex-start;
  }

  .ajuste {
    grid-template-columns: minmax(0, 1fr);
  }

  .ajuste__imagen {
    width: 6rem;
  }

  .seleccion,
  .grilla__barra {
    bottom: var(--esp-2);
  }
}

@media (hover: hover) and (pointer: fine) {
  .seleccion .boton--texto:not(:disabled):hover .boton__cara,
  .grilla__barra .boton--texto:not(:disabled):hover .boton__cara {
    background: var(--tinta-marca);
  }
}

/* Ajustes finos tras la revisión visual (slices 2 y 3). */
.grilla__periodo .campo,
.grilla__controles .campo,
.filtros-servidor .campo {
  min-width: 0;
}

.grilla__periodo .campo__entrada {
  min-width: 0;
  padding-inline: var(--esp-3);
}

.lista td.lista__celda--dato,
.lista td.lista__celda--nombre {
  white-space: nowrap;
}

@media (max-width: 63.99rem) {
  .lista td.lista__celda--dato,
  .lista td.lista__celda--nombre {
    white-space: normal;
  }
}

/* Enlaces dentro de una celda: área táctil de 44 px sin cambiar el alto del texto. */
.lista__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--tactil);
}

@media (max-width: 63.99rem) {
  /* En tarjeta, la celda de acciones no repite su etiqueta. */
  .lista td.lista__celda--acciones::before {
    content: none;
  }
}