/* Estilos de Tinku Outreach.
   Regla: todos los valores (colores, espacios, tamaños, radios) viven como
   variables en :root. Para el modo oscuro o un rediseño basta con
   redefinir las variables, sin tocar el HTML ni el resto de este archivo.

   Media queries: var() no funciona en la condición de un @media
   (@media (max-width: var(--x)) no vale), pero sí dentro del bloque.
   Por eso el modo oscuro se hará redefiniendo las variables de :root
   dentro de @media (prefers-color-scheme: dark) { :root { … } }.
   De momento no hay media queries: el diseño se adapta al móvil con
   flex-wrap y tablas con desplazamiento horizontal. */

:root {
  /* Colores: grises y un único color de acento (enlaces y botón principal). */
  --color-fondo: #ffffff;
  --color-superficie: #f4f4f5;
  --color-texto: #18181b;
  --color-texto-suave: #52525b;
  --color-borde: #d4d4d8;
  --color-borde-fuerte: #71717a;
  --color-acento: #1d4ed8;
  --color-acento-activo: #1e3a8a;
  --color-sobre-acento: #ffffff;
  --color-foco: #1d4ed8;

  /* Tipografía: solo fuentes del sistema. */
  --fuente: system-ui, sans-serif;
  --fuente-mono: ui-monospace, monospace;
  --tamano-base: 1rem;
  --tamano-pequeno: 0.875rem;
  --tamano-titulo-1: 1.75rem;
  --tamano-titulo-2: 1.25rem;
  --interlineado: 1.5;
  --interlineado-titulos: 1.2;
  --peso-normal: 400;
  --peso-fuerte: 600;

  /* Espacios. */
  --espacio-0: 0;
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;

  /* Medidas. */
  --ancho-pagina: 64rem;
  --ancho-formulario: 26rem;
  --ancho-completo: 100%;
  --altura-control: 2.75rem;
  --borde-fino: 1px;
  --borde-grueso: 4px;
  --radio: 0.375rem;
  --radio-etiqueta: 999px;
  --foco-grosor: 3px;
  --foco-separacion: 2px;
  --oculto-tamano: 1px;
  --oculto-recorte: 50%;
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: var(--espacio-0);
  font-family: var(--fuente);
  font-size: var(--tamano-base);
  font-weight: var(--peso-normal);
  line-height: var(--interlineado);
  color: var(--color-texto);
  background: var(--color-fondo);
}

h1,
h2,
h3 {
  line-height: var(--interlineado-titulos);
  margin-block: var(--espacio-6) var(--espacio-4);
}

h1 {
  font-size: var(--tamano-titulo-1);
}

h2 {
  font-size: var(--tamano-titulo-2);
}

p {
  margin-block: var(--espacio-0) var(--espacio-4);
}

a {
  color: var(--color-acento);
  text-underline-offset: var(--foco-separacion);
}

a:hover {
  color: var(--color-acento-activo);
}

code {
  font-family: var(--fuente-mono);
  font-size: var(--tamano-pequeno);
}

/* El foco se ve siempre, con teclado y con ratón en los campos. */
:focus-visible {
  outline: var(--foco-grosor) solid var(--color-foco);
  outline-offset: var(--foco-separacion);
}

/* Estructura */

.contenedor {
  max-width: var(--ancho-pagina);
  margin-inline: auto;
  padding-inline: var(--espacio-4);
}

main.contenedor {
  padding-block-end: var(--espacio-7);
}

.saltar {
  position: absolute;
  inset-inline-start: var(--espacio-2);
  inset-block-start: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--color-fondo);
}

.saltar:not(:focus) {
  width: var(--oculto-tamano);
  height: var(--oculto-tamano);
  overflow: hidden;
  clip-path: inset(var(--oculto-recorte));
  white-space: nowrap;
}

.cabecera {
  border-block-end: var(--borde-fino) solid var(--color-borde);
  background: var(--color-superficie);
}

.cabecera-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2) var(--espacio-5);
  padding-block: var(--espacio-3);
}

.nombre-app {
  margin: var(--espacio-0);
  font-weight: var(--peso-fuerte);
}

.nombre-app a {
  color: var(--color-texto);
  text-decoration: none;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4);
  margin: var(--espacio-0);
  padding: var(--espacio-0);
  list-style: none;
}

.menu a[aria-current="page"] {
  font-weight: var(--peso-fuerte);
  color: var(--color-texto);
}

.salir {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  margin-inline-start: auto;
}

.pie {
  border-block-start: var(--borde-fino) solid var(--color-borde);
  padding-block: var(--espacio-4);
  color: var(--color-texto-suave);
  font-size: var(--tamano-pequeno);
}

/* Formularios */

.formulario {
  max-width: var(--ancho-formulario);
}

.campo {
  margin-block-end: var(--espacio-4);
}

label {
  display: block;
  margin-block-end: var(--espacio-1);
  font-weight: var(--peso-fuerte);
}

input,
select,
textarea {
  width: var(--ancho-completo);
  min-height: var(--altura-control);
  padding: var(--espacio-2) var(--espacio-3);
  font: inherit;
  color: var(--color-texto);
  background: var(--color-fondo);
  border: var(--borde-fino) solid var(--color-borde-fuerte);
  border-radius: var(--radio);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--altura-control);
  padding: var(--espacio-2) var(--espacio-4);
  font: inherit;
  font-weight: var(--peso-fuerte);
  color: var(--color-sobre-acento);
  background: var(--color-acento);
  border: var(--borde-fino) solid var(--color-acento);
  border-radius: var(--radio);
  cursor: pointer;
}

.boton:hover {
  background: var(--color-acento-activo);
  border-color: var(--color-acento-activo);
}

.boton-secundario {
  color: var(--color-texto);
  background: var(--color-fondo);
  border-color: var(--color-borde-fuerte);
}

.boton-secundario:hover {
  background: var(--color-superficie);
  border-color: var(--color-texto);
}

/* Avisos: el texto dice qué pasa; el borde solo lo destaca. */
.aviso {
  margin-block-end: var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  background: var(--color-superficie);
  border-inline-start: var(--borde-grueso) solid var(--color-borde-fuerte);
}

.aviso p:last-child {
  margin-block-end: var(--espacio-0);
}

.nota {
  color: var(--color-texto-suave);
  font-size: var(--tamano-pequeno);
}

/* Tablas */

.tabla-desplazable {
  overflow-x: auto;
  margin-block-end: var(--espacio-5);
}

table {
  width: var(--ancho-completo);
  border-collapse: collapse;
}

caption {
  text-align: start;
  padding-block-end: var(--espacio-2);
  color: var(--color-texto-suave);
}

th,
td {
  padding: var(--espacio-2) var(--espacio-3);
  text-align: start;
  vertical-align: top;
  border-block-end: var(--borde-fino) solid var(--color-borde);
}

thead th {
  background: var(--color-superficie);
  border-block-end-color: var(--color-borde-fuerte);
  white-space: nowrap;
}

tbody th {
  font-weight: var(--peso-fuerte);
}

/* Etiquetas de estado: siempre con texto (y símbolo); el estilo solo
   refuerza, nunca es la única pista. */
.etiqueta {
  display: inline-block;
  padding: var(--espacio-0) var(--espacio-2);
  font-size: var(--tamano-pequeno);
  white-space: nowrap;
  border: var(--borde-fino) solid var(--color-borde-fuerte);
  border-radius: var(--radio-etiqueta);
  background: var(--color-fondo);
}

.etiqueta-ok {
  background: var(--color-superficie);
}

.etiqueta-aviso {
  border-style: dashed;
}

.etiqueta-error {
  font-weight: var(--peso-fuerte);
  border-color: var(--color-texto);
}

.etiqueta-neutro {
  color: var(--color-texto-suave);
}