/*
 * AVIZOR · sistema visual compartido (tema "Campo").
 *
 * Fuente única: esta es la que se edita. `npm run estaticos` la copia a
 * `panel/public/vendor/` y `paginas/public/vendor/`; nunca se edita la copia.
 * El estilo sale de la app móvil (mobile/src/presentation/theme.ts): papel
 * membretado, serio. Letra Lora (400 texto, 700 títulos, botones y etiquetas),
 * esquinas casi rectas, botones con marco doble y campo enfocado en bronce.
 *
 * Cumple la CSP del panel: sin nada inline y sin recursos de otros orígenes.
 *
 * VOCABULARIO (contrato: quien arme pantallas usa sólo estas clases)
 *
 *   Botones     boton + boton--primario | --secundario | --suave | --peligro
 *               modificadores: boton--chico (40px), boton--ancho (100%)
 *               estados: [disabled], [aria-busy="true"] (spinner)
 *   Enlace      enlace
 *   Campos      campo > campo__etiqueta + campo__control (+ campo__ayuda, campo__error)
 *               campo--check (casilla grande con la etiqueta al lado)
 *               campo__control.is-invalid (error de validación)
 *   Tarjeta     tarjeta > tarjeta__cabecera + tarjeta__cuerpo
 *   Avisos      aviso + aviso--success | --danger | --warning | --info
 *   Etiquetas   etiqueta + etiqueta--verde | --gris | --ambar | --rojo
 *   Medidor     medidor > medidor__tramos > 3 × medidor__tramo, + medidor__texto
 *               medidor--debil | --aceptable | --fuerte (cuántos tramos se llenan y de qué color)
 *   Otros       monograma (iniciales), cargando (spinner), esqueleto (carga)
 *   Animación   vista-entra, entra-escalonado (los hijos entran de a uno)
 *   Utilidades  pila, pila--chica, fila, fila--entre, grilla, tenue,
 *               visualmente-oculto, marca, marca__logo
 */

/* ---------------------------------------------------------------- Letra */

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/lora-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/lora-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fuentes/lora-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fuentes/lora-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- Tokens */

:root {
  --verde: #2f5e27;
  --verde-2: #3d7a33;
  --verde-presionado: #264d20;
  --verde-suave: #e7f1e5;
  --fondo: #eaede6;
  --superficie: #ffffff;
  --superficie-2: #f3f5ef;
  --texto: #15180f;
  --tenue: #5a6152;
  --apagado: #8a9080;
  --borde: #d7dccf;
  --borde-fuerte: #c2c9b6;
  --borde-tarjeta: #e2e6da;
  --bronce: #c5a880;
  --bronce-suave: #f3eadc;
  --peligro: #c23b1c;
  --peligro-suave: #f8e1da;
  --peligro-tinta: #7a2310;
  --aviso: #7c4d09;
  --aviso-suave: #faedd8;
  --ambar: #d99100;
  --info: #3f4a36;
  --verde-tinta: #1c4d20;

  --sombra: 0 1px 2px rgba(20, 30, 12, 0.08), 0 8px 22px rgba(20, 30, 12, 0.07);

  --radio: 4px;
  --radio-lg: 6px;
  --radio-chico: 2px;
  --radio-pildora: 3px;
  --control: 54px;
  --tactil: 60px;

  --duracion: 220ms;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Color de la superficie sobre la que está parado un botón calado (el secundario). */
  --lienzo: var(--fondo);
}

/* ---------------------------------------------------------------- Reset */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
fieldset {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

body {
  background-color: var(--fondo);
  color: var(--texto);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  /* Sólo las dos caras cargadas: nunca una negrita inventada por el navegador. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.2px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--bronce);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- Animación */

@keyframes avizor-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes avizor-gira {
  to {
    transform: rotate(360deg);
  }
}

@keyframes avizor-brilla {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.vista-entra {
  animation: avizor-entra var(--duracion) var(--curva);
}

.entra-escalonado > * {
  animation: avizor-entra var(--duracion) var(--curva) both;
}

.entra-escalonado > :nth-child(1) {
  animation-delay: 40ms;
}
.entra-escalonado > :nth-child(2) {
  animation-delay: 80ms;
}
.entra-escalonado > :nth-child(3) {
  animation-delay: 120ms;
}
.entra-escalonado > :nth-child(4) {
  animation-delay: 160ms;
}
.entra-escalonado > :nth-child(5) {
  animation-delay: 200ms;
}
.entra-escalonado > :nth-child(6) {
  animation-delay: 240ms;
}
.entra-escalonado > :nth-child(7) {
  animation-delay: 280ms;
}
.entra-escalonado > :nth-child(8) {
  animation-delay: 320ms;
}
.entra-escalonado > :nth-child(9) {
  animation-delay: 360ms;
}
.entra-escalonado > :nth-child(10) {
  animation-delay: 400ms;
}
.entra-escalonado > :nth-child(11) {
  animation-delay: 440ms;
}
.entra-escalonado > :nth-child(12) {
  animation-delay: 480ms;
}

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

/*
 * Marco doble hecho con `box-shadow: inset`, de afuera hacia adentro:
 * borde (1px) · separación (2px, del color del botón) · filete (1px).
 * Las sombras se apilan: la primera queda arriba. Los colores salen de
 * variables locales para que el cambio de estado se anime.
 */
.boton {
  --b-fondo: transparent;
  --b-borde: var(--texto);
  --b-filete: var(--texto);
  --b-tinta: var(--texto);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--control);
  padding: 6px 26px;
  border: 0;
  border-radius: 0;
  background-color: var(--b-fondo);
  color: var(--b-tinta);
  box-shadow:
    inset 0 0 0 1px var(--b-borde),
    inset 0 0 0 3px var(--b-fondo),
    inset 0 0 0 4px var(--b-filete);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.6px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--duracion) var(--curva),
    color var(--duracion) var(--curva),
    box-shadow var(--duracion) var(--curva),
    transform 120ms var(--curva),
    opacity var(--duracion) var(--curva);
}

.boton:active:not(:disabled) {
  transform: scale(0.97);
}

.boton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.boton[aria-busy='true'] {
  cursor: progress;
}

.boton[aria-busy='true']::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: avizor-gira 700ms linear infinite;
}

/* Principal: relleno verde con el filete claro adentro. */
.boton--primario {
  --b-fondo: var(--verde);
  --b-borde: var(--verde);
  --b-filete: rgba(255, 255, 255, 0.45);
  --b-tinta: #ffffff;
  box-shadow:
    inset 0 0 0 1px var(--b-borde),
    inset 0 0 0 3px var(--b-fondo),
    inset 0 0 0 4px var(--b-filete),
    0 1px 2px rgba(20, 30, 12, 0.08),
    0 8px 22px rgba(20, 30, 12, 0.07);
}

.boton--primario:hover:not(:disabled),
.boton--primario:active:not(:disabled) {
  --b-fondo: var(--verde-presionado);
  --b-borde: var(--verde-presionado);
}

/* Secundario: calado, tinta sobre fondo con doble línea; al apretarlo se invierte. */
.boton--secundario {
  --b-fondo: var(--lienzo);
}

.boton--secundario:hover:not(:disabled),
.boton--secundario:active:not(:disabled) {
  --b-fondo: var(--texto);
  --b-tinta: var(--fondo);
  --b-filete: rgba(234, 237, 230, 0.4);
}

/* Suave: gris verdoso, sin filete. */
.boton--suave {
  --b-fondo: var(--superficie-2);
  --b-borde: var(--borde-fuerte);
  --b-filete: var(--superficie-2);
}

.boton--suave:hover:not(:disabled),
.boton--suave:active:not(:disabled) {
  --b-fondo: var(--borde);
  --b-filete: var(--borde);
}

/* Peligro: relleno rojo, se oscurece al apretar. */
.boton--peligro {
  --b-fondo: var(--peligro);
  --b-borde: var(--peligro);
  --b-filete: rgba(255, 255, 255, 0.45);
  --b-tinta: #ffffff;
  box-shadow:
    inset 0 0 0 1px var(--b-borde),
    inset 0 0 0 3px var(--b-fondo),
    inset 0 0 0 4px var(--b-filete),
    0 1px 2px rgba(20, 30, 12, 0.08),
    0 8px 22px rgba(20, 30, 12, 0.07);
}

.boton--peligro:hover:not(:disabled),
.boton--peligro:active:not(:disabled) {
  --b-fondo: var(--peligro-tinta);
  --b-borde: var(--peligro-tinta);
}

.boton--chico {
  min-height: 40px;
  padding: 4px 16px;
  font-size: 13px;
  letter-spacing: 0.4px;
}

.boton--ancho {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------- Enlace */

.enlace {
  color: var(--verde);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition:
    color var(--duracion) var(--curva),
    text-decoration-thickness var(--duracion) var(--curva);
}

.enlace:hover {
  color: var(--verde-presionado);
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------- Campos */

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.pila > .campo,
.pila > .aviso {
  margin-bottom: 0;
}

.campo__etiqueta {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.campo__control {
  display: block;
  width: 100%;
  min-height: var(--control);
  padding: 8px 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 0;
  background-color: var(--superficie);
  color: var(--texto);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  transition:
    border-color var(--duracion) var(--curva),
    box-shadow var(--duracion) var(--curva),
    background-color var(--duracion) var(--curva);
}

.campo__control:focus,
.campo__control:focus-visible {
  outline: none;
  border-color: var(--bronce);
  box-shadow: 0 0 0 3px var(--bronce);
}

.campo__control:disabled {
  background-color: var(--superficie-2);
  color: var(--tenue);
  cursor: not-allowed;
}

select.campo__control {
  cursor: pointer;
}

input[type='file'].campo__control {
  padding: 10px 12px;
  cursor: pointer;
}

input[type='file'].campo__control::file-selector-button {
  margin-right: 14px;
  padding: 7px 14px;
  border: 1px solid var(--texto);
  border-radius: 0;
  background-color: transparent;
  color: var(--texto);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--duracion) var(--curva),
    color var(--duracion) var(--curva);
}

input[type='file'].campo__control::file-selector-button:hover {
  background-color: var(--texto);
  color: var(--fondo);
}

.campo__ayuda {
  color: var(--tenue);
  font-size: 14px;
  line-height: 1.4;
}

.campo__error {
  color: var(--peligro-tinta);
  font-size: 14px;
  line-height: 1.4;
  animation: avizor-entra var(--duracion) var(--curva);
}

.campo__error:empty {
  display: none;
}

.campo__control.is-invalid {
  border-color: var(--peligro);
  background-color: color-mix(in srgb, var(--peligro-suave) 45%, var(--superficie));
}

.campo--check {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.campo--check .campo__control {
  flex: none;
  width: 22px;
  min-height: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  accent-color: var(--verde);
  cursor: pointer;
}

.campo--check .campo__etiqueta {
  cursor: pointer;
}

.campo--check .campo__ayuda,
.campo--check .campo__error {
  flex-basis: 100%;
  padding-left: 34px;
}

/* -------------------------------------------------------------- Tarjeta */

.tarjeta {
  --lienzo: var(--superficie);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio-lg);
  background-color: var(--superficie);
  box-shadow: var(--sombra);
}

.tarjeta__cabecera {
  padding: 16px 24px;
  border-bottom: 1px solid var(--borde-tarjeta);
  font-weight: 700;
}

.tarjeta__cuerpo {
  padding: 24px;
}

/* ---------------------------------------------------------------- Avisos */

.aviso {
  --tono: var(--info);
  --tinta: var(--info);
  --suave: var(--superficie-2);

  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--tono);
  border-left-width: 4px;
  border-radius: var(--radio);
  background-color: var(--suave);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.45;
  animation: avizor-entra var(--duracion) var(--curva);
}

.aviso--success {
  --tono: var(--verde);
  --tinta: var(--verde-tinta);
  --suave: var(--verde-suave);
}

.aviso--danger {
  --tono: var(--peligro);
  --tinta: var(--peligro-tinta);
  --suave: var(--peligro-suave);
}

.aviso--warning {
  --tono: var(--aviso);
  --tinta: var(--aviso);
  --suave: var(--aviso-suave);
}

.aviso--info {
  --tono: var(--info);
  --tinta: var(--info);
  --suave: var(--superficie-2);
}

/* ------------------------------------------------------------- Etiquetas */

.etiqueta {
  --e-fondo: var(--superficie-2);
  --e-tinta: var(--tenue);
  --e-borde: var(--borde);

  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--e-borde);
  border-radius: var(--radio-pildora);
  background-color: var(--e-fondo);
  color: var(--e-tinta);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.etiqueta--verde {
  --e-fondo: var(--verde-suave);
  --e-tinta: var(--verde-tinta);
  --e-borde: var(--verde-suave);
}

.etiqueta--gris {
  --e-fondo: var(--superficie-2);
  --e-tinta: var(--tenue);
  --e-borde: var(--borde);
}

.etiqueta--ambar {
  --e-fondo: var(--aviso-suave);
  --e-tinta: var(--aviso);
  --e-borde: var(--aviso-suave);
}

.etiqueta--rojo {
  --e-fondo: var(--peligro-suave);
  --e-tinta: var(--peligro-tinta);
  --e-borde: var(--peligro-suave);
}

/* ------------------------------------------------------------ Monograma */

.monograma {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radio);
  background-color: var(--verde-suave);
  color: var(--verde);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ------------------------------------------------- Cargando y esqueleto */

.cargando {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--borde-fuerte);
  border-top-color: var(--verde);
  border-radius: 50%;
  animation: avizor-gira 800ms linear infinite;
}

.esqueleto {
  display: block;
  min-height: 1em;
  border-radius: var(--radio);
  background-color: var(--borde-tarjeta);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: avizor-brilla 1.4s linear infinite;
}

/* ----------------------------------------------------------- Utilidades */

.pila {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pila--chica {
  gap: 8px;
}

.fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.fila--entre {
  justify-content: space-between;
}

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.tenue {
  color: var(--tenue);
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Un enlace de salto vuelve a verse cuando recibe el foco. */
a.visualmente-oculto:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  overflow: visible;
  clip-path: none;
  background-color: var(--superficie);
  border: 1px solid var(--texto);
  color: var(--texto);
  font-weight: 700;
  text-decoration: none;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--verde);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.marca__logo {
  flex: none;
  width: auto;
  height: 32px;
}

/* ---------------------------------------------------------------- Medidor */

/* Medidor de fortaleza de clave: 3 tramos que se llenan y un texto. Sólo informa. */
.medidor {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.medidor[hidden] {
  display: none;
}

.medidor__tramos {
  display: flex;
  gap: 6px;
}

.medidor__tramo {
  position: relative;
  flex: 1 1 0;
  height: 6px;
  border-radius: var(--radio-chico);
  background-color: var(--borde);
  overflow: hidden;
}

.medidor__tramo::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background-color: var(--borde);
  transition:
    width var(--duracion) var(--curva),
    background-color var(--duracion) var(--curva);
}

.medidor--debil .medidor__tramo:nth-child(-n + 1)::before,
.medidor--aceptable .medidor__tramo:nth-child(-n + 2)::before,
.medidor--fuerte .medidor__tramo::before {
  width: 100%;
}

.medidor--debil .medidor__tramo::before {
  background-color: var(--peligro);
}

.medidor--aceptable .medidor__tramo::before {
  background-color: var(--ambar);
}

.medidor--fuerte .medidor__tramo::before {
  background-color: var(--verde);
}

.medidor__texto {
  color: var(--tenue);
  font-size: 14px;
  line-height: 1.4;
}

.medidor__texto:empty {
  display: none;
}

/* ------------------------------------------------------ Poco movimiento */

@media (prefers-reduced-motion: reduce) {
  .vista-entra,
  .entra-escalonado > *,
  .campo__error,
  .aviso {
    animation: none;
  }

  .esqueleto {
    animation: none;
  }

  /* Los giros avisan que algo está pasando: siguen, pero más lentos. */
  .cargando,
  .boton[aria-busy='true']::before {
    animation-duration: 2s;
  }

  .boton,
  .campo__control,
  .enlace,
  .campo__control::file-selector-button,
  .medidor__tramo::before {
    transition: none;
  }

  .boton:active:not(:disabled) {
    transform: none;
  }
}