/*
 * components.css — Estilos de los componentes de app/Views/componentes/ y de los layouts.
 *
 * Reglas: solo var(--token) de tokens.css (ningún color literal), sin la marca de
 * prioridad "important" (salvo justificada en la misma línea con el comentario
 * important-ok) y sin estilos en línea.
 * Los componentes no tienen márgenes exteriores: el contenedor separa a sus hijos
 * (patrón "pila": .contenedor > * + * { margin-top }).
 * Catálogo y uso: docs/DISENO.md · Guía viva: /{ADMIN_PATH}/estilos
 */

/* ==========================================================================
 * Utilidades del documento
 * ======================================================================== */
.saltar-contenido {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: var(--z-aviso);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-md);
  background-color: var(--c-superficie);
  color: var(--c-enlace);
  font-weight: var(--p-semi);
  box-shadow: var(--s-2);
  transform: translateY(-300%);
}

.saltar-contenido:focus {
  transform: none;
}

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

.modal-backdrop,
.offcanvas-backdrop {
  --bs-backdrop-bg: var(--c-texto);
  --bs-backdrop-opacity: 0.5;
}

/* ==========================================================================
 * Layout de acceso (login y errores)
 * ======================================================================== */
.cuerpo--acceso {
  border-top: var(--b-acento) solid var(--c-marca);
}

.acceso {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: var(--e-6) var(--e-4) var(--e-4);
}

.acceso__marca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-6);
}

.acceso__logotipo {
  width: var(--e-10);
  height: var(--e-10);
}

.acceso__nombre {
  font-size: var(--t-xl);
  font-weight: var(--p-negrita);
  color: var(--c-texto);
}

.acceso__nombre-suave {
  font-weight: var(--p-normal);
}

.acceso__zona {
  padding: var(--e-1) var(--e-3);
  border-radius: var(--r-pill);
  background-color: var(--c-plataforma-suave);
  color: var(--c-texto);
  font-size: var(--t-sm);
  font-weight: var(--p-semi);
}

.acceso__tarjeta {
  width: 100%;
  max-width: var(--ancho-acceso);
  padding: var(--e-6) var(--e-5);
  border: var(--b-fino) solid var(--c-borde);
  border-radius: var(--r-lg);
  background-color: var(--c-superficie);
  box-shadow: var(--s-1);
}

.acceso__tarjeta > * + * {
  margin-top: var(--e-5);
}

.acceso__tarjeta .cabecera-pagina__titulo {
  font-size: var(--t-2xl);
}

.acceso__tarjeta .botonera {
  flex-direction: column;
  align-items: stretch;
}

.acceso__tarjeta .botonera .btn {
  width: 100%;
}

.acceso .pie-pagina {
  margin-top: auto;
  padding-top: var(--e-6);
}

@media (min-width: 576px) {
  .acceso {
    padding-top: var(--e-12);
  }

  .acceso__tarjeta {
    padding: var(--e-8);
  }
}

/* ==========================================================================
 * Layout de panel (cliente y plataforma)
 * ======================================================================== */
.barra-superior {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecera);
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alto-cabecera);
  padding: 0 var(--e-3);
  border-top: var(--b-acento) solid var(--c-marca);
  border-bottom: var(--b-fino) solid var(--c-borde);
  background-color: var(--c-superficie);
}

.barra-superior__boton-menu {
  flex-shrink: 0;
  width: var(--tactil-min);
  padding: 0;
  font-size: var(--t-xl);
}

.logotipo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--e-2);
  color: var(--c-texto);
  font-size: var(--t-lg);
  font-weight: var(--p-negrita);
  text-decoration: none;
}

.logotipo:hover {
  color: var(--c-texto);
}

.logotipo__imagen {
  width: var(--icono-logo);
  height: var(--icono-logo);
}

.logotipo__texto {
  display: none;
}

.logotipo__texto-suave {
  font-weight: var(--p-normal);
}

.barra-superior__empresa {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
}

.barra-superior__nombre-empresa {
  overflow: hidden;
  font-weight: var(--p-semi);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra-superior__plataforma {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: var(--p-negrita);
  white-space: nowrap;
}

.barra-superior__usuario {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--e-3);
  margin-left: auto;
}

.barra-superior__nombre-usuario {
  display: none;
  color: var(--c-texto-suave);
  font-size: var(--t-sm);
  white-space: nowrap;
}

@media (min-width: 576px) {
  .logotipo__texto {
    display: inline;
  }

  .barra-superior {
    padding: 0 var(--e-4);
  }

  .barra-superior__empresa {
    padding-left: var(--e-3);
    border-left: var(--b-fino) solid var(--c-borde);
  }
}

@media (min-width: 768px) {
  .barra-superior__nombre-usuario {
    display: inline;
  }
}

@media (min-width: 992px) {
  .barra-superior__boton-menu {
    display: none;
  }
}

/* Panel de plataforma: barra oscura y acento propio, para no confundirlo con un cliente */
.cuerpo--admin .barra-superior {
  border-top-color: var(--c-plataforma);
  border-bottom-color: var(--c-plataforma-oscuro);
  background-color: var(--c-plataforma-oscuro);
  color: var(--c-texto-inverso);
}

.cuerpo--admin .logotipo,
.cuerpo--admin .logotipo:hover,
.cuerpo--admin .logotipo__texto-suave,
.cuerpo--admin .barra-superior__nombre-usuario {
  color: var(--c-texto-inverso);
}

.cuerpo--admin .barra-superior__empresa {
  border-left-color: var(--c-plataforma);
}

.panel {
  display: flex;
  min-height: calc(100vh - var(--alto-cabecera));
}

.panel__lateral {
  flex: 0 0 auto;
}

.panel__offcanvas {
  --bs-offcanvas-width: var(--ancho-menu);
  --bs-offcanvas-bg: var(--c-superficie);
  --bs-offcanvas-color: var(--c-texto);
}

.panel__titulo-menu {
  overflow: hidden;
  font-size: var(--t-lg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .panel__lateral {
    flex-basis: var(--ancho-menu);
    border-right: var(--b-fino) solid var(--c-borde);
    background-color: var(--c-superficie);
  }

  .panel__offcanvas {
    position: sticky;
    top: var(--alto-cabecera);
    max-height: calc(100vh - var(--alto-cabecera));
    padding: var(--e-4) var(--e-3);
    overflow-y: auto;
  }
}

.panel__columna {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.panel__contenido {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: var(--e-5) var(--e-4);
}

.panel__contenido > * + * {
  margin-top: var(--e-6);
}

@media (min-width: 768px) {
  .panel__contenido {
    padding: var(--e-8);
  }
}

.pie-pagina {
  padding: var(--e-4);
  text-align: center;
}

.pie-pagina__texto {
  margin: 0;
  color: var(--c-texto-suave);
  font-size: var(--t-sm);
}

.pie-pagina__enlace {
  color: var(--c-enlace);
}

.zona-flash > * + * {
  margin-top: var(--e-3);
}

/* ==========================================================================
 * Layout público (/p)
 * ======================================================================== */
.cabecera-publica {
  padding: var(--e-4);
  border-bottom: var(--b-acento) solid var(--c-marca);
  background-color: var(--c-marca-fuerte);
  color: var(--c-texto-inverso);
}

.cabecera-publica__interior {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  max-width: var(--ancho-lectura);
  margin: 0 auto;
}

.cabecera-publica__logotipo {
  flex-shrink: 0;
  width: var(--e-10);
  height: var(--e-10);
}

.cabecera-publica__nombre {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: var(--p-negrita);
}

.cabecera-publica__lema {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: var(--p-semi);
}

.publico {
  max-width: var(--ancho-lectura);
  margin: 0 auto;
  padding: var(--e-6) var(--e-4);
  line-height: var(--lh-amplio);
}

.publico > * + * {
  margin-top: var(--e-5);
}

/* ==========================================================================
 * cabecera_pagina
 * ======================================================================== */
.cabecera-pagina__migas .breadcrumb {
  --bs-breadcrumb-margin-bottom: var(--e-2);
  --bs-breadcrumb-font-size: var(--t-sm);
  --bs-breadcrumb-divider-color: var(--c-texto-suave);
  --bs-breadcrumb-item-active-color: var(--c-texto-suave);
  flex-wrap: wrap;
}

.cabecera-pagina__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-4);
}

.cabecera-pagina__textos {
  flex: 1 1 18rem;
  min-width: 0;
}

.cabecera-pagina__titulo {
  margin: 0;
  overflow-wrap: anywhere;
}

.cabecera-pagina__subtitulo {
  margin: var(--e-2) 0 0;
  color: var(--c-texto-suave);
}

.cabecera-pagina__acciones {
  flex: 0 1 auto;
}

/* ==========================================================================
 * boton y botonera
 * ======================================================================== */
.btn .bi {
  flex-shrink: 0;
  font-size: 1.1em;
  line-height: 1;
}

.btn-texto {
  overflow-wrap: break-word;
}

/* Botones de las barras (Salir): nunca se encogen; se encoge el nombre de la empresa */
.barra-superior .formulario,
.barra-conductor .formulario,
.barra-superior .btn,
.barra-conductor .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.btn.copiado {
  border-color: var(--c-exito);
  color: var(--c-exito);
}

.botonera {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-3);
}

.formulario > .botonera {
  margin-top: var(--e-2);
}

/* En móvil: apilada a todo el ancho y la principal (la última) arriba */
@media (max-width: 575.98px) {
  .botonera {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .botonera .btn {
    width: 100%;
  }
}

/* ==========================================================================
 * formulario y campo
 * ======================================================================== */
.formulario--en-linea {
  display: inline-block;
}

.formulario.esta-enviando {
  cursor: progress;
}

.campo {
  margin-bottom: var(--e-4);
}

.campo__obligatorio {
  margin-left: var(--e-1);
  color: var(--c-error);
}

.campo__error {
  display: flex;
  gap: var(--e-1);
  align-items: baseline;
}

.campo__error .bi {
  flex-shrink: 0;
}

.campo--mayusculas .form-control {
  text-transform: uppercase;
}

.campo--casilla {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--e-3);
  min-height: var(--tactil-min);
  padding-left: 0;
}

.campo--casilla .form-check-input {
  float: none;
  width: var(--e-6);
  height: var(--e-6);
  margin: 0;
}

.campo--casilla.form-switch .form-check-input {
  width: var(--e-10);
  margin-left: 0;
}

.campo--casilla .form-check-label {
  padding-block: var(--e-2);
}

.campo--casilla .campo__error,
.campo--casilla .campo__ayuda {
  grid-column: 2;
  margin-top: 0;
}

.campo--deshabilitado .form-check-label {
  color: var(--c-texto-suave);
}

.campo-pin__casillas {
  display: flex;
  gap: var(--e-2);
}

.campo-pin__casilla.form-control {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--casilla-pin);
  height: var(--e-12);
  padding: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xl);
  font-weight: var(--p-negrita);
  text-align: center;
}

.campo-pin__casilla.form-control.is-invalid {
  padding: 0;
  border-color: var(--c-error);
  background-image: none;
}

/* ==========================================================================
 * tabla_listado
 * ======================================================================== */
.tabla-listado {
  /* relative: el texto oculto (visually-hidden) es absoluto y, sin esto, escaparía del recorte y ensancharía la página */
  position: relative;
  overflow-x: auto;
}

.tabla-listado__tabla {
  --bs-table-bg: var(--c-superficie);
  --bs-table-color: var(--c-texto);
  --bs-table-border-color: var(--c-borde);
  --bs-table-hover-bg: var(--c-superficie-alt);
  margin-bottom: 0;
}

.tabla-listado__titulo {
  padding-top: 0;
  caption-side: top;
  color: var(--c-texto);
  font-weight: var(--p-semi);
}

.tabla-listado__tabla > thead > tr > th {
  --bs-table-bg: var(--c-superficie-alt);
  color: var(--c-texto);
  font-size: var(--t-sm);
  font-weight: var(--p-semi);
  white-space: nowrap;
}

.tabla-listado__tabla > tbody > tr > td {
  vertical-align: middle;
}

.tabla-listado__derecha {
  text-align: right;
}

.tabla-listado__centro {
  text-align: center;
}

.tabla-listado__principal {
  font-weight: var(--p-semi);
}

.tabla-listado__acciones {
  text-align: right;
}

/* La acción de peligro de una fila no grita en cada línea: contorno rojo; el relleno rojo queda para pasar el ratón */
.tabla-listado__acciones .btn-danger {
  --bs-btn-color: var(--c-error);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--c-error);
  --bs-btn-hover-color: var(--c-texto-inverso);
  --bs-btn-hover-bg: var(--c-error);
  --bs-btn-hover-border-color: var(--c-error);
  --bs-btn-active-color: var(--c-texto-inverso);
  --bs-btn-active-bg: var(--c-error-hover);
  --bs-btn-active-border-color: var(--c-error-hover);
}

/* Las acciones de una fila se reparten en varias líneas si no caben, en lugar de ensanchar la tabla */
.tabla-listado__acciones-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  justify-content: flex-end;
}

/*
 * Tarjetas en pantallas estrechas (data-etiqueta en cada celda). Compatibilidad móvil (OT-4):
 * iOS 15 y Chrome 90 no tienen container queries, así que la base son las media queries y
 * las container queries solo mejoran (se adapta al ancho del contenedor, no al de la pantalla).
 */
@supports (container-type: inline-size) {
  .tabla-listado {
    container-type: inline-size;
  }

  @container (max-width: 767.98px) {
    .tabla-listado__tabla,
    .tabla-listado__tabla > tbody,
    .tabla-listado__tabla > tbody > tr,
    .tabla-listado__tabla > tbody > tr > td {
      display: block;
      width: 100%;
    }

    .tabla-listado__tabla > thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }

    .tabla-listado__tabla > tbody > tr {
      padding: var(--e-3) var(--e-4);
      border: var(--b-fino) solid var(--c-borde);
      border-radius: var(--r-md);
      background-color: var(--c-superficie);
    }

    .tabla-listado__tabla > tbody > tr + tr {
      margin-top: var(--e-3);
    }

    .tabla-listado__tabla > tbody > tr > td {
      display: grid;
      grid-template-columns: minmax(6rem, 38%) minmax(0, 1fr);
      gap: var(--e-3);
      padding: var(--e-1) 0;
      border: 0;
      text-align: left;
      overflow-wrap: anywhere;
    }

    .tabla-listado__tabla > tbody > tr > td::before {
      content: attr(data-etiqueta);
      color: var(--c-texto-suave);
      font-size: var(--t-sm);
      font-weight: var(--p-semi);
    }

    .tabla-listado__tabla > tbody > tr > td.tabla-listado__principal {
      font-size: var(--t-lg);
    }

    .tabla-listado__tabla > tbody > tr > td.tabla-listado__acciones {
      display: flex;
      flex-wrap: wrap;
      gap: var(--e-2);
      margin-top: var(--e-2);
      padding-top: var(--e-3);
      border-top: var(--b-fino) solid var(--c-borde);
      white-space: normal;
    }

    .tabla-listado__tabla > tbody > tr > td.tabla-listado__acciones::before {
      content: none;
    }

    .tabla-listado__acciones-grupo {
      flex: 1;
      justify-content: flex-start;
    }
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 767.98px) {
    .tabla-listado__tabla,
    .tabla-listado__tabla > tbody,
    .tabla-listado__tabla > tbody > tr,
    .tabla-listado__tabla > tbody > tr > td {
      display: block;
      width: 100%;
    }

    .tabla-listado__tabla > thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }

    .tabla-listado__tabla > tbody > tr {
      padding: var(--e-3) var(--e-4);
      border: var(--b-fino) solid var(--c-borde);
      border-radius: var(--r-md);
      background-color: var(--c-superficie);
    }

    .tabla-listado__tabla > tbody > tr + tr {
      margin-top: var(--e-3);
    }

    .tabla-listado__tabla > tbody > tr > td {
      display: grid;
      grid-template-columns: minmax(6rem, 38%) minmax(0, 1fr);
      gap: var(--e-3);
      padding: var(--e-1) 0;
      border: 0;
      text-align: left;
      overflow-wrap: anywhere;
    }

    .tabla-listado__tabla > tbody > tr > td::before {
      content: attr(data-etiqueta);
      color: var(--c-texto-suave);
      font-size: var(--t-sm);
      font-weight: var(--p-semi);
    }

    .tabla-listado__tabla > tbody > tr > td.tabla-listado__principal {
      font-size: var(--t-lg);
    }

    .tabla-listado__tabla > tbody > tr > td.tabla-listado__acciones {
      display: flex;
      flex-wrap: wrap;
      gap: var(--e-2);
      margin-top: var(--e-2);
      padding-top: var(--e-3);
      border-top: var(--b-fino) solid var(--c-borde);
      white-space: normal;
    }

    .tabla-listado__tabla > tbody > tr > td.tabla-listado__acciones::before {
      content: none;
    }

    .tabla-listado__acciones-grupo {
      flex: 1;
      justify-content: flex-start;
    }
  }
}


/* ==========================================================================
 * tarjeta
 * ======================================================================== */
.tarjeta {
  --bs-card-border-color: var(--c-borde);
  --bs-card-border-radius: var(--r-lg);
  --bs-card-inner-border-radius: var(--r-lg);
  --bs-card-cap-bg: var(--c-superficie);
  --bs-card-cap-padding-y: var(--e-4);
  --bs-card-cap-padding-x: var(--e-5);
  --bs-card-spacer-y: var(--e-5);
  --bs-card-spacer-x: var(--e-5);
  --bs-card-bg: var(--c-superficie);
  box-shadow: var(--s-1);
}

/* En una rejilla, las tarjetas de una misma fila igualan su altura */
.rejilla__celda > .tarjeta {
  height: 100%;
}

.tarjeta--destacada {
  border-top: var(--b-acento) solid var(--c-marca);
}

.cuerpo--admin .tarjeta--destacada {
  border-top-color: var(--c-plataforma);
}

.tarjeta__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  font-size: var(--t-lg);
}

.tarjeta__icono {
  color: var(--c-marca-fuerte);
}

.cuerpo--admin .tarjeta__icono {
  color: var(--c-plataforma);
}

.tarjeta__cuerpo > * + * {
  margin-top: var(--e-4);
}

.tarjeta__pie {
  background-color: var(--c-superficie-alt);
  color: var(--c-texto-suave);
  font-size: var(--t-sm);
}

/* ==========================================================================
 * alerta
 * ======================================================================== */
.alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-left: var(--b-acento) solid currentColor;
  border-radius: var(--r-md);
}

.alerta--exito { background-color: var(--c-exito-fondo); color: var(--c-exito); }
.alerta--aviso { background-color: var(--c-aviso-fondo); color: var(--c-aviso); }
.alerta--error { background-color: var(--c-error-fondo); color: var(--c-error); }
.alerta--info { background-color: var(--c-info-fondo); color: var(--c-info); }

.alerta__icono {
  flex-shrink: 0;
  font-size: var(--t-xl);
  line-height: var(--lh-ajustado);
}

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

.alerta__titulo {
  margin: 0 0 var(--e-1);
  font-weight: var(--p-negrita);
}

.alerta__mensaje {
  margin: 0;
}

.alerta__cerrar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--tactil-min);
  height: var(--tactil-min);
  margin: calc(-1 * var(--e-2)) calc(-1 * var(--e-2)) 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: inherit;
}

.alerta__cerrar:hover {
  background-color: var(--c-superficie);
}

/* ==========================================================================
 * badge_estado
 * ======================================================================== */
.badge-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-1) var(--e-2);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: var(--p-semi);
  line-height: var(--lh-ajustado);
  white-space: nowrap;
  vertical-align: middle;
}

.badge-estado--largo {
  white-space: normal;
  overflow-wrap: break-word;
}

.badge-estado--info { background-color: var(--c-info-fondo); color: var(--c-info); }
.badge-estado--exito { background-color: var(--c-exito-fondo); color: var(--c-exito); }
.badge-estado--aviso { background-color: var(--c-aviso-fondo); color: var(--c-aviso); }
.badge-estado--error { background-color: var(--c-error-fondo); color: var(--c-error); }
.badge-estado--error-fuerte { background-color: var(--c-error); color: var(--c-texto-inverso); }
.badge-estado--neutro { background-color: var(--c-neutro-fondo); color: var(--c-neutro); }
.badge-estado--lite { background-color: var(--c-lite); color: var(--c-texto-inverso); letter-spacing: 0.04em; }
.badge-estado--pro { background-color: var(--c-pro); color: var(--c-texto-inverso); letter-spacing: 0.04em; }
.badge-estado--verde { background-color: var(--c-semaforo-verde); color: var(--c-texto-inverso); }
.badge-estado--ambar { background-color: var(--c-semaforo-ambar); color: var(--c-semaforo-ambar-texto); }
.badge-estado--rojo { background-color: var(--c-semaforo-rojo); color: var(--c-texto-inverso); }

/* ==========================================================================
 * estado_vacio
 * ======================================================================== */
.estado-vacio {
  padding: var(--e-6) var(--e-2);
  text-align: center;
}

.estado-vacio__icono {
  display: block;
  color: var(--c-marca);
  font-size: var(--alto-icono-vacio);
  line-height: 1;
}

.estado-vacio__titulo {
  margin: var(--e-3) 0 var(--e-2);
  font-size: var(--t-xl);
}

.estado-vacio__texto {
  max-width: 32rem;
  margin: 0 auto;
  color: var(--c-texto-suave);
}

.estado-vacio__accion {
  margin-top: var(--e-5);
}

/* ==========================================================================
 * paginacion
 * ======================================================================== */
.paginacion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

/* Compatibilidad móvil (OT-4): media query de base y container query como mejora progresiva */
@supports (container-type: inline-size) {
  .paginacion {
    container-type: inline-size;
  }

  @container (max-width: 30rem) {
    .paginacion__lejana {
      display: none;
    }
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 575.98px) {
    .paginacion__lejana {
      display: none;
    }
  }
}

.paginacion .pagination {
  --bs-pagination-color: var(--c-enlace);
  --bs-pagination-bg: var(--c-superficie);
  --bs-pagination-border-color: var(--c-borde-control);
  --bs-pagination-hover-color: var(--c-enlace-hover);
  --bs-pagination-hover-bg: var(--c-superficie-alt);
  --bs-pagination-hover-border-color: var(--c-borde-control);
  --bs-pagination-active-color: var(--c-texto-inverso);
  --bs-pagination-active-bg: var(--c-marca-fuerte);
  --bs-pagination-active-border-color: var(--c-marca-fuerte);
  --bs-pagination-disabled-color: var(--c-texto-suave);
  --bs-pagination-disabled-bg: var(--c-superficie);
  --bs-pagination-disabled-border-color: var(--c-borde);
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

.paginacion .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactil-min);
  min-height: var(--tactil-min);
}

.paginacion__resumen {
  margin: 0;
  color: var(--c-texto-suave);
  font-size: var(--t-sm);
}

/* ==========================================================================
 * menu
 * ======================================================================== */
.menu {
  width: 100%;
}

.menu__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__enlace {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--tactil-min);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-md);
  color: var(--c-texto);
  font-weight: var(--p-medio);
  text-decoration: none;
  transition: background-color var(--transicion);
}

.menu__enlace:hover {
  background-color: var(--c-superficie-alt);
  color: var(--c-texto);
}

.menu__enlace--activo,
.menu__enlace--activo:hover {
  background-color: var(--c-marca-suave);
  box-shadow: inset var(--b-acento) 0 0 var(--c-marca-fuerte);
  font-weight: var(--p-semi);
}

.cuerpo--admin .menu__enlace--activo,
.cuerpo--admin .menu__enlace--activo:hover {
  background-color: var(--c-plataforma-suave);
  box-shadow: inset var(--b-acento) 0 0 var(--c-plataforma);
}

.menu__enlace--bloqueado {
  color: var(--c-texto-suave);
}

.menu__icono {
  flex-shrink: 0;
  width: var(--e-5);
  font-size: var(--t-lg);
  text-align: center;
}

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

/* ==========================================================================
 * lista_datos
 * ======================================================================== */
.lista-datos {
  display: grid;
  margin: 0;
}

.lista-datos__par {
  display: grid;
  align-items: baseline;
  grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: var(--b-fino) solid var(--c-borde);
}

.lista-datos__par:first-child {
  padding-top: 0;
}

.lista-datos__par:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lista-datos__etiqueta {
  color: var(--c-texto-suave);
  font-size: var(--t-sm);
  font-weight: var(--p-semi);
}

.lista-datos__valor {
  margin: 0;
  overflow-wrap: break-word;
}

@media (max-width: 399.98px) {
  .lista-datos__par {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-1);
  }
}

.lista-datos--dos-columnas {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  column-gap: var(--e-6);
}

.lista-datos--dos-columnas .lista-datos__par:first-child,
.lista-datos--dos-columnas .lista-datos__par:last-child {
  padding: var(--e-3) 0;
  border-bottom: var(--b-fino) solid var(--c-borde);
}

/* ==========================================================================
 * dato_copiable
 * ======================================================================== */
.dato-copiable__etiqueta {
  margin: 0 0 var(--e-2);
  font-weight: var(--p-semi);
}

.dato-copiable__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}

.dato-copiable__valor {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  max-width: 100%;
  padding: var(--e-2) var(--e-3);
  border: var(--b-fino) solid var(--c-borde);
  border-radius: var(--r-md);
  background-color: var(--c-superficie-alt);
  color: var(--c-texto);
  font-size: var(--t-lg);
  font-weight: var(--p-semi);
  letter-spacing: 0.06em;
}

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

/* Sin agrupar (una URL): se parte por cualquier sitio para no salirse de la tarjeta en el móvil */
.dato-copiable__valor--libre {
  min-width: 0;
  letter-spacing: 0;
}

.dato-copiable__valor--libre .dato-copiable__grupo {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ==========================================================================
 * lista_caracteristicas
 * ======================================================================== */
.lista-caracteristicas {
  display: grid;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.lista-caracteristicas__elemento {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.lista-caracteristicas__icono {
  flex-shrink: 0;
  color: var(--c-exito);
  font-size: var(--t-lg);
  line-height: var(--lh-normal);
}

.lista-caracteristicas__elemento--destacado {
  margin: 0 calc(-1 * var(--e-2));
  padding: var(--e-2);
  border-radius: var(--r-md);
  background-color: var(--c-marca-suave);
  font-weight: var(--p-semi);
}

.lista-caracteristicas--numerada .lista-caracteristicas__elemento {
  counter-increment: paso;
}

.lista-caracteristicas--numerada .lista-caracteristicas__elemento::before {
  content: counter(paso);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--e-6);
  height: var(--e-6);
  border-radius: var(--r-pill);
  background-color: var(--c-marca-fuerte);
  color: var(--c-texto-inverso);
  font-size: var(--t-sm);
  font-weight: var(--p-negrita);
}

/* ==========================================================================
 * bloque_codigo
 * ======================================================================== */
.bloque-codigo {
  margin: 0;
}

.bloque-codigo__etiqueta {
  margin-bottom: var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--p-semi);
}

.bloque-codigo__texto {
  max-height: 20rem;
  margin: 0;
  padding: var(--e-3) var(--e-4);
  overflow: auto;
  border: var(--b-fino) solid var(--c-borde);
  border-radius: var(--r-md);
  background-color: var(--c-superficie-alt);
  color: var(--c-texto);
  font-size: var(--t-sm);
}

/* ==========================================================================
 * rejilla
 * ======================================================================== */
.rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
}

.rejilla__celda {
  min-width: 0;
}

@media (min-width: 768px) {
  .rejilla--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .rejilla--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .rejilla--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
 * modal_confirmacion
 * ======================================================================== */
.modal-confirmacion .modal-content {
  --bs-modal-bg: var(--c-superficie);
  --bs-modal-border-radius: var(--r-lg);
  --bs-modal-box-shadow: var(--s-3);
}

.modal-confirmacion__titulo {
  font-size: var(--t-xl);
}

.modal-confirmacion__texto {
  margin: 0;
}

.modal-confirmacion .modal-footer .botonera {
  width: 100%;
  margin: 0;
}

/* ==========================================================================
 * muestra_token (guía viva). El valor de cada muestra lo da /{ADMIN_PATH}/estilos/muestras.css
 * ======================================================================== */
.muestra-token--color {
  display: inline-block;
  width: var(--e-12);
  height: var(--e-8);
  border: var(--b-fino) solid var(--c-borde);
  border-radius: var(--r-sm);
}

.muestra-token--tamano,
.muestra-token--peso {
  line-height: var(--lh-ajustado);
}

.muestra-token--espacio {
  display: block;
  height: var(--e-3);
  border-radius: var(--r-sm);
  background-color: var(--c-marca);
}

.muestra-token--radio {
  display: inline-block;
  width: var(--e-12);
  height: var(--e-10);
  border: var(--b-grueso) solid var(--c-marca-fuerte);
  background-color: var(--c-marca-suave);
}

.muestra-token--sombra {
  display: inline-block;
  width: var(--e-16);
  height: var(--e-10);
  border-radius: var(--r-md);
  background-color: var(--c-superficie);
}

.muestra-token--par {
  display: inline-flex;
  padding: var(--e-1) var(--e-3);
  border: var(--b-fino) solid var(--c-borde);
  border-radius: var(--r-sm);
  font-weight: var(--p-semi);
}

/* ==========================================================================
 * menu: separador «Disponible en PRO» (OT-4)
 * ======================================================================== */
.menu__separador {
  margin-top: var(--e-3);
  padding: var(--e-3) var(--e-3) var(--e-1);
  border-top: var(--b-fino) solid var(--c-borde);
}

.menu__separador-texto {
  color: var(--c-texto-suave);
  font-size: var(--t-sm);
  font-weight: var(--p-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
 * boton: compacto en el móvil (solo el icono por debajo de 400 px, OT-4)
 * ======================================================================== */
@media (max-width: 399.98px) {
  .btn--compacto-movil {
    position: relative;
    justify-content: center;
    width: var(--tactil-min);
    padding-right: 0;
    padding-left: 0;
  }

  /* El texto sigue en el DOM (y en aria-label y title) pero no se ve */
  .btn--compacto-movil > .btn-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ==========================================================================
 * Cabecera de los paneles: «Cambiar contraseña» (OT-6). Solo con el icono hasta 1200 px, para no quitar sitio
 * al nombre de la empresa; el texto sigue en aria-label y title (D-043). Mismo patrón que btn--compacto-movil.
 * ======================================================================== */
@media (max-width: 1199.98px) {
  .barra-superior__cuenta .btn--compacto-movil {
    position: relative;
    justify-content: center;
    width: var(--tactil-min);
    padding-right: 0;
    padding-left: 0;
  }

  .barra-superior__cuenta .btn--compacto-movil > .btn-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ==========================================================================
 * alerta con acción y campo con enlace en el error (OT-4)
 * ======================================================================== */
.alerta__accion {
  margin-top: var(--e-2);
}

.campo__error-enlace {
  color: var(--c-enlace);
  font-weight: var(--p-semi);
  text-decoration: underline;
}

.campo__error-enlace:hover {
  color: var(--c-enlace-hover);
}

/* ==========================================================================
 * barra_filtros
 * ======================================================================== */
.barra-filtros {
  margin-bottom: var(--e-5);
  padding: var(--e-4);
  border: var(--b-fino) solid var(--c-borde);
  border-radius: var(--r-lg);
  background-color: var(--c-superficie);
}

.barra-filtros__campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--e-4);
}

.barra-filtros__casilla {
  margin-bottom: var(--e-2);
}

.barra-filtros .campo--casilla,
.barra-filtros .campo {
  margin-bottom: var(--e-3);
}

@media (min-width: 768px) {
  .barra-filtros__campos {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
}

/* ==========================================================================
 * grupo_condicional: el atributo hidden lo pone el servidor y lo mantiene app.js
 * ======================================================================== */
.grupo-condicional[hidden] {
  display: none;
}

/* ==========================================================================
 * selector_busqueda (OT-5): select nativo + caja de búsqueda que añade app.js
 * ======================================================================== */
.selector-busqueda {
  position: relative;
}

.selector-busqueda__buscador[hidden] {
  display: none;
}

.selector-busqueda__buscador {
  position: relative;
  margin-bottom: var(--e-2);
}

.selector-busqueda__buscar {
  min-height: var(--tactil-min);
}

.selector-busqueda__resultados {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: var(--z-aviso);
  max-height: var(--alto-resultados);
  margin: var(--e-1) 0 0;
  padding: var(--e-1) 0;
  overflow-y: auto;
  list-style: none;
  border: var(--b-fino) solid var(--c-borde-control);
  border-radius: var(--r-md);
  background-color: var(--c-superficie);
  box-shadow: var(--s-2);
}

.selector-busqueda__resultados[hidden] {
  display: none;
}

.selector-busqueda__opcion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--e-2);
  min-height: var(--tactil-min);
  padding: var(--e-2) var(--e-3);
  cursor: pointer;
}

.selector-busqueda__opcion:hover,
.selector-busqueda__opcion.esta-activa {
  background-color: var(--c-marca-suave);
}

.selector-busqueda__texto {
  overflow-wrap: anywhere;
}

.selector-busqueda__extra,
.selector-busqueda__vacio {
  color: var(--c-texto-suave);
  font-size: var(--t-sm);
}

.selector-busqueda__vacio {
  padding: var(--e-2) var(--e-3);
}

.selector-busqueda__crear .btn {
  padding-left: 0;
}

/* ==========================================================================
 * firma_tactil (OT-5): recuadro de firma con signature_pad
 * ======================================================================== */
.firma-tactil {
  margin-bottom: var(--e-4);
}

.firma-tactil__lienzo {
  position: relative;
  border: var(--b-grueso) dashed var(--c-borde-control);
  border-radius: var(--r-lg);
  background-color: var(--c-superficie);
}

.firma-tactil--con-error .firma-tactil__lienzo {
  border-color: var(--c-error);
}

.firma-tactil__canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: var(--alto-firma);
  touch-action: none;
  cursor: crosshair;
}

/* Línea de referencia «Firma aquí» bajo el trazo */
.firma-tactil__guia {
  position: absolute;
  right: var(--e-4);
  bottom: var(--e-6);
  left: var(--e-4);
  margin: 0;
  padding-top: var(--e-1);
  border-top: var(--b-fino) solid var(--c-borde);
  color: var(--c-texto-suave);
  font-size: var(--t-sm);
  pointer-events: none;
}

.firma-tactil__sin-js {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--e-4);
  text-align: center;
  background-color: var(--c-superficie);
}

.firma-tactil__sin-js[hidden],
.firma-tactil__error[hidden] {
  display: none;
}

.firma-tactil__error {
  display: block;
  margin-top: var(--e-2);
  color: var(--c-error);
}

.firma-tactil__acciones {
  margin-top: var(--e-3);
}

@media (orientation: landscape) and (max-height: 500px) {
  .firma-tactil__canvas {
    height: var(--alto-firma-horizontal);
  }
}

/* ==========================================================================
 * qr_codigo (OT-5): QR sobre blanco con su zona de silencio
 * ======================================================================== */
.qr-codigo {
  margin: 0;
  text-align: center;
}

.qr-codigo__imagen {
  display: block;
  width: 100%;
  max-width: var(--qr-ficha);
  height: auto;
  margin: 0 auto;
  border: var(--b-fino) solid var(--c-borde);
  border-radius: var(--r-md);
  background-color: var(--c-superficie);
}

.qr-codigo__pie {
  margin-top: var(--e-2);
  color: var(--c-texto-suave);
  font-size: var(--t-sm);
}

.qr-codigo--pantalla .qr-codigo__imagen {
  max-width: min(var(--qr-pantalla), 100%);
  border: 0;
}

.qr-codigo--pantalla .qr-codigo__pie {
  color: var(--c-texto);
  font-size: var(--t-xl);
  font-weight: var(--p-negrita);
}

/* ==========================================================================
 * accion_explicada (OT-8): botón con la frase que explica qué hace
 * ========================================================================== */
.accion-explicada {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
}

.accion-explicada__texto {
  margin: 0;
  color: var(--c-texto-suave);
  font-size: var(--t-sm);
}

@media (max-width: 575.98px) {
  .accion-explicada .btn {
    width: 100%;
  }
}

/* ==========================================================================
 * modal_resumen (OT-8): revisar los cambios antes de confirmarlos
 * ========================================================================== */
.modal-resumen__titulo {
  font-size: var(--t-xl);
  font-weight: var(--p-negrita);
  margin: 0;
}

.modal-resumen__texto {
  color: var(--c-texto-suave);
}

.modal-resumen .modal-body > * + * {
  margin-top: var(--e-4);
}