/* =====================================================================
   PLATAFORMA FI · Panel administrativo sobrio (estructura de plantilla
   ElectroKumo) con identidad UAEMEX 2021-2025:
     Verde institucional #2C5234 · Oro #9C8412 · Oro arena #B29E52
   Barra superior 48px, menú lateral blanco 250px con secciones
   colapsables, contenido sobre gris claro, tarjetas blancas radio 8px.
   El oro como texto usa la variante --oro-texto (contraste WCAG 4.5:1).
   ===================================================================== */
:root {
  --verde-900: #2C5234;
  --verde-700: #3E7350;
  --verde-050: #EEF4EF;
  --oro: #9C8412;
  --oro-arena: #B29E52;
  --oro-texto: #6E5D0D;
  --oro-050: #FBF6E3;
  --gris-bg: #F5F5F2;
  --gris-100: #E5E7EB;
  --gris-600: #6B7280;
  --texto: #1F2937;
  --blanco: #FFFFFF;
  --ok: #15803D;
  --alerta: #B45309;
  --error: #B91C1C;
  --radio: 8px;
  --fuente: -apple-system, "Segoe UI", Calibri, Roboto, Arial, sans-serif;

  /* Curvas de animación (estándares emilkowalski: ease-out fuerte, <300ms) */
  --ease-out-fuerte: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--gris-bg);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--verde-700); text-decoration: none; }
a:hover { text-decoration: underline; }

.icono { flex-shrink: 0; vertical-align: -3px; }
.texto-secundario, .texto-suave, .ayuda-form { color: var(--gris-600); }
.texto-suave { font-size: 13px; }
.ayuda-form { font-size: 12px; margin: 4px 0 0; }
.monoespacio { font-family: Consolas, monospace; font-size: 13px; }
.req { color: var(--error); font-weight: 700; }

/* ── Barra superior ─────────────────────────────────────────────── */
.barra-superior {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 48px;
  background: var(--verde-900);
  color: var(--blanco);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
}

.logo-barra {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  border: 2px solid var(--oro-arena);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.marca { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca strong { font-weight: 700; }
.marca-desc { font-size: 12px; opacity: 0.85; }

.sesion { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; min-width: 0; }
.sesion a { color: var(--blanco); text-decoration: underline; }
.sesion-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn-menu-movil { display: none; background: none; border: none; cursor: pointer; padding: 4px; width: 28px; height: 28px; }
.btn-menu-movil span { display: block; height: 2px; width: 18px; margin: 4px auto; background: var(--blanco); }

/* ── Contenedor y menú lateral ──────────────────────────────────── */
.contenedor-app { display: flex; min-height: calc(100vh - 48px); }

.menu-lateral {
  width: 250px;
  flex: 0 0 250px;
  background: var(--blanco);
  border-right: 1px solid var(--gris-100);
  padding: 12px 0;
  max-height: calc(100vh - 48px);
  position: sticky;
  top: 48px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
}

.menu-lateral::-webkit-scrollbar { width: 10px; }
.menu-lateral::-webkit-scrollbar-track { background: var(--blanco); }
.menu-lateral::-webkit-scrollbar-thumb { background: #CBD5E1; border: 2px solid var(--blanco); border-radius: 999px; }
.menu-lateral::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

.menu-seccion { margin-bottom: 8px; }

.menu-seccion-titulo {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--oro-texto);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 16px 4px;
  cursor: pointer;
  font-family: var(--fuente);
  text-align: left;
}

.menu-seccion.colapsada .menu-item { display: none; }

.menu-flecha {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--oro-texto);
  flex: 0 0 auto;
}
.menu-seccion.colapsada .menu-flecha {
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--oro-texto);
  border-right: 0;
}

.menu-item {
  display: block;
  padding: 8px 16px 8px 24px;
  font-size: 14px;
  color: var(--texto);
  border-left: 3px solid transparent;
}
.menu-item:hover { background: var(--verde-050); text-decoration: none; }
.menu-item.activo { background: var(--verde-050); border-left-color: var(--verde-900); font-weight: 600; }

.menu-pie { margin-top: auto; padding: 12px 16px 4px; border-top: 1px solid var(--gris-100); font-size: 12px; }

/* ── Contenido ──────────────────────────────────────────────────── */
.contenido { flex: 1; padding: 24px 32px; min-width: 0; max-width: 1200px; }

h1 { color: var(--verde-900); font-weight: 700; font-size: 20px; margin: 0 0 16px; }

.card, .tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-radius: var(--radio);
  padding: 20px;
  margin-bottom: 16px;
}
.card.sin-relleno, .tarjeta.sin-relleno { padding: 0; overflow: hidden; }

.card h2, .tarjeta h2 { color: var(--verde-900); font-weight: 700; font-size: 16px; margin: 0; }

.tarjeta-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--oro-arena);
}
.tarjeta-cabecera h2 { display: flex; align-items: center; gap: 8px; }

.subtitulo { font-size: 14px; color: var(--oro-texto); margin: 18px 0 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.saludo { margin: 0 0 16px; }

/* ── Rejillas ───────────────────────────────────────────────────── */
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.rejilla-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rejilla-detalle { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.columna-lateral { min-width: 0; }

.rejilla-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat {
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-radius: var(--radio);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--texto);
}
.stat:hover { text-decoration: none; border-color: var(--verde-700); }
.stat-icono { color: var(--verde-900); }
.stat-icono.oro { color: var(--oro-texto); }
.stat-cifra { font-size: 24px; font-weight: 800; }
.stat-etiqueta { font-size: 12.5px; color: var(--gris-600); font-weight: 600; }

.rejilla-deptos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.tarjeta-depto { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; color: var(--texto); }
.tarjeta-depto:hover { text-decoration: none; border-color: var(--oro-arena); }
.tarjeta-depto strong { font-size: 14px; }
.depto-icono { color: var(--verde-700); }

.seccion-area { margin-bottom: 24px; }
.titulo-area {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--oro-texto);
  border-bottom: 2px solid var(--oro-arena);
  padding-bottom: 6px;
  margin: 0 0 14px;
  font-weight: 700;
}

/* ── Listas ─────────────────────────────────────────────────────── */
.lista-funciones { list-style: none; margin: 0; padding: 0; }
.lista-funciones li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--gris-100); }
.lista-funciones li:last-child { border-bottom: none; }
.lista-funciones p { margin: 0; }
.lista-funciones.compacta li { padding: 8px 0; }

.num-funcion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--verde-050);
  color: var(--verde-900);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.lista-solicitudes, .lista-canales { list-style: none; margin: 0; padding: 0; }
.lista-canales li { padding: 8px 0; border-bottom: 1px solid var(--gris-100); }
.lista-canales li:last-child { border-bottom: none; }
.lista-canales small { display: block; }

.fila-solicitud { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gris-100); color: inherit; }
.fila-solicitud:hover { text-decoration: none; background: var(--verde-050); }
li:last-child > .fila-solicitud { border-bottom: none; }
.fila-cuerpo { flex: 1; min-width: 0; }
.fila-cuerpo strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Tablas ─────────────────────────────────────────────────────── */
.tabla-contenedor { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla thead th { background: var(--verde-900); color: var(--blanco); font-weight: 700; text-align: left; padding: 10px 12px; }
.tabla tbody td { padding: 10px 12px; border-bottom: 1px solid var(--gris-100); background: var(--blanco); }
.tabla tbody tr:hover td { background: var(--verde-050); }
.fila-enlace { cursor: pointer; }

/* ── Chips / badges ─────────────────────────────────────────────── */
.chip, .badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-transform: capitalize;
}
.badge-verde { background: #F0FDF4; color: var(--ok); }
.badge-ambar { background: #FFFBEB; color: var(--alerta); }
.badge-rojo  { background: #FEF2F2; color: var(--error); }
.badge-oro   { background: var(--oro-050); color: var(--oro-texto); }

.estado-pendiente, .estado-abierto, .estado-invitado, .estado-formacion, .estado-abierta
  { background: var(--oro-050); color: var(--oro-texto); border: 1px solid var(--oro-arena); }
.estado-en_proceso, .estado-en_atencion, .estado-en_seguimiento, .estado-en_trazabilidad
  { background: #E3ECFA; color: #1D4E89; border: 1px solid #9DBCE4; }
.estado-resuelta, .estado-resuelto, .estado-aceptado, .estado-concluida, .estado-atendida
  { background: #E1EFE4; color: #22502D; border: 1px solid var(--verde-700); }
.estado-rechazada, .estado-rechazado, .estado-cerrado, .estado-cerrada
  { background: #F3F4F6; color: var(--gris-600); border: 1px solid var(--gris-100); }
.prioridad-baja  { background: #F3F4F6; color: var(--gris-600); border: 1px solid var(--gris-100); }
.prioridad-media { background: var(--oro-050); color: var(--oro-texto); border: 1px solid var(--oro-arena); }
.prioridad-alta  { background: #FEF2F2; color: var(--error); border: 1px solid #FECACA; }

.grupo-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ── Botones ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: var(--fuente);
  cursor: pointer;
  border: 1px solid var(--gris-100);
  background: var(--blanco);
  color: var(--texto);
  text-align: center;
  font-weight: 600;
}
.btn:hover { text-decoration: none; background: var(--verde-050); }
.btn-primario { background: var(--verde-900); color: var(--blanco); border-color: var(--verde-900); }
.btn-primario:hover { background: #234228; }
.btn-oro { background: var(--oro-arena); color: #3D3305; border-color: var(--oro-arena); }
.btn-oro:hover { background: var(--oro); color: var(--blanco); }
.btn-peligro { background: var(--blanco); color: var(--error); border-color: var(--error); }
.btn-peligro:hover { background: #FEF2F2; }
.btn-bloque { width: 100%; }
.btn-mini { padding: 4px 10px; font-size: 12.5px; }

.enlace { font-size: 13px; font-weight: 700; }

/* ── Formularios ────────────────────────────────────────────────── */
.formulario label, form label { display: block; font-size: 13px; font-weight: 600; color: var(--texto); margin-bottom: 12px; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="file"],
select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gris-100);
  border-radius: 6px;
  background: var(--blanco);
  font-family: var(--fuente);
  font-size: 14px;
  color: var(--texto);
  margin-top: 4px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--verde-700); outline-offset: 0; border-color: var(--verde-700); }

.acciones-formulario { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.form-en-linea { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.form-en-linea select, .form-en-linea input { width: auto; margin-top: 0; }

/* ── Portada conversacional ─────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.portal-minimal {
  background:
    radial-gradient(circle at 50% -20%, rgba(44, 82, 52, 0.08), transparent 42%),
    #fafaf8;
}
.portal-minimal .barra-superior {
  color: var(--verde-900);
  background: rgba(250, 250, 248, 0.78);
  border-bottom: 1px solid rgba(44, 82, 52, 0.08);
  backdrop-filter: blur(18px) saturate(160%);
}
.portal-minimal .btn-menu-movil { display: block; }
.portal-minimal .btn-menu-movil span { background: var(--verde-900); }
.portal-minimal .marca-desc,
.portal-minimal .sesion-nombre { display: none; }
.portal-minimal .sesion-salir {
  color: var(--verde-900);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.portal-minimal .contenedor-app { display: block; }
.portal-minimal .menu-lateral {
  position: fixed;
  inset: 48px auto 0 0;
  z-index: 18;
  max-height: none;
  transform: translateX(-100%);
  box-shadow: none;
}
.portal-minimal .menu-lateral.abierto {
  transform: translateX(0);
  box-shadow: 12px 0 36px rgba(31, 41, 55, 0.12);
}
.portal-minimal .contenido {
  max-width: none;
  min-height: calc(100vh - 48px);
  padding: clamp(20px, 4vw, 56px);
}

.consulta-inicio {
  width: min(100%, 820px);
  margin: 0 auto;
}
.consulta-notificaciones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: clamp(38px, 8vh, 86px);
}
.consulta-notificacion {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-600);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(44, 82, 52, 0.10);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04);
}
.consulta-notificacion:hover {
  color: var(--verde-900);
  text-decoration: none;
  border-color: rgba(44, 82, 52, 0.24);
}
.consulta-contador {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fafaf8;
  border-radius: 999px;
  color: #fff;
  background: var(--verde-900);
  font-size: 10px;
  line-height: 1;
  font-weight: 750;
}

.consulta-hero { text-align: center; }
.consulta-saludo {
  margin: 0 0 10px;
  color: var(--oro-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.035em;
}
.consulta-hero h1 {
  margin: 0;
  color: #18311f;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 720;
}
.consulta-intro {
  max-width: 560px;
  margin: 14px auto 26px;
  color: var(--gris-600);
  font-size: clamp(14px, 2vw, 16px);
}
.consulta-form {
  overflow: hidden;
  text-align: left;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(44, 82, 52, 0.16);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(31, 41, 55, 0.08), 0 2px 8px rgba(31, 41, 55, 0.04);
}
.consulta-form textarea {
  display: block;
  min-height: 112px;
  max-height: 220px;
  margin: 0;
  padding: 20px 22px 12px;
  border: 0;
  border-radius: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font-size: 17px;
  line-height: 1.55;
}
.consulta-form textarea:focus { outline: 0; border-color: transparent; }
.consulta-form-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px 12px 20px;
}
.consulta-form-pie > span {
  color: #8a918d;
  font-size: 11px;
}
.consulta-boton {
  appearance: none;
  border: 0;
  border-radius: 11px;
  min-height: 42px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: var(--verde-900);
  font: 700 13px/1 var(--fuente);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(44, 82, 52, 0.16);
}
.consulta-boton:disabled { opacity: 0.62; cursor: wait; }
.consulta-error {
  width: fit-content;
  margin: 14px auto 0;
  padding: 8px 12px;
  color: var(--error);
  background: #fef2f2;
  border-radius: 8px;
  font-size: 13px;
}

.consulta-respuesta {
  scroll-margin-top: 72px;
  margin-top: clamp(52px, 9vh, 96px);
  padding: clamp(22px, 4vw, 34px);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(44, 82, 52, 0.12);
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(31, 41, 55, 0.07);
}
.consulta-respuesta-cabecera {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.consulta-respuesta-icono {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--verde-900);
  background: var(--verde-050);
}
.consulta-sobrelinea {
  margin: 0 0 2px;
  color: var(--oro-texto);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.consulta-respuesta h2 {
  margin: 0;
  color: #18311f;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.consulta-metodo {
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--gris-600);
  background: var(--gris-bg);
  font-size: 10px;
  font-weight: 700;
}
.consulta-explicacion {
  margin: 20px 0 16px;
  color: #3f4a43;
  font-size: 15px;
  line-height: 1.65;
}
.consulta-destino {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
  padding: 14px 16px;
  color: var(--verde-900);
  background: var(--verde-050);
  border-radius: 11px;
}
.consulta-destino span {
  color: #58645c;
  font-size: 12px;
  line-height: 1.5;
}
.consulta-ticket {
  padding-top: 22px;
  border-top: 1px solid var(--gris-100);
}
.consulta-ticket label {
  color: #465048;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.consulta-ticket input,
.consulta-ticket select,
.consulta-ticket textarea {
  margin-top: 7px;
  padding: 11px 12px;
  border-color: #dfe4e0;
  border-radius: 9px;
}
.consulta-ticket-fila {
  display: grid;
  grid-template-columns: minmax(140px, 0.4fr) 1fr;
  gap: 14px;
}
.opcional { color: #8a918d; font-weight: 500; }
.consulta-ticket-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
}
.consulta-ticket-acciones > span {
  color: var(--gris-600);
  font-size: 12px;
}

@media (prefers-reduced-motion: no-preference) {
  .portal-minimal .menu-lateral {
    transition: transform 260ms var(--ease-drawer), box-shadow 200ms var(--ease-out-fuerte);
  }
  .consulta-notificacion,
  .consulta-boton,
  .sesion-salir {
    transition: transform 140ms var(--ease-out-fuerte), color 140ms ease,
                background-color 140ms ease, border-color 140ms ease;
  }
  .consulta-notificacion:active,
  .consulta-boton:active,
  .sesion-salir:active { transform: scale(0.97); }
}

@media (prefers-reduced-transparency: reduce) {
  .portal-minimal .barra-superior,
  .consulta-form,
  .consulta-respuesta { background: #fff; backdrop-filter: none; }
}

@media (max-width: 640px) {
  .portal-minimal .contenido { padding: 18px 14px 40px; }
  .consulta-notificaciones { margin-bottom: 42px; }
  .consulta-intro { margin-bottom: 20px; }
  .consulta-form-pie > span { display: none; }
  .consulta-form-pie { justify-content: flex-end; padding-left: 12px; }
  .consulta-respuesta { margin-top: 54px; padding: 20px 16px; }
  .consulta-respuesta-cabecera { grid-template-columns: auto 1fr; }
  .consulta-metodo { grid-column: 2; justify-self: start; }
  .consulta-ticket-fila { grid-template-columns: 1fr; gap: 0; }
  .consulta-ticket-acciones { align-items: stretch; flex-direction: column; }
  .consulta-ticket-acciones .consulta-boton { width: 100%; }
}

/* ── Mensajes flash ─────────────────────────────────────────────── */
.flash, .aviso { border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; font-weight: 600; }
.flash-exito, .aviso-exito { background: #F0FDF4; color: var(--ok); border: 1px solid #BBF7D0; }
.flash-alerta, .aviso-alerta { background: #FFFBEB; color: var(--alerta); border: 1px solid #FDE68A; }
.flash-error, .aviso-error { background: #FEF2F2; color: var(--error); border: 1px solid #FECACA; }

/* ── Bandejas, buscador, pestañas ───────────────────────────────── */
.barra-acciones { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.barra-acciones p { margin: 0; }

.pestanas { display: inline-flex; background: var(--blanco); border: 1px solid var(--gris-100); border-radius: 6px; padding: 3px; flex-wrap: wrap; }
.pestana { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 5px; font-weight: 600; font-size: 13.5px; color: var(--gris-600); }
.pestana:hover { text-decoration: none; }
.pestana.activa { background: var(--verde-900); color: var(--blanco); }

.buscador { display: flex; align-items: center; gap: 8px; background: var(--blanco); border: 1px solid var(--gris-100); border-radius: 6px; padding: 6px 12px; color: var(--gris-600); }
.buscador input { border: none; outline: none; background: none; min-width: 170px; margin: 0; padding: 0; }
.buscador input:focus { outline: none; }

/* ── Detalles: flujo, bitácora ──────────────────────────────────── */
.ruta-flujo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--verde-050);
  border: 1px dashed var(--verde-700);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--verde-900);
  margin-bottom: 14px;
}
.descripcion-solicitud { margin-bottom: 8px; white-space: normal; }

.bitacora { list-style: none; margin: 0 0 18px; padding: 0; }
.evento { display: flex; gap: 12px; padding: 9px 0; }
.evento p { margin: 0 0 2px; }
.evento-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--verde-700); margin-top: 6px; flex-shrink: 0; }
.evento-cambio_estado .evento-punto { background: var(--oro); }
.evento-meta { font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Foro ───────────────────────────────────────────────────────── */
.foro-pub { display: flex; flex-direction: column; gap: 8px; }
.foro-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--gris-600); }
.btn-like { border-color: var(--gris-100); }
.btn-like.activo { background: var(--verde-050); border-color: var(--verde-700); color: var(--verde-900); }

.progreso { background: var(--gris-100); border-radius: 999px; height: 8px; overflow: hidden; margin: 6px 0; }
.progreso-barra { height: 100%; background: var(--oro-arena); border-radius: 999px; }

.comentario { border-top: 1px solid var(--gris-100); padding: 10px 0; }
.comentario p { margin: 4px 0; }

/* ── Encuestas: tablero de tokens ───────────────────────────────── */
.token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.token-voto {
  border: 1px dashed var(--oro-arena);
  border-radius: 6px;
  background: var(--oro-050);
  padding: 8px 10px;
  font-size: 12.5px;
}
.token-voto.mio { border-style: solid; border-color: var(--verde-700); background: var(--verde-050); }
.token-voto code { font-weight: 700; display: block; }

.opcion-voto { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--gris-100); border-radius: 6px; margin-bottom: 8px; }
.opcion-voto:hover { border-color: var(--verde-700); }

/* ── Eventos: filas, calendario y biblioteca (carruseles) ───────── */
.evento-fila { display: flex; align-items: center; gap: 16px; }

.evento-fecha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: var(--verde-050);
  border: 1px solid var(--verde-700);
  flex-shrink: 0;
}
.evento-dia { font-size: 20px; font-weight: 800; color: var(--verde-900); line-height: 1.1; }
.evento-mes { font-size: 11px; text-transform: uppercase; font-weight: 700; color: var(--oro-texto); }

.cal-encabezados, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-encabezados span {
  padding: 8px 6px;
  background: var(--verde-900);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
.cal-celda {
  min-height: 84px;
  border-right: 1px solid var(--gris-100);
  border-bottom: 1px solid var(--gris-100);
  padding: 4px 6px;
  background: var(--blanco);
}
.cal-celda:nth-child(7n) { border-right: none; }
.cal-celda.vacia { background: var(--gris-bg); }
.cal-celda.hoy { background: var(--oro-050); box-shadow: inset 0 2px 0 var(--oro); }
.cal-dia { font-size: 12px; font-weight: 700; color: var(--gris-600); display: block; margin-bottom: 2px; }
.cal-celda.hoy .cal-dia { color: var(--oro-texto); }
.cal-evento {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--verde-050);
  border-left: 3px solid var(--verde-700);
  border-radius: 4px;
  padding: 2px 6px;
  margin-bottom: 3px;
  color: var(--verde-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-evento:hover { text-decoration: none; background: #DFEBE2; }

/* Carruseles estilo biblioteca */
.carrusel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.evento-card {
  scroll-snap-align: start;
  flex: 0 0 235px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-top: 4px solid var(--verde-salvia, #558766);
  border-radius: var(--radio);
  padding: 14px;
  color: var(--texto);
}
.evento-card:hover { text-decoration: none; border-color: var(--oro-arena); }
.evento-card-fecha { font-size: 11.5px; font-weight: 700; color: var(--oro-texto); text-transform: uppercase; }
.evento-card-titulo { font-size: 14px; line-height: 1.3; }
.evento-card-desc { font-size: 12.5px; color: var(--gris-600); }
.cat-reunion     { border-top-color: #558766; }
.cat-conferencia { border-top-color: var(--verde-900); }
.cat-taller      { border-top-color: var(--oro); }
.cat-curso       { border-top-color: var(--oro-arena); }
.cat-academico   { border-top-color: #1D4E89; }
.cat-cultural    { border-top-color: #8A5A9E; }
.cat-deportivo   { border-top-color: #B4552D; }
.cat-otro        { border-top-color: var(--gris-600); }

/* ── Pantalla de acceso ─────────────────────────────────────────── */
.cuerpo-auth {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--gris-bg);
  padding: 24px;
}
.auth-panel { width: 100%; max-width: 430px; }
.auth-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-radius: 10px;
  border-top: 4px solid var(--oro);
  padding: 32px 28px;
}
.auth-marca { text-align: center; margin-bottom: 20px; }
.auth-marca h1 { color: var(--verde-900); font-size: 22px; margin: 10px 0 4px; }
.auth-marca p { margin: 0; }
.marca-sello {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border: 2px solid var(--oro);
  border-radius: 50%;
  color: var(--verde-900);
  font-weight: 800;
  font-size: 20px;
}
.auth-demos { margin-top: 16px; font-size: 13px; }
.auth-demos summary { cursor: pointer; font-weight: 700; color: var(--verde-900); }
.auth-demos ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 200px; overflow-y: auto; }
.auth-demos li { padding: 3px 0; color: var(--gris-600); }
.enlace-demo { background: none; border: none; color: var(--verde-700); font-weight: 700; cursor: pointer; padding: 0; font-family: inherit; font-size: inherit; }
.enlace-demo:hover { text-decoration: underline; }
.auth-pie { text-align: center; color: var(--gris-600); font-size: 12px; margin-top: 14px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rejilla-stats { grid-template-columns: repeat(2, 1fr); }
  .rejilla-2col, .rejilla-detalle { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
  .btn-menu-movil { display: block; }
  .marca-desc, .sesion-nombre { display: none; }
  .oculta-movil { display: none; }

  .menu-lateral {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    z-index: 15;
    transform: translateX(-100%);
    max-height: none;
  }
  .menu-lateral.abierto { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,0.18); }

  .contenido { padding: 16px; }
  .barra-acciones { flex-direction: column; align-items: stretch; }
  .buscador input { min-width: 0; flex: 1; }
  .pestanas { width: 100%; }
  .pestana { flex: 1; justify-content: center; }
  .tarjeta-cabecera.columna-movil { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .rejilla-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-cifra { font-size: 20px; }
  .tabla thead th, .tabla tbody td { padding: 8px 10px; }
}

/* ── Animaciones (sutiles, solo transform/opacity, <300ms) ────────
   Estándares: ease-out fuerte en entradas, feedback de presión en
   botones, stagger 40ms decorativo, sin animar acciones frecuentes.
   Todo dentro de prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: no-preference) {

  /* Entrada de contenido: fade + leve ascenso, con stagger corto */
  @keyframes fi-entrada {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .contenido > .card,
  .contenido > .tarjeta,
  .contenido > article,
  .contenido > section,
  .rejilla-stats > .stat,
  .rejilla-2col > *,
  .rejilla-detalle > *,
  .lista-resultados > .resultado {
    animation: fi-entrada 240ms var(--ease-out-fuerte) both;
  }
  .rejilla-stats > .stat:nth-child(2) { animation-delay: 40ms; }
  .rejilla-stats > .stat:nth-child(3) { animation-delay: 80ms; }
  .rejilla-stats > .stat:nth-child(4) { animation-delay: 120ms; }
  .contenido > *:nth-child(2), .rejilla-2col > *:nth-child(2), .rejilla-detalle > *:nth-child(2) { animation-delay: 40ms; }
  .contenido > *:nth-child(3) { animation-delay: 80ms; }
  .lista-resultados > .resultado { animation-delay: calc(var(--orden, 0) * 45ms); }

  /* Feedback de presión: cualquier elemento pulsable */
  .btn, .pestana, .menu-item, .stat, .tarjeta-depto {
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease,
                transform 160ms var(--ease-out-fuerte), box-shadow 160ms var(--ease-out-fuerte);
  }
  .btn:active, .pestana:active, .btn-like:active { transform: scale(0.97); }

  /* Mensajes flash: entrada descendente */
  .flash, .aviso { animation: fi-entrada 220ms var(--ease-out-fuerte) both; }

  /* Barras de progreso: crecimiento interpolado e interrumpible */
  .progreso-barra { transition: width 400ms var(--ease-out-fuerte); }

  /* Cajón móvil: curva tipo iOS */
  @media (max-width: 899px) {
    .menu-lateral { transition: transform 260ms var(--ease-drawer); }
  }
}

/* Hover con movimiento solo en dispositivos con puntero fino */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stat:hover, .tarjeta-depto:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(33, 38, 43, 0.08);
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: scale(0.97); }
}

/* ══ Fase 5: Firmas de documentos + Tickets Eisenhower ═══════════════ */

/* Estado rechazado: mismo esquema de chips que los estados existentes */
.estado-rechazado { background: #FDE8E8; color: var(--error); }

/* Matriz de Eisenhower (2×2; una columna en móvil) */
.matriz-eisenhower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
@media (max-width: 899px) {
  .matriz-eisenhower { grid-template-columns: 1fr; }
}
.cuadrante { border-top: 4px solid var(--gris-100); }
.cuadrante-hacer      { border-top-color: var(--error); }
.cuadrante-planificar { border-top-color: var(--verde-700); }
.cuadrante-delegar    { border-top-color: var(--oro); }
.cuadrante-eliminar   { border-top-color: var(--gris-600); }
.cuadrante-sin        { border-top-color: var(--gris-100); margin-bottom: 16px; }

/* Chips de cuadrante (columna "Mi cuadrante" y tarjetas) */
.chip.cuadrante-hacer      { background: #FDE8E8; color: var(--error); border-top: 0; }
.chip.cuadrante-planificar { background: var(--verde-050); color: var(--verde-900); border-top: 0; }
.chip.cuadrante-delegar    { background: var(--oro-050); color: var(--oro-texto); border-top: 0; }
.chip.cuadrante-eliminar   { background: var(--gris-bg); color: var(--gris-600); border-top: 0; }

.pila-tickets { display: flex; flex-direction: column; gap: 10px; }
.tarjeta-ticket {
  border: 1px solid var(--gris-100);
  border-radius: var(--radio);
  padding: 10px 12px;
  background: var(--blanco);
}
.tarjeta-ticket p { margin: 0 0 6px; }
.mover-cuadrante {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.mover-cuadrante select { padding: 4px 8px; }

/* Firmas: aviso del sello y listas de integrantes */
.sello-vista {
  border: 2px dashed var(--gris-100);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.lista-simple { list-style: none; padding: 0; margin: 0 0 14px; }
.lista-simple li { padding: 6px 0; border-bottom: 1px solid var(--gris-100); }
.lista-simple li:last-child { border-bottom: 0; }