/* ============================================================================
   Sistema de Requisiciones · CONALEP Morelos
   Identidad visual "Expediente": el lenguaje del formato oficial impreso
   (folios, códigos, reglas finas, sellos) llevado a una interfaz limpia.

   Tipografías
     Archivo        -> títulos y cifras (voz institucional, señalética)
     Public Sans    -> textos y controles (legibilidad de trámite)
     IBM Plex Mono  -> folios, códigos y etiquetas de dato

   Paleta
     --tinta        #0B211C  texto principal (verde casi negro)
     --pino         #0F6B58  verde institucional CONALEP
     --pino-hondo   #063E33  fondos profundos y acentos
     --papel        #F6F8F6  fondo de página
     --linea        #E3E9E6  reglas finas
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Public+Sans:wght@400;500;600&display=swap');

:root{
  /* Superficies y tinta */
  --tinta:#0B211C;
  --tinta-70:#4A605A;
  --tinta-45:#64786F;   /* 4.7:1 sobre blanco: las etiquetas mono son texto, no adorno */
  --papel:#F6F8F6;
  --nube:#FFFFFF;
  --linea:#E3E9E6;
  --linea-fuerte:#CFD9D5;

  /* Verde institucional */
  --pino:#0F6B58;
  --pino-hondo:#063E33;
  --pino-claro:#E4F1EC;
  --pino-tenue:#F1F8F5;

  /* Estatus (en el orden del flujo del expediente) */
  --est-pend:#9A6212;      --est-pend-bg:#FDF4E5;
  --est-rev:#2F5DA8;       --est-rev-bg:#EBF1FB;
  --est-val:#4B3FA7;       --est-val-bg:#EEECFB;
  --est-rech:#B3372F;      --est-rech-bg:#FCEDEB;
  --est-aut:#0F6B58;       --est-aut-bg:#E4F1EC;
  --est-cerr:#4B5B63;      --est-cerr-bg:#EDF1F2;

  /* Tipografía */
  --f-display:'Archivo', 'Segoe UI', system-ui, sans-serif;
  --f-texto:'Public Sans', 'Segoe UI', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* Profundidad: sombras muy contenidas, la estructura la dan las reglas */
  --sombra-1:0 1px 2px rgba(6,62,51,.05);
  --sombra-2:0 4px 16px -6px rgba(6,62,51,.14), 0 1px 3px rgba(6,62,51,.06);
  --sombra-3:0 24px 60px -20px rgba(6,62,51,.28);

  --radio:14px;
  --radio-sm:9px;

  /* Ancho del area de trabajo. El panel de revisores lleva una columna mas
     (Solicitante), asi que el expediente ocupa el ancho util de la pantalla
     en lugar de comprimirse y obligar a desplazarse en horizontal.
     Para usar TODO el ancho disponible cambia este valor por: none */
  --ancho-max:1720px;
}

*{ box-sizing:border-box; }

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

body{
  font-family:var(--f-texto);
  font-size:.95rem;
  color:var(--tinta);
  background:var(--papel);
  margin:0;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{ font-family:var(--f-display); letter-spacing:-.02em; }

::selection{ background:var(--pino-claro); color:var(--pino-hondo); }

/* Foco visible y consistente en todo el sistema */
:focus-visible{
  outline:2px solid var(--pino);
  outline-offset:2px;
  border-radius:4px;
}

/* ============================================================================
   Etiquetas de dato (mono, versalitas): el sello del "expediente"
   ========================================================================== */
.etiqueta{
  font-family:var(--f-mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tinta-45);
}

/* ============================================================================
   ACCESO
   Pantalla partida: a la izquierda la identidad, a la derecha el trámite.
   ========================================================================== */
.acceso{ min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; }

.acceso-marca{
  position:relative;
  background:var(--pino-hondo);
  color:#fff;
  padding:3.5rem 3.5rem 2.5rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
/* Trama de ondas: eco del isotipo CONALEP, al 6% de opacidad */
.acceso-marca::before{
  content:'';
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cpath d='M-10 40 C 20 12, 50 68, 80 40 S 140 12, 170 40' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='2.5'/%3E%3C/svg%3E");
  background-size:160px 80px;
  mask-image:linear-gradient(160deg, #000 10%, transparent 85%);
  -webkit-mask-image:linear-gradient(160deg, #000 10%, transparent 85%);
}
.acceso-marca > *{ position:relative; z-index:1; }

/* align-self evita que el contenedor flex estire la imagen a todo el ancho */
.acceso-marca .logo{
  height:58px; width:auto; flex:none; align-self:flex-start;
  filter:brightness(0) invert(1); opacity:.95;
}

.acceso-marca h1{
  font-size:clamp(2rem, 3.6vw, 3.1rem);
  font-weight:600;
  line-height:1.02;
  margin:0 0 1rem;
  max-width:11ch;
}
.acceso-marca h1 em{
  display:block;
  font-style:normal;
  font-weight:400;
  color:#8FD3BE;
}
.acceso-marca .lema{
  font-size:1rem;
  color:rgba(255,255,255,.72);
  max-width:34ch;
  line-height:1.55;
  margin:0;
}
.acceso-marca .pie{
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.1em;
  color:rgba(255,255,255,.42);
  text-transform:uppercase;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:1rem;
}

.acceso-forma{
  background:var(--nube);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem 2rem;
}
.acceso-forma .caja{ width:100%; max-width:370px; }
.acceso-forma h2{
  font-size:1.5rem;
  font-weight:600;
  margin:.35rem 0 .4rem;
}
.acceso-forma .ayuda{
  color:var(--tinta-70);
  font-size:.9rem;
  margin-bottom:2rem;
}

/* Campos con etiqueta flotante */
.campo{ position:relative; margin-bottom:1rem; }
.campo input{
  width:100%;
  font-family:var(--f-texto);
  font-size:.95rem;
  color:var(--tinta);
  background:var(--nube);
  border:1px solid var(--linea-fuerte);
  border-radius:var(--radio-sm);
  padding:1.5rem .9rem .55rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.campo input:hover{ border-color:#B4C4BE; }
.campo input:focus{
  outline:none;
  border-color:var(--pino);
  box-shadow:0 0 0 3px rgba(15,107,88,.13);
}
.campo label{
  position:absolute;
  left:.92rem; top:.95rem;
  font-size:.95rem;
  color:var(--tinta-45);
  pointer-events:none;
  transition:all .16s ease;
}
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label{
  top:.42rem;
  font-family:var(--f-mono);
  font-size:.63rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pino);
}

/* ============================================================================
   BOTONES
   ========================================================================== */
.btn{
  font-family:var(--f-texto);
  font-weight:500;
  border-radius:var(--radio-sm);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-verde{
  background:var(--pino);
  border:1px solid var(--pino);
  color:#fff;
  padding:.5rem 1.05rem;
  box-shadow:var(--sombra-1);
}
.btn-verde:hover,.btn-verde:focus{ background:var(--pino-hondo); border-color:var(--pino-hondo); color:#fff; }

.btn-outline-verde{
  color:var(--pino);
  border:1px solid var(--linea-fuerte);
  background:var(--nube);
  padding:.42rem .85rem;
}
.btn-outline-verde:hover{ background:var(--pino-claro); border-color:var(--pino); color:var(--pino-hondo); }
.btn-outline-verde.btn-sm,.btn-verde.btn-sm{ padding:.3rem .72rem; font-size:.8rem; }

.btn-outline-secondary{
  color:var(--tinta-70);
  border:1px solid var(--linea-fuerte);
  background:var(--nube);
}
.btn-outline-secondary:hover{ background:var(--papel); border-color:var(--linea-fuerte); color:var(--tinta); }

/* Validar y cerrar heredan el color de su estatus: la accion y su resultado
   se reconocen con el mismo tono en toda la pantalla. */
.btn-validar{
  background:var(--est-val); border:1px solid var(--est-val); color:#fff;
  padding:.5rem 1.05rem;
}
.btn-validar:hover,.btn-validar:focus{ background:#3C3289; border-color:#3C3289; color:#fff; }

.btn-cerrar-req{
  background:var(--est-cerr); border:1px solid var(--est-cerr); color:#fff;
  padding:.5rem 1.05rem;
}
.btn-cerrar-req:hover,.btn-cerrar-req:focus{ background:#3A474D; border-color:#3A474D; color:#fff; }

.btn-bloque{ width:100%; padding:.78rem; font-size:.98rem; }

/* ============================================================================
   BARRA SUPERIOR
   ========================================================================== */
.topbar{
  position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--linea);
}
.topbar .interior{
  width:100%; max-width:var(--ancho-max); margin:0 auto;
  padding:.7rem clamp(1rem, 2vw, 2.25rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.topbar img{ height:36px; width:auto; }

.marca{ display:flex; align-items:center; gap:.85rem; min-width:0; }
.marca .divisoria{ width:1px; height:30px; background:var(--linea); }
.marca .nombre{ font-family:var(--f-display); font-weight:600; font-size:.98rem; line-height:1.15; }
.marca .sub{
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--tinta-45);
}

.usuario{ display:flex; align-items:center; gap:.75rem; }
.usuario .datos{ text-align:right; line-height:1.2; min-width:0; }
.usuario .nombre{ font-weight:600; font-size:.86rem; }
.usuario .cargo{
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-45);
}
.avatar{
  width:38px; height:38px; flex:none;
  border-radius:50%;
  background:var(--pino-hondo); color:#fff;
  display:grid; place-items:center;
  font-family:var(--f-display); font-weight:600; font-size:.82rem;
  letter-spacing:.02em;
}
.btn-salir{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--linea); border-radius:50%;
  background:var(--nube); color:var(--tinta-70);
  font-size:1rem; text-decoration:none;
  transition:all .15s ease;
}
.btn-salir:hover{ background:var(--pino-claro); border-color:var(--pino); color:var(--pino-hondo); }

/* ============================================================================
   ENCABEZADO DE PÁGINA
   ========================================================================== */
.contenido{
  width:100%; max-width:var(--ancho-max); margin:0 auto;
  padding:2.4rem clamp(1rem, 2vw, 2.25rem) 4rem;
}

.cabecera{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:flex-end; justify-content:space-between;
  margin-bottom:1.8rem;
}
.cabecera h1{
  font-size:clamp(1.75rem, 3vw, 2.35rem);
  font-weight:600;
  margin:.3rem 0 0;
  line-height:1.05;
}
.cabecera .alcance{ color:var(--tinta-45); font-weight:400; }

/* ============================================================================
   TIRA DE ESTATUS — el elemento distintivo
   Cada bloque es a la vez cifra y filtro: al tocarlo, la tabla se acota.
   ========================================================================== */
.tira{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1px;
  background:var(--linea);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  overflow:hidden;
}
.tira button{
  appearance:none; border:0; text-align:left;
  background:var(--nube);
  padding:1.05rem 1.2rem 1rem;
  cursor:pointer;
  position:relative;
  transition:background-color .16s ease;
}
.tira button:hover{ background:var(--pino-tenue); }
.tira button::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:transparent; transition:background-color .16s ease;
}
.tira .cifra{
  font-family:var(--f-display);
  font-size:2rem; font-weight:600; line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  display:block; margin-bottom:.4rem;
}
.tira .rotulo{
  font-family:var(--f-mono);
  font-size:.65rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-45);
  display:flex; align-items:center; gap:.42rem;
}
.tira .punto{ width:6px; height:6px; border-radius:50%; flex:none; }

.tira button[data-estatus=""]           .punto{ background:var(--tinta-45); }
.tira button[data-estatus="Pendiente"]  .punto{ background:var(--est-pend); }
.tira button[data-estatus="En revision"] .punto{ background:var(--est-rev); }
.tira button[data-estatus="Validada"]   .punto{ background:var(--est-val); }
.tira button[data-estatus="Autorizada"] .punto{ background:var(--est-aut); }
.tira button[data-estatus="Cerrada"]    .punto{ background:var(--est-cerr); }
.tira button[data-estatus="Rechazada"]  .punto{ background:var(--est-rech); }

.tira button.activo{ background:var(--pino-tenue); }
.tira button.activo::after{ background:var(--pino); }
.tira button.activo .rotulo{ color:var(--pino-hondo); }
.tira button.activo .cifra{ color:var(--pino-hondo); }

/* ============================================================================
   RESUMEN PLEGABLE (envuelve la tira de cifras)
   Disponible para los tres roles; el estado se recuerda en el navegador.
   ========================================================================== */
.resumen{ margin-bottom:1.5rem; }

.resumen-cab{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:.65rem;
}

.resumen-toggle{
  appearance:none; border:0; background:none; padding:.2rem 0;
  display:inline-flex; align-items:center; gap:.6rem;
  cursor:pointer; color:var(--tinta-45);
  transition:color .16s ease;
}
.resumen-toggle:hover{ color:var(--pino-hondo); }
.resumen-toggle:focus-visible{
  outline:2px solid var(--pino); outline-offset:3px; border-radius:var(--radio-sm);
}
.resumen-toggle .flecha{ font-size:.78rem; transition:transform .22s ease; }
.resumen-toggle .titulo{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase;
}
.resumen-toggle .etiqueta-accion{
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pino);
  border:1px solid var(--linea-fuerte); border-radius:999px;
  padding:.14rem .6rem; line-height:1.4;
}

.resumen-total{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-45);
  white-space:nowrap;
}
.resumen-total [data-cifra]{ color:var(--tinta); font-weight:600; }

/* Plegado suave sin alturas fijas: la fila del grid pasa de 1fr a 0fr. */
.resumen-cuerpo{
  display:grid; grid-template-rows:1fr;
  transition:grid-template-rows .24s ease, opacity .2s ease;
}
.resumen-cuerpo > *{ min-height:0; overflow:hidden; }
.resumen.plegado .resumen-cuerpo{ grid-template-rows:0fr; opacity:0; }
.resumen.plegado .resumen-toggle .flecha{ transform:rotate(-90deg); }

/* Antes de que el JS decida, se evita el parpadeo del plegado inicial. */
.resumen.sin-animacion .resumen-cuerpo{ transition:none; }

/* ============================================================================
   PANEL Y FILTROS
   ========================================================================== */
.panel{
  background:var(--nube);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra-1);
  overflow:hidden;
}

.filtros{
  display:flex; flex-wrap:wrap; gap:1.15rem; align-items:flex-end;
  padding:1.15rem 1.4rem;
  border-bottom:1px solid var(--linea);
}
.filtros .filtro-item{ min-width:200px; }
.filtros .filtro-item.crece{ margin-left:auto; min-width:0; }
.filtros label{ display:block; margin-bottom:.35rem; }
.filtros .form-select{
  font-family:var(--f-texto);
  font-size:.88rem;
  color:var(--tinta);
  border:1px solid var(--linea-fuerte);
  border-radius:var(--radio-sm);
  padding:.45rem 2rem .45rem .7rem;
  background-color:var(--nube);
}
.filtros .form-select:focus{
  border-color:var(--pino);
  box-shadow:0 0 0 3px rgba(15,107,88,.13);
}

/* ============================================================================
   TABLA DE REQUISICIONES
   ========================================================================== */
/* Anchos gobernados por el <colgroup>: la justificacion absorbe el espacio
   sobrante y ninguna columna empuja la tabla fuera del panel. */
.tabla-req{ width:100%; margin:0; border-collapse:collapse; table-layout:fixed; min-width:860px; }
.tabla-req.con-solicitante{ min-width:1090px; }
.tabla-req .c-folio      { width:152px; }   /* REQ-2026-00007 sin partirse */
.tabla-req .c-justif     { width:auto;  }   /* absorbe todo el espacio libre */
.tabla-req .c-fecha      { width:116px; }
.tabla-req .c-partidas   { width:96px;  }
.tabla-req .c-solicitante{ width:206px; }
.tabla-req .c-estatus    { width:158px; }
.tabla-req .c-acciones   { width:172px; }

.tabla-req thead th{
  font-family:var(--f-mono);
  font-size:.65rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-45);
  background:var(--nube);
  border-bottom:1px solid var(--linea);
  padding:.85rem 1.1rem;
  white-space:nowrap;
}
.tabla-req tbody td{
  font-size:.9rem;
  vertical-align:middle;
  border-bottom:1px solid var(--linea);
  padding:.95rem 1.1rem;
  background:transparent;
}
.tabla-req tbody tr{ transition:background-color .14s ease; }
.tabla-req tbody tr:hover{ background:var(--pino-tenue); }
.tabla-req tbody tr:last-child td{ border-bottom:0; }

/* Riel de color al inicio de la fila: el estatus se lee antes que el texto */
.tabla-req tbody tr[data-estatus] td:first-child{ box-shadow:inset 3px 0 0 var(--linea); }
.tabla-req tbody tr[data-estatus="Pendiente"]   td:first-child{ box-shadow:inset 3px 0 0 var(--est-pend); }
.tabla-req tbody tr[data-estatus="En revision"] td:first-child{ box-shadow:inset 3px 0 0 var(--est-rev); }
.tabla-req tbody tr[data-estatus="Validada"]    td:first-child{ box-shadow:inset 3px 0 0 var(--est-val); }
.tabla-req tbody tr[data-estatus="Rechazada"]   td:first-child{ box-shadow:inset 3px 0 0 var(--est-rech); }
.tabla-req tbody tr[data-estatus="Autorizada"]  td:first-child{ box-shadow:inset 3px 0 0 var(--est-aut); }
.tabla-req tbody tr[data-estatus="Cerrada"]     td:first-child{ box-shadow:inset 3px 0 0 var(--est-cerr); }

/* Folio: el prefijo se atenúa y el consecutivo manda. Firma tipográfica. */
.folio{ font-family:var(--f-mono); font-size:.85rem; white-space:nowrap; }
.folio .pre{ color:var(--tinta-45); font-weight:400; }
.folio .num{ color:var(--tinta); font-weight:600; }

.justif-celda{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--tinta-70);
}
.fecha{ font-family:var(--f-mono); font-size:.82rem; color:var(--tinta-70); white-space:nowrap; }
.num-partidas{ font-family:var(--f-mono); font-size:.85rem; font-variant-numeric:tabular-nums; }

/* El nombre nunca parte la fila en varios renglones: se recorta con puntos */
.solicitante{ min-width:0; }
.solicitante .nom,
.solicitante .uni{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.solicitante .nom{ font-weight:500; line-height:1.3; }
.solicitante .uni{ font-size:.75rem; color:var(--tinta-45); line-height:1.3; }

/* Aparición escalonada al cargar la lista */
.tabla-req tbody tr.entra{ animation:entra .34s cubic-bezier(.22,.7,.3,1) both; }
@keyframes entra{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }

/* ============================================================================
   ESTATUS
   ========================================================================== */
.badge-estatus{
  display:inline-flex; align-items:center; gap:.42rem;
  font-family:var(--f-texto);
  font-size:.75rem; font-weight:600;
  padding:.3rem .68rem .3rem .58rem;
  border-radius:100px;
  white-space:nowrap;
}
.badge-estatus::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.est-Pendiente { background:var(--est-pend-bg); color:var(--est-pend); }
.est-Enrevision{ background:var(--est-rev-bg);  color:var(--est-rev); }
.est-Validada  { background:var(--est-val-bg);  color:var(--est-val); }
.est-Rechazada { background:var(--est-rech-bg); color:var(--est-rech); }
.est-Autorizada{ background:var(--est-aut-bg);  color:var(--est-aut); }
.est-Cerrada   { background:var(--est-cerr-bg); color:var(--est-cerr); }

/* ============================================================================
   ACCIONES
   ========================================================================== */
.acciones{ display:inline-flex; gap:.15rem; }
.btn-accion{
  border:0; background:transparent;
  width:32px; height:32px;
  display:inline-grid; place-items:center;
  border-radius:8px;
  color:var(--tinta-45);
  font-size:1rem; line-height:1;
  cursor:pointer; text-decoration:none;
  transition:background-color .14s ease, color .14s ease;
}
.btn-accion:hover{ background:var(--pino-claro); color:var(--pino-hondo); }
.btn-accion.peligro:hover{ background:var(--est-rech-bg); color:var(--est-rech); }
.btn-accion.exito:hover{ background:var(--est-aut-bg); color:var(--est-aut); }
.btn-accion.valida:hover{ background:var(--est-val-bg); color:var(--est-val); }
.btn-accion.cierre:hover{ background:var(--est-cerr-bg); color:var(--est-cerr); }
.btn-accion.pdf{ color:var(--pino); }

/* ============================================================================
   ESTADO VACÍO — una invitación, no un aviso
   ========================================================================== */
.vacio{ text-align:center; padding:4.5rem 1.5rem !important; }
.vacio .icono{
  width:52px; height:52px; margin:0 auto 1rem;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--pino-tenue); color:var(--pino);
  font-size:1.4rem;
}
.vacio .titulo{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; margin-bottom:.3rem; }
.vacio .texto{ color:var(--tinta-45); font-size:.88rem; }

.cargando{ text-align:center; padding:3.5rem 1.5rem !important; color:var(--tinta-45); font-size:.88rem; }

/* ============================================================================
   VENTANAS MODALES
   ========================================================================== */
.modal-content{
  border:1px solid var(--linea);
  border-radius:var(--radio);
  box-shadow:var(--sombra-3);
  overflow:hidden;
}
.modal-header{
  background:var(--nube);
  border-bottom:1px solid var(--linea);
  padding:1.15rem 1.4rem;
}
.modal-title{ font-family:var(--f-display); font-weight:600; font-size:1.12rem; color:var(--tinta); }
.modal-body{ padding:1.4rem; }
.modal-footer{ background:var(--papel); border-top:1px solid var(--linea); padding:.9rem 1.4rem; }
.modal-backdrop.show{ opacity:.42; }

.form-label{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-45); font-weight:500; margin-bottom:.35rem; }
.form-control, .form-select{
  font-family:var(--f-texto); font-size:.9rem; color:var(--tinta);
  border:1px solid var(--linea-fuerte); border-radius:var(--radio-sm);
}
.form-control:focus,.form-select:focus{
  border-color:var(--pino);
  box-shadow:0 0 0 3px rgba(15,107,88,.13);
}
.form-control[readonly]{ background:var(--papel); color:var(--tinta-70); }
.form-text{ font-size:.76rem; color:var(--tinta-45); }

/* Partidas dentro del formulario: cada una es un renglón del formato */
.partidas-cab{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.6rem;
}
.partida-row{
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:var(--radio-sm);
  padding:.85rem;
  margin-bottom:.55rem;
}
.partida-row .form-label{ font-size:.6rem; }

/* Detalle */
.det-label{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-45); margin-bottom:.15rem; }
.det-valor{ font-weight:500; font-size:.92rem; }
.alerta-rechazo{
  background:var(--est-rech-bg);
  border:1px solid #F2CDC8;
  border-left:3px solid var(--est-rech);
  border-radius:var(--radio-sm);
  padding:.85rem 1rem;
  color:#8C2A24; font-size:.88rem;
}
.alerta-cierre{
  background:var(--est-cerr-bg);
  border:1px solid #D6DEE1;
  border-left:3px solid var(--est-cerr);
  border-radius:var(--radio-sm);
  padding:.85rem 1rem;
  color:#3A474D; font-size:.88rem;
}
.tabla-detalle{ width:100%; border-collapse:collapse; font-size:.86rem; }
.tabla-detalle th{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-45); font-weight:500;
  border-bottom:1px solid var(--linea); padding:.5rem .65rem; text-align:left;
}
.tabla-detalle td{ border-bottom:1px solid var(--linea); padding:.6rem .65rem; }

.alert{ border-radius:var(--radio-sm); font-size:.88rem; border:1px solid transparent; }
.alert-danger{ background:var(--est-rech-bg); border-color:#F2CDC8; color:#8C2A24; }

/* SweetAlert2 al tono del sistema */
.swal2-popup{ font-family:var(--f-texto) !important; border-radius:var(--radio) !important; }
.swal2-title{ font-family:var(--f-display) !important; font-weight:600 !important; color:var(--tinta) !important; }
.swal2-html-container{ color:var(--tinta-70) !important; }
.swal2-styled{ border-radius:var(--radio-sm) !important; font-weight:500 !important; }

/* ============================================================================
   ADAPTACIÓN A PANTALLAS PEQUEÑAS
   La tabla se convierte en tarjetas; cada dato conserva su etiqueta.
   ========================================================================== */
@media (max-width:1200px){
  .tira{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:900px){
  .acceso{ grid-template-columns:1fr; }
  .acceso-marca{ padding:2.25rem 1.75rem; gap:1.75rem; }
  .acceso-marca h1{ font-size:2rem; max-width:none; }
  .acceso-marca .lema{ display:none; }
  .acceso-marca .pie{ display:none; }
  .acceso-forma{ padding:2.5rem 1.5rem 3.5rem; }
}

@media (max-width:768px){
  .contenido{ padding:1.75rem 1rem 3rem; }
  .topbar .interior{ padding:.6rem 1rem; }
  .usuario .datos{ display:none; }
  .marca .divisoria, .marca .textos{ display:none; }

  .tira{ grid-template-columns:repeat(2,1fr); }
  .resumen-total{ display:none; }
  .tira button{ padding:.85rem 1rem; }
  .tira .cifra{ font-size:1.6rem; }

  .filtros{ padding:1rem; }
  .filtros .filtro-item{ min-width:100%; }
  .filtros .filtro-item.crece{ margin-left:0; }

  /* La tabla deja de ser tabla: sin esto el ancho minimo la desborda a la derecha */
  .table-responsive{ overflow:visible; }
  .tabla-req, .tabla-req.con-solicitante{ table-layout:auto; min-width:0; }
  .tabla-req, .tabla-req tbody{ display:block; width:100%; }
  .tabla-req colgroup{ display:none; }
  .tabla-req thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

  /* Solo las filas de datos se vuelven tarjeta; el estado vacío sigue siendo celda */
  .tabla-req tbody tr[data-estatus]{
    display:block;
    border:1px solid var(--linea);
    border-left:3px solid var(--linea);
    border-radius:var(--radio-sm);
    margin:.75rem;
    padding:.35rem 0;
    background:var(--nube);
  }
  .tabla-req tbody tr[data-estatus="Pendiente"]  { border-left-color:var(--est-pend); }
  .tabla-req tbody tr[data-estatus="En revision"]{ border-left-color:var(--est-rev); }
  .tabla-req tbody tr[data-estatus="Validada"]   { border-left-color:var(--est-val); }
  .tabla-req tbody tr[data-estatus="Rechazada"]  { border-left-color:var(--est-rech); }
  .tabla-req tbody tr[data-estatus="Autorizada"] { border-left-color:var(--est-aut); }
  .tabla-req tbody tr[data-estatus="Cerrada"]    { border-left-color:var(--est-cerr); }

  .tabla-req tbody tr[data-estatus] td{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    border-bottom:0; box-shadow:none;
    padding:.42rem 1rem; text-align:right;
  }
  .tabla-req tbody tr[data-estatus] td::before{
    content:attr(data-etq);
    font-family:var(--f-mono); font-size:.62rem; letter-spacing:.11em;
    text-transform:uppercase; color:var(--tinta-45);
    text-align:left; flex:none;
  }
  /* El valor ocupa lo que sobra despues de la etiqueta y se recorta si hace falta */
  .justif-celda,
  .solicitante{ max-width:none; flex:1; min-width:0; text-align:right; }
  .tabla-req tbody tr[data-estatus] td.celda-acciones{ padding-top:.55rem; padding-bottom:.55rem; }
}

/* ============================================================================
   PREFERENCIA DE MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .resumen-cuerpo, .resumen-toggle .flecha{ transition:none; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}