/* app/static/estilo.css — sistema visual base de Bot Menús (Ola 1).
   Catálogo y reglas de uso: docs/auditoria-visual/componentes.md.
   Capas en orden de prioridad creciente: una regla de "componentes" nunca pierde contra "base",
   y el !important de [hidden] en "reset" le gana a cualquier display de las capas siguientes.
   Regla del equipo: nunca poner display sobre selectores de elemento (label, div); solo sobre clases. */
@layer reset, tokens, base, layout, componentes, pantallas, utilidades;

/* ───────────────────────────── reset ───────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, pre { margin: 0; }
  fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  legend { padding: 0; }
  img, svg { display: block; max-width: 100%; }
  input, select, textarea, button { font: inherit; color: inherit; letter-spacing: inherit; }
  table { border-collapse: collapse; }
}

/* ───────────────────────────── tokens ───────────────────────────── */
@layer tokens {
  :root {
    /* Superficies */
    --fondo: #f6f8fa;          /* fondo de la app, cabeceras de tabla, hover */
    --superficie: #ffffff;     /* barra, tarjetas, tablas, campos */
    --borde: #d0d7de;          /* separadores DECORATIVOS (1,45:1): nunca como contorno de un control */
    --borde-campo: #6e7781;    /* contorno de inputs, selects, casillas, botones: 4,55:1 sobre blanco */
    --fondo-fila-hover: #fafbfc; /* fila de tabla al pasar el mouse */
    --fondo-inactivo: #fbfbfc;   /* fila de tabla inactiva */

    /* Texto */
    --texto: #1f2328;          /* 15,8:1 sobre blanco */
    --texto-2: #656d76;        /* secundario, ayudas, inactivo: 5,25:1 sobre blanco, 4,9:1 sobre --fondo */

    /* Acento (acción principal, selección, pantalla activa) */
    --acento: #0969da;         /* 5,19:1 sobre blanco, 4,88:1 sobre --fondo; blanco sobre él 5,19:1 */
    --acento-hover: #0757b8;
    --acento-activo: #064a9e;
    --acento-tenue: #ddf4ff;   /* fondo informativo; --acento sobre él 4,6:1 */
    --acento-borde: #54aeff;

    /* Semánticos (texto / fondo tenue / borde) */
    --peligro: #cf222e;  --peligro-hover: #a40e26; --peligro-tenue: #ffebe9; --peligro-borde: #ff8182; --peligro-activo: #ffcecb;
    --ok: #1a7f37;       --ok-tenue: #dafbe1;      --ok-borde: #4ac26b;
    --aviso: #7d4e00;    --aviso-tenue: #fff8c5;   --aviso-borde: #d4a72c;
    --neutro: #57606a;   --neutro-tenue: #eaeef2;  /* insignia inactiva: 5,5:1 */

    /* Tipografía (escala fija ~1.2, sin fuentes externas) */
    --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --t-mini: 0.8125rem;   /* 13px: código y JSON */
    --t-chico: 0.875rem;   /* 14px: ayudas, rótulos de tabla, insignias */
    --t-nav: 0.9375rem;    /* 15px: pestañas */
    --t-base: 1rem;        /* 16px: cuerpo e inputs (evita zoom en iOS) */
    --t-h3: 1rem;
    --t-h2: 1.125rem;
    --t-h1: 1.5rem;
    --interlineado: 1.5;

    /* Espaciado (base 4px) */
    --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; --esp-7: 48px;
    --sangria-casilla: 28px; /* casilla de 20px + --esp-2: alinea con el texto de una .casilla */

    /* Forma y profundidad */
    --radio-0: 4px;          /* código en línea */
    --radio-1: 6px;          /* campos, botones */
    --radio-2: 8px;          /* tarjetas, tablas, avisos */
    --radio-pildora: 999px;  /* insignias, chips */
    --sombra-1: 0 1px 2px rgba(31, 35, 40, .06);
    --sombra-2: 0 3px 8px rgba(31, 35, 40, .10);
    --sombra-barra: 0 -2px 8px rgba(31, 35, 40, .08); /* barra fija al pie (proyecta hacia arriba) */

    /* Medidas */
    --ancho-contenido: 1100px;
    --ancho-form: 720px;
    --ancho-texto: 70ch;
    --alto-control: 40px;
    --alto-control-chico: 32px;
    --transicion: 120ms ease-out;
  }
  /* Pantallas táctiles: objetivos más grandes (WCAG 2.5.8 pide 24px; apuntamos a 44px). */
  @media (pointer: coarse) {
    :root { --alto-control: 44px; --alto-control-chico: 40px; }
  }
  @media (prefers-reduced-motion: reduce) {
    :root { --transicion: 0ms; }
  }
}

/* ───────────────────────────── base ───────────────────────────── */
@layer base {
  html { accent-color: var(--acento); -webkit-text-size-adjust: 100%; }
  body {
    font: var(--t-base)/var(--interlineado) var(--fuente);
    color: var(--texto); background: var(--fondo);
    min-height: 100dvh; caret-color: var(--acento);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  ::selection { background: var(--acento-tenue); color: var(--texto); }

  h1, h2, h3 { line-height: 1.25; font-weight: 600; text-wrap: balance; }
  h1 { font-size: var(--t-h1); margin-bottom: var(--esp-4); }
  h2 { font-size: var(--t-h2); margin: var(--esp-6) 0 var(--esp-3); }
  h3 { font-size: var(--t-h3); margin: var(--esp-5) 0 var(--esp-2); }
  p { max-width: var(--ancho-texto); text-wrap: pretty; }
  p + p, p + ul, ul + p { margin-top: var(--esp-3); }
  h1 + p, h1 + .flash, h2 + p { margin-top: 0; }
  main > p, main > ul, main > ol, main > table, main > form, main > div, main > fieldset { margin-bottom: var(--esp-4); }
  small { font-size: var(--t-chico); }
  strong, b { font-weight: 600; }
  code, kbd, samp, pre { font-family: var(--mono); font-size: var(--t-mini); }

  a { color: var(--acento); text-underline-offset: 2px; text-decoration-thickness: 1px; }
  a:hover { color: var(--acento-hover); text-decoration-thickness: 2px; }

  :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
  :focus:not(:focus-visible) { outline: none; }

  /* Campos de texto: estilo global, ancho completo solo dentro de .campo */
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]), select, textarea {
    min-height: var(--alto-control); padding: var(--esp-2) var(--esp-3);
    font-size: var(--t-base); font-weight: 400; line-height: 1.4;
    color: var(--texto); background: var(--superficie);
    border: 1px solid var(--borde-campo); border-radius: var(--radio-1);
    transition: border-color var(--transicion), box-shadow var(--transicion);
  }
  select { padding-right: var(--esp-6); cursor: pointer; }
  textarea { min-height: 7.5rem; resize: vertical; }
  input:not([type="checkbox"], [type="radio"]):focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--acento);
  }
  input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--peligro); }
  input[readonly], textarea[readonly] { background: var(--fondo); color: var(--texto-2); border-style: dashed; cursor: default; }
  input:disabled, select:disabled, textarea:disabled { background: var(--fondo); color: var(--texto-2); cursor: not-allowed; }
  ::placeholder { color: var(--texto-2); opacity: 1; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 0; flex: none; cursor: pointer; }

  /* Grupo de campos */
  fieldset { border: 1px solid var(--borde); border-radius: var(--radio-2); padding: var(--esp-3) var(--esp-4) var(--esp-4); background: var(--superficie); }
  legend { padding: 0 var(--esp-1); font-size: var(--t-chico); font-weight: 600; color: var(--texto); }

  /* Tablas: estilo base (el contenedor y el modo tarjeta están en componentes) */
  table { width: 100%; font-size: var(--t-base); background: var(--superficie); }
  th, td { padding: var(--esp-2) var(--esp-3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--borde); }
  th { font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); background: var(--fondo); white-space: nowrap; }
  tbody tr:last-child > * { border-bottom: 0; }
  tr.inactivo > td { color: var(--texto-2); }

  pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 12rem; overflow: auto; line-height: 1.45; }
  hr { border: 0; border-top: 1px solid var(--borde); margin: var(--esp-5) 0; }
}

/* ───────────────────────────── layout ───────────────────────────── */
@layer layout {
  main { max-width: var(--ancho-contenido); margin: 0 auto; padding: var(--esp-5) var(--esp-4) var(--esp-7); }
  main:focus { outline: none; }
  .contenedor { max-width: var(--ancho-contenido); margin-inline: auto; padding-inline: var(--esp-4); }

  /* Columna de bloques con separación uniforme. .formulario es la pila de un form. */
  .pila, .formulario { display: flex; flex-direction: column; gap: var(--pila-gap, var(--esp-4)); }
  .pila--apretada { --pila-gap: var(--esp-2); }
  .formulario { max-width: var(--ancho-form); }
  .formulario > button, .formulario > .boton { align-self: flex-start; }
  .formulario + .formulario { margin-top: var(--esp-5); }

  .fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
  .rejilla { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(var(--rejilla-min, 240px), 1fr)); }
  .dos-columnas { display: grid; gap: var(--esp-4); }
  .dividido { display: grid; gap: var(--esp-5); }
  @media (min-width: 768px) { .dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  @media (min-width: 1024px) { .dividido { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; } }
}

/* ───────────────────────────── componentes ───────────────────────────── */
@layer componentes {

  /* ── Saltar al contenido ── */
  .saltar {
    position: absolute; left: var(--esp-4); top: -100px; z-index: 100;
    padding: var(--esp-2) var(--esp-4); background: var(--superficie); color: var(--acento);
    border: 2px solid var(--acento); border-radius: var(--radio-1); font-weight: 600;
  }
  .saltar:focus { top: var(--esp-2); }

  /* ── Barra general (nivel 1) ── */
  .cabecera { background: var(--superficie); border-bottom: 1px solid var(--borde); }
  .barra {
    max-width: var(--ancho-contenido); margin: 0 auto; padding: var(--esp-1) var(--esp-4);
    display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--esp-4); row-gap: 0; min-height: 52px;
  }
  .barra__marca { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--texto); text-decoration: none; white-space: nowrap; }
  .barra__marca:hover { color: var(--texto); text-decoration: underline; }
  .barra__bot { display: inline-flex; align-items: center; gap: var(--esp-2); min-width: 0; color: var(--texto-2); font-size: var(--t-chico); }
  .barra__bot::before { content: ""; width: 1px; height: 20px; background: var(--borde); margin-right: var(--esp-2); }
  .barra__bot strong { color: var(--texto); font-size: var(--t-base); overflow-wrap: anywhere; }
  .barra__cambiar { font-size: var(--t-chico); }
  .barra__general { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--esp-4); }
  .barra__grupo { display: flex; align-items: center; gap: var(--esp-1); list-style: none; padding: 0; margin: 0; }
  .barra__rotulo { font-size: var(--t-chico); color: var(--texto-2); margin-right: var(--esp-1); }
  .barra__general a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--esp-2);
    color: var(--texto); text-decoration: none; font-size: var(--t-nav); border-radius: var(--radio-1);
  }
  .barra__general a:hover { background: var(--fondo); color: var(--texto); }
  .barra__general a[aria-current="page"] { color: var(--acento); font-weight: 600; box-shadow: inset 0 -2px 0 var(--acento); border-radius: 0; }
  .barra__cuenta { display: flex; align-items: center; gap: var(--esp-2); margin: 0; }
  .barra__usuario { font-size: var(--t-chico); color: var(--texto-2); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── Pestañas del bot (nivel 2) ── */
  .pestanas { border-top: 1px solid var(--borde); }
  .pestanas__lista {
    position: relative; max-width: var(--ancho-contenido); margin: 0 auto; padding: 0 var(--esp-4);
    display: flex; align-items: stretch; gap: var(--esp-4);
    overflow-x: auto; overflow-y: hidden; /* sin hidden, el subrayado (-1px) hace aparecer una barra vertical en Windows */
    scrollbar-width: thin; scrollbar-color: var(--borde-campo) transparent; overscroll-behavior-x: contain;
  }
  /* Si hay pestañas fuera de la vista, el borde de ese lado se desvanece (navegacion.js pone data-mas="izq der"). */
  .pestanas__lista[data-mas] {
    --desvanece-izq: 0px; --desvanece-der: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--desvanece-izq), #000 calc(100% - var(--desvanece-der)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--desvanece-izq), #000 calc(100% - var(--desvanece-der)), transparent);
  }
  .pestanas__lista[data-mas~="izq"] { --desvanece-izq: var(--esp-7); }
  .pestanas__lista[data-mas~="der"] { --desvanece-der: var(--esp-7); }
  .pestanas__grupo { display: flex; align-items: stretch; gap: var(--esp-1); flex: none; }
  .pestanas__grupo + .pestanas__grupo { border-left: 1px solid var(--borde); padding-left: var(--esp-4); }
  .pestanas__grupo--fin { margin-left: auto; }
  .pestanas__titulo { align-self: center; font-size: var(--t-chico); color: var(--texto-2); margin-right: var(--esp-1); white-space: nowrap; }
  .pestanas ul { display: flex; align-items: stretch; gap: var(--esp-1); list-style: none; margin: 0; padding: 0; }
  .pestanas a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--esp-2);
    color: var(--texto); text-decoration: none; font-size: var(--t-nav); white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: border-color var(--transicion), color var(--transicion);
  }
  .pestanas a:hover { color: var(--acento); border-bottom-color: var(--borde-campo); }
  .pestanas a[aria-current="page"] { color: var(--acento); font-weight: 600; border-bottom-color: var(--acento); }
  .pestanas a:focus-visible { outline-offset: -2px; }

  @media (max-width: 639.98px) {
    .barra { column-gap: var(--esp-3); padding-inline: var(--esp-3); }
    .barra__cambiar, .barra__usuario, .barra__rotulo { display: none; }
    .barra__general { column-gap: var(--esp-2); }
    .pestanas__lista { padding-inline: var(--esp-3); gap: var(--esp-3); }
    .pestanas__grupo + .pestanas__grupo { padding-left: var(--esp-3); }
    .pestanas__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .pestanas__grupo--fin { margin-left: 0; }
  }

  /* ── Encabezado de página: título + acción principal ── */
  .encabezado-pagina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-4); }
  .encabezado-pagina h1 { margin: 0; }
  /* Siempre en su propia fila, debajo del título: sin el max-width de <p> (70ch), que le ganaba al flex-basis y la dejaba
     al lado del h1. El ancho de lectura se limita con padding. */
  .encabezado-pagina__desc { flex-basis: 100%; max-width: none; padding-inline-end: max(0px, calc(100% - var(--ancho-texto))); color: var(--texto-2); margin: 0; }

  /* ── Botones ── */
  :where(button, .boton) {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
    min-height: var(--alto-control); padding: 0 var(--esp-4);
    font: inherit; font-size: var(--t-base); font-weight: 500; line-height: 1.2; text-align: center; white-space: nowrap;
    color: var(--texto); background: var(--superficie);
    border: 1px solid var(--borde-campo); border-radius: var(--radio-1);
    text-decoration: none; cursor: pointer; user-select: none;
    transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
  }
  :where(button, .boton):hover { background: var(--fondo); color: var(--texto); text-decoration: none; }
  :where(button, .boton):active { background: var(--neutro-tenue); }
  .boton--secundario { color: var(--texto); background: var(--superficie); border-color: var(--borde-campo); }
  .boton--primario { color: #fff; background: var(--acento); border-color: var(--acento); }
  .boton--primario:hover { color: #fff; background: var(--acento-hover); border-color: var(--acento-hover); }
  .boton--primario:active { background: var(--acento-activo); border-color: var(--acento-activo); }
  .boton--peligro { color: var(--peligro); background: var(--superficie); border-color: var(--peligro); }
  .boton--peligro:hover { color: var(--peligro-hover); background: var(--peligro-tenue); border-color: var(--peligro-hover); }
  .boton--peligro:active { background: var(--peligro-activo); }
  .boton--chico { min-height: var(--alto-control-chico); padding: 0 var(--esp-3); font-size: var(--t-chico); }
  .boton--ancho { width: 100%; }
  :where(button, .boton):disabled, .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
  :where(button, .boton):focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

  /* Fila de acciones (Guardar + Cancelar, acciones de una fila de tabla) */
  .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
  .acciones--fin { justify-content: flex-end; }
  .enlinea { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin: 0; }
  td.acciones-celda .enlinea { justify-content: flex-end; }
  td.acciones-celda .casilla { white-space: normal; width: 30ch; max-width: 100%; text-align: left; font-size: var(--t-chico); }
  .formulario > .acciones { padding-top: var(--esp-1); }

  /* ── Campo: rótulo + control + ayuda ── */
  .campo { display: flex; flex-direction: column; gap: var(--esp-1); font-size: var(--t-chico); font-weight: 600; color: var(--texto); }
  .campo > input, .campo > select, .campo > textarea { width: 100%; }
  .campo__rotulo { font-size: var(--t-chico); font-weight: 600; }
  .ayuda-campo { display: block; font-size: var(--t-chico); font-weight: 400; color: var(--texto-2); max-width: var(--ancho-texto); }
  .campo .ayuda-campo { margin-top: calc(var(--esp-1) * -0.5); }
  .casilla + .ayuda-campo { margin-top: calc(var(--esp-3) * -1); padding-left: var(--sangria-casilla); }
  .error-campo { display: block; font-size: var(--t-chico); font-weight: 400; color: var(--peligro); }
  .requerido { color: var(--peligro); font-weight: 400; }
  /* "¿Qué es esto?": link discreto a la Ayuda al final de una .ayuda-campo */
  .que-es { font-size: var(--t-chico); font-weight: 400; }

  /* ── Casilla: checkbox/radio en línea con su texto ── */
  .casilla {
    display: inline-grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--esp-2); align-items: start;
    align-self: flex-start; justify-self: start; max-width: 100%;
    min-height: 24px; padding: 2px 0;
    font-size: var(--t-base); font-weight: 400; line-height: var(--interlineado); color: var(--texto); cursor: pointer;
  }
  .casilla > input { margin-top: calc((1em * var(--interlineado) - 20px) / 2); }
  .casilla:has(> input:disabled) { color: var(--texto-2); cursor: not-allowed; }
  @media (pointer: coarse) { .casilla { min-height: 44px; padding: 10px 0; } }
  .grupo-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--esp-1) var(--esp-4); }
  .rejilla-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--esp-3) var(--esp-4); }

  /* ── Tablas ── */
  .tabla-envoltorio {
    overflow-x: auto; max-width: 100%;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-2); box-shadow: var(--sombra-1);
    scrollbar-width: thin; scrollbar-color: var(--borde-campo) transparent;
  }
  .tabla-envoltorio:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
  .tabla-envoltorio > table { border-radius: inherit; }
  .tabla-envoltorio + h2 { margin-top: var(--esp-6); }
  tbody tr:hover > td { background: var(--fondo-fila-hover); }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
  td.acciones-celda { text-align: right; width: 1%; white-space: nowrap; }
  td.acciones-celda .acciones { justify-content: flex-end; flex-wrap: nowrap; }
  tr.inactivo > td { background: var(--fondo-inactivo); }

  @media (max-width: 639.98px) {
    .tabla-envoltorio:has(> .tabla--apilable) { overflow: visible; background: none; border: 0; box-shadow: none; border-radius: 0; }
    .tabla--apilable, .tabla--apilable tbody, .tabla--apilable tr, .tabla--apilable td { display: block; }
    .tabla--apilable { background: none; }
    .tabla--apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .tabla--apilable tr {
      background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-2);
      box-shadow: var(--sombra-1); padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-3);
    }
    .tabla--apilable tr.inactivo { background: var(--fondo); }
    .tabla--apilable tr:hover > td, .tabla--apilable tr.inactivo > td { background: none; }
    .tabla--apilable td {
      display: grid; grid-template-columns: minmax(6.5em, 32%) minmax(0, 1fr); gap: var(--esp-3); justify-items: start;
      padding: var(--esp-1) 0; border: 0; text-align: left; overflow-wrap: anywhere;
    }
    .tabla--apilable td::before { content: attr(data-etiqueta); font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); padding-top: 1px; }
    .tabla--apilable td:not([data-etiqueta]) { display: block; }
    .tabla--apilable td:not([data-etiqueta])::before { content: none; }
    .tabla--apilable td.num { text-align: left; }
    .tabla--apilable td.acciones-celda { width: auto; white-space: normal; padding-top: var(--esp-3); margin-top: var(--esp-2); border-top: 1px solid var(--borde); }
    .tabla--apilable td.acciones-celda .acciones { justify-content: flex-start; flex-wrap: wrap; }
  }

  /* ── Estado (insignia con texto, no solo color) ── */
  .estado {
    display: inline-flex; align-items: center; gap: 6px; padding: 1px var(--esp-2);
    font-size: var(--t-chico); font-weight: 500; line-height: 1.5; white-space: nowrap;
    border: 1px solid transparent; border-radius: var(--radio-pildora);
  }
  .estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
  .estado--activo { color: var(--ok); background: var(--ok-tenue); }
  .estado--inactivo { color: var(--neutro); background: var(--neutro-tenue); }
  .estado--conectada { color: var(--acento); background: var(--acento-tenue); }
  .estado--aviso { color: var(--aviso); background: var(--aviso-tenue); }
  .estado--info { color: var(--acento-activo); background: var(--neutro-tenue); }   /* dato neutro (ej. "Cambio" en Auditoría) */

  /* ── Avisos (flash, errores, notas) ── */
  .flash {
    display: flex; align-items: flex-start; gap: var(--esp-2);
    max-width: var(--ancho-form); margin: 0 0 var(--esp-4); padding: var(--esp-3) var(--esp-4);
    border: 1px solid var(--borde); border-radius: var(--radio-2); background: var(--superficie); color: var(--texto);
  }
  .flash::before {
    content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; background: currentColor;
    -webkit-mask: var(--icono, none) center / contain no-repeat; mask: var(--icono, none) center / contain no-repeat;
  }
  .flash.ok { color: var(--ok); background: var(--ok-tenue); border-color: var(--ok-borde);
    --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm4.2 6.3-5 5a.8.8 0 0 1-1.1 0l-2.3-2.3a.8.8 0 1 1 1.1-1.1l1.7 1.7 4.5-4.4a.8.8 0 0 1 1.1 1.1Z'/%3E%3C/svg%3E"); }
  .flash.error { color: var(--peligro-hover); background: var(--peligro-tenue); border-color: var(--peligro-borde);
    --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 4a.9.9 0 0 1 .9.9v4.2a.9.9 0 1 1-1.8 0V6.4a.9.9 0 0 1 .9-.9Zm0 9.3a1.1 1.1 0 1 1 0-2.2 1.1 1.1 0 0 1 0 2.2Z'/%3E%3C/svg%3E"); }
  .flash.aviso { color: var(--aviso); background: var(--aviso-tenue); border-color: var(--aviso-borde);
    --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.6 2.4a1.6 1.6 0 0 1 2.8 0l7 12.4a1.6 1.6 0 0 1-1.4 2.4H3a1.6 1.6 0 0 1-1.4-2.4ZM10 6.6a.9.9 0 0 0-.9.9v3.6a.9.9 0 1 0 1.8 0V7.5a.9.9 0 0 0-.9-.9Zm0 8.4a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2Z'/%3E%3C/svg%3E"); }
  .flash.info { color: var(--acento-activo); background: var(--acento-tenue); border-color: var(--acento-borde);
    --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 3.7a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Zm.9 9.1a.9.9 0 1 1-1.8 0V9.6a.9.9 0 1 1 1.8 0Z'/%3E%3C/svg%3E"); }
  .flash > :first-child:not(:only-child) { margin-top: 0; }
  .flash ul { margin: var(--esp-1) 0 0; padding-left: var(--esp-5); }
  .flash a { color: inherit; font-weight: 600; }
  .flash:focus { outline: 2px solid var(--acento); outline-offset: 2px; }
  p.flash + p.flash { margin-top: calc(var(--esp-2) - var(--esp-4)); }

  /* ── Tarjeta y estado vacío ── */
  .tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-2); padding: var(--esp-4); box-shadow: var(--sombra-1); }
  .tarjeta > :first-child { margin-top: 0; }
  .tarjeta + .tarjeta { margin-top: var(--esp-4); }
  /* En grillas y pilas la separación la da el gap: sin margen extra. */
  :is(.pila, .formulario, .fila, .rejilla, .dos-columnas, .dividido) > .tarjeta + .tarjeta { margin-top: 0; }
  a.tarjeta { display: block; color: inherit; text-decoration: none; transition: border-color var(--transicion), box-shadow var(--transicion); }
  a.tarjeta:hover { border-color: var(--acento); box-shadow: var(--sombra-2); color: inherit; }
  .vacio { padding: var(--esp-5); text-align: center; color: var(--texto-2); background: var(--superficie); border: 1px dashed var(--borde-campo); border-radius: var(--radio-2); }
  .vacio p { margin-inline: auto; }
  .vacio .acciones { justify-content: center; margin-top: var(--esp-3); }

  /* ── Datos clave (lista de definición en fila) ── */
  .datos { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-6); }
  .datos dt { font-size: var(--t-chico); color: var(--texto-2); }
  .datos dd { font-weight: 600; }

  /* ── Burbuja de chat: cómo le llega un texto al cliente (Mensajes, Árbol, Simulador, form de botón) ── */
  .burbuja {
    width: fit-content; max-width: min(100%, 60ch); min-height: 2.5rem;
    padding: var(--esp-2) var(--esp-3); background: var(--fondo); color: var(--texto);
    border: 1px solid var(--borde); border-radius: var(--radio-2) var(--radio-2) var(--radio-2) var(--esp-1);
    font-size: var(--t-base); font-weight: 400; line-height: var(--interlineado); overflow-wrap: anywhere;
  }
  .burbuja:empty::before { content: "Acá vas a ver cómo le llega el texto al cliente."; color: var(--texto-2); font-size: var(--t-chico); }

  /* ── Chip: píldora con el texto de un botón del bot ──
     .chip solo nombra (no es clicable: fondo neutro, sin borde de acento).
     .chip--accion se ve como la opción que toca el cliente (simulador, ejemplo del menú corto). */
  .chip {
    display: inline-flex; align-items: center; min-height: 28px; padding: 2px var(--esp-3);
    font-size: var(--t-chico); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere;
    color: var(--texto); background: var(--neutro-tenue); border: 1px solid transparent; border-radius: var(--radio-pildora);
  }
  .chip--accion { font-weight: 600; color: var(--acento); background: var(--superficie); border-color: var(--acento); }

  /* ── Marca: atributo normal de un menú o botón (Menú de inicio, menú corto). Para algo que anda mal, .estado--aviso. ── */
  .marca {
    display: inline-flex; align-items: center; padding: 0 var(--esp-2);
    font-size: var(--t-chico); font-weight: 400; line-height: 1.5;
    color: var(--acento-activo); background: var(--acento-tenue); border: 1px solid transparent; border-radius: var(--radio-1);
  }

  /* ── Barra fija al pie (Guardar de un form largo) ── */
  .barra-fija {
    position: sticky; bottom: 0; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4);
    margin-top: var(--esp-2); padding: var(--esp-3) var(--esp-4) calc(var(--esp-3) + env(safe-area-inset-bottom, 0px));
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-2); box-shadow: var(--sombra-barra);
  }
  /* Que el campo enfocado nunca quede debajo de la barra (WCAG 2.4.11). */
  html:has(.barra-fija) { scroll-padding-bottom: 6rem; }
  @media (max-width: 639.98px) {
    .barra-fija { margin-inline: calc(var(--esp-4) * -1); border-radius: 0; border-inline: 0; }
  }
}

/* ───────────────────────────── pantallas ─────────────────────────────
   Cada pantalla trae su hoja (pagina-*.css) en la capa "pantallas". La Ayuda está entera en pagina-ayuda.css. */

/* ───────────────────────────── utilidades ───────────────────────────── */
@layer utilidades {
  .solo-lectores { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .texto-suave { color: var(--texto-2); }
  .texto-chico { font-size: var(--t-chico); }
  .mt-0 { margin-top: 0 !important; }
  .sin-salto { white-space: nowrap; }
}

/* Colores forzados (alto contraste de Windows): que se vean bordes de avisos, burbujas e insignias. */
@media (forced-colors: active) {
  .flash, .estado, .tarjeta, .burbuja, .chip, .marca, .barra-fija { border: 1px solid CanvasText; }
  .flash::before, .estado::before { background: CanvasText; }
  .pestanas a[aria-current="page"], .barra__general a[aria-current="page"] { border-bottom-color: Highlight; text-decoration: underline; }
}