/* =====================================================================
   Zapatos para el Bienestar — Sistema de diseño institucional
   H. Ayuntamiento de Ecatepec de Morelos

   Decisiones que no son de gusto:
   · Base 18px. Quien llena esto es un padre o una madre, muchas veces
     desde el celular y a veces sin lentes. 16px se lee mal.
   · Áreas clicables de 48px mínimo. Con dedo, no con mouse.
   · Móvil primero: la mayoría se registra desde el teléfono.
   · Contraste alto en todo texto sobre color.
   ===================================================================== */

:root {
  --guinda:       #691C32;
  --guinda-dark:  #4e1526;
  --guinda-xdark: #38101b;
  --guinda-light: #7d2240;
  --dorado:       #BC955C;
  --dorado-light: #c9a670;
  --dorado-pale:  #e8d4aa;
  --crema:        #ECD798;
  --crema-light:  #f5edcc;
  --crema-pale:   #fdf9f0;

  --panel:   #ffffff;
  --panel-2: #fdf9f0;
  --line:    #e8d9c0;
  --bg:      #f4ebe0;
  --text:    #231018;
  --muted:   #6b4a54;

  --exito:   #14532d;  --exito-bg:  #dcfce7;  --exito-line: #86efac;
  --aviso:   #713f12;  --aviso-bg:  #fef9c3;  --aviso-line: #fde047;
  --error:   #7f1d1d;  --error-bg:  #fee2e2;  --error-line: #fca5a5;
  --info:    #1e3a8a;  --info-bg:   #dbeafe;  --info-line:  #93c5fd;

  --sh-sm: 0 2px 8px  rgba(105,28,50,.08);
  --sh:    0 4px 16px rgba(105,28,50,.10);
  --sh-md: 0 8px 28px rgba(105,28,50,.14);

  --r:    16px;
  --r-sm: 10px;
  --r-xs: 7px;
  --t:    .18s ease;

  --tap: 48px;          /* área mínima para tocar con el dedo */
}

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

html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--guinda); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--guinda-light); }

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

/* Foco siempre visible: hay gente que navega con teclado. */
:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Encabezado institucional ─────────────────────────────────────── */
.barra-superior {
  background: var(--guinda);
  color: #fff;
  padding: .7rem 1rem;
}
.barra-superior .contenido {
  margin: 0 auto;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
/* El imagotipo dorado, no el guinda: sobre la barra guinda el guinda se
   pierde y el escudo se lee como una mancha. */
.barra-superior img { height: 46px; width: auto; }
.barra-superior .textos { flex: 1; min-width: 200px; line-height: 1; }
.barra-superior .institucion {
  font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--crema); font-weight: 600;
}
.barra-superior .programa {
  font-size: 1.15rem; font-weight: 700; line-height: 1; margin: .25rem 0;
}
/* Crema y no dorado: el dorado sobre el guinda da ~4:1 de contraste y este
   renglón es texto chico. El crema pasa de 6:1 y mantiene la jerarquía. */
.barra-superior .area {
  font-size: .62rem; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--crema); opacity: .82; font-weight: 600; line-height: 1;
}
/* Acceso al panel. Discreto —lo usa el personal, no las familias— pero con
   el área de toque de 44px que pide el resto del sitio. */
.barra-superior .btn-acceso {
  flex-shrink: 0;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 1.1rem; border: 1px solid var(--crema); border-radius: 999px;
  color: var(--crema); text-decoration: none;
  font-size: .88rem; font-weight: 600; white-space: nowrap;
  transition: background .15s, color .15s;
}
.barra-superior .btn-acceso:hover,
.barra-superior .btn-acceso:focus-visible {
  background: var(--crema); color: var(--guinda);
}

.franja-dorada { height: 5px; background: linear-gradient(90deg, var(--dorado), var(--crema), var(--dorado)); }

/* ── Contenedores ─────────────────────────────────────────────────── */
/* Se ocupa el 90% del ancho de la pantalla. El tope de 1600px es solo
   para monitores muy grandes, donde una línea de texto de punta a punta
   ya no se sigue con la vista. */
.contenedor { width: 90%; max-width: 1600px; margin: 0 auto; padding: 1.25rem 0 4rem; }
.contenedor-ancho { width: 94%; max-width: 1800px; margin: 0 auto; padding: 1.25rem 0 3rem; }

.barra-superior .contenido { max-width: 1600px; width: 90%; }

@media (max-width: 700px) {
  /* En celular se aprovecha casi todo: los márgenes grandes ahí estorban. */
  .contenedor, .contenedor-ancho, .barra-superior .contenido { width: 94%; }
}

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.tarjeta-titulo {
  font-size: 1.3rem; color: var(--guinda); font-weight: 700;
  margin-bottom: .35rem; line-height: 1.3;
}
.tarjeta-sub { color: var(--muted); font-size: .95rem; margin-bottom: 1.1rem; }

/* ── Portada ──────────────────────────────────────────────────────── */
.portada {
  background: linear-gradient(135deg, var(--guinda) 0%, var(--guinda-xdark) 100%);
  color: #fff;
  border-radius: var(--r);
  padding: 2.25rem 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.portada h1 { font-size: 1.9rem; line-height: 1.2; margin-bottom: .6rem; }
.portada .lead { font-size: 1.08rem; color: var(--crema-light); max-width: 620px; margin: 0 auto; }
.portada .ciclo {
  display: inline-block; margin-top: 1rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(236,215,152,.45);
  color: var(--crema); border-radius: 999px;
  padding: .35rem 1.1rem; font-size: .9rem; font-weight: 600;
}

.requisitos { list-style: none; display: grid; gap: .6rem; }
.requisitos li {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--crema-pale); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .8rem .9rem;
}
.requisitos .num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--guinda); color: #fff; font-weight: 700; font-size: .9rem;
  display: grid; place-items: center;
}

/* ── Botones ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap);
  padding: .7rem 1.4rem;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  font-size: 1rem; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-principal { background: var(--guinda); color: #fff; }
.btn-principal:hover:not([disabled]) { background: var(--guinda-light); color: #fff; }

.btn-dorado { background: var(--dorado); color: #2a1a08; }
.btn-dorado:hover:not([disabled]) { background: var(--dorado-light); }

.btn-secundario { background: var(--panel); color: var(--guinda); border-color: var(--dorado); }
.btn-secundario:hover:not([disabled]) { background: var(--crema-pale); }

.btn-plano { background: transparent; color: var(--muted); text-decoration: underline; }
.btn-plano:hover { color: var(--guinda); }

.btn-peligro { background: var(--error-bg); color: var(--error); border-color: var(--error-line); }
.btn-peligro:hover:not([disabled]) { background: #fecaca; }

.btn-grande { font-size: 1.1rem; padding: .95rem 1.8rem; min-height: 56px; }
.btn-bloque { width: 100%; }

.acciones { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.acciones-separadas { justify-content: space-between; }

/* ── Pasos ────────────────────────────────────────────────────────── */
.pasos {
  display: flex; gap: .3rem; list-style: none;
  margin-bottom: 1.25rem; overflow-x: auto; padding-bottom: .35rem;
}
.pasos li {
  flex: 1 1 0; min-width: 92px;
  text-align: center; font-size: .74rem; color: var(--muted);
  padding-top: .4rem; position: relative;
}
.pasos li::before {
  content: ''; display: block; height: 6px; border-radius: 3px;
  background: var(--line); margin-bottom: .45rem;
}
.pasos li.hecho::before   { background: var(--dorado); }
.pasos li.activo::before  { background: var(--guinda); }
.pasos li.activo { color: var(--guinda); font-weight: 700; }
.pasos li .n { display: block; font-size: .95rem; font-weight: 700; }

/* ── Formularios ──────────────────────────────────────────────────── */
.campos { display: grid; gap: 1.1rem; }
.campos-2 { grid-template-columns: 1fr; }

@media (min-width: 700px) {
  .campos-2 { grid-template-columns: 1fr 1fr; }
  .campos-3 { grid-template-columns: repeat(3, 1fr); }
  .col-completa { grid-column: 1 / -1; }
}

/* Bloques del formulario: agrupan los datos que van juntos (la niña o el
   niño por un lado, el tutor por otro) para que se lean de un vistazo. */
.grupo {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 1rem;
}
.grupo legend {
  font-weight: 700;
  font-size: .95rem;
  color: var(--guinda);
  padding: 0 .5rem;
  margin-left: -.25rem;
}

/* Nombre y apellidos en un solo renglón, que es como se leen en el acta
   y en cualquier documento oficial. En celular se apilan solos. */
.rejilla-nombre { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .rejilla-nombre { grid-template-columns: repeat(3, 1fr); }
  .rejilla-nombre .campo-doble { grid-column: span 2; }
}

/* En pantalla de escritorio el formulario se compacta para que un paso
   completo quepa sin tener que bajar. Cuando hay que hacer scroll para
   ver el botón de continuar, la gente cree que el formulario está
   incompleto o se pierde a media captura. */
@media (min-width: 1100px) {
  .campos-2 { grid-template-columns: repeat(3, 1fr); gap: .85rem 1.1rem; }

  /* Los campos dejan de ocupar el renglón entero: caben tres por fila.
     Los bloques que sí necesitan el ancho (avisos, botones) lo conservan
     porque no son .campo. */
  .campos-2 .campo.col-completa { grid-column: auto; }

  .rejilla-nombre { gap: .85rem 1.1rem; }
  .grupo { padding: .8rem 1rem .9rem; margin-bottom: .85rem; }

  .campo label { font-size: .9rem; margin-bottom: .25rem; }
  .campo .ayuda { font-size: .8rem; line-height: 1.35; }

  .campo input[type=text],
  .campo input[type=email],
  .campo input[type=tel],
  .campo input[type=password],
  .campo input[type=number],
  .campo select {
    /* Con mouse basta 44px; en celular se mantienen los 48. */
    min-height: 44px;
    padding: .55rem .75rem;
  }

  .tarjeta { padding: 1.1rem 1.4rem 1.2rem; margin-bottom: .9rem; }
  .tarjeta-titulo { font-size: 1.2rem; }
  .tarjeta-sub { margin-bottom: .9rem; font-size: .9rem; }
  .acciones { margin-top: 1rem; }

  /* Los pasos y el pie dejan de comerse la altura útil. */
  .pasos { margin-bottom: .75rem; padding-bottom: .2rem; }
  .pasos li { font-size: .72rem; padding-top: .25rem; }
  .pasos li::before { height: 5px; margin-bottom: .3rem; }
  .pasos li .n { font-size: .88rem; }

  .barra-superior { padding: .5rem 1rem; }
  .barra-superior img { height: 38px; }
  .barra-superior .programa { font-size: 1.05rem; }

  .contenedor { padding-bottom: 1.5rem; }
}

.campo label {
  display: block; font-weight: 600; font-size: .96rem;
  margin-bottom: .35rem; color: var(--text);
}
.campo .ayuda { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); margin-top: .1rem; }
.campo .obligatorio { color: var(--guinda); }

.campo input[type=text],
.campo input[type=email],
.campo input[type=tel],
.campo input[type=password],
.campo input[type=number],
.campo select,
.campo textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .7rem .85rem;
  font-family: inherit; font-size: 1rem; color: var(--text);
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--t), box-shadow var(--t);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--guinda);
  box-shadow: 0 0 0 3px rgba(105,28,50,.13);
}
.campo input::placeholder { color: #a08b93; }
.campo input.mayus { text-transform: uppercase; }

.campo.con-error input, .campo.con-error select, .campo.con-error textarea {
  border-color: var(--error-line); background: #fff5f5;
}
.campo .error {
  display: none; color: var(--error); font-size: .88rem; font-weight: 600;
  margin-top: .35rem;
}
.campo.con-error .error { display: block; }

/* ── Ayuda visual "¿dónde encuentro este dato?" ───────────────────
   Botón "?" junto a la etiqueta que abre una imagen de la credencial
   con el dato señalado. Es el mismo patrón que ya funcionó en Compra
   Segura para el CIC y el OCR: explicar con un dibujo ahorra decenas de
   llamadas de gente que no encuentra el dato en su credencial. */
.ayuda-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: .35rem; padding: 0;
  border: none; border-radius: 50%;
  background: var(--guinda); color: #fff;
  font-size: .78rem; font-weight: 800; line-height: 1;
  cursor: pointer; vertical-align: middle;
}
.ayuda-ico:hover { background: var(--guinda-light); }

.caja-ayuda { position: relative; max-width: 480px; text-align: center; }
.caja-ayuda img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  margin: .75rem 0 .5rem;
}
.caja-ayuda .ayuda-pie { font-size: .92rem; color: var(--muted); text-align: left; }
.cerrar-ayuda {
  position: absolute; top: .35rem; right: .6rem;
  border: none; background: none; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: var(--muted);
  width: 44px; height: 44px;
}
.cerrar-ayuda:hover { color: var(--guinda); }

/* Sugerencias (escuela, colonia) */
.autocompletar { position: relative; }
.sugerencias {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--panel); border: 2px solid var(--dorado);
  border-radius: var(--r-sm); box-shadow: var(--sh-md);
  max-height: 260px; overflow-y: auto; display: none;
}
.sugerencias.visible { display: block; }
.sugerencias button {
  display: block; width: 100%; text-align: left;
  padding: .7rem .85rem; font-size: .95rem; font-family: inherit;
  background: none; border: none; border-bottom: 1px solid var(--line); cursor: pointer;
}
.sugerencias button:last-child { border-bottom: none; }
.sugerencias button:hover, .sugerencias button:focus { background: var(--crema-pale); }
.sugerencias .meta { display: block; font-size: .8rem; color: var(--muted); }

/* ── Avisos ───────────────────────────────────────────────────────── */
.aviso {
  border-radius: var(--r-sm);
  padding: .9rem 1.05rem;
  margin-bottom: 1.1rem;
  border: 1px solid;
  font-size: .96rem;
}
.aviso strong { display: block; margin-bottom: .2rem; }
.aviso-info   { background: var(--info-bg);  color: var(--info);  border-color: var(--info-line); }
.aviso-exito  { background: var(--exito-bg); color: var(--exito); border-color: var(--exito-line); }
.aviso-alerta { background: var(--aviso-bg); color: var(--aviso); border-color: var(--aviso-line); }
.aviso-error  { background: var(--error-bg); color: var(--error); border-color: var(--error-line); }
.aviso ul { margin: .4rem 0 0 1.1rem; }

/* ── Folio ────────────────────────────────────────────────────────── */
.folio-caja {
  background: var(--crema-pale);
  border: 3px dashed var(--dorado);
  border-radius: var(--r);
  padding: 1.25rem; text-align: center; margin: 1.25rem 0;
}
.folio-caja .etiqueta {
  font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
.folio-caja .valor {
  font-size: 2rem; font-weight: 800; color: var(--guinda);
  letter-spacing: 1px; margin-top: .25rem; word-break: break-all;
}

/* ── Documento legal en pantalla ──────────────────────────────────── */
.hoja {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1.6rem 1.35rem;
  max-height: 60vh; overflow-y: auto;
  font-size: .97rem; line-height: 1.75;
  box-shadow: inset 0 -14px 14px -14px rgba(0,0,0,.12);
}
.hoja p { margin-bottom: .7rem; text-align: justify; }
.hoja .parrafo, .hoja .clausula { text-indent: 26px; }
.hoja .negrita { font-weight: 700; }
/* Listas de los textos legales (el aviso de privacidad oficial enumera los
   datos que se recaban y las finalidades). Sin sangría de primera línea:
   la heredarían de .parrafo y descuadraría las viñetas. */
.hoja .lista { margin: .3rem 0 .8rem; padding-left: 2.4rem; text-indent: 0; }
.hoja .lista li { margin-bottom: .2rem; }
.hoja .cursiva { font-style: italic; }
.hoja .fecha { text-align: right; font-style: italic; }
.hoja .destinatario p { text-align: left; text-indent: 0; }
.hoja .presente { font-weight: 700; letter-spacing: 5px; text-decoration: underline; text-transform: uppercase; }
.hoja table.datos { width: 100%; border-collapse: collapse; margin: .8rem 0; }
.hoja table.datos th {
  text-align: left; width: 34%; padding: .45rem .6rem;
  background: var(--crema-pale); border: 1px solid var(--line);
  font-weight: 400; color: var(--muted);
}
.hoja table.datos td { padding: .45rem .6rem; border: 1px solid var(--line); font-weight: 600; }
.hoja .firma { margin-top: 2.5rem; text-align: center; }
.hoja .firma .linea { width: 240px; margin: 0 auto .4rem; border-top: 1px solid var(--text); }
.hoja .firma p { text-align: center; text-indent: 0; margin: 0; }
.hoja .firma .pie { font-size: .85rem; color: var(--muted); }

/* ── Documentos a subir ───────────────────────────────────────────── */
.documentos { display: grid; gap: .9rem; }

.doc {
  position: relative;   /* ancla del velo .doc-cargando */
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1rem;
  background: var(--panel);
  transition: border-color var(--t), background var(--t);
}

/* ── Velo de "subiendo" ───────────────────────────────────────────
   Con datos móviles un PDF de 2 MB tarda varios segundos. Sin señal de
   vida la gente le pica otra vez o recarga a media petición y pierde el
   archivo, así que el velo además tapa el control mientras dura. */
.doc-cargando {
  display: none;
  position: absolute; inset: 0; z-index: 2;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .97);
  flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 1rem; text-align: center;
}
.doc.subiendo .doc-cargando { display: flex; }
.doc-cargando img {
  width: 48px; height: 48px;
  animation: girar-flor 1.4s linear infinite;
}
.doc-cargando strong { display: block; color: var(--guinda); font-size: 1rem; }
.doc-cargando span   { display: block; color: var(--muted); font-size: .85rem; margin-top: .15rem; }

@keyframes girar-flor { to { transform: rotate(360deg); } }

/* Quien activó "reducir movimiento" en su teléfono no ve el giro: la flor
   late en su lugar, que comunica lo mismo sin provocar mareo. */
@media (prefers-reduced-motion: reduce) {
  .doc-cargando img { animation: latir-flor 1.6s ease-in-out infinite; }
  @keyframes latir-flor { 50% { opacity: .45; } }
}
.doc.cargado   { border-color: var(--exito-line); background: #f6fef9; }
.doc.rechazado { border-color: var(--error-line); background: #fff7f7; }

.doc-cabeza { display: flex; gap: .75rem; align-items: flex-start; }
.doc-icono {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.25rem;
  background: var(--crema-pale); border: 1px solid var(--line);
}
.doc.cargado .doc-icono   { background: var(--exito-bg); border-color: var(--exito-line); }
.doc.rechazado .doc-icono { background: var(--error-bg); border-color: var(--error-line); }
.doc-titulo { font-weight: 700; font-size: 1rem; line-height: 1.35; }
.doc-ayuda  { font-size: .87rem; color: var(--muted); margin-top: .2rem; }
.doc-archivo {
  font-size: .87rem; color: var(--exito); font-weight: 600;
  margin-top: .5rem; word-break: break-all;
}
.doc-acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }

.subir-etiqueta {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .55rem 1.1rem;
  border-radius: var(--r-sm); border: 2px solid var(--dorado);
  background: var(--panel); color: var(--guinda);
  font-weight: 600; font-size: .95rem; cursor: pointer;
}
.subir-etiqueta:hover { background: var(--crema-pale); }
.subir-etiqueta input[type=file] { display: none; }

.barra-progreso {
  height: 8px; background: var(--line); border-radius: 4px;
  overflow: hidden; margin-top: .6rem; display: none;
}
.barra-progreso.visible { display: block; }
.barra-progreso span { display: block; height: 100%; background: var(--dorado); width: 0; transition: width .2s; }

/* ── Resumen final ────────────────────────────────────────────────── */
.resumen { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.resumen div { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.resumen div:last-child { border-bottom: none; }
.resumen div:nth-child(odd) { background: var(--crema-pale); }
.resumen dt { font-size: .84rem; color: var(--muted); }
.resumen dd { font-weight: 600; }
@media (min-width: 620px) {
  .resumen div { grid-template-columns: 240px 1fr; gap: 1rem; align-items: baseline; }
}

/* ── Casillas de aceptación ───────────────────────────────────────── */
.casilla {
  display: flex; gap: .8rem; align-items: flex-start;
  border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: 1rem; cursor: pointer; margin-top: 1rem;
  background: var(--panel); transition: border-color var(--t), background var(--t);
}
.casilla:hover { border-color: var(--dorado); }
.casilla input[type=checkbox] {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 2px;
  accent-color: var(--guinda); cursor: pointer;
}
.casilla.marcada { border-color: var(--exito-line); background: #f6fef9; }
.casilla .texto { font-size: .95rem; }

/* ── Etiquetas de estatus ─────────────────────────────────────────── */
.etiqueta {
  display: inline-block; padding: .25rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.etiqueta.gris     { background: #e8e2e4; color: #46333a; }
.etiqueta.azul     { background: var(--info-bg);  color: var(--info); }
.etiqueta.amarillo { background: var(--aviso-bg); color: var(--aviso); }
.etiqueta.verde    { background: var(--exito-bg); color: var(--exito); }
.etiqueta.rojo     { background: var(--error-bg); color: var(--error); }
.etiqueta.dorado   { background: var(--crema);    color: #5a4212; }

/* ── Utilidades ───────────────────────────────────────────────────── */
.oculto { display: none !important; }
.centrado { text-align: center; }
.muted { color: var(--muted); }
.pequeno { font-size: .88rem; }
.mt { margin-top: 1rem; }
.mt-2 { margin-top: 1.5rem; }
.mb { margin-bottom: 1rem; }

.cargando { display: inline-block; width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.35);
            border-top-color: #fff; border-radius: 50%; animation: giro .7s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

.velo {
  position: fixed; inset: 0; background: rgba(35,16,24,.55);
  display: none; place-items: center; z-index: 100; padding: 1rem;
}
.velo.visible { display: grid; }
.velo .caja {
  background: var(--panel); border-radius: var(--r); padding: 1.5rem;
  max-width: 620px; width: 100%; max-height: 88vh; overflow-y: auto;
  box-shadow: var(--sh-md);
}

/* Pie institucional.
   Va acotado a <footer> a propósito: los textos legales usan <p class="pie">
   para la leyenda que va bajo la firma, y sin esta restricción heredaban el
   fondo guinda del pie de página, dejando ese texto ilegible dentro de la
   carta. */
footer.pie {
  background: var(--guinda-xdark); color: var(--crema-light);
  padding: 1.5rem 1rem; margin-top: 2rem; font-size: .88rem; text-align: center;
}
footer.pie a { color: var(--crema); }
footer.pie .separador { opacity: .45; margin: 0 .5rem; }

@media print {
  .barra-superior, .franja-dorada, .pasos, .acciones, .pie, .btn { display: none !important; }
  .hoja { max-height: none; overflow: visible; border: none; box-shadow: none; }
  body { background: #fff; }
}