/* ==========================================================================
   ARIAUTO · Armazón y componentes
   Material Design 3 denso. Todo consume tokens.css.
   ========================================================================== */

/* ==========================================================================
   1. ARMAZÓN
   ========================================================================== */

.app {
  display: grid;
  /* minmax(0,...) y no 1fr a secas: ver la nota al pie de este fichero. */
  grid-template-columns: var(--ari-rail-ancho) minmax(0, 1fr);
  grid-template-rows: var(--ari-appbar-alto) 1fr;
  grid-template-areas:
    "rail barra"
    "rail contenido";
  height: 100vh;
  overflow: hidden;
}
.app[data-rail="min"] { grid-template-columns: var(--ari-rail-ancho-min) minmax(0, 1fr); }

/* --- Barra superior -------------------------------------------------------- */
.barra {
  grid-area: barra;
  display: flex;
  align-items: center;
  gap: var(--ari-e3);
  padding: 0 var(--ari-e4);
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
  z-index: var(--ari-z-appbar);
}
.barra__titulo {
  font-size: var(--ari-t-title);
  font-weight: var(--ari-peso-fuerte);
  white-space: nowrap;
}
.barra__ruta {
  font-size: var(--ari-t-label);
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}
.barra__acciones { display: flex; align-items: center; gap: var(--ari-e2); margin-left: auto; }

/* --- Navegación lateral ---------------------------------------------------- */
.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  background: var(--ari-marca);
  color: var(--ari-sobre-marca);
  overflow: hidden auto;
  z-index: var(--ari-z-rail);
}
.rail__marca {
  display: flex;
  align-items: center;
  gap: var(--ari-e3);
  height: var(--ari-appbar-alto);
  padding: 0 var(--ari-e4);
  flex-shrink: 0;
}
.rail__logo { width: 26px; height: 26px; flex-shrink: 0; }
.rail__nombre {
  font-family: var(--ari-fuente-titulo);
  font-size: var(--ari-t-title);
  font-weight: var(--ari-peso-fuerte);
  letter-spacing: .04em;
  white-space: nowrap;
}
.rail__version {
  font-size: var(--ari-t-label-sm);
  opacity: .7;
  white-space: nowrap;
}
.rail__lista { display: flex; flex-direction: column; gap: 2px; padding: var(--ari-e2) var(--ari-e3); }

.rail__item {
  display: flex;
  align-items: center;
  gap: var(--ari-e4);
  min-height: 40px;
  padding: 0 var(--ari-e4);
  border: 0;
  border-radius: var(--ari-r-full);
  background: transparent;
  color: var(--ari-marca-suave);
  font-size: var(--ari-t-body);
  font-weight: var(--ari-peso-medio);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ari-rapido) var(--ari-curva),
              color var(--ari-rapido) var(--ari-curva);
}
.rail__item:hover { background: rgba(255,255,255,.10); color: #fff; }
.rail__item[aria-current="page"] {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.rail__item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.rail__item .icono { flex-shrink: 0; }

.app[data-rail="min"] .rail__nombre,
.app[data-rail="min"] .rail__version,
.app[data-rail="min"] .rail__texto { display: none; }
.app[data-rail="min"] .rail__item { justify-content: center; padding: 0; }
.app[data-rail="min"] .rail__marca { justify-content: center; padding: 0; }

.rail__pie {
  margin-top: auto;
  padding: var(--ari-e3);
  font-size: var(--ari-t-label-sm);
  color: var(--ari-marca-suave);
  border-top: 1px solid rgba(255,255,255,.12);
}
.rail__usuario { display: flex; align-items: center; gap: var(--ari-e3); }
.rail__avatar {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: var(--ari-r-full);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-size: var(--ari-t-label);
  font-weight: var(--ari-peso-fuerte);
}

/* --- Contenido ------------------------------------------------------------- */
.contenido {
  grid-area: contenido;
  overflow: auto;
  padding: var(--ari-e5);
  scroll-behavior: smooth;
}
.vista { max-width: 1600px; margin: 0 auto; }
.vista__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ari-e4);
  margin-bottom: var(--ari-e5);
  flex-wrap: wrap;
}
.vista__titulo { display: flex; flex-direction: column; gap: var(--ari-e1); }
.vista__subtitulo { font-size: var(--ari-t-body-sm); color: var(--md-on-surface-variant); }
.vista__acciones { display: flex; align-items: center; gap: var(--ari-e3); flex-wrap: wrap; }

/* ==========================================================================
   2. TARJETAS
   ========================================================================== */

.tarjeta {
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--ari-r-md);
  overflow: hidden;
}
.tarjeta--elevada { border-color: transparent; box-shadow: var(--md-elev-1); }
.tarjeta__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ari-e3);
  padding: var(--ari-e4) var(--ari-e5);
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
}
.tarjeta__titulo {
  display: flex;
  align-items: center;
  gap: var(--ari-e3);
  font-size: var(--ari-t-title);
  font-weight: var(--ari-peso-fuerte);
}
.tarjeta__cuerpo { padding: var(--ari-e5); }
.tarjeta__cuerpo--plano { padding: 0; }
.tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ari-e3);
  padding: var(--ari-e3) var(--ari-e5);
  border-top: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
}

/* ==========================================================================
   3. BOTONES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ari-e2);
  height: var(--ari-control-alto);
  padding: 0 var(--ari-e5);
  border: 1px solid transparent;
  border-radius: var(--ari-r-full);
  background: transparent;
  color: var(--md-primary);
  font-size: var(--ari-t-body);
  font-weight: var(--ari-peso-medio);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--ari-rapido) var(--ari-curva),
              box-shadow var(--ari-rapido) var(--ari-curva),
              border-color var(--ari-rapido) var(--ari-curva);
}
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn:not(:disabled):hover { background: color-mix(in srgb, currentColor 8%, transparent); }

.btn--relleno {
  background: var(--md-primary);
  color: var(--md-on-primary);
}
.btn--relleno:not(:disabled):hover {
  background: color-mix(in srgb, var(--md-on-primary) 8%, var(--md-primary));
  box-shadow: var(--md-elev-1);
}

.btn--tonal {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.btn--tonal:not(:disabled):hover {
  background: color-mix(in srgb, var(--md-on-primary-container) 8%, var(--md-primary-container));
}

.btn--contorno { border-color: var(--md-outline); color: var(--md-primary); }
.btn--contorno:not(:disabled):hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }

.btn--peligro { background: var(--md-error); color: var(--md-on-error); }
.btn--peligro:not(:disabled):hover {
  background: color-mix(in srgb, var(--md-on-error) 10%, var(--md-error));
}
.btn--peligro-texto { color: var(--md-error); }

.btn--pequeno { height: 28px; padding: 0 var(--ari-e4); font-size: var(--ari-t-body-sm); }
.btn--grande { height: var(--ari-control-alto-lg); padding: 0 var(--ari-e6); }
.btn--bloque { width: 100%; }

.btn-icono {
  display: inline-grid;
  place-items: center;
  width: var(--ari-control-alto);
  height: var(--ari-control-alto);
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ari-r-full);
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background var(--ari-rapido) var(--ari-curva), color var(--ari-rapido) var(--ari-curva);
}
.btn-icono:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); color: var(--md-on-surface); }
.btn-icono:disabled { opacity: .38; cursor: not-allowed; }
.btn-icono--pequeno { width: 28px; height: 28px; }
.btn-icono--activo { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.barra .btn-icono { color: var(--md-on-surface-variant); }

.icono { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; pointer-events: none; }
.icono--sm { width: 16px; height: 16px; }
.icono--lg { width: 24px; height: 24px; }

/* Grupo de acciones con separadores, para las barras de herramientas. */
.grupo-acciones { display: flex; align-items: center; gap: var(--ari-e2); }
.grupo-acciones + .grupo-acciones {
  padding-left: var(--ari-e3);
  margin-left: var(--ari-e1);
  border-left: 1px solid var(--md-outline-variant);
}

/* ==========================================================================
   4. CAMPOS
   ========================================================================== */

.campo { display: flex; flex-direction: column; gap: var(--ari-e2); min-width: 0; }

.campo__etiqueta {
  font-size: var(--ari-t-label);
  font-weight: var(--ari-peso-medio);
  color: var(--md-on-surface-variant);
}
.campo__etiqueta[data-obligatorio]::after {
  content: " *";
  color: var(--md-error);
}

.campo__control {
  width: 100%;
  height: var(--ari-control-alto);
  padding: 0 var(--ari-e4);
  border: 1px solid var(--md-outline);
  border-radius: var(--ari-r-xs);
  background: var(--md-surface-container-lowest);
  color: var(--md-on-surface);
  font-size: var(--ari-t-body-sm);
  transition: border-color var(--ari-rapido) var(--ari-curva),
              box-shadow var(--ari-rapido) var(--ari-curva);
}
.campo__control:hover:not(:disabled):not([readonly]) { border-color: var(--md-on-surface-variant); }
.campo__control:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1px var(--md-primary);
  outline: none;
}
.campo__control:disabled,
.campo__control[readonly] {
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  cursor: default;
}
textarea.campo__control {
  height: auto;
  min-height: 68px;
  padding: var(--ari-e3) var(--ari-e4);
  line-height: var(--ari-interlineado);
  resize: vertical;
}
select.campo__control {
  appearance: none;
  padding-right: var(--ari-e8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.campo--error .campo__control { border-color: var(--md-error); }
.campo--error .campo__control:focus { box-shadow: 0 0 0 1px var(--md-error); }
.campo__ayuda { font-size: var(--ari-t-label-sm); color: var(--md-on-surface-variant); }
.campo__error { font-size: var(--ari-t-label-sm); color: var(--md-error); font-weight: var(--ari-peso-medio); }

/* Casilla y conmutador */
.casilla {
  display: inline-flex;
  align-items: center;
  gap: var(--ari-e3);
  min-height: var(--ari-toque-min);
  cursor: pointer;
  font-size: var(--ari-t-body-sm);
}
.casilla input[type="checkbox"], .casilla input[type="radio"] {
  width: 17px; height: 17px;
  margin: 0;
  accent-color: var(--md-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Buscador de la barra superior */
.buscador {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 200px;
  max-width: 420px;
  flex: 1 1 320px;
}
.buscador .icono {
  position: absolute;
  left: var(--ari-e3);
  color: var(--md-on-surface-variant);
}
.buscador input {
  width: 100%;
  height: var(--ari-control-alto);
  padding: 0 var(--ari-e4) 0 var(--ari-e9);
  border: 1px solid transparent;
  border-radius: var(--ari-r-full);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
  font-size: var(--ari-t-body-sm);
}
.buscador input:focus { border-color: var(--md-primary); outline: none; background: var(--md-surface-container-lowest); }
.buscador kbd { position: absolute; right: var(--ari-e3); }
.buscador input:focus ~ kbd { display: none; }

/* ==========================================================================
   5. TABLAS
   ========================================================================== */

.tabla-envoltorio {
  width: 100%;
  overflow: auto;
  /* El contenido ancho hace scroll DENTRO de su caja: el cuerpo de la página
     nunca se desplaza en horizontal. */
}
/*
   table-layout: fixed es deliberado.

   Con el diseño automático y `min-width: max-content`, la tabla crecía hasta el
   ancho intrinseco de su contenido: 5.200 px para un contenedor de 1.186, de
   modo que solo se veían tres columnas y el resto quedaba fuera de la pantalla.

   Con diseño fijo, las columnas respetan el ancho declarado, las que no lo
   declaran se reparten lo que sobra, y el texto largo se corta con puntos
   suspensivos en vez de ensanchar la tabla. El min-width en píxeles es el
   suelo por debajo del cual sí conviene hacer scroll horizontal (tablet).
*/
.tabla {
  width: 100%;
  min-width: 880px;
  table-layout: fixed;
  font-size: var(--ari-t-body-sm);
}
.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--ari-fila-alto);
  padding: 0 var(--ari-e4);
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
  font-size: var(--ari-t-label);
  font-weight: var(--ari-peso-fuerte);
  color: var(--md-on-surface-variant);
  text-align: left;
  white-space: nowrap;
}
.tabla thead th.numero, .tabla tbody td.numero { text-align: right; }
.tabla th[aria-sort] { cursor: pointer; user-select: none; }
.tabla th[aria-sort]:hover { color: var(--md-on-surface); }
.tabla th[aria-sort="ascending"]::after  { content: " \2191"; color: var(--md-primary); }
.tabla th[aria-sort="descending"]::after { content: " \2193"; color: var(--md-primary); }

.tabla tbody td {
  height: var(--ari-fila-alto);
  padding: 0 var(--ari-e4);
  border-bottom: 1px solid var(--md-outline-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* La columna de acciones no se recorta: sus botones tienen que caber enteros. */
.tabla tbody td:last-child:has(.acciones-fila) { overflow: visible; }
.tabla tbody tr { transition: background var(--ari-rapido) var(--ari-curva); }
.tabla tbody tr:nth-child(even) { background: color-mix(in srgb, var(--md-on-surface) 2%, transparent); }
.tabla tbody tr:hover { background: var(--md-primary-container); }
.tabla tbody tr[aria-selected="true"] { background: var(--md-primary-container); }
.tabla tbody tr.clicable { cursor: pointer; }
.tabla tbody tr:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -2px; }

.tabla .acciones-fila { display: flex; gap: var(--ari-e1); opacity: 0; transition: opacity var(--ari-rapido); }
.tabla tbody tr:hover .acciones-fila,
.tabla tbody tr:focus-within .acciones-fila { opacity: 1; }

.tabla__total {
  font-weight: var(--ari-peso-fuerte);
  background: var(--md-surface-container);
}

/* --- Paginación ------------------------------------------------------------ */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ari-e4);
  padding: var(--ari-e3) var(--ari-e5);
  border-top: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low);
  font-size: var(--ari-t-body-sm);
  flex-wrap: wrap;
}
.paginacion__info { color: var(--md-on-surface-variant); }
.paginacion__controles { display: flex; align-items: center; gap: var(--ari-e2); }
.paginacion__pagina {
  min-width: 32px; height: 28px;
  padding: 0 var(--ari-e3);
  border: 1px solid transparent;
  border-radius: var(--ari-r-xs);
  background: transparent;
  color: var(--md-on-surface);
  cursor: pointer;
  font-size: var(--ari-t-body-sm);
}
.paginacion__pagina:hover { background: var(--md-surface-container-high); }
.paginacion__pagina[aria-current="page"] {
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-weight: var(--ari-peso-fuerte);
}

/* ==========================================================================
   6. PESTAÑAS
   ========================================================================== */

.pestanas {
  display: flex;
  gap: var(--ari-e1);
  border-bottom: 1px solid var(--md-outline-variant);
  overflow-x: auto;
  overflow-y: hidden;
}
.pestana {
  display: flex;
  align-items: center;
  gap: var(--ari-e2);
  height: 40px;
  padding: 0 var(--ari-e5);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--md-on-surface-variant);
  font-size: var(--ari-t-body-sm);
  font-weight: var(--ari-peso-medio);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ari-rapido) var(--ari-curva),
              border-color var(--ari-rapido) var(--ari-curva);
}
.pestana:hover { color: var(--md-on-surface); background: color-mix(in srgb, var(--md-on-surface) 4%, transparent); }
.pestana[aria-selected="true"] { color: var(--md-primary); border-bottom-color: var(--md-primary); }
.pestana:focus-visible { outline-offset: -2px; }

/* ==========================================================================
   7. DISTINTIVOS Y ETIQUETAS
   ========================================================================== */

.distintivo {
  display: inline-flex;
  align-items: center;
  gap: var(--ari-e1);
  min-width: 18px; height: 18px;
  padding: 0 var(--ari-e2);
  border-radius: var(--ari-r-full);
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface-variant);
  font-size: var(--ari-t-label-sm);
  font-weight: var(--ari-peso-fuerte);
  justify-content: center;
}
.distintivo--primario { background: var(--md-primary); color: var(--md-on-primary); }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--ari-e2);
  height: 22px;
  padding: 0 var(--ari-e3);
  border-radius: var(--ari-r-sm);
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface-variant);
  font-size: var(--ari-t-label);
  font-weight: var(--ari-peso-medio);
  white-space: nowrap;
}
.etiqueta--exito   { background: var(--md-exito-container);  color: var(--md-on-exito-container); }
.etiqueta--error   { background: var(--md-error-container);  color: var(--md-on-error-container); }
.etiqueta--aviso   { background: var(--md-aviso-container);  color: var(--md-on-aviso-container); }
.etiqueta--info    { background: var(--md-info-container);   color: var(--md-on-info-container); }
.etiqueta--primaria{ background: var(--md-primary-container);color: var(--md-on-primary-container); }

/* Filtro seleccionable */
.filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--ari-e2);
  height: 30px;
  padding: 0 var(--ari-e4);
  border: 1px solid var(--md-outline);
  border-radius: var(--ari-r-sm);
  background: transparent;
  color: var(--md-on-surface-variant);
  font-size: var(--ari-t-body-sm);
  cursor: pointer;
  transition: background var(--ari-rapido) var(--ari-curva);
}
.filtro:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent); }
.filtro[aria-pressed="true"] {
  background: var(--md-secondary-container);
  border-color: transparent;
  color: var(--md-on-secondary-container);
  font-weight: var(--ari-peso-medio);
}

/* ==========================================================================
   8. INDICADORES DEL CUADRO DE MANDO
   ========================================================================== */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--ari-e4);
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--ari-e2);
  padding: var(--ari-e5);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--ari-r-md);
  background: var(--md-surface-container-lowest);
}
.kpi__etiqueta {
  display: flex;
  align-items: center;
  gap: var(--ari-e2);
  font-size: var(--ari-t-label);
  font-weight: var(--ari-peso-medio);
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kpi__valor {
  font-family: var(--ari-fuente-titulo);
  font-size: var(--ari-t-display);
  font-weight: var(--ari-peso-fuerte);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi__nota { font-size: var(--ari-t-label-sm); color: var(--md-on-surface-variant); }

/* Un indicador de un módulo sin datos recientes se marca. Un cero mudo haría
   creer que hoy no ha habido actividad, cuando lo que pasa es que el módulo
   lleva años sin usarse. */
.kpi--congelado { border-style: dashed; }
.kpi--congelado .kpi__valor { color: var(--md-on-surface-variant); }
.kpi--congelado .kpi__nota { color: var(--md-aviso); font-weight: var(--ari-peso-medio); }

/* ==========================================================================
   9. AVISOS
   ========================================================================== */

.aviso {
  display: flex;
  gap: var(--ari-e4);
  padding: var(--ari-e4) var(--ari-e5);
  border: 1px solid var(--md-outline-variant);
  border-left-width: 4px;
  border-radius: var(--ari-r-sm);
  background: var(--md-surface-container-lowest);
}
.aviso__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ari-e2); }
.aviso__titulo { font-weight: var(--ari-peso-fuerte); font-size: var(--ari-t-body); }
.aviso__detalle { font-size: var(--ari-t-body-sm); color: var(--md-on-surface-variant); }
.aviso--error { border-left-color: var(--md-error); }
.aviso--error .icono { color: var(--md-error); }
.aviso--aviso { border-left-color: var(--md-aviso); }
.aviso--aviso .icono { color: var(--md-aviso); }
.aviso--info  { border-left-color: var(--md-info); }
.aviso--info .icono { color: var(--md-info); }
.aviso--exito { border-left-color: var(--md-exito); }
.aviso--exito .icono { color: var(--md-exito); }

/* ==========================================================================
   10. ESTADOS: cargando, error y vacío
   --------------------------------------------------------------------------
   La versión anterior no tenía ninguno: 14 catch vacíos hacían que un fallo
   de la API dejara la tabla con el texto "Cargando..." para siempre, sin que
   nadie supiera que algo había ido mal.
   ========================================================================== */

.estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ari-e4);
  padding: var(--ari-e10) var(--ari-e5);
  text-align: center;
  color: var(--md-on-surface-variant);
}
.estado__icono { width: 40px; height: 40px; opacity: .5; }
.estado__titulo { font-size: var(--ari-t-title); font-weight: var(--ari-peso-fuerte); color: var(--md-on-surface); }
.estado__texto { font-size: var(--ari-t-body-sm); max-width: 46ch; }
.estado--error .estado__icono { color: var(--md-error); opacity: 1; }
.estado__detalle {
  max-width: 60ch;
  padding: var(--ari-e3) var(--ari-e4);
  border-radius: var(--ari-r-xs);
  background: var(--md-surface-container);
  font-family: var(--ari-fuente-mono);
  font-size: var(--ari-t-label);
  text-align: left;
  word-break: break-word;
}

/* Esqueleto de carga */
.esqueleto {
  border-radius: var(--ari-r-xs);
  background: linear-gradient(90deg,
    var(--md-surface-container) 25%,
    var(--md-surface-container-high) 37%,
    var(--md-surface-container) 63%);
  background-size: 400% 100%;
  animation: esqueleto 1.4s ease infinite;
}
@keyframes esqueleto { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.esqueleto--linea { height: 12px; margin: var(--ari-e2) 0; }
.esqueleto--fila { height: var(--ari-fila-alto); margin-bottom: 2px; }

/* ==========================================================================
   11. DIÁLOGOS
   ========================================================================== */

.velo {
  position: fixed;
  inset: 0;
  z-index: var(--ari-z-dialogo);
  display: grid;
  place-items: center;
  padding: var(--ari-e5);
  background: var(--md-scrim);
  animation: aparecer var(--ari-rapido) var(--ari-curva);
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.dialogo {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(86vh, 900px);
  border-radius: var(--ari-r-lg);
  background: var(--md-surface-container-high);
  box-shadow: var(--md-elev-4);
  animation: subir var(--ari-normal) var(--ari-curva-entrada);
}
@keyframes subir { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.dialogo--ancho { width: min(1000px, 100%); }
.dialogo--estrecho { width: min(460px, 100%); }

.dialogo__cabecera {
  display: flex;
  align-items: center;
  gap: var(--ari-e3);
  padding: var(--ari-e5) var(--ari-e6);
  border-bottom: 1px solid var(--md-outline-variant);
}
.dialogo__titulo { flex: 1; font-size: var(--ari-t-title-lg); font-weight: var(--ari-peso-fuerte); }
.dialogo__cuerpo { flex: 1; overflow: auto; padding: var(--ari-e6); }
.dialogo__pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ari-e3);
  padding: var(--ari-e4) var(--ari-e6);
  border-top: 1px solid var(--md-outline-variant);
}
.dialogo__pie--separado { justify-content: space-between; }

/* ==========================================================================
   12. NOTIFICACIONES
   --------------------------------------------------------------------------
   Sustituyen a los 24 alert() del navegador. Y, sobre todo, una operación que
   falla produce una notificación ROJA: antes salía "guardado correctamente"
   aunque el servidor hubiera devuelto un 500.
   ========================================================================== */

.notificaciones {
  position: fixed;
  left: 50%;
  bottom: var(--ari-e6);
  transform: translateX(-50%);
  z-index: var(--ari-z-aviso);
  display: flex;
  flex-direction: column;
  gap: var(--ari-e3);
  width: min(560px, calc(100vw - 32px));
  pointer-events: none;
}
.notificacion {
  display: flex;
  align-items: center;
  gap: var(--ari-e4);
  padding: var(--ari-e4) var(--ari-e5);
  border-radius: var(--ari-r-sm);
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  box-shadow: var(--md-elev-3);
  font-size: var(--ari-t-body-sm);
  pointer-events: auto;
  animation: subir var(--ari-normal) var(--ari-curva-entrada);
}
.notificacion__texto { flex: 1; min-width: 0; }
.notificacion__accion {
  border: 0;
  background: transparent;
  color: var(--md-p80, #b5c4ff);
  font-weight: var(--ari-peso-fuerte);
  font-size: var(--ari-t-body-sm);
  cursor: pointer;
  white-space: nowrap;
}
.notificacion--error { background: var(--md-error); color: var(--md-on-error); }
.notificacion--error .notificacion__accion { color: var(--md-on-error); text-decoration: underline; }
.notificacion--exito { background: var(--md-exito); color: var(--md-on-exito); }
.notificacion--aviso { background: var(--md-aviso); color: var(--md-on-aviso); }
.notificacion.saliendo { animation: bajar var(--ari-rapido) var(--ari-curva) forwards; }
@keyframes bajar { to { opacity: 0; transform: translateY(8px); } }

/* Cambiar la propia contrasena, en el pie del menu. Ocupa todo el ancho
   cuando el menu esta abierto y se queda en el icono cuando esta colapsado:
   la regla generica de .rail__texto ya lo oculta. */
.rail__password {
  width: 100%;
  justify-content: flex-start;
  margin-top: var(--ari-e3);
  color: var(--ari-sobre-marca);
  opacity: .85;
}
.rail__password:hover { opacity: 1; background: var(--md-hover); }

/* ==========================================================================
   13. ACCESO
   ========================================================================== */

.acceso {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--ari-e5);
  background:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--ari-marca) 22%, transparent), transparent),
    var(--md-surface);
}
.acceso__caja {
  width: min(400px, 100%);
  padding: var(--ari-e8);
  border-radius: var(--ari-r-lg);
  background: var(--md-surface-container-lowest);
  box-shadow: var(--md-elev-3);
}
.acceso__marca {
  display: flex;
  align-items: center;
  gap: var(--ari-e3);
  margin-bottom: var(--ari-e7);
}
.acceso__logo { width: 40px; height: 40px; }
.acceso__nombre { font-family: var(--ari-fuente-titulo); font-size: var(--ari-t-headline); font-weight: var(--ari-peso-fuerte); letter-spacing: .04em; }
.acceso__sub { font-size: var(--ari-t-label); color: var(--md-on-surface-variant); }
.acceso__campos { display: flex; flex-direction: column; gap: var(--ari-e5); }
.acceso__pie { margin-top: var(--ari-e6); font-size: var(--ari-t-label-sm); color: var(--md-on-surface-variant); text-align: center; }

/* ==========================================================================
   14. FICHA DE ALUMNO
   ========================================================================== */

.ficha__cabecera {
  position: sticky;
  top: calc(var(--ari-e5) * -1);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--ari-e5);
  margin: calc(var(--ari-e5) * -1) calc(var(--ari-e5) * -1) var(--ari-e5);
  padding: var(--ari-e5);
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
  flex-wrap: wrap;
}
.ficha__identidad { display: flex; align-items: center; gap: var(--ari-e4); min-width: 0; }
.ficha__inicial {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--ari-r-full);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-family: var(--ari-fuente-titulo);
  font-size: var(--ari-t-title-lg);
  font-weight: var(--ari-peso-fuerte);
}
.ficha__nombre {
  margin: 0;
  font-size: var(--ari-t-title-lg);
  font-weight: var(--ari-peso-fuerte);
  line-height: 1.2;
}
.ficha__meta { display: flex; gap: var(--ari-e4); font-size: var(--ari-t-label); color: var(--md-on-surface-variant); flex-wrap: wrap; }
.ficha__saldo { margin-left: auto; text-align: right; }
.ficha__saldo-valor { font-family: var(--ari-fuente-titulo); font-size: var(--ari-t-title-lg); font-weight: var(--ari-peso-fuerte); font-variant-numeric: tabular-nums; }
.ficha__saldo-valor--debe { color: var(--md-error); }

.seccion-campos { margin-bottom: var(--ari-e7); }
.seccion-campos__titulo {
  display: flex;
  align-items: center;
  gap: var(--ari-e3);
  margin-bottom: var(--ari-e4);
  padding-bottom: var(--ari-e2);
  border-bottom: 1px solid var(--md-outline-variant);
  font-size: var(--ari-t-label);
  font-weight: var(--ari-peso-fuerte);
  color: var(--md-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Barra de cambios sin guardar */
.sin-guardar {
  position: sticky;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--ari-e4);
  margin: var(--ari-e5) calc(var(--ari-e5) * -1) calc(var(--ari-e5) * -1);
  padding: var(--ari-e4) var(--ari-e5);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-top: 1px solid var(--md-outline-variant);
}

/* ==========================================================================
   15. PALETA DE ÓRDENES
   ========================================================================== */

.paleta {
  width: min(620px, 100%);
  max-height: 60vh;
  border-radius: var(--ari-r-md);
  background: var(--md-surface-container-high);
  box-shadow: var(--md-elev-4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.paleta__entrada {
  width: 100%;
  height: 48px;
  padding: 0 var(--ari-e5);
  border: 0;
  border-bottom: 1px solid var(--md-outline-variant);
  background: transparent;
  color: var(--md-on-surface);
  font-size: var(--ari-t-body-lg);
}
.paleta__lista { overflow: auto; padding: var(--ari-e2); }
.paleta__opcion {
  display: flex;
  align-items: center;
  gap: var(--ari-e4);
  width: 100%;
  padding: var(--ari-e3) var(--ari-e4);
  border: 0;
  border-radius: var(--ari-r-xs);
  background: transparent;
  color: var(--md-on-surface);
  font-size: var(--ari-t-body-sm);
  text-align: left;
  cursor: pointer;
}
.paleta__opcion:hover, .paleta__opcion[aria-selected="true"] {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.paleta__grupo { padding: var(--ari-e3) var(--ari-e4) var(--ari-e1); font-size: var(--ari-t-label-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--md-on-surface-variant); }

/* ==========================================================================
   16. AGENDA
   ========================================================================== */

.agenda { display: flex; flex-direction: column; }
.agenda__hora {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--ari-e4);
  padding: var(--ari-e3) var(--ari-e4);
  border-bottom: 1px solid var(--md-outline-variant);
}
.agenda__hora-etiqueta { font-variant-numeric: tabular-nums; font-weight: var(--ari-peso-fuerte); color: var(--md-on-surface-variant); font-size: var(--ari-t-body-sm); }
.agenda__clases { display: flex; flex-direction: column; gap: var(--ari-e2); }
.agenda__clase {
  display: flex;
  align-items: center;
  gap: var(--ari-e3);
  padding: var(--ari-e2) var(--ari-e3);
  border-left: 3px solid var(--md-primary);
  border-radius: var(--ari-r-xs);
  background: var(--md-surface-container);
  font-size: var(--ari-t-body-sm);
}

/* ==========================================================================
   17. ADAPTACIÓN A PANTALLAS PEQUEÑAS
   --------------------------------------------------------------------------
   La versión anterior no tenía ni un solo @media que no fuera de impresión:
   con body{overflow:hidden} y una ventana fija de 98vw × 98vh, en tablet la
   aplicación era literalmente inusable.
   ========================================================================== */

@media (max-width: 1200px) {
  .app { grid-template-columns: var(--ari-rail-ancho-min) minmax(0, 1fr); }
  .rail__nombre, .rail__version, .rail__texto { display: none; }
  .rail__item { justify-content: center; padding: 0; }
  .rail__marca { justify-content: center; padding: 0; }
  .rail__pie .rail__usuario span { display: none; }
}

/* Entre 861 y 1200 px el rail sale colapsado a iconos, y el botón de menú lo
   expande para leer los rótulos. Sin esto el botón no hacía nada en ese rango:
   alternaba entre "min" y "", que ahí se ven igual.

   El rango se acota con min-width a propósito. Por debajo de 860 «abierto»
   significa otra cosa —el rail entra deslizándose desde fuera— y este selector,
   que lleva atributo, le ganaría por especificidad al `.app` de aquel bloque. */
@media (min-width: 861px) and (max-width: 1200px) {
  .app[data-rail="abierto"] { grid-template-columns: var(--ari-rail-ancho) minmax(0, 1fr); }
  .app[data-rail="abierto"] .rail__nombre,
  .app[data-rail="abierto"] .rail__version,
  .app[data-rail="abierto"] .rail__texto { display: block; }
  .app[data-rail="abierto"] .rail__item { justify-content: flex-start; padding: 0 var(--ari-e4); }
  .app[data-rail="abierto"] .rail__marca { justify-content: flex-start; padding: 0 var(--ari-e4); }
  .app[data-rail="abierto"] .rail__pie .rail__usuario span { display: inline; }
}

@media (max-width: 860px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "barra" "contenido";
  }
  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--ari-rail-ancho);
    transform: translateX(-100%);
    transition: transform var(--ari-normal) var(--ari-curva);
    box-shadow: var(--md-elev-3);
  }
  .app[data-rail="abierto"] .rail { transform: none; }
  .app[data-rail="abierto"] .rail__nombre,
  .app[data-rail="abierto"] .rail__version,
  .app[data-rail="abierto"] .rail__texto { display: block; }
  .app[data-rail="abierto"] .rail__item { justify-content: flex-start; padding: 0 var(--ari-e4); }
  .contenido { padding: var(--ari-e4); }
  .buscador { min-width: 0; flex: 1 1 auto; }
  .vista__cabecera { flex-direction: column; align-items: stretch; }
}

@media (max-width: 620px) {
  .barra__ruta { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .dialogo { max-height: 100vh; border-radius: 0; width: 100%; }
  .velo { padding: 0; align-items: stretch; }

  /* En un movil la barra sumaba 400 px de contenido en 360 de ancho, y el que
     se quedaba sin sitio era el buscador: colapsaba a CERO. Se quita lo que
     ahi no aporta.

     El aviso de conexion solo se ensena cuando hay algo que decir, o sea
     cuando la base NO responde: en una pantalla pequena no hace falta leer
     "ariauto_db_test · 1 ms", pero si se ha caido hay que enterarse igual que
     en un ordenador.

     Se oculta por el estado, no por el identificador, y NO basta con ocultar
     el de exito. El chip nace con la clase "etiqueta" a secas y el texto
     "Comprobando...", mientras /api/health no ha contestado. Eso duraba unos
     50 ms y no se veia nunca... hasta que la maquina iba cargada: entonces la
     ventana se ensanchaba, el chip ocupaba 105 px de los 360 de la barra y el
     buscador caia a 54 px. Que es justo el defecto que esto arreglaba. */
  #estado-conexion:not(.etiqueta--error) { display: none; }

  /* Sin teclado fisico, el panel de atajos no sirve de nada. */
  .barra__acciones .btn-icono[aria-label="Atajos de teclado"] { display: none; }
}

/* --------------------------------------------------------------------------
   Por qué la columna del contenido es minmax(0, 1fr) y no 1fr

   Una columna `1fr` es en realidad `minmax(auto, 1fr)`, y ese `auto` crece
   hasta el tamaño mínimo de lo que contiene. La tabla declara
   `min-width: 880px`, así que en una ventana estrecha la columna se hacía más
   ancha que la ventana. Y como `.app` lleva `overflow: hidden`, el sobrante no
   quedaba desplazable: quedaba RECORTADO.

   Medido en un móvil de 360 px: el contenido ocupaba 502 px y 142 px de la
   ficha del alumno eran inalcanzables. `min-width: 0` en `.contenido` no
   arregla nada, porque el problema no es el elemento sino la pista.

   Con minmax(0, 1fr) la columna puede bajar hasta cero y el `overflow: auto`
   que `.contenido` ya tenía hace su trabajo: la tabla se desplaza dentro de su
   propio marco y la página no se desborda.
   -------------------------------------------------------------------------- */