/* ============================================================
   AUF - Componentes base (v0.2.0)
   ------------------------------------------------------------
   Cargar DESPUÉS de tokens-core.css, tokens-layout.css y el
   tokens-override.css del proyecto:

     tokens-core.css → tokens-layout.css → tokens-override.css
       → componentes-base.css → estilos propios del proyecto

   Tres reglas que este archivo cumple y que conviene mantener
   si se lo modifica (las explica design-system/componentes.md):

   1. Solo variables --color-*, --font-*, --spacing-*, etc.
      Ni un hex, ni una --auf-* directa. Es lo que permite un modo
      oscuro futuro sin tocar este archivo.
   2. Todo con prefijo .auf- y sin selectores de elemento sueltos
      (nada de `table {}` ni `button {}`). Este archivo se carga al
      lado del CSS existente de cada app; un `table {}` global acá
      le cambiaría todas las tablas a una app que todavía no migró.
   3. Ningún overflow:hidden en tablas. Rompe position:sticky en
      las cabeceras sin dar error (ya pasó en Dossier).
   ============================================================ */


/* ---------- Tipografía ---------- */

.auf-app {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-texto);
  background: var(--color-fondo-app);
}

.auf-titulo-1,
.auf-titulo-2,
.auf-titulo-3 {
  font-family: var(--font-family-display);
  text-transform: var(--font-display-transform);
  letter-spacing: var(--font-display-tracking);
  color: var(--color-primario);
  line-height: 1.2;
  margin: 0 0 var(--spacing-sm);
}
.auf-titulo-1 { font-size: var(--font-size-xl); font-weight: var(--font-titulo-weight); }
.auf-titulo-2 { font-size: var(--font-size-lg); font-weight: var(--font-titulo-weight); }
/* El 3 va en el peso display y no en Light: a 16px, Open Sans Light
   sobre fondo claro se pierde. El manual pide Light para TITULARES,
   y un h3 de interfaz ya es un subtítulo (Bold, según el manual). */
.auf-titulo-3 { font-size: var(--font-size-base); font-weight: var(--font-display-weight); }

/* Etiqueta chica sobre un dato o una sección ("MINUTOS", "FILTROS"). */
.auf-etiqueta {
  font-family: var(--font-family-display);
  font-weight: var(--font-display-weight);
  text-transform: var(--font-display-transform);
  letter-spacing: var(--font-display-tracking);
  font-size: var(--font-size-xs);
  color: var(--color-texto-secundario);
}

.auf-texto-secundario { color: var(--color-texto-secundario); }

/* Cifras que se comparan en columna: todos los dígitos del mismo
   ancho, así 111 y 888 quedan alineados. */
.auf-num { font-variant-numeric: tabular-nums; text-align: right; }


/* ---------- Foco (compartido por todos los controles) ----------
   :focus-visible y no :focus: el anillo aparece al navegar con
   teclado y no al hacer clic con el mouse, que es lo que llevaba a
   la gente a poner outline:none y dejar la app inusable sin mouse. */
.auf-btn:focus-visible,
.auf-control:focus-visible,
.auf-check:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 2px;
}


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

.auf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--radius-base);
  font-family: var(--font-family-display);
  font-weight: var(--font-display-weight);
  text-transform: var(--font-display-transform);
  letter-spacing: var(--font-display-tracking);
  font-size: var(--font-size-sm);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: var(--color-superficie);
  color: var(--color-texto);
  border-color: var(--color-borde-control);
}
.auf-btn:hover { background: var(--color-superficie-alt); }

/* Primario: UNO por pantalla o por grupo de acciones. Es "la" acción. */
.auf-btn--primario {
  background: var(--color-primario);
  border-color: var(--color-primario);
  color: var(--color-sobre-primario);
}
.auf-btn--primario:hover {
  background: var(--color-primario-hover);
  border-color: var(--color-primario-hover);
}

/* Acento: Cielo con texto Historia, NUNCA con texto blanco (2,32:1). */
.auf-btn--acento {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: var(--color-sobre-acento);
}
.auf-btn--acento:hover { filter: brightness(0.94); background: var(--color-acento); }

/* Destacado: Sol con texto Historia (5,00:1). Para llamar la atención
   sobre algo excepcional, no como segundo primario. */
.auf-btn--destacado {
  background: var(--color-advertencia);
  border-color: var(--color-advertencia);
  color: var(--color-sobre-advertencia);
}
.auf-btn--destacado:hover { filter: brightness(0.94); background: var(--color-advertencia); }

/* Peligro: contorno, no relleno. Un botón rojo lleno al lado de
   "Guardar" compite por atención con la acción principal. */
.auf-btn--peligro {
  background: var(--color-superficie);
  border-color: var(--color-error);
  color: var(--color-error-texto);
}
.auf-btn--peligro:hover { background: var(--color-error-fondo); }

/* Fantasma: acciones terciarias dentro de tablas y barras. */
.auf-btn--fantasma {
  background: transparent;
  border-color: transparent;
  color: var(--color-primario);
}
.auf-btn--fantasma:hover { background: var(--color-superficie-alt); }

.auf-btn--sm { height: var(--button-height-sm); padding: 0 var(--spacing-sm); font-size: var(--font-size-xs); }

/* Botón de solo ícono: cuadrado, del alto del botón normal.
   SIEMPRE con title y aria-label: sin texto, el ícono es la única
   pista de qué hace, y un lector de pantalla no lee un dibujo. */
.auf-btn--icono { width: var(--button-height); padding: 0; }
.auf-btn--icono.auf-btn--sm { width: var(--button-height-sm); }

/* Deshabilitado: se cubre [disabled] y aria-disabled porque un <a>
   con aspecto de botón no acepta el atributo disabled. */
.auf-btn:disabled,
.auf-btn[aria-disabled="true"] {
  background: var(--color-superficie-alt);
  border-color: var(--color-linea);
  color: var(--color-texto-deshabilitado);
  cursor: not-allowed;
  filter: none;
}


/* ---------- Íconos ----------
   Los íconos de la interfaz son SVG con stroke:currentColor, no emojis.
   Un emoji lo dibuja el sistema operativo: cambia de Windows a Mac, no
   se puede recolorear, no hereda el color del botón que lo contiene y
   su peso visual no tiene nada que ver con el resto de la interfaz (de
   ahí que un ⏻ rojo se robe la pantalla). Como adorno dentro de un
   texto está bien; como ícono de una acción, no.

     <button class="auf-btn auf-btn--icono" title="Eliminar" aria-label="Eliminar">
       <svg class="auf-ico" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/>
       </svg>
     </button>

   El aria-hidden del svg es a propósito: quien lee la etiqueta es el
   aria-label del botón. */
.auf-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auf-ico--sm { width: 14px; height: 14px; }


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

.auf-tabla {
  width: 100%;
  /* separate + spacing 0 en vez de collapse: con collapse, los bordes
     de un <th> sticky no viajan con él al scrollear y el header queda
     "sin línea". Además collapse ignora border-radius. */
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-superficie);
  border: 1px solid var(--color-linea);
  border-radius: var(--radius-contenedor);
  font-size: var(--table-font-size);
  color: var(--color-texto);
  /* SIN overflow:hidden. Las esquinas se redondean abajo, celda por
     celda, justamente para no necesitarlo. */
}

.auf-tabla th,
.auf-tabla td {
  padding: var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--color-linea);
  text-align: left;
  vertical-align: middle;
}

.auf-tabla th {
  background: var(--color-superficie-alt);
  font-family: var(--font-family-display);
  font-weight: var(--font-display-weight);
  text-transform: var(--font-display-transform);
  letter-spacing: var(--font-display-tracking);
  font-size: var(--font-size-xs);
  color: var(--color-texto-secundario);
  white-space: nowrap;
}

/* Esquinas: el fondo de las celdas de las puntas taparía el radio de
   la tabla, así que cada punta se redondea sola. */
.auf-tabla thead tr:first-child th:first-child { border-top-left-radius: var(--radius-contenedor); }
.auf-tabla thead tr:first-child th:last-child  { border-top-right-radius: var(--radius-contenedor); }
.auf-tabla tbody tr:last-child td:first-child  { border-bottom-left-radius: var(--radius-contenedor); }
.auf-tabla tbody tr:last-child td:last-child   { border-bottom-right-radius: var(--radius-contenedor); }
.auf-tabla tbody tr:last-child td { border-bottom: none; }

.auf-tabla tbody tr:hover td { background: var(--color-superficie-alt); }

.auf-tabla th.auf-num,
.auf-tabla td.auf-num { text-align: right; }

/* Cabecera pegajosa. Se pega al ancestro más cercano que scrollea:
   la tabla tiene que vivir dentro de UNA sola zona de scroll (en
   Dossier, .contenido-scroll). Si hay dos contenedores con scroll
   anidados, el header se pega al de adentro y al scrollear el de
   afuera se va con la tabla. */
.auf-tabla--sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Filas alternadas: opcional. En tablas con agrupación propia (como
   las semanas martes-a-lunes de Dossier) no usarla, porque se pisan. */
.auf-tabla--cebra tbody tr:nth-child(even) td { background: var(--color-fondo-app); }
.auf-tabla--cebra tbody tr:nth-child(even):hover td { background: var(--color-superficie-alt); }


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

.auf-campo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.auf-campo > label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-texto-secundario);
}

.auf-control {
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--spacing-sm);
  border: 1px solid var(--color-borde-control);
  border-radius: var(--radius-base);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  box-sizing: border-box;
}
textarea.auf-control {
  height: auto;
  min-height: calc(var(--input-height) * 2);
  padding: var(--spacing-sm);
  resize: vertical;
}
.auf-control::placeholder { color: var(--color-texto-deshabilitado); }
.auf-control:disabled {
  background: var(--color-superficie-alt);
  color: var(--color-texto-deshabilitado);
  cursor: not-allowed;
}

.auf-ayuda {
  font-size: var(--font-size-xs);
  color: var(--color-texto-secundario);
}

/* Error: borde Y texto. Solo el borde rojo no alcanza — quien no
   distingue rojo de gris no ve que algo falló. */
.auf-campo--error .auf-control { border-color: var(--color-error); }
.auf-campo--error .auf-ayuda { color: var(--color-error-texto); }

/* Checkbox y radio nativos con el color de marca. accent-color no
   necesita reemplazar el control, así sigue funcionando el teclado. */
.auf-check { accent-color: var(--color-primario); width: 16px; height: 16px; }

.auf-fila-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
}


/* ---------- Lista desplegable con búsqueda ----------
   Un <input> con una lista de resultados que se filtra mientras se
   escribe. Las reglas de comportamiento (desde qué carácter filtra,
   en qué orden) están en componentes.md §11: son parte del componente,
   no un detalle de cada app.

     <div class="auf-autocompletar">
       <input class="auf-control" type="text" autocomplete="off" role="combobox">
       <div class="auf-autocompletar__lista" role="listbox" hidden>…</div>
     </div>                                                               */
.auf-autocompletar { position: relative; }

.auf-autocompletar__lista {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  background: var(--color-superficie);
  border: 1px solid var(--color-linea);
  border-radius: var(--radius-contenedor);
  box-shadow: var(--shadow-elevated);
}
.auf-autocompletar__lista[hidden] { display: none; }

.auf-autocompletar__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-linea);
  font-size: var(--font-size-sm);
  color: var(--color-texto);
  cursor: pointer;
}
.auf-autocompletar__item:last-child { border-bottom: none; }
/* El resaltado del mouse y el del teclado son el mismo: el que navega
   con flechas tiene que ver lo mismo que el que pasa el mouse. */
.auf-autocompletar__item:hover,
.auf-autocompletar__item--activo { background: var(--color-superficie-alt); }

.auf-autocompletar__secundario { color: var(--color-texto-secundario); font-size: var(--font-size-xs); }

.auf-autocompletar__vacio {
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-texto-secundario);
}


/* ---------- Badges ---------- */

.auf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 2px var(--spacing-sm);
  border: 1px solid var(--color-linea);
  border-radius: var(--radius-pill);
  background: var(--color-superficie-alt);
  color: var(--color-texto-secundario);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  white-space: nowrap;
}
.auf-badge--info        { background: var(--color-info-fondo);        border-color: var(--color-info-borde);        color: var(--color-info-texto); }
.auf-badge--exito       { background: var(--color-exito-fondo);       border-color: var(--color-exito-borde);       color: var(--color-exito-texto); }
.auf-badge--advertencia { background: var(--color-advertencia-fondo); border-color: var(--color-advertencia-borde); color: var(--color-advertencia-texto); }
.auf-badge--error       { background: var(--color-error-fondo);       border-color: var(--color-error-borde);       color: var(--color-error-texto); }


/* ---------- Mensajes ---------- */

/* Mensaje en línea (no un toast): queda en la pantalla hasta que
   la situación cambia. Borde izquierdo grueso para que el tipo se
   reconozca sin leer y sin depender solo del color de fondo. */
.auf-mensaje {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-linea);
  border-left-width: 4px;
  border-radius: var(--radius-base);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}
.auf-mensaje > strong:first-child { display: block; margin-bottom: 2px; }

.auf-mensaje--info        { background: var(--color-info-fondo);        border-color: var(--color-info-borde);        border-left-color: var(--color-info-texto); }
.auf-mensaje--exito       { background: var(--color-exito-fondo);       border-color: var(--color-exito-borde);       border-left-color: var(--color-exito-texto); }
.auf-mensaje--advertencia { background: var(--color-advertencia-fondo); border-color: var(--color-advertencia-borde); border-left-color: var(--color-advertencia-texto); }
.auf-mensaje--error       { background: var(--color-error-fondo);       border-color: var(--color-error-borde);       border-left-color: var(--color-error-texto); }

/* El TÍTULO toma el color del estado; el cuerpo queda en texto
   normal. Un párrafo entero en #876900 cansa y baja el contraste. */
.auf-mensaje--info > strong:first-child        { color: var(--color-info-texto); }
.auf-mensaje--exito > strong:first-child       { color: var(--color-exito-texto); }
.auf-mensaje--advertencia > strong:first-child { color: var(--color-advertencia-texto); }
.auf-mensaje--error > strong:first-child       { color: var(--color-error-texto); }