/* =============================================================================
   Sistema Sterling — componentes reutilizables
   =============================================================================
   Tarjetas, tablas, formularios, botones, etiquetas de estado, avisos, estados
   vacíos y modales. Todo lo que se repite entre módulos vive acá.
   ========================================================================== */

/* --- Tarjetas -------------------------------------------------------------- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}

.tarjeta__encabezado {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--borde);
}

.tarjeta__titulo {
  font-size: var(--texto-md);
  font-weight: 600;
  margin-right: auto;
}

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

.tarjeta__cuerpo--ajustado {
  padding: 0;
}

.tarjeta__pie {
  padding: var(--esp-3) var(--esp-5);
  border-top: 1px solid var(--borde);
  background: var(--superficie-suave);
  border-radius: 0 0 var(--radio-lg) var(--radio-lg);
  font-size: var(--texto-sm);
}

/* --- Indicadores ----------------------------------------------------------- */

.indicador {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde-fuerte);
  border-radius: var(--radio-lg);
  padding: var(--esp-4);
  display: block;
  color: inherit;
}

a.indicador:hover {
  text-decoration: none;
  border-color: var(--borde-fuerte);
  background: var(--superficie-suave);
}

.indicador--positive {
  border-left-color: var(--exito);
}
.indicador--warning {
  border-left-color: var(--alerta);
}
.indicador--danger {
  border-left-color: var(--peligro);
}
.indicador--neutral {
  border-left-color: var(--borde-fuerte);
}

.indicador__etiqueta {
  font-size: var(--texto-sm);
  color: var(--texto-suave);
  font-weight: 500;
}

.indicador__valor {
  font-size: var(--texto-xl);
  font-weight: 600;
  margin-top: var(--esp-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.indicador__nota {
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
  margin-top: var(--esp-1);
}

/* --- Tablas ---------------------------------------------------------------- */

.tabla-envoltorio {
  overflow-x: auto;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-base);
}

.tabla th {
  text-align: left;
  font-weight: 600;
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  padding: var(--esp-3) var(--esp-4);
  background: var(--superficie-suave);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

.tabla td {
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}

.tabla tbody tr:hover {
  background: var(--superficie-hover);
}

.tabla tbody tr:last-child td {
  border-bottom: none;
}

.tabla__numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Una columna es una unidad: su título se alinea como sus datos.
 *
 * `.tabla th` es (0,0,1,1) y le ganaba a `.tabla__numero`, que es (0,0,1,0).
 * El resultado: en toda columna numérica el título quedaba pegado a la
 * izquierda mientras el número iba a la derecha. En una columna ancha —"Fee
 * Uruguay por pasajero", por ejemplo— quedaban tan separados que el importe
 * parecía pertenecer a la columna siguiente.
 *
 * Estos selectores son (0,0,2,1): ganan por especificidad y no por orden, así
 * que reordenar el archivo no puede volver a romperlo. No hay offsets ni
 * márgenes negativos: se corrige qué regla manda, que era el problema real. */
.tabla th.tabla__numero,
.tabla th.texto-derecha {
  text-align: right;
}

.tabla th.texto-centro {
  text-align: center;
}

.tabla tfoot td {
  padding: var(--esp-3) var(--esp-4);
  border-top: 2px solid var(--borde-fuerte);
  font-weight: 600;
  background: var(--superficie-suave);
}

.tabla--compacta td,
.tabla--compacta th {
  padding: var(--esp-2) var(--esp-3);
}

/* --- Etiquetas de estado --------------------------------------------------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: var(--texto-xs);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.etiqueta--exito {
  background: var(--exito-fondo);
  color: var(--exito);
}
.etiqueta--alerta {
  background: var(--alerta-fondo);
  color: var(--alerta);
}
.etiqueta--peligro {
  background: var(--peligro-fondo);
  color: var(--peligro);
}
.etiqueta--info {
  background: var(--info-fondo);
  color: var(--info);
}
.etiqueta--neutro {
  background: var(--neutro-fondo);
  color: var(--neutro);
}

/* --- Botones --------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--texto-base);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.boton:hover {
  background: var(--superficie-hover);
  text-decoration: none;
}

.boton--primario {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}

.boton--primario:hover {
  background: var(--marca-oscura);
  border-color: var(--marca-oscura);
  color: #fff;
}

.boton--sutil {
  border-color: transparent;
  background: transparent;
  color: var(--marca-acento);
}

.boton--sutil:hover {
  background: var(--marca-clara);
}

.boton--peligro {
  border-color: var(--peligro);
  color: var(--peligro);
}

.boton--chico {
  padding: 0.25rem 0.6rem;
  font-size: var(--texto-sm);
}

.boton:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Formularios ----------------------------------------------------------- */

.formulario {
  display: grid;
  gap: var(--esp-4);
}

.formulario--dos-columnas {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.campo--ancho-completo {
  grid-column: 1 / -1;
}

.campo label {
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--texto);
}

.campo__ayuda {
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
}

.campo__error {
  font-size: var(--texto-xs);
  color: var(--peligro);
  font-weight: 500;
}

/* Ayuda y errores viven juntos, debajo del control. Agruparlos hace que todo
 * campo tenga la misma estructura —etiqueta, control, mensajes— tenga o no
 * algo que decir, que es de lo que depende la alineación de `.subfila`. */
.campo__mensajes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="search"],
.campo select,
.campo textarea,
.entrada {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: var(--texto-base);
}

.campo textarea {
  min-height: 90px;
  resize: vertical;
  font-family: inherit;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--marca-acento);
  outline: none;
  box-shadow: 0 0 0 3px rgba(43, 116, 173, 0.15);
}

.campo--error input,
.campo--error select,
.campo--error textarea {
  border-color: var(--peligro);
}

.campo--casilla {
  flex-direction: row;
  align-items: center;
  gap: var(--esp-2);
}

.campo--casilla label {
  font-weight: 500;
}

/* Una pregunta con varias casillas ("Fichas que paga"). El fieldset agrupa
 * las opciones bajo su leyenda y se ve como cualquier otro campo: sin el
 * borde ni el relleno que el navegador le pone por defecto. */
fieldset.campo {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

fieldset.campo > legend {
  padding: 0;
  margin-bottom: var(--esp-1);
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--texto);
}

/* La lista tiene alto máximo y se desplaza sola: un cliente con muchas fichas
 * no estira la tarjeta hasta el fondo de la página. */
.lista-casillas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  max-height: 11rem;
  overflow-y: auto;
  padding: var(--esp-2);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
}

.campo .lista-casillas__opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: 400;
  cursor: pointer;
}

.formulario__acciones {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--esp-2);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--borde);
}

/* --- Barra de filtros ------------------------------------------------------ */

.filtros {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-end;
  flex-wrap: wrap;
  padding: var(--esp-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  margin-bottom: var(--esp-4);
}

.filtros .campo {
  min-width: 170px;
}

.filtros__buscar {
  flex: 1;
  min-width: 240px;
}

/* --- Avisos ---------------------------------------------------------------- */

.aviso {
  display: flex;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio);
  border: 1px solid transparent;
  font-size: var(--texto-base);
  align-items: flex-start;
}

.aviso__titulo {
  font-weight: 600;
  display: block;
}

.aviso__cuerpo {
  flex: 1;
}

.aviso--success {
  background: var(--exito-fondo);
  border-color: #b8e0cb;
  color: #12563a;
}

.aviso--error,
.aviso--danger {
  background: var(--peligro-fondo);
  border-color: #f2c3bf;
  color: #8c1c17;
}

.aviso--warning {
  background: var(--alerta-fondo);
  border-color: #eed6a8;
  color: #7d4a0c;
}

.aviso--info {
  background: var(--info-fondo);
  border-color: #c2d9ef;
  color: #17456f;
}

.aviso__cerrar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--texto-md);
  color: inherit;
  opacity: 0.6;
  padding: 0 var(--esp-1);
}

.aviso__cerrar:hover {
  opacity: 1;
}

.avisos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
}

/* --- Estado vacío ---------------------------------------------------------- */

.vacio {
  text-align: center;
  padding: var(--esp-7) var(--esp-5);
  color: var(--texto-suave);
}

.vacio__icono {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--esp-3);
  color: var(--texto-tenue);
  opacity: 0.7;
}

.vacio__titulo {
  font-weight: 600;
  color: var(--texto);
  font-size: var(--texto-md);
  margin-bottom: var(--esp-1);
}

.vacio__detalle {
  font-size: var(--texto-base);
  max-width: 46ch;
  margin: 0 auto;
}

.vacio__accion {
  margin-top: var(--esp-4);
}

/* --- Listas de definición (detalles) --------------------------------------- */

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--esp-4) var(--esp-5);
}

.dato__etiqueta {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  font-weight: 600;
  margin-bottom: 2px;
}

.dato__valor {
  font-size: var(--texto-base);
  font-variant-numeric: tabular-nums;
}

.dato__valor--destacado {
  font-size: var(--texto-lg);
  font-weight: 600;
}

/* --- Desglose de cálculo --------------------------------------------------- */

.calculo {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie-suave);
}

.calculo__linea {
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  border-bottom: 1px solid var(--borde);
}

.calculo__linea:last-child {
  border-bottom: none;
  background: var(--marca-clara);
  font-weight: 600;
}

.calculo__operador {
  width: 1rem;
  color: var(--texto-tenue);
  font-weight: 600;
  text-align: center;
}

.calculo__etiqueta {
  flex: 1;
}

.calculo__importe {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Línea de tiempo / historial ------------------------------------------- */

.historial {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.historial__item {
  display: flex;
  gap: var(--esp-3);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--borde);
}

.historial__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.historial__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marca-acento);
  margin-top: 7px;
  flex-shrink: 0;
}

.historial__cuerpo {
  flex: 1;
  min-width: 0;
}

.historial__meta {
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
}

.historial__cambios {
  font-size: var(--texto-sm);
  margin-top: var(--esp-1);
  color: var(--texto-suave);
}

/* --- Comentarios ----------------------------------------------------------- */

.comentario {
  padding: var(--esp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie-suave);
  margin-bottom: var(--esp-2);
}

.comentario__meta {
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
  margin-bottom: var(--esp-1);
  display: flex;
  gap: var(--esp-2);
  align-items: center;
}

.comentario__cuerpo {
  white-space: pre-wrap;
}

/* --- Modal ----------------------------------------------------------------- */

dialog.modal {
  border: none;
  border-radius: var(--radio-lg);
  padding: 0;
  box-shadow: var(--sombra-lg);
  max-width: 560px;
  width: calc(100% - 2rem);
}

dialog.modal::backdrop {
  background: rgba(20, 38, 60, 0.45);
}

.modal__encabezado {
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.modal__titulo {
  font-size: var(--texto-md);
  font-weight: 600;
  margin-right: auto;
}

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

.modal__pie {
  padding: var(--esp-3) var(--esp-5);
  border-top: 1px solid var(--borde);
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
  background: var(--superficie-suave);
}

/* --- Página de error ------------------------------------------------------- */

.error-pagina {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--esp-5);
  text-align: center;
}

.error-pagina__codigo {
  font-size: 4rem;
  font-weight: 700;
  color: var(--borde-fuerte);
  line-height: 1;
}

.error-pagina__titulo {
  font-size: var(--texto-xl);
  font-weight: 600;
  margin: var(--esp-3) 0 var(--esp-2);
}

.error-pagina__detalle {
  color: var(--texto-suave);
  max-width: 48ch;
  margin: 0 auto var(--esp-5);
}

/* --- Estado de cuenta para compartir --------------------------------------- */

.estado-cuenta {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--esp-6);
  background: #fff;
}

.estado-cuenta__encabezado {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-4);
  padding-bottom: var(--esp-4);
  border-bottom: 2px solid var(--marca);
  margin-bottom: var(--esp-5);
}

.estado-cuenta__total {
  margin-top: var(--esp-5);
  padding: var(--esp-4);
  background: var(--marca-clara);
  border-radius: var(--radio);
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
}

.estado-cuenta__total-valor {
  margin-left: auto;
  font-size: var(--texto-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Pestañas -------------------------------------------------------------- */

.pestanas {
  display: flex;
  gap: var(--esp-1);
  border-bottom: 1px solid var(--borde);
  margin-bottom: var(--esp-4);
}

.pestanas__enlace {
  padding: var(--esp-2) var(--esp-4);
  color: var(--texto-suave);
  border-bottom: 2px solid transparent;
  font-weight: 500;
  margin-bottom: -1px;
}

.pestanas__enlace:hover {
  color: var(--texto);
  text-decoration: none;
}

.pestanas__enlace[aria-current="page"] {
  color: var(--marca);
  border-bottom-color: var(--marca);
  font-weight: 600;
}

/* --- Adjuntos --------------------------------------------------------------- */

.adjuntos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.adjunto {
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie-suave);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* --- Vista previa de mail ---------------------------------------------------- */

.mail-preview {
  font-family: var(--fuente-numeros);
  font-size: var(--texto-sm);
  line-height: 1.6;
  min-height: 320px;
}

/* --- Barra de totales -------------------------------------------------------- */

.totales {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  margin-bottom: var(--esp-4);
}

.totales__item {
  flex: 1;
  min-width: 160px;
  background: var(--superficie);
  padding: var(--esp-3) var(--esp-4);
  border-top: 3px solid transparent;
}

.totales__item--positive { border-top-color: var(--exito); }
.totales__item--warning { border-top-color: var(--alerta); }
.totales__item--danger { border-top-color: var(--peligro); }

.totales__etiqueta {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  font-weight: 600;
}

.totales__valor {
  font-size: var(--texto-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.totales__nota {
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
}

/* --- Bloques del tablero ------------------------------------------------------ */

.bloque-tablero {
  margin-bottom: var(--esp-5);
}

.bloque-tablero__titulo {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  font-weight: 700;
  margin-bottom: var(--esp-3);
}

/* --- Sub-formularios (reservas de hotel) -------------------------------------- */

.subfila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  /* Tres franjas que todos los campos de la fila comparten: etiqueta,
   * control y mensajes. Ver `.subfila > .campo`. */
  grid-template-rows: auto auto auto;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: var(--esp-2);
  background: var(--superficie-suave);
}

/* Un campo de una fila repetible no es una caja suelta: es una columna de la
 * fila, y sus tres partes pertenecen a las franjas de la fila, no a sí mismo.
 *
 * Sin esto, cada campo se medía solo y la fila los alineaba por abajo
 * (`align-items: end`). Un error de validación hacía crecer una sola celda, y
 * como todas se alineaban contra el borde inferior de la fila, los controles
 * vecinos bajaban ~38px mientras el que tenía el error se quedaba arriba: la
 * fila quedaba escalonada justo cuando el usuario necesitaba leerla.
 *
 * `subgrid` hace que las etiquetas queden a la altura de las etiquetas, los
 * controles a la de los controles y los mensajes debajo de todo. Un error
 * crece hacia abajo, dentro de la franja de mensajes, sin mover nada. Vale
 * igual para las filas que vienen del servidor y para las que agrega el
 * repetidor en el navegador: es la estructura, no un ajuste por fila. */
.subfila > .campo {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: var(--esp-1);
}

.subfila .campo label {
  font-size: var(--texto-xs);
  font-weight: 500;
  color: var(--texto-suave);
}

/* --- Candidatas de identificación de factura ----------------------------------- */

.candidata {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: var(--esp-2);
}

.candidata--mejor {
  border-color: var(--marca-acento);
  background: var(--marca-clara);
}

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

/* --- Acceso --------------------------------------------------------------------- */

/* La marca va arriba de la tarjeta y sobre el fondo de la pantalla, no adentro
   de la tarjeta blanca: el logo no queda encerrado en una caja y la pantalla
   se lee como una sola pieza. El bloque en sí está en marca.css. */
.acceso {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-6);
  padding: var(--esp-5);
  background: var(--lateral-fondo);
}

.acceso__tarjeta {
  width: 100%;
  max-width: 400px;
  background: var(--superficie);
  border-radius: var(--radio-lg);
  /* Más marcada que `--sombra-lg`, que está pensada para fondo claro y sobre
     el azul de la marca no se ve: acá es lo que despega la tarjeta del fondo. */
  box-shadow: 0 18px 40px rgba(4, 12, 24, 0.28);
  padding: var(--esp-6);
}

/* El nombre de la pantalla, que antes estaba al lado del logo y ahora encabeza
   la tarjeta: sin él la tarjeta no diría qué se está por hacer en ella. */
.acceso__titulo {
  margin-bottom: var(--esp-4);
}

.acceso__pie {
  font-size: var(--texto-xs);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}

/* --- Ver la contraseña ---------------------------------------------------------
   El botón va encima del campo, alineado a la derecha. El campo reserva el
   espacio con padding para que el texto no pase por debajo del ícono.

   Nace con `hidden`: sin JavaScript el botón no haría nada, y un botón que no
   hace nada es peor que no tenerlo. Lo muestra app.js al engancharlo. */
.campo__control {
  position: relative;
  display: flex;
}

.campo__control .entrada {
  padding-right: 2.4rem;
}

.campo__ver {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--texto-tenue);
  border-radius: 0 var(--radio) var(--radio) 0;
}

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

.campo__ver[hidden] {
  display: none;
}

/* Oculta (el estado inicial) se ofrece mostrarla; visible, ocultarla. */
.campo__ver-icono--ocultar,
.campo__ver[aria-pressed="true"] .campo__ver-icono--mostrar {
  display: none;
}

.campo__ver[aria-pressed="true"] .campo__ver-icono--ocultar {
  display: flex;
}

.campo__ver[aria-pressed="true"] {
  color: var(--marca-acento);
}

/* El ícono hereda la clase de la barra lateral, que le pone su propio color. */
.campo__ver .lateral__icono {
  color: inherit;
  opacity: 1;
}

/* El campo de contraseña quedaba sin estilo cuando se escribe a mano: la lista
   de arriba no lo incluye y solo se ve bien si pasa por la macro `campo()`,
   que agrega la clase `entrada`. Las pantallas de acceso tienen varios. */
.campo input[type="password"] {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: var(--texto-base);
}

/* Botón que ocupa todo el ancho: en una tarjeta de acceso el botón principal
   es la única acción, y antes se lograba con un `style` suelto en la plantilla. */
.boton--bloque {
  width: 100%;
}

/* --- Panel de acción dentro de una tarjeta -------------------------------------- */

.panel-accion {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--esp-4);
  background: var(--superficie-suave);
}

.panel-accion__titulo {
  font-weight: 600;
  margin-bottom: var(--esp-3);
}

/* --- Filas que se agregan y se quitan (TQT, reservas) ------------------------- */

.subfila--con-accion {
  position: relative;
  align-items: end;
}

.repetidor__quitar {
  white-space: nowrap;
}

/* La acción de la fila es una columna más, y su botón vive en la franja de
 * los controles: así queda a la altura de los campos y no se descuelga cuando
 * un error de validación hace crecer la fila. Es la misma regla que sigue la
 * columna de acciones de las tablas: encabezado, dato y acción comparten
 * posición estructural. */
.subfila > .campo--accion > .repetidor__quitar {
  grid-row: 2;
  align-self: end;
}

.repetidor__pie {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  margin-top: var(--esp-2);
  margin-bottom: var(--esp-2);
}

.repetidor__total {
  font-size: var(--texto-xs);
  color: var(--texto-suave);
}

.subtitulo {
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--texto-suave);
  margin: var(--esp-4) 0 var(--esp-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Tarjeta que es una opción para elegir (tipo de operación) ---------------- */

.tarjeta--opcion {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.tarjeta--opcion:hover,
.tarjeta--opcion:focus-visible {
  border-color: var(--marca-acento);
  transform: translateY(-2px);
}

.tarjeta--opcion__icono {
  display: block;
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: var(--esp-2);
}