/* ==========================================================================
   Tablero de Conformación de Expedientes — MIDES / Mesa Técnica
   Sistema de diseño. Todo el color y la tipografía vive aquí.
   Paleta tomada del expediente físico: papel oficio, folder manila,
   tinta de sello, lápiz de foliado.
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------------- */
  --papel:        #EDE6D6;  /* hoja oficio */
  --papel-alto:   #F7F2E6;  /* hoja bajo la luz: tarjetas */
  --papel-bajo:   #E0D6BE;  /* sombra de pliego */
  --folder:       #D3C09A;  /* pestaña de folder manila */
  --tinta:        #182955;  /* azul marino institucional, tomado del logo */
  --tinta-media:  #4A5875;
  --tinta-tenue:  #8A90A0;
  --celeste:      #4A97D2;  /* acento institucional, del filete del logo */

  --sello:        #4A3F86;  /* tinta violeta de sello de hule: en mesa técnica */
  --oxido:        #AE3327;  /* lápiz rojo de foliado: atrasado */
  --ambar:        #BE8214;  /* en proceso */
  --olivo:        #4E6B36;  /* conforme / listo para oficio */

  /* --- Tipografía -------------------------------------------------------- */
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --texto:   'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --dato:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* --- Retícula ---------------------------------------------------------- */
  --linea: 1px solid rgba(24, 41, 85, 0.16);
  --linea-fuerte: 1.5px solid var(--tinta);
  --r: 2px;
  --sombra: 0 1px 0 rgba(24,41,85,.06), 0 6px 18px -12px rgba(24,41,85,.35);
}

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

html {
  /* Escala fluida: el mismo archivo se lee en un celular y en una TV de 65". */
  font-size: clamp(13px, 0.78vw, 26px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.45;
  /* Textura de papel: trama de puntos muy tenue, sin imágenes externas. */
  background-image:
    radial-gradient(rgba(24,41,85,.035) 1px, transparent 1px),
    radial-gradient(rgba(24,41,85,.025) 1px, transparent 1px);
  background-size: 14px 14px, 14px 14px;
  background-position: 0 0, 7px 7px;
}

/* --- Tipografía de servicio ----------------------------------------------- */

.rotulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.titulo {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0;
}

.cifra {
  font-family: var(--dato);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* --- Encabezado institucional --------------------------------------------- */

.marca {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}

/* El logo ya dice «Ministerio de Desarrollo Social»: al lado solo va la
   dependencia, nunca el nombre del ministerio repetido. */
.marca__logo {
  height: 2.6rem;
  width: auto;
  flex: none;
  display: block;
}

.marca__filete {
  width: 2px;
  align-self: stretch;
  background: var(--celeste);
  flex: none;
}

.marca__linea1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.1;
}

.marca__linea2 {
  font-size: .72rem;
  color: var(--tinta-media);
  line-height: 1.2;
}

/* --- Folio: la unidad visual del sistema ---------------------------------- */
/* Cada expediente es un folio. Tres estados, tres tintas. */

.folios {
  display: flex;
  flex-wrap: wrap;
  gap: .22em;
  align-content: center;
}

.folio {
  width: .82em;
  height: 1.15em;
  border-radius: 1px;
  border: 1px solid rgba(24,41,85,.42);
  background: transparent;
  position: relative;
  flex: none;
}

.folio--mesa {
  background: var(--sello);
  border-color: var(--sello);
}

.folio--listo {
  background: var(--olivo);
  border-color: var(--olivo);
}

/* La marca del sello: cuando un folio queda listo, se estampa. */
.folio--sellado {
  animation: sellar .5s cubic-bezier(.2,1.4,.4,1) both;
}

@keyframes sellar {
  0%   { transform: scale(2.1) rotate(-7deg); opacity: 0; }
  55%  { transform: scale(.92) rotate(1deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0);       opacity: 1; }
}

/* --- Barra de avance ------------------------------------------------------ */

.barra {
  height: .5rem;
  background: rgba(24,41,85,.1);
  border-radius: 99px;
  overflow: hidden;
  display: flex;
}

.barra__seg { height: 100%; transition: width .6s cubic-bezier(.3,.8,.3,1); }
.barra__seg--listo { background: var(--olivo); }
.barra__seg--mesa  { background: var(--sello); }
.barra__seg--falta { background: var(--oxido); opacity: .22; }

/* --- Controles ------------------------------------------------------------ */

.boton {
  font-family: var(--display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--papel-alto);
  background: var(--tinta);
  border: 1.5px solid var(--tinta);
  border-radius: var(--r);
  padding: .55em 1.1em;
  cursor: pointer;
  transition: background .15s, color .15s, transform .06s;
}
.boton:hover { background: var(--sello); border-color: var(--sello); }
.boton:active { transform: translateY(1px); }
.boton--claro { background: transparent; color: var(--tinta); }
.boton--claro:hover { background: var(--tinta); color: var(--papel-alto); }
.boton--riesgo { background: var(--oxido); border-color: var(--oxido); }
.boton--riesgo:hover { background: #8C271D; border-color: #8C271D; }
.boton:disabled { opacity: .4; cursor: not-allowed; }

.campo {
  font-family: var(--dato);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  background: var(--papel-alto);
  border: var(--linea);
  border-bottom: var(--linea-fuerte);
  border-radius: var(--r) var(--r) 0 0;
  padding: .5em .6em;
  width: 100%;
}
.campo:focus-visible { outline: 2px solid var(--sello); outline-offset: 1px; }

label.etiqueta {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-media);
  margin-bottom: .3em;
}

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

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

.pliego {
  background: var(--papel-alto);
  border: var(--linea);
  border-top: 3px solid var(--folder);
  border-radius: var(--r);
  box-shadow: var(--sombra);
}

/* --- Señales de estado ---------------------------------------------------- */

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--display);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3em .6em;
  border-radius: 99px;
  border: 1px solid currentColor;
}
.pastilla--vivo   { color: var(--olivo); }
.pastilla--espera { color: var(--ambar); }
.pastilla--falla  { color: var(--oxido); }
.pastilla--demo   { color: var(--papel-alto); background: var(--oxido); border-color: var(--oxido); }

.punto {
  width: .5em; height: .5em; border-radius: 50%;
  background: currentColor;
}
.punto--latido { animation: latir 2s ease-in-out infinite; }
@keyframes latir { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* --- Aviso --------------------------------------------------------------- */

.aviso {
  border-left: 3px solid var(--ambar);
  background: rgba(190,130,20,.09);
  padding: .7em .9em;
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .85rem;
}
.aviso--falla { border-color: var(--oxido); background: rgba(174,51,39,.09); }
.aviso--bien  { border-color: var(--olivo); background: rgba(78,107,54,.09); }

/* --- Tabla de datos ------------------------------------------------------- */

table.datos { width: 100%; border-collapse: collapse; }
table.datos th {
  font-family: var(--display);
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-media);
  text-align: left;
  padding: .5em .6em;
  border-bottom: var(--linea-fuerte);
  white-space: nowrap;
}
table.datos td {
  padding: .5em .6em;
  border-bottom: var(--linea);
  font-size: .85rem;
  vertical-align: middle;
}
table.datos tbody tr:hover { background: rgba(211,192,154,.18); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}