/* ============================================================
   APP DE APROBACION DE DOCUMENTOS - Estilos
   Sistema interno corporativo: sidebar, header, cards, tablas,
   badges de estado y formularios. Responsive.
   ============================================================ */

:root {
  /* Paleta principal */
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #dbeafe;
  --green: #16a34a;
  --green-soft: #dcfce7;
  --red: #dc2626;
  --red-soft: #fee2e2;
  --amber: #d97706;
  --amber-soft: #fef3c7;
  --violet: #7c3aed;
  --violet-soft: #ede9fe;

  /* Neutros */
  --gray-900: #0f172a;
  --gray-800: #1e293b;
  --gray-700: #334155;
  --gray-600: #475569;
  --gray-500: #64748b;
  --gray-400: #94a3b8;
  --gray-300: #cbd5e1;
  --gray-200: #e2e8f0;
  --gray-100: #f1f5f9;
  --gray-50: #f8fafc;
  --white: #ffffff;

  --bg: #f1f5f9;
  --sidebar-bg: #0c2733;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #0090B1;

  /* Bordes mas suaves y redondeados en toda la app (mismo lenguaje del login). */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.14);
  --shadow-focus: 0 0 0 3px var(--blue-soft);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Curvas de easing con caracter (mas fuertes que las nativas de CSS) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--gray-800);
  font-size: 15px;
  line-height: 1.5;
}

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

/* Anillo de foco accesible y consistente (solo navegacion por teclado) */
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 6px; }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45); }

/* ---------------- Login ---------------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #7c3aed 100%);
  padding: 24px;
}

/* ==================================================================
   Pantallas de autenticacion: panel visual (izquierda) + formulario
   (derecha), inspirado en layouts tipo "split-screen" de producto.
   ================================================================== */
.auth-shell {
  display: flex;
  width: 100%;
  max-width: 940px;
  min-height: 600px;
  background: var(--white);
  border-radius: 28px;
  box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.4);
  overflow: hidden;
  animation: card-in 420ms var(--ease-out) both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Panel visual ---- */
.auth-visual {
  flex: 0 0 44%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 32px;
  background: linear-gradient(160deg, var(--sidebar-bg) 0%, #050a0d 100%);
  color: #fff;
  overflow: hidden;
}
.auth-eyebrow {
  display: inline-flex; align-self: flex-start;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.85); background: rgba(255,255,255,.12);
  padding: 6px 13px; border-radius: 999px;
}

.auth-illustration {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  margin: 16px 0; min-height: 170px;
}
.illu-glow { position: absolute; border-radius: 50%; filter: blur(42px); pointer-events: none; }
.illu-glow-1 { width: 220px; height: 220px; background: var(--blue); opacity: .55; top: -30px; left: -36px; }
.illu-glow-2 { width: 180px; height: 180px; background: var(--violet); opacity: .3; bottom: -36px; right: -16px; }

.illu-stack { position: relative; width: 150px; height: 150px; }
.illu-doc {
  position: absolute; inset: 0; border-radius: 16px;
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}
.illu-doc-back { background: rgba(255,255,255,.45); transform: rotate(-13deg) translate(-15px, 8px); }
.illu-doc-mid { background: rgba(255,255,255,.72); transform: rotate(-4deg) translate(-5px, 1px); }
.illu-doc-front {
  background: rgba(255,255,255,.96); transform: rotate(4deg);
  display: flex; flex-direction: column; gap: 11px; padding: 22px 20px;
}
.illu-line { display: block; height: 8px; border-radius: 4px; background: var(--gray-200); }
.illu-line-1 { width: 65%; background: var(--gray-300); }
.illu-line-2 { width: 90%; }
.illu-line-3 { width: 50%; }
.illu-badge {
  position: absolute; right: -14px; bottom: -10px; width: 42px; height: 42px; border-radius: 50%;
  background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  animation: illu-badge-in 480ms var(--ease-out) 320ms both;
}
.illu-badge svg { width: 20px; height: 20px; }
@keyframes illu-badge-in {
  from { opacity: 0; transform: scale(.55); }
  to { opacity: 1; transform: scale(1); }
}

/* Carrusel funcional de funciones (autorotacion + flechas manuales). */
.auth-slides { position: relative; min-height: 64px; }
.auth-slide {
  position: absolute; inset: 0; opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
  pointer-events: none;
}
.auth-slide.active { position: relative; opacity: 1; transform: translateY(0); pointer-events: auto; }
.auth-slide h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.auth-slide p { margin: 0; font-size: 13px; color: rgba(255,255,255,.68); line-height: 1.5; }

.auth-visual-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12);
}
.auth-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.auth-identity .logo {
  width: 38px; height: 38px; border-radius: 11px; background: var(--blue);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.auth-identity-text { display: flex; flex-direction: column; min-width: 0; }
.auth-identity-text span {
  font-weight: 600; font-size: 13.5px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.auth-identity-text small { font-size: 11.5px; color: rgba(255,255,255,.6); }

.auth-carousel-nav { display: flex; gap: 8px; flex-shrink: 0; }
.auth-nav-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s var(--ease-out), transform .12s var(--ease-out);
}
.auth-nav-btn svg { width: 16px; height: 16px; }
.auth-nav-btn:hover { background: rgba(255,255,255,.18); }
.auth-nav-btn:active { transform: scale(.92); }

/* ---- Panel de formulario ---- */
.auth-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 36px; min-width: 0; }
.auth-panel-inner { width: 100%; max-width: 360px; }

.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { margin: 0 0 6px; font-size: 30px; font-weight: 800; color: var(--gray-900); letter-spacing: -.01em; }
.auth-head-sm h1 { font-size: 23px; }
.auth-sub { margin: 0; color: var(--gray-500); font-size: 14px; }
.auth-sub span { color: var(--gray-700); font-weight: 600; }

/* Inputs y botones tipo "pill", acotados al panel de autenticacion. */
.auth-panel input[type="text"],
.auth-panel input[type="email"],
.auth-panel input[type="password"] {
  border-radius: 999px; padding: 12px 20px; border-color: var(--gray-200); background: var(--gray-50);
}
.auth-panel input:focus { background: var(--white); }
.auth-panel .auth-code-input { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 6px; }
.auth-panel .btn-block { border-radius: 999px; padding: 13px 20px; font-size: 15px; }

.auth-step-hint { font-size: 13.5px; color: var(--gray-600); margin: 0 0 16px; text-align: center; }

.forgot-link-row { text-align: right; margin: -6px 0 18px; }
.forgot-link-row a { font-size: 12.5px; color: var(--blue); font-weight: 600; }
.forgot-link-row a:hover { text-decoration: underline; }

.auth-link-row { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; }
.auth-link-row-center { justify-content: center; }
.auth-link-row a { color: var(--gray-500); }
.auth-link-row a:hover { color: var(--blue); }

.login-hint {
  margin-top: 22px; font-size: 12.5px; color: var(--gray-500);
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 12px 16px;
}
.login-hint b { color: var(--gray-700); }
.login-dev { margin-top: 16px; text-align: center; font-size: 12.5px; color: var(--gray-500); }

/* Credito de desarrollo: mismo estilo del texto que lo rodea, solo en mayuscula y negrita. */
.dev-credit { color: inherit; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.dev-credit:hover { text-decoration: underline; }

/* Honeypot anti-bot: fuera de pantalla, invisible y no enfocable para humanos */
.hp-field {
  position: absolute !important; left: -9999px !important; top: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}
.verify-block { animation: rise-in 280ms var(--ease-out) backwards; }

/* Responsive: bajo cierto ancho el panel visual se oculta y solo queda el formulario. */
@media (max-width: 860px) {
  .auth-visual { display: none; }
  .auth-shell { max-width: 440px; min-height: 0; }
}
@media (max-width: 480px) {
  .auth-shell { border-radius: 20px; }
  .auth-panel { padding: 32px 22px; }
}

/* ---------------- Layout shell ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar .brand {
  padding: 20px 20px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar .brand .logo {
  width: 36px; height: 36px; border-radius: 11px; background: var(--blue);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.sidebar .brand-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar .brand-text #sideCompany { color: #fff; font-weight: 600; font-size: 15px; line-height: 1.3; }
.sidebar .brand-text small { color: #94a3b8; font-weight: 400; font-size: 12px; line-height: 1.3; }
/* Cuando el logo es ancho (tipo banner con el nombre incluido), se apila arriba
   y ocupa todo el ancho disponible, sin repetir el nombre de la empresa. */
.sidebar .brand.brand-stacked {
  flex-direction: column; align-items: flex-start; gap: 10px;
}
.sidebar .brand.brand-stacked .logo { max-width: 100%; }
.sidebar nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-pill);
  color: var(--sidebar-text); font-size: 14px; margin-bottom: 2px;
  text-decoration: none; position: relative;
  transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out);
}
.sidebar nav a:hover { background: var(--sidebar-hover, rgba(255,255,255,0.06)); color: #fff; text-decoration: none; transform: translateX(2px); }
.sidebar nav a:active { transform: translateX(2px) scale(0.98); }
.sidebar nav a.active { background: var(--sidebar-active); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.sidebar nav a.active::after {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: #fff;
}
.sidebar nav a .ic { width: 18px; text-align: center; }
.sidebar .side-foot {
  padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px;
  color: var(--gray-400);
}

.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 62px; background: var(--white); border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; position: sticky; top: 0; z-index: 20;
}
.topbar .page-title { font-size: 17px; font-weight: 600; color: var(--gray-900); }
.topbar .page-title-sep { color: var(--gray-300); font-weight: 400; margin: 0 2px; font-size: 15px; }
.topbar .page-title-company { color: var(--gray-500); font-weight: 500; font-size: 12px; }
.topbar .user-box { display: flex; align-items: center; gap: 14px; }
/* Reloj: hora grande monoespaciada + fecha pequena, con punto "en vivo" */
.topbar .clock {
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff; padding: 7px 16px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow); white-space: nowrap;
}
.topbar .clock .clock-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.topbar .clock-stack { display: flex; flex-direction: column; line-height: 1.15; }
.topbar .clock-time {
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.topbar .clock-date { font-size: 10.5px; color: #94a3b8; font-weight: 500; }
@media (max-width: 760px) { .topbar .clock { display: none; } }

/* Avatar con foto o color */
.topbar .avatar {
  background-size: cover; background-position: center; overflow: hidden;
  text-decoration: none; transition: transform .18s var(--ease-out);
  border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--gray-200);
}
.topbar .avatar.has-color { color: #fff; }
.topbar .avatar:hover { transform: scale(1.06); text-decoration: none; }
.topbar .user-meta { text-decoration: none; }
.topbar .user-meta:hover .name { text-decoration: underline; }
.topbar .avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft);
  color: var(--blue-dark); font-weight: 700; display: flex; align-items: center;
  justify-content: center; font-size: 14px;
}
.topbar .user-meta { text-align: right; line-height: 1.2; }
.topbar .user-meta .name { font-size: 13.5px; font-weight: 600; color: var(--gray-800); }
.topbar .user-meta .role { font-size: 11.5px; color: var(--gray-500); }
.menu-toggle {
  display: none; background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--gray-700);
}
.menu-toggle .ic-svg { display: block; }

/* ---------------- Adjuntos de apoyo ----------------
   Zona de arrastre compacta para los adjuntos opcionales: mas discreta que la del
   documento principal, porque no es el foco del formulario. */
.dropzone.dropzone-sm { padding: 14px 16px; }
.dropzone.dropzone-sm .dropzone-text { margin: 0 0 4px; font-size: 13.5px; }

/* Etiqueta que distingue el documento principal (el que se firma) de los adjuntos. */
.file-tag {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 600;
  background: var(--gray-100); color: var(--gray-600); vertical-align: middle;
}
.file-tag.primary { background: var(--blue-soft); color: var(--blue-dark); }

/* Casillas de roles (un usuario puede tener varios a la vez). */
.role-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 6px 0; }
.role-checks label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--gray-700); cursor: pointer;
  user-select: none;
}
.role-checks input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sidebar-active); cursor: pointer; }

/* ---------------- Iconos SVG (Reicon) ----------------
   Los paths traen fill="currentColor": el icono toma el color del texto que lo rodea,
   asi que se colorea con la propiedad "color" del contenedor. */
.ic-svg { display: block; flex: 0 0 auto; }
/* En el menu lateral el icono va en una caja fija para que las etiquetas se alineen. */
.sidebar nav a .ic {
  width: 18px; height: 18px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}

.content { padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }
.content h2.section-title { font-size: 21px; font-weight: 800; margin: 0 0 4px; color: var(--gray-900); letter-spacing: -.01em; }
.content .section-sub { color: var(--gray-500); margin: 0 0 20px; font-size: 14px; }

/* ---------------- Cards de resumen ---------------- */
.cards-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stat-card {
  background: var(--white); border-radius: var(--radius); padding: 18px 18px;
  box-shadow: var(--shadow); border: 1px solid var(--gray-200);
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
  animation: rise-in 360ms var(--ease-out) backwards;
}
/* Stagger de entrada de las tarjetas */
.stat-card:nth-child(1) { animation-delay: 0ms; }
.stat-card:nth-child(2) { animation-delay: 45ms; }
.stat-card:nth-child(3) { animation-delay: 90ms; }
.stat-card:nth-child(4) { animation-delay: 135ms; }
.stat-card:nth-child(5) { animation-delay: 180ms; }
.stat-card .label { font-size: 13px; color: var(--gray-500); font-weight: 500; }
.stat-card .value { font-size: 28px; font-weight: 700; color: var(--gray-900); line-height: 1; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* IMPORTANTE: los usos de esta animacion llevan fill-mode "backwards", NUNCA "both" (ni
   "forwards"). Con "both/forwards", al terminar la animacion el navegador deja
   transform:translateY(0) aplicado PARA SIEMPRE (no es lo mismo que transform:none) —
   y cualquier valor de transform distinto de "none", aunque sea la identidad, convierte
   a ese elemento en el "containing block" de sus descendientes position:fixed/absolute,
   rompiendo su posicionamiento (ej. un menu desplegable dentro de un .panel terminaria
   anclado al .panel en vez de a la ventana). "backwards" evita el flash antes de que
   empiece (util con animation-delay) sin dejar ese rastro una vez terminada.
@media (hover: hover) and (pointer: fine) {
  .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}

/* Tarjetas de indicadores del dashboard: icono + cuerpo */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stats-grid .stat-card {
  flex-direction: row; align-items: center; gap: 14px; padding: 18px 20px;
}
.stat-ic {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--gray-600);
}
.stat-ic svg { width: 22px; height: 22px; }
.stat-card.amber .stat-ic { background: var(--amber-soft); color: var(--amber); }
.stat-card.green .stat-ic { background: var(--green-soft); color: var(--green); }
.stat-card.red .stat-ic { background: var(--red-soft); color: var(--red); }
.stat-card.violet .stat-ic { background: var(--violet-soft); color: var(--violet); }
.stat-card.gray .stat-ic { background: var(--gray-100); color: var(--gray-600); }
.stat-body { display: flex; flex-direction: column; gap: 2px; }
.stats-grid .stat-card .value { font-size: 26px; }
.stats-grid .stat-card .label { font-size: 12.5px; }
.stat-card.amber .value { color: var(--amber); }
.stat-card.green .value { color: var(--green); }
.stat-card.red .value { color: var(--red); }
.stat-card.violet .value { color: var(--violet); }

/* Al pasar el mouse, el borde y la sombra toman el tono de la categoria. */
@media (hover: hover) and (pointer: fine) {
  .stat-card.amber:hover { border-color: var(--amber); box-shadow: 0 8px 20px -6px rgba(217, 119, 6, .35); }
  .stat-card.green:hover { border-color: var(--green); box-shadow: 0 8px 20px -6px rgba(22, 163, 74, .35); }
  .stat-card.red:hover { border-color: var(--red); box-shadow: 0 8px 20px -6px rgba(220, 38, 38, .35); }
  .stat-card.violet:hover { border-color: var(--violet); box-shadow: 0 8px 20px -6px rgba(124, 58, 237, .35); }
  .stat-card.gray:hover { border-color: var(--gray-400); }
}

/* ---------------- Panel / Card generico ---------------- */
.panel {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; margin-bottom: 22px;
  animation: rise-in 380ms var(--ease-out) backwards;
}
.panel h3 { margin: 0 0 16px; font-size: 16px; color: var(--gray-900); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.panel-head h3 { margin: 0; }

/* ---------------- Badges de estado ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.pending { background: var(--amber-soft); color: var(--amber); }
.badge.approved { background: var(--green-soft); color: var(--green); }
.badge.rejected { background: var(--red-soft); color: var(--red); }
.badge.neutral { background: var(--gray-100); color: var(--gray-600); }

.role-chip {
  display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 11.5px;
  font-weight: 600; background: var(--gray-100); color: var(--gray-600);
}
.user-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle;
}
/* Superadministrador: el rango mas alto, con el color mas fuerte para distinguirlo de
   un administrador normal de un vistazo. */
.role-chip.SUPERADMIN { background: var(--gray-900); color: #fff; }
.role-chip.ADMIN { background: var(--violet-soft); color: var(--violet); }
.role-chip.APPROVER { background: var(--blue-soft); color: var(--blue-dark); }
.role-chip.REQUESTER { background: var(--gray-100); color: var(--gray-600); }

/* Cuenta que el usuario actual no puede gestionar (un admin normal viendo a un
   superadmin): en vez de botones, una marca discreta de "protegido". */
.locked-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--gray-500);
  padding: 6px 2px; white-space: nowrap;
}
/* Envuelve varios role-chip con un espaciado parejo (un usuario puede tener 1-3 roles):
   sin esto, el navegador los separa con el espacio en blanco del HTML, que no es
   consistente y hace que el bloque se vea amontonado al envolver en varias lineas. */
.role-chip-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/* ---------------- Menu de acciones "kebab" (⋮) ----------------
   Para filas de tabla con varias acciones: se deja SIEMPRE visible solo la accion
   principal (ej. "Editar"); el resto (activar/desactivar, reenviar codigo, eliminar)
   se agrupa aqui para que la fila nunca se desarme envolviendo botones en 2-3 lineas. */
.row-menu { position: relative; display: inline-flex; }
.row-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--gray-500);
  cursor: pointer; transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.row-menu-btn:hover, .row-menu-btn:focus-visible { background: var(--gray-100); color: var(--gray-800); }
.row-menu-btn .ic-svg { transform: rotate(90deg); } /* 3 puntos horizontales -> verticales */
.row-menu-list {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 45;
  min-width: 190px; padding: 6px; background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  animation: menu-in 140ms var(--ease-out);
}
.row-menu.open .row-menu-list { display: block; }
.row-menu-list button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--gray-700); font-family: inherit;
}
.row-menu-list button:hover:not(:disabled) { background: var(--gray-100); }
.row-menu-list button:disabled { opacity: .5; cursor: not-allowed; }
.row-menu-list button.danger { color: var(--red); }
.row-menu-list button.danger:hover:not(:disabled) { background: var(--red-soft); }
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* En movil, el menu se ancla como una hoja fija sobre la barra inferior, en vez de
   colgar del boton que lo abrio: la tabla se ve en tarjetas (orden variable, scroll
   largo) y "top: 100% del boton" puede quedar fuera de la pantalla visible. Se fija
   "top: auto" para anular ese valor heredado (si no, "position: fixed" lo interpreta
   contra el viewport completo y el menu aparece mas abajo de lo visible). */
@media (max-width: 600px) {
  .row-menu-list {
    position: fixed; top: auto; right: 16px; left: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: auto; min-width: 0;
  }
}

/* ---------------- Botones ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 9px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: background .16s var(--ease-out), box-shadow .16s var(--ease-out),
              transform .12s var(--ease-out), opacity .16s var(--ease-out);
  text-decoration: none; line-height: 1.2; user-select: none;
  /* Un boton NUNCA debe partir su propio texto en 2 lineas (ej. "Ver detalle" dentro de
     una celda angosta de tabla): en un contenedor inline-flex, el texto es un "flex item"
     mas y por defecto SI puede envolver si el espacio disponible se achica (con tipografias
     mas anchas -serif/monoespaciada- o columnas justas, como en el panel de un cliente con
     tema personalizado). white-space:nowrap fuerza que el boton siempre mantenga su forma
     de pildora de una sola linea; si no cabe, el scroll horizontal de .table-wrap se hace cargo. */
  white-space: nowrap;
}
/* Feedback de presion: la interfaz "escucha" el click */
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3); }
.btn-primary:hover { background: var(--blue-dark); text-decoration: none; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.32); }
.btn-success { background: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(22, 163, 74, 0.3); }
.btn-success:hover { background: #15803d; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.32); }
.btn-danger { background: var(--red); color: #fff; box-shadow: 0 1px 2px rgba(220, 38, 38, 0.3); }
.btn-danger:hover { background: #b91c1c; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.32); }
.btn-violet { background: var(--violet); color: #fff; box-shadow: 0 1px 2px rgba(124, 58, 237, 0.3); }
.btn-violet:hover { background: #6d28d9; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32); }
.btn-ghost { background: var(--white); color: var(--gray-700); border-color: var(--gray-300); }
.btn-ghost:hover { background: var(--gray-50); text-decoration: none; border-color: var(--gray-400); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-block { width: 100%; }

/* ---------------- Formularios ---------------- */
.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label.field-label {
  display: block; font-size: 13px; font-weight: 600; color: var(--gray-700);
  margin-bottom: 6px;
}
label.field-label .req { color: var(--red); }
/* Campos de una sola linea: forma de pildora, igual que en el login. */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"], input[type="url"] {
  width: 100%; padding: 11px 16px; border: 1px solid var(--gray-300);
  border-radius: var(--radius-pill); font-size: 14px; font-family: inherit;
  background: var(--white); color: var(--gray-800); transition: border-color .15s, box-shadow .15s;
}
/* Select, textarea y file: redondeo moderado (una pildora no luce bien en cajas
   multilinea ni en el control nativo de seleccion de archivos). */
select, textarea, input[type="file"] {
  width: 100%; padding: 11px 14px; border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
  background: var(--white); color: var(--gray-800); transition: border-color .15s, box-shadow .15s;
}
/* Selector de color: el navegador dibuja el color elegido en un "swatch" interno que,
   por defecto (sobre todo en Chrome/Edge), queda mas chico que la caja del input,
   dejando un margen blanco alrededor como si fuera un cuadrado recortado. Se resetea
   el swatch nativo (WebKit y Firefox) para que el color ocupe el input completo. */
input[type="color"] {
  width: 56px; height: 40px; padding: 0; border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm); background: var(--white); cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: calc(var(--radius-sm) - 1px); }
input[type="color"]::-moz-color-swatch { border: none; border-radius: calc(var(--radius-sm) - 1px); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
textarea { resize: vertical; min-height: 80px; }
input[type="file"] { padding: 9px 14px; background: var(--gray-50); cursor: pointer; }

/* Campo de contrasena con boton "ojo" para mostrar/ocultar (login, recuperacion,
   creacion de usuario, perfil y SMTP). El input deja espacio a la derecha para el boton. */
.pw-field { position: relative; display: block; width: 100%; }
.pw-field input[type="password"],
.pw-field input[type="text"] { padding-right: 46px; }
.pw-toggle {
  position: absolute; top: 0; right: 8px; height: 100%; width: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gray-500); transition: color .15s;
}
.pw-toggle:hover { color: var(--gray-700); }
.pw-toggle svg { display: block; }

/* ---------------- Lista de archivos seleccionados / adjuntos ---------------- */
.file-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.file-list li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 13px;
}
.file-list li.invalid { background: var(--red-soft); border-color: #fecaca; }
.file-list .file-ext {
  text-transform: uppercase; font-weight: 700; font-size: 10.5px; color: #fff;
  background: var(--blue); padding: 3px 7px; border-radius: 5px; min-width: 42px; text-align: center;
}
/* min-width:0 es necesario para que un flex item pueda encogerse por debajo de su
   contenido; overflow-wrap:anywhere corta solo cuando hace falta y prefiere los espacios
   (word-break:break-all cortaba en CUALQUIER caracter, y al quedar la columna angosta
   dejaba el nombre en vertical: "Contr / ato d / e su..."). */
.file-list .file-name {
  flex: 1; min-width: 0; font-weight: 500; color: var(--gray-800);
  overflow-wrap: anywhere;
}
.file-list .file-size { color: var(--gray-500); font-size: 12px; white-space: nowrap; }
.file-list .file-bad { color: var(--red); font-size: 11.5px; font-weight: 600; }
.file-list .file-remove {
  flex: none; width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer;
  color: var(--gray-500); font-size: 20px; line-height: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.file-list .file-remove:hover { background: var(--red-soft); color: var(--red); }

/* En pantallas angostas los botones (Ver/Descargar) no caben junto al nombre: al ser
   inencogibles (white-space:nowrap) aplastaban el nombre del archivo hasta dejarlo de
   unos pocos pixeles. Aqui la fila se envuelve y los botones bajan a su propia linea,
   asi el nombre dispone del ancho completo. */
@media (max-width: 560px) {
  .file-list li { flex-wrap: wrap; }
  .file-list li .attach-actions { flex: 1 1 100%; }
}

/* Zona de arrastrar y soltar (Crear solicitud): un solo archivo PDF. */
.dropzone {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 28px 20px; border: 2px dashed var(--gray-300); border-radius: var(--radius-sm);
  background: var(--gray-50); cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--blue); background: var(--blue-soft); outline: none; }
.dropzone.dragover { border-color: var(--blue); background: var(--blue-soft); }
.dropzone-icon { color: var(--blue); }
.dropzone-text { margin: 0; font-size: 14px; color: var(--gray-700); }

/* Progreso de subida (crear/editar solicitud): barra determinada con el % real de
   bytes enviados (ver API.postFormProgress en api.js), para que una subida de varios
   segundos en una conexion lenta se vea "trabajando" en vez de "colgada". */
.upload-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.upload-progress-track {
  flex: 1 1 auto; height: 8px; border-radius: var(--radius-pill);
  background: var(--gray-200); overflow: hidden;
}
.upload-progress-fill {
  height: 100%; width: 0%; border-radius: var(--radius-pill);
  background: var(--blue); transition: width .15s var(--ease-out);
}
.upload-progress-label { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--gray-600); min-width: 80px; text-align: right; }
.dropzone-btn {
  background: none; border: 0; padding: 0; color: var(--blue); font-weight: 600;
  font-size: inherit; cursor: pointer; text-decoration: underline;
}
.dropzone-hint { color: var(--gray-500); font-size: 12px; }

/* Chips de tipo de archivo por extension (en detalle) */
.file-ext.ext-pdf { background: #dc2626; }
.file-ext.ext-doc, .file-ext.ext-docx { background: #2563eb; }
.file-ext.ext-xls, .file-ext.ext-xlsx, .file-ext.ext-csv { background: #16a34a; }
.file-ext.ext-ppt, .file-ext.ext-pptx { background: #ea580c; }
.file-ext.ext-jpg, .file-ext.ext-jpeg, .file-ext.ext-png { background: #7c3aed; }
.file-ext.ext-txt { background: var(--gray-500); }

/* nowrap: un grupo de botones (ej. "Ver/Aprobar/Rechazar") no debe partirse en 2 lineas
   dentro de su propia celda - si no entra, la tabla completa scrollea horizontal
   (.table-wrap ya tiene overflow-x:auto) en vez de verse descuadrada. En movil, la
   media query de table-cards de mas abajo si permite envolver (celda a ancho completo). */
.attach-actions { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }

/* Columnas de contenido corto y fijo (ID, badges de estado, la celda de acciones): se
   ajustan a su contenido en vez de robarle espacio a columnas con texto real (Nombre,
   Email, Documento), que son las que deben absorber el ancho sobrante de la tabla. */
table.data th.col-fit, table.data td.col-fit { width: 1%; white-space: nowrap; }

/* Edicion inline del nombre en catalogos (unidades de negocio / tipos de documento) */
.cat-edit-row { display: flex; gap: 6px; align-items: center; }
.cat-edit-input {
  width: auto; min-width: 160px; padding: 6px 12px; font-size: 13px;
  border: 1px solid var(--blue); border-radius: var(--radius-pill);
}

/* Fila expandida de edicion de usuario (Ajustes > Usuarios) */
tr.edit-row { background: var(--blue-soft); }
tr.edit-row td { padding: 14px 12px; }
.inline-edit-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.inline-edit-form input, .inline-edit-form select { width: auto; min-width: 140px; }
.inline-edit-actions { display: flex; gap: 8px; }

/* ---------------- Tablas ---------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table.data {
  width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px;
}
table.data thead th {
  text-align: left; padding: 11px 12px; background: var(--gray-50);
  color: var(--gray-500); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--gray-200); white-space: nowrap;
}
table.data tbody td { padding: 11px 12px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
table.data tbody tr { transition: background .15s var(--ease-out); }
table.data tbody tr:hover { background: var(--blue-soft); }
/* Fila pendiente: fondo ambar suave para que salte a la vista al escanear la tabla,
   sin tener que leer el badge de cada fila. Mismo tono que ya usa el badge/tarjeta de
   "Pendiente" (--amber-soft), para no introducir un color nuevo que no signifique nada
   en el resto de la app (el rojo ya esta reservado para "Rechazado"). Se marca con
   data-status="PENDING_APPROVAL" en el <tr> (ver documents.js / dashboard.js / requester.js). */
table.data tbody tr[data-status="PENDING_APPROVAL"] { background: var(--amber-soft); }
table.data tbody tr[data-status="PENDING_APPROVAL"]:hover { background: #fde8a8; }
table.data .muted { color: var(--gray-500); }
table.data .doc-name { font-weight: 600; color: var(--gray-800); }
.empty-row { text-align: center; color: var(--gray-400); padding: 28px !important; }

/* Comentario del aprobador dentro de una tabla: es texto libre, puede ser una frase
   larga. Sin limite se quedaba con una sola palabra por linea, apretado en la columna
   que le sobraba despues de las demas (fecha, estado, etc.), y se veia roto. Se trunca
   a una linea con "..." y el texto completo queda disponible al pasar el mouse (title)
   y siempre en el detalle del documento (boton "Ver"), asi no se pierde informacion.
   display:inline-block (no span suelto) es necesario para que max-width + ellipsis
   funcionen tanto en la tabla normal como dentro de una celda en flex (vista movil). */
.comment-text {
  display: inline-block; max-width: 220px; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 600px) {
  .comment-text { max-width: 60vw; }
}

/* ---------------- Filtros / toolbar ---------------- */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px;
}
.toolbar input, .toolbar select { width: auto; min-width: 160px; }
.toolbar .grow { flex: 1; min-width: 200px; }

/* ---------------- Tabs (admin) ---------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--gray-200); margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn {
  background: none; border: none; padding: 10px 16px; font-size: 14px; font-weight: 600;
  color: var(--gray-500); cursor: pointer; border-bottom: 2px solid transparent;
  font-family: inherit; transition: color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.tab-btn:hover { color: var(--gray-800); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: rise-in 320ms var(--ease-out) backwards; }

/* ---------------- Ajustes: logo, roles, acerca de ---------------- */
/* Caja flexible: alto fijo, ancho que se adapta (logos cuadrados o tipo banner). */
.logo-preview {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 120px; max-width: 280px; height: 110px; padding: 10px;
  border-radius: var(--radius); border: 1px dashed var(--gray-300);
  background: var(--gray-50); color: var(--gray-400); font-size: 13px; overflow: hidden;
  flex-shrink: 0;
}
.logo-preview img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.role-edit {
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 14px; background: var(--gray-50);
}
.role-edit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.role-edit .form-row { margin: 0; }

/* Perfil: avatar grande y selector de color */
.profile-avatar {
  width: 120px; height: 120px; border-radius: 50%; margin: 6px auto 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 700; color: #fff;
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-md); border: 3px solid var(--white);
}
/* Vista previa de la firma: fondo tipo "damero" para que se note la transparencia
   real del PNG procesado (fondo removido), igual que en editores de imagen. */
.signature-preview {
  width: 100%; max-width: 260px; height: 110px; margin: 6px auto 0;
  border-radius: var(--radius-sm); border: 1px solid var(--gray-200);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, var(--gray-100) 25%, transparent 25%),
    linear-gradient(-45deg, var(--gray-100) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--gray-100) 75%),
    linear-gradient(-45deg, transparent 75%, var(--gray-100) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.signature-preview img { max-width: 92%; max-height: 92%; object-fit: contain; }
.signature-preview .muted { font-size: 12.5px; color: var(--gray-500); }

.color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatches .swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--gray-300); cursor: pointer; padding: 0;
  transition: transform .15s var(--ease-out);
}
.color-swatches .swatch:hover { transform: scale(1.12); }
.color-swatches .swatch.active { box-shadow: 0 0 0 3px var(--gray-800); }

/* Apariencia: previsualizaciones */
.bg-preview {
  width: 160px; height: 90px; border-radius: var(--radius-sm); border: 1px solid var(--gray-300);
  background: var(--gray-50); display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); font-size: 12px; overflow: hidden;
}
.bg-preview img { width: 100%; height: 100%; object-fit: cover; }
.bg-live-preview {
  margin-top: 14px; height: 120px; border-radius: var(--radius);
  border: 1px solid var(--gray-200); box-shadow: var(--shadow) inset;
}

/* Panel de consejos para evitar spam (Ajustes > Correo) */
.spam-tips { background: var(--gray-50); border: 1px solid var(--gray-200); }
.spam-tips-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.spam-tips-list li { font-size: 13px; color: var(--gray-600); line-height: 1.55; }
.spam-tips-list code {
  background: var(--gray-200); padding: 1px 6px; border-radius: 6px; font-size: 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.about-card { text-align: center; }
/* El logo de CCreator es blanco; va sobre un fondo oscuro para que se vea. */
.about-logo-img {
  max-width: 240px; max-height: 64px; width: auto; height: auto;
  object-fit: contain; display: block; margin: 0 auto;
  background: var(--sidebar-bg); padding: 18px 26px; border-radius: var(--radius);
  box-sizing: content-box;
}
.about-contact {
  display: inline-flex; flex-direction: column; gap: 8px; text-align: left;
  font-size: 14px; color: var(--gray-700);
}
.about-contact .about-ic { display: inline-block; width: 20px; }

/* ---------------- Modal ---------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; animation: backdrop-in 200ms var(--ease-out); }
.modal {
  background: var(--white); border-radius: var(--radius); width: 100%; max-width: 480px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
/* Los modales escalan desde el centro (no estan anclados a un trigger) */
.modal-overlay.open .modal { animation: modal-in 220ms var(--ease-out); }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--gray-200); font-weight: 600; font-size: 16px; }
.modal-body { padding: 20px 22px; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--gray-200); display: flex; gap: 10px; justify-content: flex-end; }

/* ---------------- Toast / notificaciones ---------------- */
.toast-wrap {
  position: fixed; top: 18px; right: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none; /* el area vacia deja pasar clicks; cada toast los recibe */
}
.toast {
  position: relative; display: flex; align-items: center; gap: 11px; overflow: hidden;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 12px 14px; padding-bottom: 13px;
  min-width: 260px; max-width: 380px; font-size: 14px; color: var(--gray-800);
  cursor: pointer; pointer-events: auto;
  /* Estado inicial: fuera de pantalla a la derecha. */
  opacity: 0; transform: translateX(115%) scale(0.98);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
.toast.toast-show { opacity: 1; transform: translateX(0) scale(1); }
/* Salida mas rapida que la entrada (el sistema responde, el usuario no decide). */
.toast.toast-hide {
  opacity: 0; transform: translateX(115%) scale(0.98);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}

.toast-ic {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.toast-msg { flex: 1; line-height: 1.4; font-weight: 500; }

.toast.success .toast-ic { background: var(--green-soft); color: var(--green); }
.toast.error   .toast-ic { background: var(--red-soft);   color: var(--red); }
.toast.info    .toast-ic { background: var(--blue-soft);  color: var(--blue); }
.toast.warning .toast-ic { background: var(--amber-soft); color: var(--amber); }

/* Barra de progreso (tiempo restante). scaleX en GPU, ritmo lineal, se vacia de
   izquierda a derecha; al terminar dispara el cierre (ver api.js). */
.toast-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  transform-origin: left; transform: scaleX(1); opacity: .85;
  animation: toast-bar-deplete 4.5s linear forwards;
}
.toast.success .toast-bar { background: var(--green); }
.toast.error   .toast-bar { background: var(--red); }
.toast.info    .toast-bar { background: var(--blue); }
.toast.warning .toast-bar { background: var(--amber); }
/* Pausa el tiempo (y el cierre) mientras el mouse esta encima, para poder leer. */
.toast:hover .toast-bar { animation-play-state: paused; }

@keyframes toast-bar-deplete { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Motion reducido: se conserva el desvanecido (ayuda a comprender), se quita el
   desplazamiento lateral. */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.toast-show, .toast.toast-hide { transform: none; transition: opacity .2s var(--ease-out); }
}

.inline-alert {
  padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 14px;
  display: none;
}
.inline-alert.show { display: block; }
.inline-alert.error { background: var(--red-soft); color: #991b1b; }
.inline-alert.success { background: var(--green-soft); color: #166534; }
.inline-alert.info { background: var(--blue-soft); color: var(--blue-dark); }

/* ---------------- Zona de peligro (acciones destructivas) ---------------- */
.danger-zone { border: 1px solid #fecaca; background: #fef6f6; }
.danger-zone h3 { color: #991b1b; }
.danger-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 0; border-top: 1px solid #fadcdc;
}
.danger-row > div { flex: 1; min-width: 220px; }
.danger-row strong { color: var(--gray-800); font-size: 14px; }
.danger-row p { margin: 4px 0 0; font-size: 12.5px; color: var(--gray-600); }
.danger-row .btn { flex: none; }

/* ---------------- Detalle de documento ---------------- */
.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.detail-grid .full { grid-column: 1 / -1; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; font-size: 14px; }
.kv dt { color: var(--gray-500); font-weight: 500; }
.kv dd { margin: 0; color: var(--gray-800); font-weight: 500; }
.pdf-frame { width: 100%; height: 520px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); }

/* ---------------- Banner de PDF firmado ----------------
   Se muestra arriba de todo cuando el documento esta aprobado y firmado. Es la accion
   principal de la pagina en ese estado (descargar el PDF firmado), por eso es grande,
   con altura generosa y resaltado en verde. */
.signed-banner {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px; margin-bottom: 22px;
  background: linear-gradient(180deg, var(--green-soft), #f0fdf4);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.14);
  animation: rise-in 320ms var(--ease-out) backwards;
}
.signed-banner-icon {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
}
.signed-banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.signed-banner-text strong { font-size: 16px; font-weight: 700; color: var(--gray-900); }
.signed-banner-text span { font-size: 13.5px; color: var(--gray-600); }
.signed-banner .btn { flex: 0 0 auto; }
/* Estado "generando" (recien aprobado, aun sin PDF): mismo banner en tono ambar. */
.signed-banner.generating {
  background: linear-gradient(180deg, var(--amber-soft), #fffbeb);
  border-color: var(--amber);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.14);
}
.signed-banner.generating .signed-banner-icon { background: var(--amber); }
@media (max-width: 560px) {
  /* En movil se apila: icono + texto arriba, boton abajo a lo ancho. */
  .signed-banner { flex-wrap: wrap; padding: 16px 18px; gap: 14px; }
  .signed-banner .btn { width: 100%; }
}

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--gray-200); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--blue); border: 2px solid var(--white);
}
.timeline li.approved::before { background: var(--green); }
.timeline li.rejected::before { background: var(--red); }
.timeline li.reminder::before { background: var(--violet); }
.timeline .t-action { font-weight: 600; font-size: 13.5px; color: var(--gray-800); }
.timeline .t-meta { font-size: 12px; color: var(--gray-500); }
.timeline .t-comment { font-size: 13px; color: var(--gray-600); margin-top: 3px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%);
    transition: transform .3s var(--ease-drawer); box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .menu-toggle { display: block; }
  .form-row { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55;
  }
  .sidebar-backdrop.open { display: block; animation: backdrop-in 200ms var(--ease-out); }

  /* ---- Topbar compacto en movil ----
     El titulo se amontonaba porque el nombre/rol del usuario y el sufijo "/ Empresa"
     le robaban el ancho. En movil: el titulo ocupa el espacio disponible y se recorta
     con puntos suspensivos (una sola linea); se oculta el sufijo de empresa (que ya
     aparece en el menu lateral) y el nombre/rol (el avatar ya lleva al perfil). */
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar > div:first-child { min-width: 0; flex: 1 1 auto; }
  .topbar .menu-toggle { flex: 0 0 auto; }
  .topbar .page-title {
    min-width: 0; flex: 1 1 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 16px;
  }
  .topbar .page-title-sep,
  .topbar .page-title-company { display: none; }
  .topbar .user-box { gap: 8px; flex: 0 0 auto; }
  .topbar .user-meta { display: none; }
}

/* ---------------- Spinner de carga ---------------- */
.spinner {
  display: inline-block; width: 16px; height: 16px; vertical-align: -3px;
  border: 2px solid var(--gray-200); border-top-color: var(--blue);
  border-radius: 50%; animation: spin .6s linear infinite; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-cell { color: var(--gray-500); }

/* Entrada escalonada de los eventos del historial */
.timeline li {
  animation: rise-in 360ms var(--ease-out) backwards;
}
.timeline li:nth-child(1) { animation-delay: 0ms; }
.timeline li:nth-child(2) { animation-delay: 50ms; }
.timeline li:nth-child(3) { animation-delay: 100ms; }
.timeline li:nth-child(4) { animation-delay: 150ms; }
.timeline li:nth-child(5) { animation-delay: 200ms; }

/* El badge "En aprobacion" late suavemente para llamar la atencion */
@media (hover: hover) {
  .badge.pending::before { animation: pulse-dot 1.8s var(--ease-in-out) infinite; }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(0.8); }
}

/* Avatar e iconos clicables con micro-feedback */
.topbar .avatar { transition: transform .18s var(--ease-out); }

/* ---------------- Accesibilidad: movimiento reducido ----------------
   Se conservan los cambios de opacidad/color que ayudan a comprender,
   pero se elimina el movimiento que puede causar mareo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
  .stat-card:hover { transform: none; }
  .spinner { animation: spin .8s linear infinite; }
}

/* ============================================================
   PWA / VERSION MOVIL
   ============================================================ */

/* ---- Barra de navegacion inferior (tipo app). Oculta en escritorio. ---- */
.bottom-nav { display: none; }

@media (max-width: 760px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.08);
    /* Respeta la barra de gestos del iPhone (home indicator). */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bn-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 8px 2px 6px;
    background: none;
    border: 0;
    color: var(--gray-500);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s var(--ease-out);
  }
  .bn-item .bn-ic {
    width: 22px; height: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  .bn-item .bn-label { font-size: 11px; font-weight: 600; letter-spacing: .2px; }
  .bn-item.active { color: var(--sidebar-active); }
  .bn-item:active { color: var(--sidebar-active); }
  /* El item de perfil muestra el avatar del usuario en lugar de un glifo. */
  .bn-item.bn-profile .bn-ic.avatar {
    width: 24px; height: 24px; font-size: 11px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center;
    color: #fff;
  }
  .bn-item.bn-profile.active .bn-ic.avatar { box-shadow: 0 0 0 2px var(--sidebar-active); }

  /* Deja espacio al final del contenido para que la barra no tape nada. */
  .content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* ---- Ergonomia tactil ---- */
  /* 16px en inputs evita el zoom automatico de iOS al enfocar un campo. */
  input, select, textarea { font-size: 16px; }
  .btn { min-height: 44px; }
  .btn.btn-sm { min-height: 36px; }

  /* Encabezado seguro: los controles del topbar mas comodos al tacto. */
  .topbar .menu-toggle { font-size: 22px; padding: 6px 10px; }
}

/* En modo instalado (standalone), respeta el area segura superior (notch/status bar). */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(env(safe-area-inset-top)); }
}

/* ---- Tablas que se transforman en tarjetas en movil (opt-in con .table-cards) ----
   Solo las tablas marcadas con la clase .table-cards se apilan como tarjetas; el resto
   conserva el scroll horizontal de .table-wrap. Cada <td> muestra su etiqueta desde
   el atributo data-label. */
@media (max-width: 600px) {
  table.data.table-cards thead { display: none; }
  table.data.table-cards,
  table.data.table-cards tbody,
  table.data.table-cards tr,
  table.data.table-cards td { display: block; width: 100%; }
  /* Anula el min-width: 720px de la tabla base (usado para el scroll horizontal en
     escritorio): en modo tarjeta la tabla se ajusta al ancho del contenedor. */
  table.data.table-cards { min-width: 0; }
  table.data.table-cards tr {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    background: var(--white);
    margin-bottom: 10px;
    padding: 6px 14px;
    box-shadow: var(--shadow);
  }
  table.data.table-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    border: 0;
    border-bottom: 1px solid var(--gray-100);
    padding: 9px 0;
  }
  table.data.table-cards tr td:last-child { border-bottom: 0; }
  table.data.table-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: var(--gray-500);
    text-align: left;
    flex: 0 0 auto;
  }
  /* Fila "vacia" (mensajes tipo "Sin resultados") se muestra centrada, sin etiqueta. */
  table.data.table-cards td.empty-row { justify-content: center; text-align: center; }
  table.data.table-cards td.empty-row::before { content: none; }
  /* Celdas de acciones ocupan el ancho completo, botones comodos. */
  table.data.table-cards td.attach-actions { flex-wrap: wrap; justify-content: flex-start; }
  table.data.table-cards td.attach-actions::before { flex-basis: 100%; }
}

/* ---- Boton "Instalar app" (aparece solo si el navegador ofrece instalacion) ---- */
.install-fab { display: none; }
body.can-install .install-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 16px 4px;
  color: var(--sidebar-text);
  border: 1px solid var(--sidebar-border);
  background: rgba(255, 255, 255, 0.04);
}
body.can-install .install-fab:hover { background: rgba(255, 255, 255, 0.1); }