/* =========================================================================
   MÓDULO AUDITORÍA CIUDADANA — marioleal.mx
   Tokens de marca consistentes con el resto del sitio.
   ========================================================================= */

:root {
  /* Identidad — exactos del sistema de marca */
  --azul:        #1C3A5C;
  --azul-2:      #2A4D74;
  --azul-3:      #0F2440;
  --dorado:      #C9A84C;
  --dorado-2:    #B89438;
  --rojo:        #B23A3A;
  --verde:       #3F7D58;
  --morado:      #5C4A8C;

  --tinta:       #11151C;
  --tinta-2:     #2A3140;
  --gris-1:      #5C6470;
  --gris-2:      #99A1AD;
  --gris-3:      #D6DAE0;
  --papel:       #F6F4EE;   /* fondo cálido — evita el blanco AI genérico */
  --papel-2:     #FBFAF5;
  --hueso:       #ECE7D8;

  /* Tipografía */
  --f-display:   'Montserrat', system-ui, sans-serif;
  --f-body:      'Open Sans', system-ui, sans-serif;
  --f-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* Espaciado */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;   --space-7: 3rem;   --space-8: 4rem;

  --r-sm: 2px; --r-md: 4px; --r-lg: 8px;
  --shadow-card: 0 1px 0 rgba(28,58,92,.06), 0 8px 24px -16px rgba(28,58,92,.18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); text-decoration: none; transition: color .15s; }
a:hover { color: var(--dorado-2); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- HEADER ----------------------------------------------------- */

.site-header {
  background: var(--azul-3);
  color: var(--papel-2);
  border-bottom: 3px solid var(--dorado);
}
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
}
.site-header__brand {
  color: var(--papel-2);
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: .08em;
  display: flex; align-items: baseline; gap: var(--space-3);
}
.brand-mark { font-size: 1.05rem; }
.brand-tag  { font-weight: 500; color: var(--dorado); font-size: .8rem; letter-spacing: .12em; }

.site-header__nav {
  display: flex; gap: var(--space-5);
  font-family: var(--f-display);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
}
.site-header__nav a {
  color: var(--papel-2);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] {
  color: var(--dorado);
  border-bottom-color: var(--dorado);
}

/* ---------- HERO ------------------------------------------------------- */

.hero {
  background: linear-gradient(180deg, var(--papel-2) 0%, var(--papel) 100%);
  position: relative;
  overflow: hidden;
}
.hero__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-7);
}
.hero__eyebrow {
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dorado-2);
  margin: 0 0 var(--space-4);
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--azul-3);
  margin: 0 0 var(--space-5);
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--dorado-2);
}
.hero__lede {
  max-width: 60ch;
  font-size: 1.075rem;
  color: var(--tinta-2);
  margin: 0 0 var(--space-5);
}
.hero__meta {
  font-family: var(--f-mono);
  font-size: .82rem;
  color: var(--gris-1);
  margin: 0;
}
.hero__meta strong { color: var(--azul); font-weight: 600; }

.hero__rule {
  height: 6px;
  background: linear-gradient(90deg,
    var(--dorado) 0% 14.28%,
    var(--azul) 14.28% 28.57%,
    var(--rojo) 28.57% 42.85%,
    var(--verde) 42.85% 57.14%,
    var(--morado) 57.14% 71.42%,
    var(--azul-3) 71.42% 85.71%,
    var(--dorado-2) 85.71% 100%);
}

/* ---------- KPIs ------------------------------------------------------- */

.kpis {
  background: var(--azul-3);
  color: var(--papel-2);
  padding: var(--space-7) var(--space-5);
}
.kpis__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}
.kpi {
  background: var(--azul-3);
  padding: var(--space-5) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.kpi__num {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--dorado);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi__label {
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-3);
}
.kpi[data-kpi="evasivos"] .kpi__num { color: var(--rojo); }
.kpi[data-kpi="respondidos"] .kpi__num { color: var(--verde); }

@media (max-width: 980px) {
  .kpis__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .kpis__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- FILTROS ---------------------------------------------------- */

.filtros {
  background: var(--papel-2);
  border-bottom: 1px solid var(--gris-3);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(120%) blur(8px);
}
.filtros__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.filtros__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.filtros__search {
  font-family: var(--f-body);
  font-size: .92rem;
  padding: .55rem .8rem;
  border: 1px solid var(--gris-3);
  border-radius: var(--r-md);
  background: var(--papel);
  min-width: 280px;
  color: var(--tinta);
  transition: border-color .15s, box-shadow .15s;
}
.filtros__search:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(28,58,92,.12);
}

.chip {
  font-family: var(--f-display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .4rem .75rem;
  border: 1px solid var(--gris-3);
  background: transparent;
  color: var(--gris-1);
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
}
.chip:hover { border-color: var(--azul); color: var(--azul); }
.chip[aria-pressed="true"] {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--papel-2);
}
.chip--state[aria-pressed="true"] { background: var(--azul-3); border-color: var(--azul-3); }
.chip--prio[aria-pressed="true"] { background: var(--dorado-2); border-color: var(--dorado-2); }

/* ---------- TABLA ------------------------------------------------------ */

.tabla-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}
.tabla-resumen {
  font-family: var(--f-mono);
  font-size: .82rem;
  color: var(--gris-1);
  margin-bottom: var(--space-4);
}
.tabla-resumen strong { color: var(--azul); }

.estado-carga {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--f-mono);
  color: var(--gris-1);
  padding: var(--space-6);
}
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--gris-3);
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.estado-vacio {
  text-align: center;
  padding: var(--space-7);
  color: var(--gris-1);
  font-style: italic;
}
.btn-link {
  background: none; border: none;
  color: var(--azul); cursor: pointer;
  font-family: var(--f-display);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--dorado);
  text-underline-offset: 4px;
}

.tabla-oficios {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel-2);
  border: 1px solid var(--gris-3);
  font-size: .92rem;
}
.tabla-oficios thead {
  background: var(--azul-3);
  color: var(--papel-2);
}
.tabla-oficios th {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--dorado);
}
.tabla-oficios td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--gris-3);
  vertical-align: top;
}
.tabla-oficios tbody tr {
  transition: background .12s;
}
.tabla-oficios tbody tr:hover {
  background: var(--hueso);
}

.col-folio    { width: 100px; }
.col-fecha    { width: 110px; }
.col-folio-pnt{ width: 130px; }
.col-estado   { width: 150px; }
.col-docs     { width: 180px; }

.folio-badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: .82rem;
  padding: .25rem .55rem;
  border-radius: var(--r-sm);
  background: var(--hueso);
  color: var(--azul-3);
  border: 1px solid var(--gris-3);
}
.folio-badge--den {
  background: var(--azul-3);
  color: var(--dorado);
  border-color: var(--azul-3);
}

.tema {
  font-weight: 600;
  color: var(--tinta);
  margin: 0 0 var(--space-1);
  line-height: 1.35;
}
.tema--placeholder {
  color: var(--gris-1);
  font-weight: 400;
  font-style: italic;
}
.prioridad-tag {
  font-family: var(--f-display);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-1);
}
.prioridad-tag--inmediata { color: var(--rojo); }
.prioridad-tag--alta      { color: var(--dorado-2); }

.dest {
  color: var(--tinta-2);
  font-size: .88rem;
  line-height: 1.4;
}

.fecha-doc {
  font-family: var(--f-mono);
  font-size: .82rem;
  color: var(--tinta-2);
}
.fecha-secundaria {
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--gris-1);
  display: block;
  margin-top: 2px;
}

.folio-pnt {
  font-family: var(--f-mono);
  font-size: .82rem;
  color: var(--azul);
}
.folio-pnt--vacio { color: var(--gris-2); }

/* Estados — pills */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 999px;
  border: 1px solid;
}
.estado::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.estado--PENDIENTE        { color: var(--gris-1); border-color: var(--gris-3); background: var(--hueso); }
.estado--ENVIADO          { color: var(--azul);   border-color: var(--azul);   background: rgba(28,58,92,.08); }
.estado--RESPONDIDO_OK    { color: var(--verde);  border-color: var(--verde);  background: rgba(63,125,88,.10); }
.estado--EVASIVO          { color: var(--dorado-2); border-color: var(--dorado-2); background: rgba(184,148,56,.10); }
.estado--SIN_RESPUESTA    { color: var(--rojo);   border-color: var(--rojo);   background: rgba(178,58,58,.10); }
.estado--RECURSO_REVISION { color: var(--morado); border-color: var(--morado); background: rgba(92,74,140,.10); }

.docs {
  display: flex; flex-direction: column; gap: 4px;
}
.doc-link {
  font-family: var(--f-display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--azul);
  display: inline-flex; align-items: center; gap: 4px;
}
.doc-link::before {
  content: '↓';
  font-size: .9em;
  color: var(--dorado);
}
.doc-link--vacio {
  color: var(--gris-2);
  cursor: not-allowed;
}
.doc-link--vacio::before { color: var(--gris-3); }

/* ---------- CARDS MOBILE ----------------------------------------------- */

.cards-mobile {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.card-oficio {
  background: var(--papel-2);
  border: 1px solid var(--gris-3);
  border-left: 4px solid var(--dorado);
  padding: var(--space-4);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.card-oficio__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.card-oficio__body  { margin-bottom: var(--space-3); }
.card-oficio__meta  {
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--gris-1);
  margin-bottom: var(--space-2);
}
.card-oficio__meta b { color: var(--azul); font-weight: 600; }
.card-oficio__docs  { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 860px) {
  .tabla-oficios { display: none; }
  .cards-mobile  { display: flex !important; }
}
@media (min-width: 861px) {
  .cards-mobile  { display: none !important; }
}

/* ---------- METODOLOGÍA ------------------------------------------------ */

.metodologia {
  background: var(--azul-3);
  color: var(--papel-2);
  padding: var(--space-8) var(--space-5);
}
.metodologia__inner {
  max-width: 880px;
  margin: 0 auto;
}
.metodologia h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--dorado);
  margin: 0 0 var(--space-5);
  letter-spacing: -.01em;
}
.metodologia ol {
  padding-left: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.metodologia li {
  line-height: 1.65;
  color: var(--gris-3);
}
.metodologia li strong { color: var(--papel-2); }
.metodologia li em { color: var(--dorado); font-style: normal; }
.metodologia__autor {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .88rem;
  color: var(--gris-3);
  font-style: italic;
}

/* ---------- FOOTER ----------------------------------------------------- */

.site-footer {
  background: var(--tinta);
  color: var(--gris-2);
  text-align: center;
  padding: var(--space-5);
  font-size: .82rem;
}

/* ---------- ANIMACIÓN DE ENTRADA --------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .tabla-oficios tbody tr,
  .card-oficio {
    animation: fadeUp .45s ease both;
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}