/* ==========================================================================
   Ofi Legales — Hoja de estilos base
   Paleta inspirada en el logo (verde pluma/tintero)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Verdes de marca (verde puro del logo + variantes) */
  --brand-50:  #f2f9f2;
  --brand-100: #e2f2e3;
  --brand-200: #bfe2c2;
  --brand-500: #377c3d;
  --brand-600: #2f6b35;
  --brand-700: #26542a;
  --brand-800: #1c3f20;
  --brand-900: #122a16;
  --brand-950: #0d1f11;

  /* Acento cálido (carpetas / destacados) */
  --accent-400: #f2b64f;
  --accent-500: #e8a233;

  /* Neutros */
  --ink-900: #1b241e;
  --ink-700: #445048;
  --ink-500: #6f7d74;
  --ink-300: #a9b3ac;
  --line: #e3e9e4;
  --line-soft: #edf2ee;
  --bg: #f4f7f4;
  --surface: #ffffff;

  /* Estado */
  --danger: #d24343;
  --danger-bg: #fbeaea;
  --success: #2f9e5b;
  --info: #3b6fd6;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  /* Sombras en dos capas (borde nítido + difuminado suave) para una
     sensación de elevación más cuidada que una sombra plana única. */
  --shadow-xs: 0 1px 1px rgba(18,42,22,0.05);
  --shadow-sm: 0 1px 2px rgba(18,42,22,0.05), 0 1px 1px rgba(18,42,22,0.04);
  --shadow-md: 0 8px 20px -4px rgba(18,42,22,0.12), 0 2px 6px rgba(18,42,22,0.06);
  --shadow-lg: 0 20px 40px -12px rgba(18,42,22,0.22), 0 4px 12px rgba(18,42,22,0.08);
  --sidebar-w: 264px;

  /* Tipografía de los puntos de mayor jerarquía (nombre de la firma,
     títulos de página): misma familia Inter que el resto de la interfaz,
     por preferencia explícita — solo cambian tamaño/peso/espaciado. */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html, body{
  height: 100%;
}

body{
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink-900);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
/* Sin esto, los <textarea> (como el nombre del cliente, que crece con el
   texto) caen al font-family por defecto del navegador -- que en Chrome
   es monospace -- en vez de heredar Inter del resto de la página. Se
   veía como texto de máquina de escribir, grande y descuadrado. */
button, input, select, textarea{ font-family: inherit; }
button{ cursor: pointer; }
ul{ list-style: none; margin: 0; padding: 0; }

::selection{ background: var(--brand-200); color: var(--brand-900); }

/* Foco visible por teclado: discreto pero siempre presente, sin depender
   del contorno por defecto del navegador (que varía entre Chrome/Safari). */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Números alineados en columna (montos, cantidades, fechas): evita el
   "baile" de anchos entre dígitos distintos en tablas y tarjetas. */
.tabular-nums, .stat-card .value, .risk-donut-hole strong,
.reporte-tabla td, .clientes-stats strong{
  font-variant-numeric: tabular-nums;
}

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

/* Mientras se confirma que hay sesión activa (api/verificar_sesion.php),
   la página queda invisible en vez de mostrarse "de golpe": así, si
   resulta que NO hay sesión y toca mandar a login.html, el usuario nunca
   llega a ver por un instante el Panel/Clientes/etc. antes del redirect.
   Se pone como clase inline en el <div class="app"> de cada página (no vía
   JS, para que aplique desde el primer render) y app.js la quita en
   cuanto confirma que sí hay sesión. */
.app.app-verificando-sesion{
  visibility: hidden;
}

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

.content{
  padding: 28px 40px 60px;
  max-width: 1440px;
  width: 100%;
}

/* ---------- Sidebar ---------- */
.sidebar{
  width: var(--sidebar-w);
  flex-shrink: 0;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,0.05), transparent 55%),
    linear-gradient(165deg, var(--brand-900), var(--brand-950) 75%);
  color: #eef4ee;
  display: flex;
  flex-direction: column;
  padding: 22px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  box-shadow: 1px 0 0 rgba(255,255,255,0.04) inset;
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 18px;
}

.brand img{
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

.brand-text .name{
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.brand-text .tag{
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  margin-top: 1px;
}

.nav-section-label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.34);
  padding: 6px 12px 10px;
}

.nav{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav a{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  transition: background 0.15s ease, color 0.15s ease;
}

.nav a svg{ width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }

.nav a:hover{
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.nav a.active{
  background: linear-gradient(165deg, var(--brand-500), var(--brand-600));
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}

.sidebar-spacer{ flex: 1; }

.notif-toggle{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 14px;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 0.15s ease, color 0.15s ease;
}
.notif-toggle:hover{
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
}
.notif-toggle .dot{
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.45);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.notif-toggle.on{
  color: #fff;
}
.notif-toggle.on .dot{
  background: #34d399;
  border-color: #34d399;
  box-shadow: 0 0 0 3px rgba(52,211,153,0.25);
}

/* --- Notificaciones emergentes tipo mensaje de chat: viven dentro del
   espacio vacío de la barra superior (a la izquierda de la campanita), para
   no tapar nunca el contenido de la página. Se apilan hacia abajo, más
   reciente arriba, con una entrada tipo "deslizar desde la derecha". --- */
[data-notif-contenedor]{
  position: fixed;
  right: 92px;
  top: 14px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 300px;
  pointer-events: none;
}
.notif-toast{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-left: 3px solid #8a63d2;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.12), 0 1px 3px rgba(15,23,42,0.06);
  padding: 9px 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  pointer-events: auto;
  animation: notif-toast-in 0.28s cubic-bezier(.22,1,.36,1);
}
.notif-toast.saliendo{
  animation: notif-toast-out 0.18s ease-in forwards;
}
.notif-toast.clicable{
  cursor: pointer;
}
.notif-toast.clicable:hover{
  box-shadow: 0 6px 20px rgba(15,23,42,0.18), 0 1px 3px rgba(15,23,42,0.08);
}
.notif-toast-texto{
  flex: 1;
  min-width: 0;
}
.notif-toast-titulo{
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-toast-cuerpo{
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-toast-cerrar{
  background: none;
  border: none;
  font-size: 15px;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
}
.notif-toast-cerrar:hover{
  color: #4b5563;
}
@keyframes notif-toast-in{
  from{ opacity: 0; transform: translateX(28px) scale(0.96); }
  to{ opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes notif-toast-out{
  from{ opacity: 1; transform: translateX(0) scale(1); max-height: 100px; }
  to{ opacity: 0; transform: translateX(16px) scale(0.94); }
}
@media (max-width: 640px){
  [data-notif-contenedor]{ right: 12px; top: 60px; max-width: calc(100vw - 24px); }
}

.user-card{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.avatar{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 12.5px;
  flex-shrink: 0;
}

.user-card .who{
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  flex: 1;
}

.user-card .chev{ color: rgba(255,255,255,0.5); font-size: 12px; }

/* ---------- Topbar / breadcrumb ---------- */
.topbar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 40px;
  font-size: 13.5px;
  color: var(--ink-500);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.topbar svg{ width: 15px; height: 15px; color: var(--ink-300); }
.crumb-sep{ color: var(--ink-300); }
.crumb-current{ color: var(--ink-900); font-weight: 600; }

/* ---------- Campana de notificaciones (barra superior) ---------- */
.topbar-right{ display: flex; align-items: center; gap: 4px; margin-left: auto; }
.notif-bell-wrap{ position: relative; }
.calendar-quick-link{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.calendar-quick-link:hover{ background: var(--line-soft); }
.calendar-quick-link svg{ width: 18px; height: 18px; color: var(--ink-500); }
.notif-bell{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-500);
}
.notif-bell:hover{ background: var(--line-soft); }
.notif-bell svg{ width: 18px; height: 18px; color: var(--ink-500); }
.notif-bell-badge{
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.notif-bell-panel{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
}
.notif-bell-panel-head{
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--line-soft);
}
.notif-bell-toggle{
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-500);
}
.notif-bell-toggle .switch{
  width: 30px; height: 17px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background 0.15s ease;
  flex: none;
}
.notif-bell-toggle .switch::after{
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}
.notif-bell-toggle.on .switch{ background: var(--brand-600, #2f6b34); }
.notif-bell-toggle.on .switch::after{ left: 15px; }
.notif-bell-panel-head-acciones{ display: flex; align-items: center; gap: 10px; }
.notif-bell-config-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-500);
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex: none;
}
.notif-bell-config-btn svg{ width: 15px; height: 15px; }
.notif-bell-config-btn:hover{ background: var(--line-soft); color: var(--ink-900); }
.notif-bell-config{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-muted, #f7f8f7);
}
.notif-bell-config-toggle{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-700, var(--ink-900));
  cursor: pointer;
  margin-bottom: 10px;
}
.notif-bell-config-toggle input{ flex: none; }
.notif-bell-config input[type="email"]{
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.notif-correos-label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 6px;
}
.notif-correos-lista{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; }
.notif-correo-fila{ display: flex; align-items: center; gap: 6px; }
.notif-correo-fila input[type="email"]{ margin-bottom: 0; }
.notif-correo-quitar{
  flex: none;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  color: var(--danger);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.notif-correo-quitar:hover{ background: var(--danger-bg); }
.notif-correo-quitar svg{ width: 15px; height: 15px; }
.notif-correo-agregar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--ink-300);
  color: var(--brand-500);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 10px;
}
.notif-correo-agregar:hover{ background: var(--brand-50); }
.notif-correo-agregar svg{ width: 14px; height: 14px; }
.notif-correos-nota{ font-size: 11px; color: var(--ink-500); line-height: 1.5; margin: 0 0 12px; }
.notif-bell-config-acciones{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.notif-bell-config-msg{ font-size: 11.5px; color: var(--ink-500); text-transform: none; letter-spacing: normal; }
.notif-bell-config-acciones .btn{ padding: 6px 14px; font-size: 12.5px; }
.notif-bell-tabs{ display: flex; border-bottom: 1px solid var(--line-soft); }
.notif-bell-tab{ flex: 1; border: none; background: transparent; padding: 9px 0; font-size: 12.5px; font-weight: 600; color: var(--ink-500); cursor: pointer; border-bottom: 2px solid transparent; }
.notif-bell-tab.active{ color: var(--brand-600); border-bottom-color: var(--brand-500); }
.notif-bell-item{ display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: inherit; }
.notif-bell-item:last-child{ border-bottom: none; }
.notif-bell-item:hover{ background: var(--line-soft); }
.notif-bell-item .titulo{ font-size: 13px; font-weight: 700; color: var(--ink-900); }
.notif-bell-item .cuerpo{ font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.notif-bell-item.leida .titulo{ color: var(--ink-500); }
.notif-bell-item .leida-check{ flex-shrink: 0; color: var(--brand-500); margin-top: 2px; }
.notif-bell-empty{ padding: 24px 16px; text-align: center; font-size: 13px; color: var(--ink-500); }

/* ---------- Page header ---------- */
.page-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.page-head h1{
  font-size: 27px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

.page-head p{
  margin: 0;
  color: var(--ink-500);
  font-size: 14.5px;
  max-width: 620px;
}

.page-head .actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* La columna de título/descripción/estadísticas no debe forzar que los
   botones de la derecha (Exportar, Nueva carpeta, Nuevo cliente) bajen
   de línea cuando el texto es largo (ej. desglose por agente residente):
   se le permite encogerse y su contenido interno ya hace su propio
   salto de línea (ver .clientes-stats-agentes). */
.page-head > div:first-child{
  flex: 1 1 320px;
  min-width: 0;
}

/* Insignia "Datos al día"/"Cambios pendientes" del portal del cliente:
   hay dos copias en el HTML (misma marca data-portal-estado-info-wrap),
   una junto al título (celular) y otra dentro de .actions, en su
   posición original (escritorio/tablet). Por defecto (escritorio) se
   esconde la copia del título; el media query de celular la invierte. */
.estado-info-movil{ display: none !important; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--ink-900);
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn svg{ width: 16px; height: 16px; }

.btn-primary{
  background: linear-gradient(165deg, var(--brand-500), var(--brand-600));
  color: #fff;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.14);
}
.btn-primary:hover{ background: linear-gradient(165deg, var(--brand-600), var(--brand-700)); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.14); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }

.btn-secondary{
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-900);
}
.btn-secondary:hover{ border-color: var(--ink-300); box-shadow: var(--shadow-xs); transform: translateY(-1px); }

.btn-ghost{
  background: transparent;
  color: var(--brand-600);
  font-weight: 600;
}
.btn-ghost:hover{ background: var(--brand-50); }

.btn-dark{
  background: var(--brand-900);
  color: #fff;
}

.btn-danger{
  background: #fdf0f0;
  border-color: #f3cccc;
  color: var(--danger);
}
.btn-danger:hover{ background: var(--danger); border-color: var(--danger); color: #fff; }

/* Botón "Cambios pendientes" (ficha del cliente): a diferencia de
   .btn-danger (rojo pálido, solo se pone rojo sólido al pasar el mouse,
   pensado para "Eliminar"), este debe verse en rojo sólido desde ya, para
   que se note de inmediato que requiere atención. */
.btn-alerta-pendiente{
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-alerta-pendiente:hover{ background: #b93636; border-color: #b93636; }

.btn:disabled{ opacity: 0.5; cursor: not-allowed; }

/* ---------- Row-delete (ícono de eliminar dentro de una fila de lista) ---------- */
.list-row-link{
  display: flex;
  align-items: center;
  /* flex-wrap (no solo bajo el breakpoint de celular): las etiquetas
     (badge) casi no se encogen solas, asi que si no cabe todo en una
     linea, lo correcto es que icono/nombre/etiquetas bajen a una segunda
     linea -- no que el nombre del cliente se lleve todo el encogimiento y
     quede partido palabra por palabra en anchos intermedios (tablet,
     ventana angosta de escritorio), que antes no envolvian. */
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 16px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.list-row-delete{
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-300);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.list-row-delete:hover{ background: #fdf0f0; color: var(--danger); }
.list-row-delete svg{ width: 17px; height: 17px; }

/* ---------- Cards ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.card-pad{ padding: 20px 22px; }
a.card:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--brand-200); }

/* ---------- Stat cards ---------- */
.stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}

.stat-card{
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-500);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
a.stat-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card.accent-purple{ border-left-color: #8a63d2; }
.stat-card.accent-blue{ border-left-color: var(--info); }

.icon-box{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--brand-50);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.icon-box svg{ width: 19px; height: 19px; color: var(--brand-600); }

.stat-card .go{
  position: absolute; top: 18px; right: 18px;
  color: var(--ink-300);
}

.stat-card .label{ font-size: 13.5px; color: var(--ink-500); font-weight: 500; }
.stat-card .value{ font-size: 30px; font-weight: 800; margin: 4px 0 2px; color: var(--ink-900); }
.stat-card .sub{ font-size: 12.5px; color: var(--ink-500); }

/* ---------- Section titles ---------- */
.section-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-title h2{
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title h2 svg{ width: 17px; height: 17px; color: var(--brand-600); }
.link{ font-size: 13.5px; font-weight: 600; color: var(--brand-600); }

/* ---------- Empty state ---------- */
.empty-state{
  text-align: center;
  padding: 64px 24px;
}
.empty-state .bubble{
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--brand-50);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.empty-state .bubble svg{ width: 30px; height: 30px; color: var(--brand-600); }
.empty-state h3{ font-size: 17px; margin: 0 0 8px; color: var(--ink-900); }
.empty-state p{ font-size: 13.5px; color: var(--ink-500); margin: 0 0 22px; max-width: 380px; margin-left: auto; margin-right: auto; }

/* Fila "Cartera de clientes": Distribución por riesgo (columna angosta) +
   Carga mensual (columna ancha). En celular esta proporción 32/68 dejaba la
   dona y su leyenda comprimidas en una tira de ~120px — se corrige abajo,
   en el bloque responsive, apilando las dos tarjetas a ancho completo. */
.panel-cartera-grid{
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: 16px;
  margin-bottom: 26px;
  align-items: stretch;
}

/* ---------- Distribución de la cartera por riesgo (Panel) ---------- */
.risk-dist{
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 26px 30px;
  flex-wrap: wrap;
}
.risk-donut{
  width: 140px; height: 140px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
/* El <svg> del aro trae ancho/alto fijos (140x140) escritos en el HTML
   por JS. Si el contenedor .risk-donut se achica (celular), el SVG se
   queda con su tamaño original y se desborda de la caja sin encogerse,
   así que su centro real ya no coincide con el centro de la caja donde
   sí queda anclado el círculo del medio (.risk-donut-hole) — se ve como
   si el círculo del medio estuviera corrido. Forzar el SVG a 100% lo
   hace escalar siempre junto con el contenedor. */
.risk-donut svg{ display: block; width: 100%; height: 100%; }
.risk-donut-hole{
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.risk-tooltip{
  display: none;
  position: absolute;
  z-index: 50;
  background: var(--ink-900, #1c2b20);
  color: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 240px;
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.18));
  pointer-events: none;
}
.risk-tooltip-head{
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 4px;
  font-size: 13px;
}
.risk-tooltip .risk-dot{ margin-right: 0; }
.risk-tooltip .text-muted{ color: #c9d3cc; }
.risk-donut-hole strong{ font-size: 22px; font-weight: 800; color: var(--ink-900); line-height: 1.1; }
.risk-donut-hole span{ font-size: 11.5px; color: var(--ink-500); }
.risk-legend{
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.risk-legend-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink-700, var(--ink-900));
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background .12s ease;
}
.risk-legend-row:first-child{ padding-top: 2px; }
.risk-legend-row:last-child{ border-bottom: none; padding-bottom: 2px; }
.risk-legend-row:hover{ background: var(--brand-50); }
.risk-legend-row > span:nth-child(1){ display: flex; align-items: center; min-width: 0; }
.risk-legend-row > span:nth-child(2){ display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.risk-legend-row strong{ font-size: 14.5px; color: var(--ink-900); }
.risk-legend-row small{ font-size: 12px; color: var(--ink-500); font-weight: 600; min-width: 32px; text-align: right; }
/* Mini barra de proporción bajo cada fila: solo se activa en celular (ver
   media query más abajo) para dar más presencia visual a la tarjeta sin
   saturar la vista de escritorio, que ya tiene la dona al lado. */
.risk-legend-bar{ display: none; flex-basis: 100%; height: 5px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.risk-legend-bar-fill{ display: block; height: 100%; border-radius: 99px; background: var(--seg-color, var(--brand-500)); }

/* Versión compacta de la dona de riesgo (Panel de control: columna angosta
   a la izquierda, junto a la gráfica de Carga mensual). Reutiliza el mismo
   layout de fila que ya existe para celular, pero sin depender del ancho
   de pantalla — se activa con la clase .compacta en la tarjeta. */
[data-risk-dist-card].compacta .risk-dist{ flex-direction: column; align-items: center; gap: 12px; padding: 4px; text-align: left; }
[data-risk-dist-card].compacta .risk-donut{ width: 100px; height: 100px; flex-shrink: 0; }
[data-risk-dist-card].compacta .risk-donut-hole{ width: 62px; height: 62px; }
[data-risk-dist-card].compacta .risk-donut-hole strong{ font-size: 17px; }
[data-risk-dist-card].compacta .risk-donut-hole span{ font-size: 9.5px; }
[data-risk-dist-card].compacta .risk-legend{ width: 100%; flex: none; min-width: 0; gap: 6px; padding-right: 0; }
[data-risk-dist-card].compacta .risk-legend-row{
  border-bottom: none;
  border-left: 3px solid var(--seg-color, var(--brand-500));
  background: color-mix(in srgb, var(--seg-color, var(--brand-500)) 7%, var(--surface));
  border-radius: 0 8px 8px 0;
  padding: 5px 8px;
  font-size: 12px;
}
[data-risk-dist-card].compacta .risk-legend-row:first-child{ padding-top: 5px; }
[data-risk-dist-card].compacta .risk-legend-row:last-child{ padding-bottom: 5px; }
[data-risk-dist-card].compacta .risk-legend-row strong{ font-size: 13px; }
[data-risk-dist-card].compacta .risk-dot{ display: none; }
[data-risk-dist-card].compacta .risk-legend-bar{ display: none; }

/* ---------- Panel de control: Carga mensual (empresas / beneficiarios
   finales registrados por mes, con filtro por agente residente) ---------- */
.carga-mensual-tabs{ display: flex; gap: 4px; background: var(--brand-50); border-radius: 10px; padding: 3px; }
.carga-mensual-tab{ border: none; background: transparent; color: var(--ink-700); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.carga-mensual-tab.active{ background: var(--brand-500); color: #fff; }
.carga-mensual-chart{ display: flex; margin-top: 10px; }
.carga-mensual-eje-y{ display: flex; flex-direction: column; justify-content: space-between; height: 150px; padding-right: 6px; text-align: right; }
.carga-mensual-eje-y span{ font-size: 9px; color: var(--ink-500); line-height: 1; }
.carga-mensual-plot{ flex: 1; min-width: 0; position: relative; }
.carga-mensual-lineas{ position: absolute; left: 0; right: 0; top: 0; height: 150px; }
.carga-mensual-lineas div{ position: absolute; left: 0; right: 0; height: 1px; background: var(--line-soft); }
.carga-mensual-barras{ position: relative; display: grid; grid-auto-flow: column; align-items: end; height: 150px; }
.carga-mensual-col{ display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 150px; position: relative; }
.carga-mensual-valor{ font-size: 8.5px; color: var(--brand-600); font-weight: 700; margin-bottom: 2px; }
.carga-mensual-barra{ width: 60%; min-width: 2.5px; background: var(--brand-500); border-radius: 1px 1px 0 0; }
.carga-mensual-meses{ display: grid; grid-auto-flow: column; margin-top: 4px; }
.carga-mensual-mes{ font-size: 7px; color: var(--ink-500); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; justify-self: center; height: 50px; }
.carga-mensual-anios{ display: grid; grid-auto-flow: column; margin-top: 4px; border-top: 1px solid var(--line); }
.carga-mensual-anio{ text-align: center; font-size: 10.5px; color: var(--ink-700); padding-top: 4px; }
.risk-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 9px;
}

/* ---------- Contador de empresas / carpetas (Clientes) ---------- */
.clientes-stats{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-500);
}
.clientes-stats strong{ color: var(--brand-700); font-weight: 800; }
.clientes-stats .dot-sep{ color: var(--line); }
.clientes-stats-agentes{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-500);
}

/* Filtro "Ver datos de" para agentes residentes (Panel/Clientes/Alertas/
   Reportes/Calendario): solo aparece si la cuenta es agente residente. */
.filtro-agente-residente{
  display: flex;
  align-items: center;
  gap: 8px;
}
.filtro-agente-residente-label{
  font-size: 13px;
  color: var(--ink-500);
  white-space: nowrap;
}
.filtro-agente-residente-select{
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink-700);
  background: #fff;
  cursor: pointer;
}
.clientes-stats-agentes strong{ color: var(--ink-700); font-weight: 700; }
.clientes-stats-agentes .dot-sep{ color: var(--line); }

/* ---------- Search / filter bar ---------- */
.filter-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.filter-bar .search-input{ flex: 2 1 320px; min-width: 280px; }
.filter-bar .select-pill:nth-child(2){ flex: 0 1 190px; max-width: 190px; }
.search-input{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
}
.search-input svg{ width: 17px; height: 17px; color: var(--ink-300); flex-shrink: 0; }
.search-input input{
  border: none; outline: none; flex: 1; font-size: 14px; background: transparent; color: var(--ink-900);
}
.search-input input::placeholder{ color: var(--ink-300); }

.select-pill{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-size: 13.5px;
  color: var(--ink-700);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select-pill:hover{ border-color: var(--brand-200); }
.select-pill:focus-within{ border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.select-pill select{
  /* Oculta la flechita nativa del navegador para que quede solo el
     ícono SVG de la derecha (antes se veían dos flechitas juntas). */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  /* Sin esto, el <select> nunca se encoge por debajo del ancho de su
     texto (min-width:auto por defecto) y cuando la píldora tiene un
     max-width reducido (p. ej. el filtro de Carpeta), el texto empuja
     la flecha SVG fuera del área visible y desaparece. */
  min-width: 0;
}
.select-pill select::-ms-expand{ display: none; }
.select-pill svg{ width: 13px; height: 13px; color: var(--ink-300); flex-shrink: 0; pointer-events: none; transition: transform .15s ease; }
.select-pill:focus-within svg{ color: var(--brand-500); transform: translateY(1px); }

/* Estilo del menú desplegable nativo (options/optgroups) para que la
   opción actualmente marcada no se vea como una barra gris genérica
   encima del texto: se usa el color de marca en vez del resaltado por
   defecto del sistema operativo. Chrome/Edge en Windows respetan estas
   propiedades dentro del popup nativo del <select>. */
.select-pill select, .select-pill-sm select{
  font-family: inherit;
}
.select-pill select option, .select-pill-sm select option{
  color: var(--ink-900);
  background: var(--surface);
  padding: 8px 10px;
}
.select-pill select option:checked, .select-pill-sm select option:checked{
  color: #fff;
  background: var(--brand-600);
}
.select-pill select optgroup, .select-pill-sm select optgroup{
  color: var(--brand-700);
  font-weight: 700;
  font-style: normal;
  background: var(--brand-50);
}

/* Menú desplegable propio que reemplaza al menú nativo del <select> en
   pantallas grandes con mouse (ver mejorarSelectsFiltro() en app.js). El
   navegador dibuja el menú nativo con los colores del sistema operativo
   sin importar el CSS de arriba, así que en vez de pelear con eso se
   arma este menú aparte con los mismos colores de marca que el resto de
   la plataforma. Se agrega directo a <body> (no dentro de .select-pill)
   para que no lo recorten los contenedores con overflow. */
.select-pill-popup{
  position: fixed;
  display: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(20, 30, 20, .14);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
  z-index: 3000;
}
.select-pill-popup.abierta{ display: block; }
.select-pill-popup-grupo{
  padding: 9px 14px 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brand-700);
  background: var(--brand-50);
}
.select-pill-popup-opcion{
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--ink-700);
  cursor: pointer;
  white-space: nowrap;
}
.select-pill-popup-opcion:hover{ background: var(--brand-50); color: var(--brand-700); }
.select-pill-popup-opcion.seleccionada{ background: var(--brand-600); color: #fff; font-weight: 600; }

/* Versión compacta del select-pill: para un filtro suelto que no debe
   ocupar toda la fila (ej. filtro de sección en la ficha del cliente). El
   select recorta el texto largo con "..." en vez de estirar la caja. */
.select-pill-sm{
  display: inline-flex;
  max-width: 230px;
  padding: 7px 12px;
  font-size: 12.5px;
}
.select-pill-sm select{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select-pill-sm svg{ width: 11px; height: 11px; }

/* ---------- Barra de selección múltiple (Clientes) ---------- */
.selection-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 14px;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--brand-700);
  font-weight: 600;
}
.selection-bar input[type="checkbox"]{ width: 17px; height: 17px; accent-color: var(--brand-500); }
.selection-bar .btn{ padding: 8px 14px; font-size: 13.5px; }

.list-row-check{
  flex-shrink: 0;
  width: 17px; height: 17px;
  accent-color: var(--brand-500);
  cursor: pointer;
}

/* ---------- Menú de clic derecho (Clientes) ---------- */
.context-menu{
  position: fixed;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  min-width: 190px;
}
.context-menu button{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
}
.context-menu button:hover{ background: var(--brand-50); }
.context-menu button svg{ width: 16px; height: 16px; color: var(--ink-500); flex-shrink: 0; }
.context-menu button.danger{ color: var(--danger); }
.context-menu button.danger:hover{ background: var(--danger-bg); }
.context-menu button.danger svg{ color: var(--danger); }

/* ---------- List rows (empresas, clientes) ---------- */
.list-row{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.15s ease;
}
.list-row:last-child{ border-bottom: none; }
.list-row:hover{ background: var(--brand-50); }

/* Cliente anidado dentro de su carpeta: mismo estilo, con sangría para
   dejar claro que "vive dentro" de la carpeta que aparece justo arriba. */
.list-row-anidado{
  padding-left: 54px;
  background: #fafaf8;
}
.list-row-anidado:hover{ background: var(--brand-50); }

.list-row .folder-icon{
  width: 42px; height: 42px;
  border-radius: 10px;
  background: #fdf1dc;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.list-row .folder-icon svg{ width: 20px; height: 20px; color: var(--accent-500); }
.list-row .folder-icon.folder-icon-logo{ background: var(--surface); border: 1px solid var(--line); overflow: hidden; padding: 0; }
.list-row .folder-icon.folder-icon-logo img{ width: 100%; height: 100%; object-fit: cover; }

/* Ícono de tipo de archivo (con su extensión) junto al nombre de cada
   documento guardado, para distinguir de un vistazo si es PDF, imagen,
   Word, etc. sin tener que abrirlo. */
.doc-file-icon{
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0;
  gap: 1px;
}
.doc-file-icon svg{ display: block; }
.doc-file-ext{
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
}

.list-row .info{ flex: 1 1 200px; min-width: 0; }
.list-row .info .title{ font-weight: 700; font-size: 14.5px; color: var(--ink-900); }
.list-row .info .subtitle{ font-size: 13px; color: var(--ink-500); margin-top: 1px; }

.list-row .meta{ font-size: 13.5px; color: var(--ink-500); white-space: nowrap; }

/* ---------- Badges ---------- */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.badge-owner{ background: var(--brand-50); color: var(--brand-700); }
.badge-neutral{ background: var(--line-soft); color: var(--ink-700); }
.badge-danger{ background: var(--danger-bg); color: var(--danger); }
.badge-borrador{ background: #fdf1dc; color: #8a5a10; }
.badge-success{ background: #e5f3e8; color: #1e7e34; }
.badge-warning{ background: #fdf1dc; color: #8a5a10; }
/* Texto de "Vence:" según estado (vigente / pronto a vencer / vencido) */
.venc-texto.venc-vigente{ color: #1e7e34; font-weight: 600; }
.venc-texto.venc-pronto{ color: #b7791f; font-weight: 600; }
.venc-texto.venc-vencido{ color: var(--danger); font-weight: 600; }

/* ---------- Tabs (page-level, ej. Borrador/Documentación/Completado) ---------- */
.tabs-top{
  display: none;
  gap: 6px;
  margin-bottom: 22px;
}
.tabs-top button{
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-700);
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
}
.tabs-top button.active{
  background: var(--brand-900);
  border-color: var(--brand-900);
  color: #fff;
}

/* ---------- Stepper de pasos del wizard (círculos numerados con ícono) ----------
   Navegador único de los 4 pasos del expediente del cliente, visible en
   escritorio y celular (reemplaza a .tabs-top, que ahora queda oculto:
   este stepper reutiliza toda su lógica delegándole el clic — ver app.js —
   así que no duplica nada). Cada círculo muestra un ícono propio del paso
   y cambia a un check cuando ese paso ya quedó atrás; el paso actual se
   resalta y una línea de progreso conecta los pasos completados. */
.wizard-steps-mobile{
  display: flex;
  align-items: flex-start;
  margin-bottom: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 6px 14px;
  /* Es hermano de .wizard-actions dentro de un flex row con
     justify-content:space-between; sin flex-grow se encoge a su
     contenido y queda angosto, con las etiquetas partidas feo. Con
     flex:1 ocupa todo el espacio disponible entre el título y los
     botones, dando a cada paso el ancho que necesita. */
  flex: 1 1 auto;
  min-width: 0;
}
.wizard-steps-mobile-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.wizard-steps-mobile-circle{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--brand-200);
  color: var(--ink-300);
  background: var(--surface);
  font-size: 14.5px;
  font-weight: 700;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wizard-steps-mobile-icon{ display: flex; width: 16px; height: 16px; }
.wizard-steps-mobile-icon svg{ width: 100%; height: 100%; }
.wizard-steps-mobile-check{ display: none; width: 16px; height: 16px; }
.wizard-steps-mobile-step.active .wizard-steps-mobile-circle,
.wizard-steps-mobile-step.completado .wizard-steps-mobile-circle{
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}
.wizard-steps-mobile-step.completado .wizard-steps-mobile-icon{ display: none; }
.wizard-steps-mobile-step.completado .wizard-steps-mobile-check{ display: block; }
.wizard-steps-mobile-label{
  width: 100%;
  font-size: 11px;
  color: var(--ink-500);
  text-align: center;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}
.wizard-steps-mobile-step.active .wizard-steps-mobile-label{
  color: var(--ink-900);
  font-weight: 700;
}
.wizard-steps-mobile-line{
  height: 2px;
  background: var(--brand-200);
  /* Ancho fijo y chico (no flex:1) para que las líneas conectoras no le
     quiten espacio a las etiquetas de cada paso — si compiten en igualdad
     con los pasos, "Documentos"/"Sanciones" quedan sin ancho suficiente
     y el texto se parte feo a la mitad de la palabra. En escritorio (ver
     media query más abajo) sí se estiran para llenar el espacio, como una
     barra de progreso real. */
  flex: 0 0 12px;
  margin-top: 17px;
}
.wizard-steps-mobile-line.completado{ background: var(--brand-600); }

/* Versión de escritorio/tablet ancho del mismo stepper: círculos y línea
   conectora más grandes, ya que aquí sí sobra espacio horizontal. */
@media (min-width: 681px){
  .wizard-steps-mobile{ padding: 20px 28px 18px; }
  .wizard-steps-mobile-circle{ width: 40px; height: 40px; font-size: 16px; }
  .wizard-steps-mobile-icon{ width: 18px; height: 18px; }
  .wizard-steps-mobile-check{ width: 18px; height: 18px; }
  .wizard-steps-mobile-label{ font-size: 13px; }
  .wizard-steps-mobile-line{ flex: 1 1 auto; margin-top: 20px; }
}

/* ---------- Section tabs (Identificación / Forma de pago / ...) ---------- */
.tabs-section{
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-section::-webkit-scrollbar{ display: none; }
.tabs-section button{
  background: none;
  border: none;
  padding: 12px 2px 13px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-500);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs-section button.active{
  color: var(--brand-700);
  border-bottom-color: var(--brand-500);
}
.tabs-section button:hover:not(.active){ color: var(--ink-900); }

.tab-panel{ display: none; }
.tab-panel.active{ display: block; }

/* ---------- Form elements ---------- */
.field{ margin-bottom: 13px; }
.field label{
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 5px;
}
.field label .req{ color: var(--danger); }
.field label .hint-inline{ font-weight: 400; color: var(--ink-500); }

.field-group{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Evita que un campo con texto largo (ej: "Emiratos Árabes Unidos") empuje
   la fila y deforme el layout: cada celda del grid puede encogerse hasta
   su contenido en vez de forzar su ancho natural. */
.field-group > .field, .field-group > .field-group{
  min-width: 0;
}
/* Ficha de solo lectura del cliente: cuando un campo queda solo en su fila
   (sin "compañero" al lado, como Dirección o Nombre completo) debe ocupar
   el ancho completo de las dos columnas en vez de quedarse encogido en la
   mitad izquierda. Solo aplica dentro de la ficha (no al formulario de
   captura, que sí necesita mantener sus columnas fijas). */
[data-cliente-detalle] .field-group > .field:last-child:nth-child(odd){
  grid-column: 1 / -1;
}

.input, select.input, textarea.input{
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink-900);
  background: var(--surface);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Los <select> nativos no permiten salto de línea en el valor mostrado
   (limitación del navegador); en vez de desbordar o romper la fila, el
   texto se recorta con puntos suspensivos. */
select.input{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.input::placeholder{ color: var(--ink-300); }
.input:disabled{ background: var(--line-soft); color: var(--ink-300); cursor: not-allowed; }
.input:focus{
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
textarea.input{ resize: vertical; min-height: 70px; }

/* Campo "Nacionalidad": la lista desplegable muestra nombres de país (para
   elegir fácil), pero una vez elegido se debe ver el gentilicio (ej:
   "Panameño/a") en vez del país. Un <select> nativo no permite mostrar un
   texto distinto al de la opción elegida, así que el <select> real queda
   invisible (pero sigue siendo clicable y su lista sigue mostrando los
   países) y una caja encima muestra el gentilicio correspondiente. */
.nat-select-box{ position: relative; }
.nat-select-box .nat-select{
  position: relative;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}
.nat-select-box .nat-select-display{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  background: var(--surface);
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.nat-select-box .nat-select-display.placeholder{ color: var(--ink-300); }
.nat-select-box .nat-select:focus + .nat-select-display{
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

/* Celdas que crecen verticalmente al escribir (autofit tipo Excel) */
textarea.auto-grow{
  resize: none;
  overflow: hidden;
  min-height: 0;
  line-height: 1.4;
  display: block;
}
/* Celdas de una sola línea: alto normal de un input */
textarea.auto-grow[rows="1"]{ min-height: 36px; }
/* Celdas de notas/párrafo: alto normal, de ahí crecen si hace falta */
textarea.auto-grow[rows="3"]{ min-height: 80px; }

.input-icon{
  position: relative;
}
.input-icon svg{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--ink-300);
}
.input-icon .input{ padding-left: 34px; }

.input-row-split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 10px;
}

.field-eyebrow{
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-600);
  margin: 18px 0 0;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
  text-transform: uppercase;
}
.field-eyebrow:first-child{ margin-top: 0; }
.field-eyebrow + .field-group,
.field-eyebrow + .field,
.field-eyebrow + .person-card,
.field-eyebrow + .person-card-narrow,
.field-eyebrow + .checklist{ margin-top: 12px; }

.checklist{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

/* Tabla de leyenda "Clasificación de riesgo" que va arriba del
   cuestionario, para que el usuario sepa qué significa cada nivel (y qué
   rango de puntaje le corresponde) mientras contesta las 21 preguntas.
   Estilo neutral, igual al resto de la página (mismo look que .checklist),
   en vez de colores tipo semáforo. */
.matriz-riesgo-leyenda{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 18px;
  font-size: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.matriz-riesgo-leyenda th{
  text-align: left;
  background: var(--surface-muted);
  color: var(--ink, #1c2b22);
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.matriz-riesgo-leyenda td{
  padding: 10px 14px;
  vertical-align: top;
  color: var(--ink, #1c2b22);
}
.matriz-riesgo-leyenda td:first-child{
  font-weight: 700;
  white-space: nowrap;
  width: 150px;
}
.matriz-riesgo-leyenda td:nth-child(2){
  font-weight: 700;
  white-space: nowrap;
  width: 90px;
  color: var(--primary);
}
.matriz-riesgo-leyenda tr + tr td{ border-top: 1px solid var(--line); }

/* Campo suelto (ej. Frecuencia de operaciones / Monto estimado) dentro de
   una tarjeta, para que visualmente combine con el .checklist de al lado
   en vez de verse "pelado" — mismo borde, radio y sombra, solo que aquí
   adentro va un label + select normal en lugar de checkboxes. */
.field-boxed{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px 16px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  margin-bottom: 0;
}
.checklist label{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  margin: 2px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900);
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.12s ease, color 0.12s ease;
}
/* La fila crece hacia abajo en vez de encimarse cuando trae un campo extra
   dentro (ej. "Otros" con su textarea de especificar), en lugar de quedar
   apretada en una sola línea con el checkbox. */
.checklist label:has(textarea),
.checklist label:has(input[type="text"]:not([type="checkbox"])){
  align-items: flex-start;
  flex-wrap: wrap;
}
.checklist label:last-child{ border-bottom: none; margin-bottom: 0; }
.checklist label:first-child{ margin-top: 0; }
/* Al pasar el cursor, un tinte muy sutil anticipa que la fila es
   clicable en toda su ancho (no solo sobre el cuadrito). */
.checklist label:hover{ background: var(--line-soft); }
/* La opción marcada queda resaltada en verde de marca, para que de un
   vistazo se note qué está seleccionado sin tener que buscar el check. */
.checklist label:has(> input[type="checkbox"]:checked){
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}
.checklist input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--brand-500);
  flex: none;
  cursor: pointer;
}

.check-inline{
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.check-inline label{
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 500;
}
.check-inline input{ width: 17px; height: 17px; accent-color: var(--brand-500); }

/* ---------- Pregunta tipo tarjeta con Sí/No (ej. PEP) ---------- */
.pep-question{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--line-soft);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.yesno-toggle{
  display: flex;
  gap: 20px;
  flex-shrink: 0;
  align-items: center;
}
.yesno-option{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.yesno-option input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  background: var(--surface);
}
.yesno-option input[type="radio"]:checked{
  border-color: var(--brand-500);
  background: var(--brand-500);
}
.yesno-option input[type="radio"]:checked::after{
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pep-question-title{
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-900);
}
.pep-question-title .info-tip{
  display: inline-flex;
  color: var(--ink-300);
  cursor: help;
}
.pep-question-title .info-tip svg{ width: 15px; height: 15px; }

.pep-warning-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fdf1dc;
  color: #a3670d;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
}
.pep-warning-pill svg{ width: 15px; height: 15px; color: var(--accent-500); flex-shrink: 0; }

.portal-cambios-alerta{
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fdf1dc;
  border: 1px solid #f2d9a8;
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.portal-cambios-alerta:hover{ background: #fbe8c8; }
.portal-cambios-alerta svg{ width: 22px; height: 22px; color: #a3670d; flex-shrink: 0; }
.portal-cambios-alerta-texto{ display: flex; flex-direction: column; gap: 2px; flex: 1; }
.portal-cambios-alerta-texto strong{ font-size: 14px; color: #7a4e09; }
.portal-cambios-alerta-texto span{ font-size: 12.5px; color: #8c6522; }
.portal-cambios-alerta .btn{ pointer-events: none; }

.pill-toggle{
  display: inline-flex;
  background: var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.pill-toggle button{
  border: none;
  background: transparent;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 7px;
  color: var(--ink-700);
}
.pill-toggle button.active{
  background: var(--brand-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.type-toggle{
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 88px;
}
.type-toggle button{
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 9px 6px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 8px;
  color: var(--ink-700);
  text-align: center;
}
.type-toggle button.active{
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}

/* ---------- New-client layout ---------- */
.client-layout{
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 22px;
  align-items: start;
}

.client-header-card{
  padding: 20px;
  display: flex;
  gap: 18px;
}

.avatar-upload{
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--brand-50);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s ease;
}
.avatar-upload:hover,
.avatar-upload:focus-visible{ border-color: var(--brand-200); outline: none; }
.avatar-upload svg{ width: 40px; height: 40px; color: var(--brand-200); }
.avatar-upload img{
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-upload-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(20, 30, 22, 0.55);
  color: #fff;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.avatar-upload-overlay svg{ width: 18px; height: 18px; color: #fff; }
.avatar-upload-overlay span{ font-size: 10px; font-weight: 600; letter-spacing: .3px; }
.avatar-upload:hover .avatar-upload-overlay,
.avatar-upload:focus-visible .avatar-upload-overlay{ opacity: 1; }

/* Ficha del cliente (solo lectura): mismo círculo, pero sin la insinuación
   de que se puede subir un logo desde ahí (eso solo se hace editando). */
.avatar-upload.avatar-upload-solo-lectura{ cursor: default; }
.avatar-upload.avatar-upload-solo-lectura:hover,
.avatar-upload.avatar-upload-solo-lectura:focus-visible{ border-color: transparent; }
.avatar-upload.avatar-upload-solo-lectura .avatar-upload-overlay{ display: none; }
/* Ficha del cliente: el logo (cuando existe) sí se puede clickear para
   verlo en grande con nuestro propio visor — se nota con el cursor y
   un pequeño ícono de lupa que aparece al pasar el mouse. */
.avatar-upload.avatar-upload-clickable{ cursor: pointer; position: relative; }
.avatar-upload.avatar-upload-clickable:hover,
.avatar-upload.avatar-upload-clickable:focus-within{ border-color: var(--brand-200); }
.avatar-upload.avatar-upload-clickable::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(20, 30, 22, 0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/22px no-repeat;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.avatar-upload.avatar-upload-clickable:hover::after{ opacity: 1; }

.client-header-fields{ flex: 1; display: flex; flex-direction: column; gap: 14px; }
.client-header-fields .name-input{
  font-size: 19px;
  font-weight: 700;
  border: none;
  border-bottom: 1px dashed var(--line);
  padding: 4px 0 8px;
  background: transparent;
  color: var(--ink-900);
  width: 100%;
  outline: none;
}
.client-header-fields .name-input::placeholder{ color: var(--ink-300); }
/* La fila "Razón social + Estatus" (y variantes con badge de Borrador)
   trae "flex:1" en línea sobre el nombre y un grupo de estatus que no
   se achica (flex-shrink:0) al lado. Sin un mínimo, al angostar la
   ventana (no solo en celular — también con la ventana de escritorio
   más chica, o una ventana dividida) el navegador puede achicar el
   nombre casi a cero, partiendo el texto letra por letra en varias
   líneas. Con min-width y flex-wrap en la fila, si de verdad no cabe
   todo junto, el nombre baja a su propia línea completa en vez de
   aplastarse. */
.client-header-fields .name-input{ min-width: 200px; }
.client-header-fields > div[style*="display:flex"]{
  flex-wrap: wrap;
  row-gap: 10px;
}

.folder-box{
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 2px;
  background: var(--brand-50);
}
.folder-box .folder-icon-lg{
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #fdf1dc;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.folder-box .folder-icon-lg svg{ width: 15px; height: 15px; color: var(--accent-500); }
.folder-box .folder-copy{ flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.folder-box .folder-copy strong{ font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.folder-box .folder-copy p{ display: none; }
.folder-box .folder-copy select.input{
  flex: 1;
  min-width: 200px;
  padding: 7px 12px;
  font-size: 13px;
  background: var(--surface);
}

/* Sidebar "Expediente" widget */
.expediente-card{ padding: 22px; position: sticky; top: 90px; }
.expediente-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.expediente-head span.label{
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-500);
}
.expediente-head span.count{ font-size: 12.5px; color: var(--ink-500); font-weight: 700; }

.expediente-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  transition: background .18s ease;
}
.expediente-item .num{
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--ink-700);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.expediente-item.done .num{ background: var(--brand-500); color: #fff; }
.expediente-item span.text{ font-size: 13.5px; font-weight: 600; color: var(--ink-900); transition: color .18s ease; }

/* Paso activo del wizard, resaltado dinámicamente al cambiar de pestaña
   (Formulario DDC / Riesgo y Diligencia / Documentos / Búsqueda en
   sanciones), para que siempre sea claro en cuál va el usuario. */
.expediente-item.active{ background: var(--brand-50); }
.expediente-item.active .num{ background: var(--brand-500); color: #fff; transform: scale(1.08); }
.expediente-item.active span.text{ color: var(--brand-700); }

/* Persona card (beneficiarios) */
.person-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.person-card-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.person-card-head .who{
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 14px;
}
.person-card-head .who svg{ width: 17px; height: 17px; color: var(--brand-600); }
.person-card-head .trash{ color: var(--danger); }
.person-card-head .trash svg{ width: 17px; height: 17px; }

/* Botón redondo de "quitar" (ej. quitar una consulta de sanciones antes de
   guardarla, o quitar una que ya quedó en el expediente). Antes usaba la
   clase .trash suelta, que solo tiene estilo dentro de .person-card-head;
   fuera de ahí se veía como un botón sin diseñar. */
.icon-btn-danger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-500);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn-danger svg{ width: 14px; height: 14px; }

/* Botón "+" para fusionar cargos de dirigentes: se integra al encabezado
   de la tarjeta (mismo estilo que el ícono de persona de al lado), sin
   fondo ni borde propio -- lo único nuevo respecto al diseño original es
   este símbolo "+" clicable. */
.icon-btn-add{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 26px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn-add:hover{ background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); }
.icon-btn-add svg{ width: 13px; height: 13px; flex-shrink: 0; }

/* Panel de checkboxes que aparece al picar el "+" de una tarjeta de
   dirigente, para marcar que esa misma persona también ocupa otro cargo. */
.cargo-picker{
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cargo-picker[hidden]{ display: none; }
.cargo-picker label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.cargo-picker input[type="checkbox"]{ width: 15px; height: 15px; accent-color: var(--brand-600); }
.icon-btn-danger:hover{
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.icon-btn-danger:disabled{ opacity: .5; cursor: default; }

/* Lápiz "Editar" de un documento ya subido: mismo botón redondo que el de
   la basura, pero con el color de marca al pasar el mouse (no rojo). */
.icon-btn-editar:hover{
  background: var(--brand-200);
  border-color: var(--brand-600);
  color: var(--brand-700);
}
/* Formulario que se despliega debajo de la fila al picar el lápiz. */
.doc-edicion-panel{
  margin: -2px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.doc-edicion-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 14px;
}
.doc-edicion-grid .field{ margin-bottom: 0; }
.doc-edicion-campo-ancho{ grid-column: 1 / -1; }

/* Arrastrar y soltar archivos: destino resaltado mientras se arrastra un
   archivo encima (renglón del checklist o panel de subir/editar). */
.doc-drop-activo{
  outline: 2px dashed var(--brand-500);
  outline-offset: -2px;
  background: var(--brand-50) !important;
  border-radius: var(--radius-sm);
}
.doc-edicion-archivo-actual{ font-size: 13px; color: var(--ink-700); margin-bottom: 6px; }
.doc-edicion-acciones{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.doc-edicion-msg{ margin-right: auto; font-size: 12.5px; color: var(--danger); }

/* Tarjeta de dirigente: sin marco, solo con menos espacio entre columnas */
.person-card-narrow{
  border: none;
  border-radius: 0;
  padding: 0 0 12px;
}
.person-card-narrow + .person-card-narrow{
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.person-card-narrow .field-group{
  gap: 10px;
}

/* ---------- Riesgo y Diligencia (paso 2 del expediente) ---------- */
.risk-toggle{
  display: flex;
  gap: 10px;
}
.risk-toggle button{
  flex: 1;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-700);
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-align: center;
}
.risk-toggle button[data-risk-btn="bajo"].active{
  border-color: var(--success);
  background: var(--brand-50);
  color: var(--brand-700);
}
.risk-toggle button[data-risk-btn="medio"].active{
  border-color: var(--accent-500);
  background: #fdf6e6;
  color: #a3670d;
}
.risk-toggle button[data-risk-btn="alto"].active{
  border-color: var(--danger);
  background: var(--danger-bg);
  color: #a32d2d;
  font-weight: 700;
}

/* ---------- Matriz de riesgo: cuestionario de 21 preguntas ---------- */
.matriz-riesgo-fila{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.matriz-riesgo-fila:first-child{ padding-top: 0; }
.matriz-riesgo-num{
  flex: 0 0 22px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-500);
}
.matriz-riesgo-texto{
  flex: 1;
  font-size: 13px;
  color: var(--ink-700);
}
.matriz-riesgo-riesgo-si{
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  color: var(--ink-500);
}
.matriz-riesgo-si-no{
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}
.matriz-riesgo-si-no button{
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-700);
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  min-width: 56px;
}
.matriz-riesgo-si-no button.active{
  border-color: var(--brand-500, var(--success));
  background: var(--brand-50);
  color: var(--brand-700);
}
.matriz-riesgo-si-no button[data-matriz-btn="parcial"].active{
  border-color: #c8891a;
  background: #fbeed7;
  color: #966212;
}
.matriz-riesgo-factor-header{
  margin: 18px 0 4px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--brand-700, var(--ink-700));
  border-bottom: 1px solid var(--line);
}
.matriz-riesgo-factor-header:first-child{ margin-top: 0; }
.matriz-riesgo-input-texto{
  flex: 0 0 220px;
  padding: 7px 10px;
  font-size: 12.5px;
}
.matriz-riesgo-pais-wrap{
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.matriz-riesgo-input-pais{
  padding: 7px 10px;
  font-size: 12.5px;
}
.matriz-riesgo-pais-wrap .matriz-riesgo-input-texto{
  flex: 0 0 auto;
  width: 100%;
}

.matriz-riesgo-resultado{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface-2, #f7f8f7);
  border-radius: var(--radius-md);
}
.matriz-riesgo-puntaje{
  font-size: 13px;
  color: var(--ink-500);
}
.matriz-riesgo-puntaje-num{
  font-size: 22px;
  font-weight: 800;
  color: var(--ink-900);
  margin-right: 4px;
}
.matriz-riesgo-resultado-badges{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.badge-risk-bajo{ background: var(--brand-50); color: var(--brand-700); }
.badge-risk-medio{ background: #fdf6e6; color: #a3670d; }
.badge-risk-alto{ background: var(--danger-bg); color: #a32d2d; }

.compliance-approval{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  align-items: end;
}
.compliance-approval .approve-check{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 9px;
  color: var(--ink-900);
}
.compliance-approval .approve-check input{ width: 18px; height: 18px; accent-color: var(--brand-500); }

/* ---------- Checklist de documentos (paso 3 del expediente) ---------- */
.doc-checklist{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.doc-checklist > .field-eyebrow{
  margin: 0;
  padding: 14px 16px 10px;
  background: var(--surface-2, #f7f8f7);
  border-bottom: 1px solid var(--line);
}
.doc-checklist > .field-eyebrow:not(:first-child){
  margin-top: 8px;
  border-top: 1px solid var(--line);
}
.doc-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.doc-checklist > .doc-item:last-child{ border-bottom: none; }
.doc-item .badge{ flex-shrink: 0; }
.doc-name{ display: block; flex: 1; font-size: 14px; font-weight: 600; color: var(--ink-900); }
.doc-actions{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-sm{ padding: 6px 12px; font-size: 12.5px; }

/* Panel con el/los archivo(s) ya subido(s) bajo un renglón del checklist
   (genérico o con vigencia): fondo suave para diferenciarlo del renglón de
   arriba, con el mismo respiro lateral que el resto del checklist para que
   las tarjetas de archivo no queden pegadas al marco exterior. */
.doc-guardados{
  padding: 14px 16px 16px;
  background: var(--brand-50);
  border-bottom: 1px solid var(--line-soft);
}
.doc-checklist > .doc-guardados:last-child{ border-bottom: none; }

/* Archivo(s) ya subido(s): clicable para verlo en una pestaña nueva, con su
   botón de eliminar aparte. */
.doc-archivo-fila{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(27, 36, 30, .04);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.doc-archivo-fila:last-child{ margin-bottom: 0; }
/* Con muchos cargos el nombre se hace largo: la fila nunca debe ensanchar la página, se corta con "..." */
.doc-archivo-fila{ min-width: 0; max-width: 100%; box-sizing: border-box; }
.doc-guardados{ min-width: 0; max-width: 100%; }
.doc-archivo-nombre{ min-width: 0; }
.doc-archivo-fila:hover{ border-color: var(--brand-200); box-shadow: 0 2px 6px rgba(27, 36, 30, .08); }
.doc-archivo-link{
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  color: var(--ink-900);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.doc-archivo-link svg{ width: 16px; height: 16px; flex-shrink: 0; color: var(--brand-600); }
.doc-archivo-link:hover .doc-archivo-nombre{ text-decoration: underline; color: var(--brand-700); }
.doc-archivo-nombre{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-archivo-meta{ color: var(--ink-500); font-size: 12px; flex-shrink: 0; white-space: nowrap; }
/* Documentos "Otro": el nombre que escribió el usuario va arriba (título) y
   el nombre real del archivo subido va debajo (subtítulo), igual que en la
   ficha del cliente, en vez de concatenar ambos en una sola línea. */
.doc-archivo-info{ display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.doc-archivo-titulo{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-archivo-subtitulo{ font-size: 12px; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }

/* Visor de documentos (PDF/imágenes) en celular: en escritorio "ver
   documento" abre una pestaña nueva (ver app.js); en celular se usa este
   panel propio dentro de la misma página, con un botón de cerrar (✕)
   bien visible en vez de depender del botón atrás del navegador. */
.doc-visor-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(27, 36, 30, .55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.doc-visor-overlay.activo{ display: flex; }
.doc-visor-modal{
  background: var(--surface);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* En escritorio, tarjeta centrada con sombra sobre el fondo oscurecido
   (no de borde a borde como en celular) — mismo espíritu que un visor
   de PDF nativo tipo Edge/Copilot: documento en su propia "ventana"
   flotante en medio de la pantalla. */
@media (min-width: 681px){
  .doc-visor-overlay{ padding: 20px; }
  .doc-visor-modal{
    width: 100%;
    max-width: 1180px;
    height: 100%;
    max-height: 95vh;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 26, 18, .45);
  }
}
/* Botón "pantalla completa" del visor: la tarjeta pasa a usar todo el
   espacio de la pestaña (sin el marco centrado ni el máximo ancho),
   igual que se veía antes con el visor nativo del navegador. */
.doc-visor-overlay.doc-visor-overlay-expandido{ padding: 0; }
.doc-visor-overlay.doc-visor-overlay-expandido .doc-visor-modal{
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
/* Barra de herramientas del visor propio — inspirada en visores de PDF
   modernos (Edge, Syncfusion, etc.): navegación de página, zoom,
   buscador, y a la derecha imprimir/descargar/cerrar. Los grupos con
   .doc-visor-solo-pdf solo aplican a PDF; para imágenes el modal no
   tiene la clase .doc-visor-modal-pdf y esos grupos se ocultan. */
.doc-visor-toolbar{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted, #f4f6f4);
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  position: relative;
}
.doc-visor-modal:not(.doc-visor-modal-pdf) .doc-visor-solo-pdf{ display: none !important; }
.doc-visor-tgrupo{
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.doc-visor-tgrupo-derecha{ margin-left: auto; }
.doc-visor-tsep{
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 4px;
  flex-shrink: 0;
}
.doc-visor-tbtn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-500);
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.doc-visor-tbtn svg{ width: 17px; height: 17px; }
.doc-visor-tbtn:hover{ background: var(--brand-200); color: var(--brand-700); }
.doc-visor-tbtn-cerrar:hover{ background: var(--danger-bg); color: var(--danger); }
.doc-visor-pag-indicador, .doc-visor-zoom-indicador{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  padding: 0 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-visor-tbuscar{
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.doc-visor-buscar-input{
  width: 190px;
  max-width: 40vw;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 12.5px;
  background: var(--surface);
  color: var(--ink-900);
}
.doc-visor-buscar-contador{
  font-size: 12px;
  color: var(--ink-500);
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-visor-titulo{
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  padding: 0 8px;
  /* Centrado real respecto a todo el ancho de la barra (no solo en el
     espacio que sobra entre los botones de la izquierda y la derecha,
     que casi nunca es simétrico) — se saca del flujo del flex y se
     centra con position:absolute sobre la barra completa. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 46%;
  pointer-events: none;
}
/* Celular: la barra de herramientas es la misma que en escritorio (no
   hay una versión aparte), pero se ajusta para que quepa cómoda en una
   pantalla angosta: el nombre del archivo y el botón de pantalla
   completa se ocultan (en celular el visor ya ocupa toda la pantalla,
   así que "pantalla completa" no aporta nada ahí), y el buscador y los
   indicadores se achican un poco. Si aun así no caben todos los
   íconos, la barra desliza horizontalmente (overflow-x:auto ya
   definido arriba) en vez de recortarse. */
@media (max-width: 680px){
  .doc-visor-toolbar{ padding: 8px 10px; gap: 4px; }
  .doc-visor-titulo{ display: none; }
  [data-doc-visor-expandir]{ display: none; }
  /* "Ajustar al ancho" / "Ajustar a la página" ocupan espacio que hace
     falta en una pantalla angosta, y en celular casi nadie los usa
     (ya se puede hacer zoom con dos dedos) — se ocultan solo aquí,
     dejando lugar para que el resto de los íconos quepan sin tener
     que deslizar la barra. */
  [data-doc-visor-ajustar-ancho], [data-doc-visor-ajustar-pagina]{ display: none; }
  .doc-visor-buscar-input{ width: 130px; }
  .doc-visor-pag-indicador, .doc-visor-zoom-indicador{ font-size: 11.5px; padding: 0 3px; }
  .doc-visor-tsep{ margin: 0 2px; }
  /* El botón de cerrar (X) no debe depender de que el usuario deslice
     la barra hacia la derecha para encontrarlo — queda "pegado" al
     borde derecho, siempre visible, aunque el resto de la barra (que sí
     puede no caber completa) se deslice por debajo. */
  .doc-visor-tbtn-cerrar{
    position: sticky;
    right: 0;
    background: var(--surface-muted, #f4f6f4);
    z-index: 2;
  }
}
.doc-visor-cuerpo-wrap{
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}
.doc-visor-cuerpo{
  flex: 1;
  min-width: 0;
  background: var(--ink-900, #1b241e);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
/* Insignia flotante con el número de página, visible un instante
   mientras se desliza por el documento (arrastrando el scroll o con la
   rueda) y luego se desvanece sola. */
.doc-visor-pag-flotante{
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.68);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 6;
}
.doc-visor-pag-flotante.visible{ opacity: 1; }
.doc-visor-modal:not(.doc-visor-modal-pdf) .doc-visor-pag-flotante{ display: none; }
.doc-visor-cuerpo img{ max-width: 100%; max-height: 100%; object-fit: contain; }
/* PDF renderizado por nosotros con PDF.js: cada página es un <canvas>
   independiente, apilado verticalmente como hojas de papel, con scroll
   propio — sin ninguna barra de herramientas del navegador de por
   medio. */
.doc-visor-cuerpo.doc-visor-cuerpo-paginas{
  display: block;
  overflow-y: auto;
  padding: 22px 0;
}
/* Barra de scroll delgada y redondeada, en vez de la barra ancha y
   cuadrada por defecto del navegador. */
.doc-visor-cuerpo.doc-visor-cuerpo-paginas{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.35) transparent;
}
.doc-visor-cuerpo.doc-visor-cuerpo-paginas::-webkit-scrollbar{ width: 10px; }
.doc-visor-cuerpo.doc-visor-cuerpo-paginas::-webkit-scrollbar-track{ background: transparent; }
.doc-visor-cuerpo.doc-visor-cuerpo-paginas::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,.35);
  border-radius: 20px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.doc-visor-cuerpo.doc-visor-cuerpo-paginas::-webkit-scrollbar-thumb:hover{
  background-color: rgba(255,255,255,.55);
  background-clip: content-box;
}
.doc-visor-paginas{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.doc-visor-pagina-canvas{
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  max-width: calc(100% - 40px);
  height: auto;
}
/* Destello breve para señalar la página donde apareció un resultado
   de búsqueda (no hay resaltado exacto de la palabra sobre el canvas,
   así que se marca la hoja completa un instante). */
.doc-visor-pagina-resaltada{
  animation: doc-visor-destello 1.1s ease;
}
@keyframes doc-visor-destello{
  0%   { box-shadow: 0 0 0 4px var(--brand-500, #2f8f4e), 0 6px 18px rgba(0,0,0,.35); }
  100% { box-shadow: 0 6px 18px rgba(0,0,0,.35); }
}
.doc-visor-cargando{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-900, #1b241e);
}
.spinner{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  animation: doc-visor-girar .7s linear infinite;
}
@keyframes doc-visor-girar{ to{ transform: rotate(360deg); } }

/* ---------- Resultados de búsqueda en listas de sanciones (paso 4) ---------- */
.sanciones-alert{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.sanciones-ok{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.sanciones-list{
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.sanciones-hit{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.sanciones-hit:last-child{ border-bottom: none; }
.sanciones-hit .nombre{ font-weight: 700; font-size: 14px; color: var(--ink-900); }
.sanciones-hit .alias{ font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.sanciones-hit .tags{ display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; max-width: 260px; }
.doc-hint{ display: block; font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }

/* ---------- Sugerencias de búsqueda (paso 4, listas de sanciones) ---------- */
.sanciones-sugerencias{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.sanciones-sugerencias .sug-label{ width: 100%; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 2px; }
.chip-sugerencia{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  transition: opacity .15s;
}
.chip-sugerencia svg{ width: 13px; height: 13px; flex-shrink: 0; }
.chip-sugerencia:hover{ opacity: 0.8; }
.chip-sugerencia.usada{ opacity: 0.5; }
.chip-sugerencia .rol{ opacity: 0.75; font-weight: 600; }
.chip-dignatario{ background: var(--brand-50); color: var(--brand-700); }
.chip-beneficiario{ background: #e8eefb; color: var(--info); }

/* ---------- Modal (ej. confirmación de Informe ROS) ---------- */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(27,36,30,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.modal-box{
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-md);
}
.modal-box h3{ margin: 0 0 10px; font-size: 17px; color: var(--ink-900); }

/* Aviso de confirmación (ej. "¿Salir sin guardar?"): ícono de advertencia
   arriba, título, texto corto y dos botones. */
.modal-box-confirm{
  max-width: 400px;
  padding: 28px 28px 24px;
  text-align: center;
  animation: modal-confirm-in .18s ease-out;
}
.modal-confirm-icono{
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #fdf1dc;
  color: #c27c0e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-confirm-icono svg{ width: 24px; height: 24px; }
.modal-box-confirm h3{ font-size: 18px; margin: 0 0 8px; }
.modal-box-confirm p{ margin: 0 0 22px; color: var(--ink-500); font-size: 14px; line-height: 1.5; }
.modal-confirm-acciones{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.modal-confirm-acciones .btn{ min-width: 150px; justify-content: center; }
@keyframes modal-confirm-in{
  from{ opacity: 0; transform: translateY(6px) scale(.98); }
  to{ opacity: 1; transform: none; }
}

/* ---------- Ficha del cliente: barra de botones de la cabecera (Volver,
   Exportar, Editar, Crear ROS, Eliminar, Ver Matriz de Riesgo, Portal del
   cliente). Nunca baja de línea (nowrap) EN ESCRITORIO: si en pantallas
   angostas de escritorio no caben todos, se puede deslizar horizontalmente
   con el mouse, pero sin mostrar la barra de scroll fea del navegador —
   queda oculta a propósito, el desplazamiento sigue funcionando igual.
   Todo esto va dentro de min-width:681px a propósito: por debajo de eso
   (celular) esta misma barra (.page-head .actions) se convierte en el
   botón flotante "+" ya existente (ver @media max-width:680px más abajo,
   sección "Botones de acción de la cabecera → botón flotante") — si estas
   reglas no se limitaran a escritorio, pisarían esa conversión a botón
   flotante en celular (fue justo el bug reportado: en el celular la barra
   se veía como una fila suelta y cortada en vez del "+" flotante). ---------- */
.ficha-acciones-sin-scrollbar{
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge/IE viejo */
}
.ficha-acciones-sin-scrollbar::-webkit-scrollbar{ display: none; } /* Chrome/Safari/Edge nuevo */
@media (min-width: 681px){
  .ficha-acciones-bar{
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex: 1 1 100%;
    max-width: 100%;
  }
  /* Botones un poco más compactos que el tamaño estándar (10px 18px / 14px),
     solo en esta barra: son 7 botones y así caben más sin recortarse en
     pantallas normales, sin tener que depender tanto del scroll horizontal. */
  .ficha-acciones-sin-scrollbar .btn{
    padding: 8px 13px;
    font-size: 13px;
    gap: 6px;
  }
  .ficha-acciones-sin-scrollbar .btn svg{ width: 15px; height: 15px; }
  /* "Editar" sigue siendo el ÚLTIMO botón en el HTML (así construirFabAcciones()
     lo sigue eligiendo como el círculo principal del "+" en celular), pero en
     escritorio se ve pegado a "Volver a Clientes" usando `order` — esto solo
     cambia el orden visual, no el orden real del DOM, así que no afecta nada
     en celular. */
  [data-ficha-btn-volver]{ order: -2; }
  [data-ficha-btn-editar]{ order: -1; }
}

/* ---------- Ficha del cliente: botón "Ver Matriz de Riesgo" + bloque de
   Estatus, en la cabecera junto al nombre de la empresa ---------- */
.btn-matriz-riesgo{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.btn-matriz-riesgo:hover{ border-color: var(--brand-500, var(--brand-700)); box-shadow: var(--shadow-xs); }
.btn-matriz-riesgo svg{ width: 16px; height: 16px; flex-shrink: 0; }
.ficha-estatus-wrap{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding-left: 16px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
}
.ficha-estatus-label{
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-500);
  line-height: 1;
  margin: 0;
}
/* El badge normal (.badge) trae padding:4px 13px y line-height:1.5 (pensado
   para verse bien suelto en una tabla/lista); aquí, justo debajo de la
   etiqueta ESTATUS, eso lo hacía ver más separado y más grande de lo que
   debía. Se achica solo en este contexto para que quede pegado y compacto,
   como en la imagen de referencia. */
.ficha-estatus-wrap .badge{ line-height: 1; padding: 3px 11px; margin: 0; }

/* Variante más ancha/alta del modal genérico, usada por "Ver Matriz de
   Riesgo" en la ficha del cliente: necesita espacio para las 40 preguntas
   con su respuesta, con scroll interno en vez de agrandar la página. */
.modal-box-lg{
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.modal-box-lg .modal-box-scroll{
  overflow-y: auto;
  padding-right: 4px;
}

/* Tarjetas de opción dentro del modal "¿Qué quieres exportar?" (Clientes):
   cada una es un botón grande y clicable, no un radio pequeño, para que el
   conteo de empresas sea lo primero que se lea antes de decidir. */
.export-opcion{
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.export-opcion:hover{ border-color: var(--brand-500); background: var(--brand-50); transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.export-opcion:active{ transform: translateY(0); }
.export-opcion-activa{ border-color: var(--brand-200); background: var(--brand-50); }
.export-opcion-icon{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand-100);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.export-opcion-icon svg{ width: 19px; height: 19px; }
.export-opcion-texto{ flex: 1; min-width: 0; }
.export-opcion-titulo{ font-size: 14px; font-weight: 700; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.export-opcion-sub{ font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.export-opcion-flecha{ width: 16px; height: 16px; color: var(--ink-400); flex-shrink: 0; }

/* Resalta brevemente un campo al que "Seguir editando" (aviso de datos
   obligatorios sin llenar) acaba de llevar al usuario. */
.campo-faltante-resaltado{
  outline: 2px solid var(--danger) !important;
  outline-offset: 1px;
  border-radius: 8px;
  transition: outline-color 0.3s ease;
}

/* ---------- Calendario ---------- */
.calendar-layout{ display: flex; gap: 20px; align-items: flex-start; }
.calendar-agenda{ width: 270px; flex-shrink: 0; }
.calendar-main{ flex: 1; min-width: 0; }
.calendar-toolbar{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.calendar-toolbar-mid{ display: flex; align-items: center; gap: 10px; }
.calendar-mes-label{ font-size: 15px; font-weight: 700; color: var(--ink-900); text-transform: capitalize; min-width: 150px; text-align: center; }
.icon-btn{ display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-500); cursor: pointer; flex-shrink: 0; }
.icon-btn:hover{ background: var(--line-soft); }
.icon-btn svg{ width: 15px; height: 15px; }
.calendar-weekdays{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.calendar-weekdays span{ text-align: center; font-size: 11.5px; color: var(--ink-500); font-weight: 700; }
.calendar-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-day{ min-height: 78px; border-radius: 8px; border: 1px solid var(--line-soft); padding: 6px 7px; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.calendar-day:hover{ background: var(--line-soft); }
.calendar-day-fuera{ opacity: .35; }
.calendar-day-hoy{ border-color: var(--brand-500); background: var(--brand-50); }
.calendar-day .num{ font-size: 12.5px; font-weight: 700; color: var(--ink-900); }
.calendar-day .dots{ display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.calendar-dot{ width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.calendar-day .mas{ font-size: 10.5px; color: var(--ink-500); margin-top: 3px; }
.calendar-agenda-item{ display: flex; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.calendar-agenda-item:last-child{ border-bottom: none; }
.calendar-agenda-dot{ width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }

/* Utility */
.mt-0{ margin-top: 0 !important; }
.text-muted{ color: var(--ink-500); }
.divider{ height: 1px; background: var(--line-soft); margin: 26px 0; }

@media (max-width: 1180px){
  /* minmax(0, 1fr) en vez de 1fr a secas: una columna de grid con "1fr"
     tiene un ancho mínimo implícito igual al de su contenido más ancho
     (min-width:auto), así que si algo adentro no se encoge (un input,
     otro grid anidado como .input-row-split), esa columna -- y toda la
     tarjeta/página -- se desborda hacia los lados en vez de ajustarse.
     minmax(0, 1fr) le dice al grid que sí puede encogerse hasta 0 antes
     de desbordar, que es lo que realmente queríamos. */
  .client-layout{ grid-template-columns: minmax(0, 1fr); }
  .field-group{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ficha del cliente: secciones estilo "documento" y numeral romano ---------- */
.detalle-seccion-titulo{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin: 30px 0 12px;
}
.detalle-valor{
  font-size: 13.5px;
  color: var(--ink-900);
  padding-top: 2px;
  min-height: 19px;
  /* Si el valor guardado es un texto largo sin espacios, se corta dentro
     de su columna en vez de desbordarse por encima del resto de la
     página. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.detalle-aviso{
  font-size: 13px;
  color: var(--ink-500);
  background: var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

/* ---------- Reportes ---------- */
.reportes-layout{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
  min-width: 0;
}
.reportes-layout > *{ min-width: 0; }
.reportes-layout [data-reportes-catalogo]{ padding: 0; overflow: hidden; }
.reportes-layout .grupo-label{
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  text-transform: uppercase;
  padding: 18px 18px 10px;
}
.reporte-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  cursor: pointer;
  border-left: 3px solid transparent;
  border-top: 1px solid var(--line-soft);
  transition: background 0.15s ease, border-left-color 0.15s ease;
}
.reportes-layout .grupo-label + .reporte-item{ border-top: none; }
.reporte-item:hover{ background: var(--brand-50); }
.reporte-item.active{ background: var(--brand-50); border-left-color: var(--brand-500); }
.reporte-item.active .nombre{ color: var(--brand-700); }
.reporte-item.active .reporte-item-icon{ background: var(--brand-500); color: #fff; }
.reporte-item.active .reporte-item-chevron{ color: var(--brand-500); opacity: 1; }
.reporte-item.disabled{ opacity: 0.5; cursor: not-allowed; }
.reporte-item.disabled:hover{ background: none; }

.reporte-item-icon{
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--brand-50);
  color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.reporte-item-icon svg{ width: 17px; height: 17px; }
.reporte-item-texto{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reporte-item .nombre{ font-size: 13.5px; font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.reporte-item .subtitulo{ font-size: 11.5px; color: var(--ink-500); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reporte-item-chevron{ flex-shrink: 0; width: 15px; height: 15px; color: var(--ink-300); opacity: 0; transition: opacity 0.15s ease; }
.reporte-item:hover .reporte-item-chevron{ opacity: 1; }

.reportes-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
}
.reportes-panel-head h2{ font-size: 16px; margin: 0 0 4px; color: var(--ink-900); }
.reportes-panel-head p{ font-size: 13px; color: var(--ink-500); margin: 0; }

.reporte-tabla-wrap{ overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.reporte-tabla{ width: 100%; min-width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.reporte-tabla th{
  text-align: left;
  padding: 12px 14px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.reporte-tabla th:first-child, .reporte-tabla td:first-child{ min-width: 150px; }
.reporte-tabla td{ padding: 12px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink-900); line-height: 1.4; white-space: normal; }
.reporte-tabla td .text-muted{ display: block; margin-top: 2px; }
.reporte-tabla tbody tr:nth-child(even){ background: var(--bg); }
.reporte-tabla tbody tr:hover{ background: var(--brand-50); }
.reporte-tabla tr:last-child td{ border-bottom: none; }

@media (max-width: 980px){
  .reportes-layout{ grid-template-columns: 1fr; }
}

@media (max-width: 680px){
  /* Reporte "Alertas abiertas" (y cualquier otro que tenga sus <td> con
     data-label): en vez de una tabla de 6 columnas que obliga a deslizar
     horizontalmente para leer, cada fila se convierte en una tarjeta —
     el nombre del cliente como título, el resto como pares etiqueta:
     valor, y el estado como badge al final. Solo afecta filas que traen
     data-label (las demás tablas de Reportes siguen con scroll horizontal
     normal hasta que se les agregue el mismo tratamiento). */
  .reporte-tabla-wrap{ border: none; overflow-x: visible; }
  .reporte-tabla{ display: block; width: 100%; }
  .reporte-tabla thead{ display: none; }
  .reporte-tabla tbody{ display: block; }
  .reporte-tabla tr{ display: block; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
  .reporte-tabla tr:nth-child(even){ background: var(--surface); }
  .reporte-tabla td[data-label]{ display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: none; }
  .reporte-tabla td[data-label]::before{ content: attr(data-label); font-size: 11.5px; font-weight: 700; color: var(--ink-500); flex-shrink: 0; }
  .reporte-tabla td[data-label]:first-child{ display: block; font-size: 15px; font-weight: 700; color: var(--ink-900); padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
  .reporte-tabla td[data-label]:first-child::before{ content: none; }
  .reporte-tabla td[data-label]:last-child{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .reporte-tabla td[data-label]:last-child::before{ content: none; }
  .reporte-tabla td[data-label]:last-child .btn{ margin-right: 0 !important; flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   Adaptación a tablet y celular
   La versión de escritorio/laptop no cambia: todas las reglas de aquí en
   adelante viven dentro de @media y solo se activan por debajo de cierto
   ancho de pantalla. Dos escalones:
   - Tablet (1180px–681px): se conserva el sidebar de siempre, solo con
     menos espacio interno; las grillas pasan de 5/3 columnas a menos.
   - Celular (≤680px): el sidebar se oculta y se reemplaza por una barra
     de pestañas fija abajo (armada por JS en app.js a partir de los
     mismos enlaces del sidebar, para no duplicar el menú en cada página).
   ========================================================================== */

.modulos-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Contenedor que la fila de botones de cabecera usa para agrupar las
   acciones secundarias: en escritorio y tablet no debe alterar el diseño
   en absoluto (se "aplana" con display:contents); en celular (más abajo)
   se convierte en el panel que se despliega sobre el botón flotante. */
.actions-secondary{ display: contents; }
.actions-fab-toggle{ display: none; }

/* ---------- Tablet: mismo sidebar, más compacto ---------- */
@media (max-width: 1180px) and (min-width: 681px){
  .sidebar{ width: 220px; padding: 18px 12px; }
  .content{ padding: 24px 28px 60px; }
  .topbar{ padding: 16px 28px; }
  .stats-grid{ grid-template-columns: repeat(3, 1fr) !important; }
  .modulos-grid{ grid-template-columns: repeat(2, 1fr); }

  /* Filas de listas (Clientes, carpetas): en este rango el sidebar sigue
     visible pero más angosto, y el nombre de la empresa + los badges +
     el botón de eliminar no caben en una sola línea — sin este bloque el
     nombre quedaba aplastado y distorsionado contra el botón de
     eliminar. Mismo tratamiento que en celular: se quita el ícono
     decorativo, el nombre ocupa su propia línea y el botón de eliminar
     puede bajar de línea si hace falta en vez de sobresalir. */
  .list-row{ flex-wrap: wrap; gap: 12px; }
  .list-row-link{ flex-wrap: wrap; row-gap: 8px; }
  .list-row .folder-icon{ display: none; }
  .list-row .info{ flex: 1 1 100%; min-width: 0; }
  .list-row .info .title{ white-space: normal; overflow-wrap: break-word; }
  .list-row .info .subtitle{ white-space: normal; }
  .list-row .meta{ white-space: normal; }

  /* Calendario: la agenda lateral de 270px fijos + la grilla de 7 columnas
     no caben junto al sidebar en este rango y forzaban scroll horizontal
     (días cortados a la derecha). Se apila igual que en celular: agenda
     arriba, mes abajo con todo el ancho disponible. */
  .calendar-layout{ flex-direction: column; align-items: stretch; }
  .calendar-agenda{ width: 100%; }
}

/* ---------- Pantalla dividida / ventana angosta: sidebar compacto ----------
   Entre 681px y 1024px (media pantalla en monitores/laptops, tablet
   vertical) el sidebar completo se come casi un tercio del ancho. Igual
   que YouTube, se reduce a una columna angosta solo con íconos (el
   nombre de cada sección aparece al pasar el mouse, ver el atributo
   title que app.js les pone); a partir de 1025px vuelve el sidebar
   completo, y en celular (≤680px) sigue la barra de pestañas de abajo. */
@media (max-width: 1024px) and (min-width: 681px){
  .sidebar{ width: 68px; padding: 16px 10px; }
  .brand{ justify-content: center; padding: 4px 0 16px; margin-bottom: 14px; }
  .brand-text{ display: none; }
  .nav-section-label{ display: none; }
  .nav a{ justify-content: center; padding: 12px 0; gap: 0; font-size: 0; }
  .nav a svg{ width: 20px; height: 20px; }
  .user-card{ justify-content: center; padding: 8px 0; }
  .user-card .who, .user-card .chev{ display: none; }
  .content{ padding: 22px 22px 60px; }
  .topbar{ padding: 16px 22px; }
}

/* Al colapsar a una sola columna (tablet incluida), el widget "Expediente"
   ya no debe quedar fijo al hacer scroll: se ve raro flotando sobre el
   formulario apilado debajo de él. */
@media (max-width: 1180px){
  .expediente-card{ position: static; top: auto; }
}

/* ---------- Celular: sidebar → barra de pestañas fija abajo ---------- */
@media (max-width: 680px){
  .sidebar{ display: none; }
  .main{ width: 100%; }
  .content{ padding: 16px 16px 96px; max-width: none; }
  .topbar{ padding: 12px 16px; }
  .page-head{ margin-bottom: 20px; }
  .page-head h1{ font-size: 21px; }
  .page-head p{ font-size: 13.5px; }

  /* El ícono de tres líneas de la barra superior se vuelve el acceso al
     menú completo (Panel, Clientes, Alertas, Reportes, Verificación
     rápida, Usuarios, Calendario) — mismo contenido que el sidebar,
     desplegado en la hoja "Más" de más abajo. */
  .topbar-menu-btn{
    width: 22px; height: 22px;
    color: var(--ink-700);
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Filas de listas (Clientes, carpetas, etc.): el ícono decorativo se
     quita para dar todo el ancho al nombre, que ahora ocupa su propia
     línea completa y se lee bien; las etiquetas (Borrador/Vigente/
     Riesgo) se acomodan debajo en su propia fila, como ya venían
     haciendo. */
  .list-row-link{ flex-wrap: wrap; row-gap: 8px; }
  .list-row .folder-icon{ display: none; }
  .list-row .info{ flex: 1 1 100%; min-width: 0; }
  .list-row .info .title{ white-space: normal; overflow-wrap: break-word; }
  .list-row .info .subtitle{ white-space: normal; }

  /* Tarjetas de estadística: con el diseño compacto (ícono + número, sin
     subtítulo) ya caben 3 por fila, así que en vez del carrusel horizontal
     con scrollbar visible (se veía como una "barrita" suelta y obligaba a
     deslizar para ver las últimas dos), se acomodan en una grilla de 3
     columnas que envuelve a una segunda fila con las 2 que sobran. Sin
     scroll, todo visible de una vez. */
  .stats-grid{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
  }
  .modulos-grid{ grid-template-columns: 1fr; }

  /* Barra de búsqueda/filtros: la búsqueda ocupa todo el ancho arriba,
     los filtros se acomodan debajo en una grilla de dos, sin esconder
     nada detrás de un menú extra. */
  .filter-bar{ gap: 8px; }
  .filter-bar .search-input{ flex: 1 1 100%; order: -1; }
  .filter-bar .select-pill{ flex: 1 1 calc(50% - 4px); min-width: 0; overflow: hidden; }
  /* Los <select> no se encogen solos con flexbox (mantienen el ancho de
     su contenido aunque el contenedor sea más angosto) — sin min-width:0
     y el recorte explícito, el texto largo ("Todos los agentes
     residentes") se salía de la píldora y quedaba cortado feo contra el
     borde de la pantalla en vez de mostrar "...". */
  .filter-bar .select-pill select{
    min-width: 0;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Barra de selección múltiple: en celular los botones "Mover a
     carpeta" / "Eliminar seleccionados" tienen texto largo y, uno junto
     al otro, quedaban apretados y el texto se cortaba feo. Se apilan
     verticalmente, de ancho completo, igual que ya hacía la barra
     completa (.selection-bar) con sus dos partes. */
  .selection-bar{ flex-direction: column; align-items: stretch; gap: 10px; }
  .selection-bar > div{ display: flex; flex-direction: column; gap: 8px; width: 100%; }
  .selection-bar .btn{ flex: 1; justify-content: center; white-space: normal; text-align: center; }

  /* Filas de listas (Clientes, etc.): más aire, texto libre de envolver
     en vez de forzarlo a una sola línea. */
  .list-row{ padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .list-row .meta{ white-space: normal; }
  .list-row-anidado{ padding-left: 30px; }

  /* .tabs-top ya queda oculto en todos los tamaños (ver arriba) y el
     stepper de círculos manda en todos lados; aquí solo se ajusta a ancho
     completo en celular. */
  .wizard-steps-mobile{ width: 100%; }
  .tabs-section{ gap: 18px; }

  /* Wizard de cliente (crear/editar): la fila de pestañas ("1. Formulario
     DDC"...) y la de botones (Guardar borrador / Guardar cliente /
     Siguiente) quedaba cada una con su propia barra de scroll horizontal
     fea y con el texto apretado. Las pestañas siguen deslizándose (arriba
     se le quitó la barra visible), y los botones ahora envuelven a la
     siguiente línea y ocupan todo el ancho en vez de desbordarse. */
  .wizard-toolbar-row{ width: 100%; }
  .wizard-actions{ flex-wrap: wrap !important; width: 100%; }
  .wizard-actions .btn{ flex: 1 1 auto; min-width: 0; justify-content: center; white-space: nowrap; }

  /* Calendario: la agenda lateral (270px fijos) se apilaba junto a la
     grilla del mes y la dejaba con casi nada de ancho — "Agosto" se veía
     como "Ago" y los días de la semana quedaban cortados. En celular la
     agenda pasa arriba, de ancho completo, y el mes queda debajo con
     todo el ancho disponible. */
  .calendar-layout{ flex-direction: column; align-items: stretch; }
  .calendar-agenda{ width: 100%; }

  /* ---------- Pulido general "app": esquinas redondeadas y píldoras en
     botones/filtros, cabecera de ficha apilada — inspirado en apps de
     referencia (Slack, Asana) que el cliente pidió imitar. Solo celular,
     el resto de anchos no cambia. ---------- */
  .btn{ border-radius: 999px; }
  .search-input, .select-pill{ border-radius: 999px; padding: 11px 18px; }
  .search-input .input-icon svg{ margin-left: 2px; }

  /* Cabecera de la ficha del cliente: en vez de foto + campos lado a lado
     (se aplastaban en una pantalla angosta), la foto queda arriba
     centrada y los campos debajo, a todo el ancho — como una tarjeta de
     perfil. */
  .client-header-card{ flex-direction: column; align-items: center; text-align: center; }
  .client-header-fields{ width: 100%; }
  .client-header-fields .name-input{ text-align: center; }
  .folder-box{ flex-direction: column; align-items: stretch; text-align: left; }
  .folder-box .folder-copy{ flex-direction: column; align-items: stretch; }

  /* Fila "Nombre + Estatus" (y, en la ficha de solo lectura, "Nombre +
     Borrador + Estatus"): en el HTML es un <div style="display:flex;
     align-items:center;gap:14px"> con el nombre a la izquierda y el/los
     badge(s)/select de estatus a la derecha — en celular quedaban muy
     apretados y el nombre se cortaba. Solo en celular: el nombre pasa a su
     propia línea (ancho completo, centrado) y el/los badges de estatus
     bajan juntos a la línea de abajo, también centrados. En escritorio no
     se toca nada (sigue siendo una sola fila en línea). */
  .client-header-fields > div[style*="display:flex"]{
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }
  .client-header-fields > div[style*="display:flex"] > .name-input{
    /* !important porque el textarea trae "flex:1" en línea (que fija
       flex-basis:0%), y una regla externa normal no le gana a eso. */
    flex-basis: 100% !important;
    min-width: 0;
  }

  /* Tarjetas del carrusel de estadísticas: esquinas más redondeadas, más
     acordes con el resto del pulido de píldoras/tarjetas suaves — y con
     el ícono/texto más compactos, para priorizar que el número principal
     se lea bien en una tarjeta angosta (172px) en vez de verse recargada. */
  /* Tarjetas de estadística compactas: solo ícono + etiqueta + número, sin
     la línea secundaria ("2 activos · 0 en proceso", etc.) que antes hacía
     la tarjeta alta y angosta a la vez. El ícono va a la izquierda y el
     texto (etiqueta arriba, número abajo) a la derecha, en vez de apilado
     verticalmente — ocupa mucho menos espacio en el carrusel. El enlace
     sigue siendo la tarjeta completa (<a class="stat-card">), no cambia. */
  .stats-grid > .stat-card{
    display: grid;
    grid-template-columns: 26px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 0;
    border-radius: 14px;
    padding: 10px 8px;
    min-width: 0;
  }
  .stats-grid > .stat-card .icon-box{
    grid-column: 1;
    grid-row: 1 / 3;
    width: 26px; height: 26px;
    margin-bottom: 0;
    border-radius: 7px;
  }
  .stats-grid > .stat-card .icon-box svg{ width: 13px; height: 13px; }
  .stats-grid > .stat-card .go{ display: none; }
  .stats-grid > .stat-card .label{
    grid-column: 2; grid-row: 1;
    font-size: 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .stats-grid > .stat-card .value{ grid-column: 2; grid-row: 2; font-size: 17px; margin: 0; line-height: 1.15; }
  .stats-grid > .stat-card .sub{ display: none; }

  /* En celular la fila "Cartera de clientes" se apila en una sola columna
     (antes forzaba 32%/68% y la tarjeta de riesgo quedaba comprimida en una
     tira angosta con la dona y la leyenda ilegibles). Con la tarjeta a
     ancho completo, la dona vuelve a caber cómoda al lado de la leyenda,
     igual que en escritorio, en vez de apilarse en una columna angosta. */
  .panel-cartera-grid{ grid-template-columns: 1fr; }

  [data-risk-dist-card].compacta .risk-dist{ flex-direction: row; align-items: center; gap: 14px; padding: 16px; text-align: left; }
  [data-risk-dist-card].compacta .risk-donut{ width: 96px; height: 96px; flex-shrink: 0; }
  [data-risk-dist-card].compacta .risk-donut-hole{ width: 62px; height: 62px; }
  [data-risk-dist-card].compacta .risk-donut-hole strong{ font-size: 17px; }
  [data-risk-dist-card].compacta .risk-donut-hole span{ font-size: 9.5px; }

  /* El botón flotante "+" (fijo abajo a la derecha) puede seguir tapando
     el borde derecho de la tarjeta si esta cae justo a esa altura al
     hacer scroll — se reserva el mismo margen de siempre. */
  [data-risk-dist-card].compacta .risk-legend{ flex: 1; min-width: 0; gap: 4px; padding-right: 52px; }
  [data-risk-dist-card].compacta .risk-legend-row{
    border-bottom: none;
    border-left: 3px solid var(--seg-color, var(--brand-500));
    background: color-mix(in srgb, var(--seg-color, var(--brand-500)) 7%, var(--surface));
    border-radius: 0 8px 8px 0;
    padding: 6px 8px;
    font-size: 12px;
  }
  [data-risk-dist-card].compacta .risk-legend-row:first-child{ padding-top: 6px; }
  [data-risk-dist-card].compacta .risk-legend-row:last-child{ padding-bottom: 6px; }
  [data-risk-dist-card].compacta .risk-legend-row:hover{ background: color-mix(in srgb, var(--seg-color, var(--brand-500)) 14%, var(--surface)); }
  [data-risk-dist-card].compacta .risk-legend-row strong{ font-size: 13px; }
  [data-risk-dist-card].compacta .risk-legend-row small{ min-width: 0; }
  [data-risk-dist-card].compacta .risk-dot{ display: none; }
  [data-risk-dist-card].compacta .risk-legend-bar{ display: none; }

  /* ---------- Objetivos de toque (accesibilidad táctil) ----------
     Siguiendo las guías de iOS/Android: al menos ~44px de alto en botones
     y campos de formulario, y ~44px de área de toque en íconos de la
     barra superior (aunque el ícono visual siga siendo chico, para no
     agrandar el diseño). Los botones .btn-sm (dentro de filas de tabla o
     de documento) quedan afuera a propósito: agrandarlos ahí rompería
     filas ya ajustadas. */
  .btn:not(.btn-sm){ min-height: 46px; }
  input.input, select.input{ min-height: 46px; }
  .select-pill{ min-height: 46px; }

  .topbar-menu-btn{ position: relative; }
  .topbar-menu-btn::before{
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
  .calendar-quick-link, .notif-bell{ width: 40px; height: 40px; }

  /* ---------- Wizard de cliente nuevo: filas que en escritorio van en
     una sola línea (nombre + acciones, o nombre + etiquetas) se apilan en
     celular — si no, el texto largo empuja el botón/etiqueta fuera de la
     pantalla. ---------- */
  .doc-item{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .doc-actions{ width: 100%; justify-content: space-between; }
  .sanciones-hit{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .sanciones-hit .tags{ max-width: 100%; justify-content: flex-start; }
  .compliance-approval{ grid-template-columns: 1fr; align-items: stretch; gap: 12px; }

  /* Barra de pestañas inferior: objetivo de toque un poco más generoso. */
  .mobile-tabbar{ padding: 9px 2px calc(9px + env(safe-area-inset-bottom, 0px)); }
  .mobile-tabbar a svg, .mobile-tabbar button svg{ width: 21px; height: 21px; }

  /* ---- Botones de acción de la cabecera → botón flotante ----
     En vez de una fila de botones que no cabe, el botón principal (o el
     único que haya) queda flotando abajo a la derecha; el resto se
     esconde detrás de un pequeño botón "+" que los despliega arriba
     (mismo espíritu que el "+" de apps de gestión conocidas). Se arma
     con la ayuda de un poco de JS en app.js — el HTML de cada página no
     cambia. */
  .page-head .actions{
    position: fixed;
    right: 16px;
    bottom: 88px;
    z-index: 35;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: auto;
  }
  .page-head .actions .fab-anchor{
    width: 56px; height: 56px;
    border-radius: 50%;
    padding: 0;
    justify-content: center;
    box-shadow: var(--shadow-lg);
  }
  .page-head .actions .fab-anchor svg{ width: 22px; height: 22px; }
  .page-head .actions .fab-anchor .fab-label{ display: none; }
  .actions-fab-toggle{
    display: flex;
    width: 40px; height: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-700);
    box-shadow: var(--shadow-md);
    transition: transform 0.15s ease;
  }
  .actions-fab-toggle svg{ width: 16px; height: 16px; }
  .actions-fab-toggle.open{ transform: rotate(45deg); }
  .actions-secondary{
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .actions-secondary.open{ display: flex; }
  .actions-secondary .btn{ box-shadow: var(--shadow-md); white-space: nowrap; }

  /* Insignia "Datos al día"/"Cambios pendientes" del portal del cliente:
     en celular la copia que vive dentro de .actions quedaría atrapada
     en la lógica del botón flotante de arriba, así que se esconde y en
     su lugar se muestra la copia gemela que está junto al título. */
  .estado-info-escritorio{ display: none !important; }
  .estado-info-movil{ display: inline-flex !important; }
}

/* ---------- Barra de pestañas de celular + hoja "Más" ----------
   Se generan por JS (assets/js/app.js) a partir de los enlaces reales
   del sidebar, así que el contenido siempre coincide con el de
   escritorio. display:none por defecto: solo se muestran dentro del
   @media de celular de arriba. */
.mobile-tabbar{
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: linear-gradient(165deg, var(--brand-900), var(--brand-950) 78%);
  padding: 7px 2px calc(7px + env(safe-area-inset-bottom, 0px));
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -6px 18px rgba(18,42,22,0.2);
}
@media (max-width: 680px){
  .mobile-tabbar{ display: flex; }
}
.mobile-tabbar a, .mobile-tabbar button{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  font-family: inherit;
  color: rgba(255,255,255,0.55);
  font-size: 10px;
  font-weight: 600;
  padding: 5px 6px;
  flex: 1;
  min-width: 0;
}
.mobile-tabbar a svg, .mobile-tabbar button svg{ width: 20px; height: 20px; }
.mobile-tabbar a.active, .mobile-tabbar button.active{ color: #fff; }

.mobile-sheet-overlay{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(27,36,30,0.45);
}
/* El "open" solo tiene efecto por debajo de 680px: así el ícono de tres
   líneas (activo en todos los anchos por simplicidad del JS) nunca
   puede abrir nada en escritorio/tablet, aunque alguien le haga clic. */
@media (max-width: 680px){
  .mobile-sheet-overlay.open{ display: block; }
}
.mobile-sheet{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  padding: 10px 8px calc(18px + env(safe-area-inset-bottom, 0px));
  max-height: 72vh;
  overflow-y: auto;
}
.mobile-sheet-handle{ width: 36px; height: 4px; background: var(--line); border-radius: 99px; margin: 2px auto 12px; }
.mobile-sheet-title{ font-size: 13px; font-weight: 700; color: var(--ink-900); padding: 4px 12px 10px; }
.mobile-sheet a, .mobile-sheet button{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 12px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  border-radius: var(--radius-sm);
}
.mobile-sheet a:active, .mobile-sheet button:active{ background: var(--line-soft); }
.mobile-sheet svg{ width: 19px; height: 19px; color: var(--ink-500); flex-shrink: 0; }
.mobile-sheet .danger{ color: var(--danger); }
.mobile-sheet .danger svg{ color: var(--danger); }
.mobile-sheet-divider{ height: 1px; background: var(--line-soft); margin: 8px 6px; }

/* ---------- Portal del cliente: panel de configuración (usado desde la
   ficha del cliente, assets/js/app.js) y elementos compartidos con
   portal-cliente.html ---------- */
.portal-modal-overlay{ position:fixed; inset:0; background:rgba(20,25,20,0.45); display:flex; align-items:center; justify-content:center; z-index:70; padding:16px; }
.portal-modal{ background:#fff; border-radius:14px; padding:22px; width:100%; max-width:420px; max-height:85vh; overflow:auto; }
.portal-modal h3{ font-family: var(--font-display); font-size:17px; margin:0 0 4px; color:var(--ink-900); }
.portal-modal p.sub{ font-size:12.5px; color:var(--ink-500); margin:0 0 16px; }

.portal-link-inline{ background:none; border:none; color:var(--brand-600); font-weight:600; font-size:13px; cursor:pointer; padding:0; }
.portal-link-inline:hover{ text-decoration:underline; }

.portal-switch{ position:relative; display:inline-block; width:36px; height:20px; cursor:pointer; flex-shrink:0; }
.portal-switch input{ opacity:0; width:0; height:0; position:absolute; }
.portal-switch-track{ position:absolute; inset:0; background:var(--line); border-radius:999px; transition:background .15s ease; }
.portal-switch-track::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.25); transition:left .15s ease; }
.portal-switch input:checked + .portal-switch-track{ background:var(--brand-600); }
.portal-switch input:checked + .portal-switch-track::after{ left:18px; }

/* Ícono de estado de la información del portal, junto al botón "Portal del
   cliente" en la ficha: verde cuando no hay cambios pendientes de revisar,
   rojo y clicable cuando el cliente reportó algo desde su portal. */
.portal-estado-info{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  font-size:12.5px; font-weight:600; border:1px solid transparent; white-space:nowrap;
}
.portal-estado-info svg{ width:14px; height:14px; flex-shrink:0; }
.portal-estado-info-ok{ background:var(--success-bg, #eaf6ee); color:var(--success, #1f8a4c); }
.portal-estado-info-pendiente{
  background:var(--danger-bg); color:var(--danger); border-color:var(--danger); cursor:pointer;
}
.portal-estado-info-pendiente:hover{ background:var(--danger); color:#fff; }
.portal-estado-info-contador{
  background:var(--danger); color:#fff; border-radius:999px; font-size:10.5px; font-weight:700;
  line-height:1; padding:2px 6px;
}
.portal-estado-info-pendiente:hover .portal-estado-info-contador{ background:#fff; color:var(--danger); }

.portal-cambio-item{ padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.portal-cambio-item:last-child{ border-bottom:none; }
.portal-cambio-item .etiqueta{ font-weight:600; color:var(--ink-900); }
.portal-cambio-item .estado-chip{ display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:99px; margin-left:6px; text-transform:uppercase; letter-spacing:.03em; }
.chip-pendiente{ background:#fff4d9; color:#8a6100; }
.chip-aprobado{ background:#e3f5ea; color:#2c7a4b; }
.chip-rechazado{ background:var(--danger-bg); color:var(--danger); }

.portal-toast{ position:fixed; top:16px; left:50%; transform:translateX(-50%); background:var(--ink-900); color:#fff; padding:10px 18px; border-radius:99px; font-size:13px; font-weight:600; z-index:90; box-shadow:0 8px 24px rgba(0,0,0,0.2); }

/* ---------- Solicitud de actualización de datos (comparación en rojo) ---------- */
.revision-seccion{ margin-bottom:18px; }
.revision-seccion h4{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-500); margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.revision-persona{ margin-bottom:14px; padding:10px 12px; background:var(--surface-100, #f7f6f3); border-radius:10px; }
.revision-persona:last-child{ margin-bottom:0; }
.revision-persona-nombre{ font-size:13px; font-weight:700; color:var(--ink-900); margin-bottom:6px; }
.revision-fila{ display:flex; align-items:baseline; gap:8px; padding:5px 0; font-size:13px; border-bottom:1px dashed var(--line); flex-wrap:wrap; }
.revision-fila:last-child{ border-bottom:none; }
.revision-etiqueta{ flex:0 0 42%; color:var(--ink-500); font-size:12px; }
.revision-valor{ flex:1; min-width:0; color:var(--ink-900); font-weight:500; overflow-wrap:anywhere; word-break:break-word; }
.revision-fila-cambiada{ background:var(--danger-bg); border-radius:8px; padding:6px 8px; border-bottom:none; margin:2px 0; flex-direction:column; align-items:stretch; }
.revision-fila-cambiada .revision-etiqueta{ flex:none; }
.revision-valor-subrayado{ color:var(--danger); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; font-weight:600; }
.revision-propuesto{ display:flex; align-items:center; gap:6px; margin-top:4px; font-size:13px; color:var(--danger); font-weight:700; flex-wrap:wrap; overflow-wrap:anywhere; word-break:break-word; }
.revision-acciones{ display:flex; gap:10px; margin-left:auto; }
.revision-acciones .portal-link-inline{ font-size:12px; }
.revision-comentario{ font-size:12px; color:var(--ink-500); font-style:italic; margin-top:4px; }

/* ---------- Impresión (Exportar a PDF vía el diálogo de impresión) ---------- */
@media print{
  .sidebar, .topbar, .no-print{ display: none !important; }
  .app{ display: block; }
  .main{ margin: 0; }
  .content{ padding: 0; max-width: none; }
  .card{ box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  body{ background: #fff; }
}

/* Aviso: cargos del formulario que no concuerdan con los documentos subidos */
.aviso-cargos{ margin:12px 0 0; }
.aviso-cargos-item{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; margin-bottom:8px;
  background:#fdf1dc; color:#8a5a10; border:1px solid #f0d9a8;
  border-radius:var(--radius-md); font-size:13px;
}
.aviso-cargos-item svg{ flex:none; }
.aviso-cargos-texto{ flex:1 1 260px; min-width:0; }

/* Fila de documento con nombre en dos líneas (documento + persona / cargos) */
.doc-archivo-nombre .doc-linea{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.doc-archivo-nombre .doc-linea-cargos{ font-size:12px; font-weight:400; color:var(--ink-500); margin-top:1px; }

/* Cuentas de empresas externas (carpeta restringida, ej. Grupo MAC): solo
   registran información y suben documentos. Se ocultan Búsqueda en listas
   de sanciones y Evaluación de Riesgo y Diligencia (los llena el agente
   residente), tanto en el formulario como en la ficha del cliente. */
.usuario-restringido [data-tab-target="#panel-sanciones"],
.usuario-restringido [data-tab-target="#panel-riesgo"],
.usuario-restringido [data-paso-movil-target="#panel-sanciones"],
.usuario-restringido [data-paso-movil-target="#panel-riesgo"],
.usuario-restringido #panel-sanciones,
.usuario-restringido #panel-riesgo,
.usuario-restringido .wizard-steps-mobile > .wizard-steps-mobile-line:nth-of-type(n+2),
.usuario-restringido .expediente-card > .expediente-item:nth-child(n+4),
.usuario-restringido [data-ficha-seccion="riesgo_diligencia"],
.usuario-restringido [data-ficha-seccion="busqueda_sanciones"],
.usuario-restringido [data-ficha-filtro-seccion] option[value="riesgo_diligencia"],
.usuario-restringido [data-ficha-filtro-seccion] option[value="busqueda_sanciones"]{ display: none !important; }

/* Cuentas de empresas externas: tampoco ven nada de matriz de riesgo ni de
   verificación en listas de sanciones en el resto de la plataforma (menú,
   Panel, Clientes, Reportes). */
.usuario-restringido a[href="verificacion-rapida.html"],
.usuario-restringido a.stat-card[href*="alto_riesgo"],
.usuario-restringido [data-risk-dist-card],
.usuario-restringido .badge-riesgo-cliente,
.usuario-restringido [data-ver-matriz-riesgo-btn],
.usuario-restringido [data-reporte-tipo="clientes_riesgo"],
.usuario-restringido [data-reporte-tipo="alto_riesgo"],
.usuario-restringido [data-reporte-tipo="sanciones"],
.usuario-restringido [data-reporte-tipo="vencimientos"],
.usuario-restringido [data-reporte-item][data-reporte-disabled]{ display: none !important; }
.usuario-restringido .stats-grid{ grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; }
.usuario-restringido .panel-cartera-grid{ grid-template-columns: 1fr !important; }

/* Cuentas de empresas externas: tampoco ven los Informes ROS. */
.usuario-restringido a[href^="ros-nuevo.html"],
.usuario-restringido a[href^="ros-detalle.html"],
.usuario-restringido a.stat-card[href*="ros_emitidos"],
.usuario-restringido [data-reporte-tipo="ros_emitidos"],
.usuario-restringido [data-ros-lista-wrap]{ display: none !important; }

/* ---------- Datos financieros por beneficiario (pills) ---------- */
.fin-bloque { border:1px solid var(--border, #e3e6ea); border-radius:10px; margin-top:14px; background:#fff; }
.fin-cab { width:100%; display:flex; align-items:center; gap:10px; padding:12px 14px; background:none; border:0; cursor:pointer; text-align:left; font:inherit; }
.fin-titulo { font-weight:600; font-size:14px; flex:1; }
.fin-chip { font-size:11.5px; padding:2px 9px; border-radius:20px; background:#fdf0d5; color:#8a5a00; }
.fin-chip.completo { background:var(--brand-100); color:var(--brand-700); }
.fin-flecha { transition:transform .15s; color:#777; }
.fin-bloque.cerrado .fin-flecha { transform:rotate(-90deg); }
.fin-bloque.cerrado .fin-cuerpo { display:none; }
.fin-cuerpo { padding:4px 14px 12px; border-top:1px solid var(--border, #e3e6ea); }
.pill-grupo { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.pill { border:1px solid #cfd5dc; background:#fff; border-radius:20px; padding:6px 14px; font-size:13px; cursor:pointer; font-family:inherit; }
.pill:hover { border-color:var(--brand-200); background:var(--brand-50); }
.pill.activo { background:var(--brand-100); border-color:var(--brand-500); color:var(--brand-800); font-weight:600; }
.fin-copiar { margin-top:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ---------- Pestaña "Datos de la sociedad": ritmo y jerarquía visual ---------- */
#emp-identificacion .field-eyebrow{ margin-top: 30px; padding-bottom: 9px; border-bottom: 2px solid var(--line-soft); }
#emp-identificacion .field-eyebrow:first-child{ margin-top: 0; }
#emp-identificacion .field-group{ margin-bottom: 4px; }
.sub-titulo-soc{
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  color: var(--ink-900);
  margin: 20px 0 12px;
}
.sub-titulo-soc::after{ content:""; flex:1; height:1px; background: var(--line-soft); }
.sub-titulo-soc--primero{ margin-top: 8px; }
#emp-identificacion .checklist{ padding:0; min-height:46px; display:flex; align-items:stretch; overflow:hidden; }
#emp-identificacion .checklist label{ width:100%; box-sizing:border-box; border-bottom:none; margin:0; padding:0 14px; min-height:46px; align-items:center; border-radius:0; }
.sr-only-soc{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* Pestañas de la empresa: mismo estilo de siempre, un poco más cómodo */
.tabs-empresa{ gap:36px; margin-bottom:24px; }
.tabs-empresa button{ font-size:15px; padding:14px 4px 15px; border-bottom-width:3px; }

/* Cuentas de empresas externas (carpeta restringida): sin Portal del cliente
   y sin los documentos OFAC ni Datos Generales del Folio - Registro Público. */
.usuario-restringido [data-portal-config-abrir],
.usuario-restringido [data-portal-btn],
.usuario-restringido [data-doc-generico="ofac"],
.usuario-restringido [data-doc-generico-guardados="ofac"],
.usuario-restringido [data-doc-generico="registro_publico_datos_generales"],
.usuario-restringido [data-doc-generico-guardados="registro_publico_datos_generales"]{ display: none !important; }

/* Las notas internas son de la firma: no se muestran a cuentas de empresas externas. */


/* ---- Alerta de revisión periódica de riesgo y diligencia ---- */
.rev-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md);border:1px solid;margin:0 0 14px;flex-wrap:wrap;}
.rev-banner.rev-amarillo{background:#fff8e1;border-color:#f0d27a;color:#7a5a00;}
.rev-banner.rev-rojo{background:var(--danger-bg);border-color:#eaa3a3;color:#9b2a2a;}
.rev-banner-ico{width:22px;height:22px;flex:none;display:flex;}
.rev-banner-ico svg{width:22px;height:22px;}
.rev-banner-txt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px;font-size:13px;}
.rev-banner-txt strong{font-size:14px;}
.rev-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:6px;vertical-align:middle;}
.rev-dot.rev-amarillo{background:#e5a800;}
.rev-dot.rev-rojo{background:var(--danger);}
.card.rev-marco.rev-amarillo{box-shadow:0 0 0 2px #f0d27a;}
.card.rev-marco.rev-rojo{box-shadow:0 0 0 2px #eaa3a3;}
.badge-revision{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;}
.badge-revision-amarillo{background:#fff3cd;color:#7a5a00;}
.badge-revision-rojo{background:var(--danger-bg);color:#9b2a2a;}
.usuario-restringido .rev-banner,.usuario-restringido .rev-dot,.usuario-restringido .badge-revision{display:none !important;}

.matriz-modal-icono{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;color:var(--ink-500);cursor:pointer;padding:0;transition:background .15s,color .15s;}
.matriz-modal-icono:hover{background:var(--line-soft);color:var(--ink-900,#1c2b20);}

#emp-identificacion .checklist label{ font-size:13px; font-weight:500; color:var(--ink-900); }

input[type="date"].fecha-legible{ background-repeat:no-repeat; background-position:0 0; background-size:auto; color:transparent; }
input[type="date"].fecha-legible::-webkit-datetime-edit{ color:transparent; }

.modal-confirm-icono.peligro{ background: var(--danger-bg); color: var(--danger); }
.modal-confirm-icono.info{ background: #e6f0fb; color: var(--info); }
.modal-box-confirm .modal-confirm-acciones .btn{ min-width: 130px; }

.usuario-restringido [data-user-menu-password],
.usuario-restringido [data-mobile-sheet-password]{ display:none !important; }

/* Aviso: datos de la persona que no coinciden entre formulario y documentos */
.aviso-sync{
  margin:16px 0 0; padding:14px 16px;
  background:#fdf1dc; color:#6b4a12; border:1px solid #f0d9a8;
  border-radius:var(--radius-md); font-size:13px;
}
.aviso-sync-cab{ display:flex; align-items:center; gap:8px; color:#8a5a10; font-size:14px; margin-bottom:6px; }
.aviso-sync-cab svg{ flex:none; }
.aviso-sync-texto{ margin:0 0 10px; line-height:1.45; }
.aviso-sync-atajos{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.aviso-sync-tabla{ background:#fff; border:1px solid #f0d9a8; border-radius:var(--radius-md); overflow:hidden; }
.aviso-sync-fila{
  display:grid; grid-template-columns:minmax(110px,1fr) minmax(0,1.3fr) minmax(0,1.3fr);
  gap:10px; align-items:center; padding:8px 12px; border-top:1px solid #f6e7c6;
}
.aviso-sync-fila:first-child{ border-top:0; }
.aviso-sync-encabezado{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-500); background:#fffaf0; }
.aviso-sync-campo{ font-weight:600; color:var(--ink-700, #333); }
.aviso-sync-opcion{ display:flex; align-items:center; gap:8px; cursor:pointer; min-width:0; color:var(--ink-900, #222); }
.aviso-sync-opcion input{ flex:none; }
.aviso-sync-opcion span{ overflow-wrap:anywhere; }
.aviso-sync-error{ margin:8px 0 0; color:#b3261e; font-weight:600; }
.aviso-sync-pie{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:10px; }
.aviso-sync-nota{ flex:1 1 260px; font-size:12px; color:#8a5a10; }
@media (max-width:640px){
  .aviso-sync-fila{ grid-template-columns:1fr; gap:4px; }
  .aviso-sync-encabezado{ display:none; }
}

/* Propósito de la entidad: Operativa, Tenedora de activos y Ambas en una fila */
.field-group.proposito-fila{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.proposito-fila .checklist label{ white-space:nowrap; }
@media (max-width:640px){
  .field-group.proposito-fila{ grid-template-columns:1fr; }
}

/* Documentos del beneficiario final: fila "Sin subir" por cada persona */
.doc-archivo-fila.doc-persona-pendiente{ border-style:dashed; background:transparent; }
.doc-persona-pendiente .doc-archivo-titulo{ color:var(--ink-700); }
.doc-persona-pendiente .btn{ flex:none; }

/* Documentos sin asignar a una persona: una fila por documento con un círculo por persona */
.aviso-asignar{
  margin:12px 0; padding:12px 14px;
  background:#fdf1dc; color:#6b4a12; border:1px solid #f0d9a8;
  border-radius:var(--radius-md); font-size:13px;
}
.asignar-cab{ display:flex; align-items:center; gap:8px; color:#8a5a10; font-size:14px; }
.asignar-cab svg{ flex:none; }
.asignar-sub{ margin:2px 0 10px 26px; font-size:12.5px; }
.asignar-tabla{ background:#fff; border:1px solid #f0d9a8; border-radius:var(--radius-md); overflow:hidden; color:var(--ink-900,#222); }
.asignar-doc{ padding:10px 12px; border-top:1px solid #f6e7c6; }
.asignar-doc:first-child{ border-top:0; }
.asignar-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:7px; }
.asignar-ver{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--brand-700,#2f6b3a); text-decoration:none; min-width:0; }
.asignar-ver:hover{ text-decoration:underline; }
.asignar-ver svg{ flex:none; }
.asignar-ver-hint{ font-size:11.5px; color:var(--ink-500,#6b7280); }
.asignar-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.asignar-chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--line,#d9dee7); border-radius:999px; padding:4px 11px 4px 8px;
  font-size:12.5px; background:#fff; white-space:nowrap;
}
.asignar-chip input{ margin:0; }
.asignar-chip small{ font-size:11px; color:var(--ink-500,#6b7280); }
.asignar-chip.sel{ border-color:var(--brand-600,#2f7a3d); background:#eef6ef; }
.asignar-chip-sin{ border-style:dashed; color:var(--ink-500,#6b7280); }
.asignar-error{ margin:8px 0 0; color:#b3261e; font-weight:600; }
.asignar-pie{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:10px; }
.asignar-pie span{ font-size:12px; color:#8a5a10; }

/* Cambios hechos por cuentas Grupo MAC (ficha del cliente) */
.detalle-valor.cambio-mac {
  background: #fde8e6;
  color: #a12a1f;
  border-radius: 6px;
  padding: 3px 8px;
  box-shadow: inset 3px 0 0 #d9473a;
}
.aviso-cambios-mac {
  background: #fde8e6;
  border: 1px solid #f3b9b3;
  color: #7e1f16;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13.5px;
}

/* Observaciones (notas internas) estilo comentarios — ficha del cliente y formulario */
.notas-yt { margin-top: 44px; padding-top: 8px; }
.card .notas-yt { margin-top: 0; padding-top: 0; }
.card .notas-yt .yt-lista > p:first-child { margin-top: 0 !important; }
.yt-nueva { display: flex; gap: 14px; align-items: flex-start; margin: 8px 0 26px; padding: 16px 18px; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius-lg); }
.yt-nueva-resp { margin: 12px 0 4px; padding: 12px 14px; }
.yt-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--surface); }
.yt-avatar-yo { background: linear-gradient(165deg, var(--brand-500), var(--brand-700)); color: #fff; }
.yt-avatar-sm { flex-basis: 30px; width: 30px; height: 30px; font-size: 11px; }
.yt-nueva-campo { flex: 1; min-width: 0; }
.yt-input { display: block; width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font: inherit; font-size: 13.5px; color: var(--ink-900); resize: none; overflow: hidden; outline: none; min-height: 40px; box-shadow: var(--shadow-xs); transition: border-color .15s ease, box-shadow .15s ease; }
.yt-input::placeholder { color: var(--ink-300); }
.yt-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.yt-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.yt-acciones .notas-error { margin-right: auto; }
.yt-acciones .btn { padding: 7px 16px; font-size: 13px; border-radius: 99px; }
.yt-acciones .btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.yt-lista { display: flex; flex-direction: column; }
.yt-hilo { padding: 16px 0; border-top: 1px solid var(--line-soft); }
.yt-hilo:first-child { border-top: 0; padding-top: 4px; }
.yt-item { display: flex; gap: 14px; position: relative; }
.yt-respuesta { padding-top: 14px; }
.yt-cuerpo { flex: 1; min-width: 0; padding-right: 30px; }
.yt-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.yt-cab strong { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
.yt-cab span { color: var(--ink-300); font-size: 12px; }
.yt-texto { font-size: 13.5px; line-height: 1.6; color: var(--ink-700); white-space: pre-wrap; word-break: break-word; margin-top: 3px; }
.yt-pie { margin-top: 6px; }
.yt-responder { background: none; border: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-500); padding: 4px 10px; margin-left: -10px; border-radius: 99px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.yt-responder:hover { background: var(--brand-50); color: var(--brand-700); }
.yt-hijos { margin: 6px 0 0 18px; padding-left: 26px; border-left: 2px solid var(--brand-100); }
.yt-toggle { background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand-600); padding: 4px 10px; margin-left: -10px; border-radius: 99px; cursor: pointer; transition: background .15s ease; }
.yt-toggle:hover { background: var(--brand-50); }
.yt-menu { position: absolute; top: -4px; right: 0; }
.yt-menu-btn { background: none; border: 0; font-size: 18px; line-height: 1; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: var(--ink-300); transition: background .15s ease, color .15s ease; }
.yt-menu-btn:hover { background: var(--line-soft); color: var(--ink-900); }
.yt-menu-lista { position: absolute; right: 0; top: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 5; min-width: 130px; overflow: hidden; }
.yt-menu-lista button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 14px; font: inherit; font-size: 13px; color: var(--danger); cursor: pointer; }
.yt-menu-lista button:hover { background: var(--danger-bg); }
.yt-lista > p { margin: 0; }
.notas-error { color: var(--danger); font-size: 12.5px; }
@media print { .yt-nueva, .yt-pie, .yt-menu { display: none; } }

.notas-sub { margin: -4px 0 10px; font-size: 12.5px; color: var(--ink-500); }
.notas-yt + .notas-yt { margin-top: 36px; }


.yt-badge { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--line-soft); color: var(--ink-500); }
.yt-badge-mac { background: var(--brand-100); color: var(--brand-700); }
.yt-pregunta { margin-top: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.yt-pregunta-titulo { font-size: 13px; font-weight: 700; color: var(--ink-900); margin-bottom: 10px; }
.yt-pregunta-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yt-destino { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; cursor: pointer; font: inherit; transition: border-color .15s ease, background .15s ease; }
.yt-destino strong { display: block; font-size: 13px; color: var(--ink-900); }
.yt-destino span { display: block; font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.yt-destino:hover { border-color: var(--brand-500); background: var(--brand-50); }
.yt-pregunta-volver { margin-top: 10px; background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-500); cursor: pointer; padding: 0; }
.yt-pregunta-volver:hover { color: var(--ink-900); }
@media (max-width: 560px) { .yt-pregunta-opciones { grid-template-columns: 1fr; } }

.yt-destino { padding: 14px 16px; text-align: center; }

/* Cuentas de una sola carpeta (Grupo MAC): sin filtro de carpetas, sin crear carpetas
   ni mover clientes entre carpetas, y sin el conteo de carpetas. */
.usuario-restringido [data-clientes-filtro-carpeta-wrap],
.usuario-restringido [data-clientes-nueva-carpeta],
.usuario-restringido [data-clientes-exportar-excel],
.usuario-restringido [data-clientes-mover-seleccionados],
.usuario-restringido [data-context-mover],
.usuario-restringido [data-clientes-stat-carpetas-wrap],
.usuario-restringido [data-clientes-stat-carpetas-wrap] + .dot-sep { display: none !important; }

/* Cédula/pasaporte: una fila "Sin subir" por cada persona registrada en el formulario */
.doc-ident-pend{ display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px dashed var(--line); border-radius:var(--radius-sm); margin-bottom:8px; background:transparent; min-width:0; max-width:100%; box-sizing:border-box; }
.doc-ident-pend:last-child{ margin-bottom:0; }
.doc-ident-pend .doc-archivo-link{ cursor:default; }
.doc-ident-pend .doc-archivo-titulo{ color:var(--ink-700); }
.doc-ident-pend .btn{ flex:none; }

/* ---- Tabla de Usuarios: todo cabe en una vista, acciones con iconos ---- */
.usuarios-tabla td, .usuarios-tabla th { vertical-align: middle; padding-left: 10px; padding-right: 10px; }
.usuarios-tabla td[data-label="Nombre"] { white-space: normal; }
.usuarios-tabla td[data-label="Avisos por correo"] { white-space: normal; min-width: 120px; }
.usuarios-tabla th:nth-child(3), .usuarios-tabla td:nth-child(3),
.usuarios-tabla th:nth-child(4), .usuarios-tabla td:nth-child(4),
.usuarios-tabla th:nth-child(6), .usuarios-tabla td:nth-child(6) { white-space: nowrap; }
.usuarios-th-acciones, .usuarios-td-acciones { text-align: right; width: 1%; white-space: nowrap; }
.usuarios-tabla .usuarios-acciones { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 6px; }
.usuarios-tabla .usuarios-acciones .btn { margin: 0; white-space: nowrap; line-height: 1; }
.usuarios-tabla .usuarios-icono-btn {
  width: 32px; height: 32px; padding: 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.usuarios-tabla .usuarios-icono-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.usuarios-tabla .usuarios-icono-btn.btn-usuario-eliminar { color: var(--danger); border-color: #f3cccc; background: #fff; }
.usuarios-tabla .usuarios-icono-btn.btn-usuario-eliminar:hover { background: var(--danger-bg); border-color: var(--danger); }
.usuarios-tabla .usuarios-acciones .btn:not(.usuarios-icono-btn) { height: 32px; padding: 0 12px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; }
.usuarios-protegido { font-size: 12px; color: var(--ink-500); font-weight: 600; letter-spacing: .02em; }
.usuarios-tabla .usuarios-protegido { display: inline-block; padding: 7px 10px; border: 1px dashed var(--line); border-radius: 8px; white-space: nowrap; }
@media (max-width: 768px) {
  .usuarios-tabla .usuarios-acciones { flex-wrap: wrap; justify-content: flex-start; }
  .usuarios-tabla .usuarios-acciones .btn:not(.usuarios-icono-btn) { flex: 1 1 auto; }
  .usuarios-th-acciones, .usuarios-td-acciones { text-align: left; width: auto; }
}

/* Globo de los iconos de Usuarios: mismo estilo que los globos de la app, aparece al instante */
.usuarios-tip{
  position: fixed; z-index: 300;
  transform: translate(-50%, -100%);
  background: var(--ink-900, #1c2b20); color: #fff;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 7px 10px; border-radius: 8px; white-space: nowrap;
  box-shadow: var(--shadow-md, 0 6px 18px rgba(0,0,0,.18));
  pointer-events: none; opacity: 0; transition: opacity .06s ease;
}
.usuarios-tip::after{
  content: ''; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px; background: var(--ink-900, #1c2b20);
}
.usuarios-tip.visible{ opacity: 1; }

/* === PRUEBA FICHA (primera versión): aspecto con recuadros, en Datos de la sociedad y Beneficiarios finales.
   Para deshacer: borrar este bloque completo (desde este comentario hasta "PRUEBA FICHA (fin)"). === */
[data-cliente-detalle] .detalle-seccion-titulo{
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; letter-spacing: .08em; color: var(--brand-800);
  margin: 34px 0 14px;
}
[data-cliente-detalle] .detalle-seccion-titulo::before{
  content: ''; width: 4px; height: 16px; border-radius: 2px; background: var(--brand-600); flex-shrink: 0;
}
[data-cliente-detalle] .detalle-seccion-titulo::after{
  content: ''; flex: 1; height: 1px; background: var(--line-soft);
}
[data-cliente-detalle] [data-ficha-seccion="identificacion"] > .card,
[data-cliente-detalle] [data-ficha-seccion="beneficiarios"] > .card,
[data-cliente-detalle] [data-ficha-seccion="riesgo_diligencia"] > .card:not(.rev-marco){
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 14px; box-shadow: 0 1px 3px rgba(27, 36, 30, .05);
  padding: 20px 22px;
}
[data-cliente-detalle] [data-ficha-seccion="identificacion"] .field-group,
[data-cliente-detalle] [data-ficha-seccion="beneficiarios"] .field-group,
[data-cliente-detalle] [data-ficha-seccion="riesgo_diligencia"] .field-group{ gap: 12px; margin-bottom: 12px; }
[data-cliente-detalle] [data-ficha-seccion="identificacion"] .field,
[data-cliente-detalle] [data-ficha-seccion="beneficiarios"] .field,
[data-cliente-detalle] [data-ficha-seccion="riesgo_diligencia"] .field{
  margin-bottom: 0; padding: 10px 14px;
  background: #f8fbf8; border: 1px solid var(--line-soft); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
[data-cliente-detalle] [data-ficha-seccion="identificacion"] .field:hover,
[data-cliente-detalle] [data-ficha-seccion="beneficiarios"] .field:hover,
[data-cliente-detalle] [data-ficha-seccion="riesgo_diligencia"] .field:hover{
  border-color: var(--brand-200); box-shadow: 0 2px 6px rgba(27, 36, 30, .06);
}
[data-cliente-detalle] [data-ficha-seccion="identificacion"] .field label,
[data-cliente-detalle] [data-ficha-seccion="beneficiarios"] .field label,
[data-cliente-detalle] [data-ficha-seccion="riesgo_diligencia"] .field label{
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-500); margin-bottom: 4px;
}
[data-cliente-detalle] [data-ficha-seccion="identificacion"] .detalle-valor,
[data-cliente-detalle] [data-ficha-seccion="beneficiarios"] .detalle-valor,
[data-cliente-detalle] [data-ficha-seccion="riesgo_diligencia"] .detalle-valor{
  font-size: 14.5px; font-weight: 600; color: var(--ink-900); padding-top: 0;
}
/* Encabezado de cada beneficiario: nombre y roles, sin franja */
[data-cliente-detalle] .ficha-persona{ margin: 6px 0 14px; }
[data-cliente-detalle] .ficha-persona-nombre{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 17px; font-weight: 700; color: var(--ink-900); line-height: 1.3;
}
[data-cliente-detalle] .ficha-persona-roles{
  margin-top: 3px; font-size: 13px; color: var(--ink-500);
}
[data-cliente-detalle] .ficha-persona-pep{
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--danger); border: 1px solid currentColor; border-radius: 5px; padding: 1px 6px;
}
/* Búsqueda en listas de sanciones */
[data-cliente-detalle] [data-ficha-seccion="busqueda_sanciones"] > .card{
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 14px; box-shadow: 0 1px 3px rgba(27, 36, 30, .05);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 10px;
}
[data-cliente-detalle] .ficha-sancion{
  padding: 12px 14px; background: #f8fbf8;
  border: 1px solid var(--line-soft); border-radius: 10px;
}
[data-cliente-detalle] .ficha-sancion-cabecera{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
[data-cliente-detalle] .ficha-sancion-termino{ flex: 1; min-width: 180px; font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
[data-cliente-detalle] .ficha-sancion-estado{
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: #e6f4ea; color: #1f7a44;
}
[data-cliente-detalle] .ficha-sancion-alerta .ficha-sancion-estado{ background: var(--danger-bg); color: var(--danger); }
[data-cliente-detalle] .ficha-sancion-alerta{ border-color: #f1c9c9; }
[data-cliente-detalle] .ficha-sancion-fecha{ font-size: 12.5px; color: var(--ink-500); white-space: nowrap; }
[data-cliente-detalle] .ficha-sancion-listas{ margin-top: 4px; font-size: 12.5px; color: var(--ink-500); }
[data-cliente-detalle] .ficha-sancion-resultados{ display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
[data-cliente-detalle] .ficha-sancion-coincidencia a{ font-size: 12px; }
[data-cliente-detalle] .ficha-sancion-chip{
  background: var(--danger-bg); color: var(--danger); border-radius: 6px;
  padding: 2px 8px; font-size: 12px; font-weight: 700;
}
[data-cliente-detalle] .ficha-sancion-detalle{ font-size: 12px; color: var(--ink-500); margin-top: 2px; padding-left: 2px; }
[data-cliente-detalle] [data-ficha-seccion="riesgo_diligencia"] > .card.rev-marco{
  border-radius: 14px; padding: 20px 22px;
}
/* === PRUEBA FICHA (fin) === */

/* === MENÚS DESPLEGABLES (filtros y formularios): diseño de la plataforma
   con la letra del sistema (la misma de la lista anterior) === */
.select-pill-popup{
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  max-height: 360px;
}
.select-pill-popup-grupo{
  padding: 9px 12px 3px; background: transparent;
  font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--ink-900);
}
.select-pill-popup-opcion{
  padding: 7px 12px; border-radius: var(--radius-sm); margin: 1px 0;
  font-size: 14px; color: var(--ink-700);
}
.select-pill-popup-opcion.en-grupo{ padding-left: 26px; }
.select-pill-popup-opcion:hover,
.select-pill-popup-opcion.resaltada{ background: var(--brand-50); color: var(--ink-900); }
.select-pill-popup-opcion.seleccionada{ background: var(--brand-50); color: var(--brand-800); font-weight: 700; }
.select-pill-popup-opcion.deshabilitada{ color: var(--ink-300); cursor: default; background: transparent; }
.select-pill.abierto, .select-pill-sm.abierto, select.input.abierto{ border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.select-pill.abierto svg, .select-pill-sm.abierto svg{ color: var(--brand-500); transform: rotate(180deg); }
/* Sin el segundo recuadro interno al enfocar el filtro */
.select-pill select:focus, .select-pill-sm select:focus{ border: none; box-shadow: none; outline: none; }

/* Documento faltante en la ficha: al pasar el mouse aparece "Subir documento" */
.ficha-doc-accion{ display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ficha-doc-accion .ficha-subir-btn{ display: none; }
.ficha-doc-pend:hover .ficha-doc-accion .badge,
.ficha-doc-pend:focus-within .ficha-doc-accion .badge,
.ficha-doc-accion.subiendo .badge{ display: none; }
.ficha-doc-pend:hover .ficha-subir-btn,
.ficha-doc-pend:focus-within .ficha-subir-btn,
.ficha-doc-accion.subiendo .ficha-subir-btn{ display: inline-flex; }
@media (hover: none){
  .ficha-doc-accion .ficha-subir-btn{ display: inline-flex; }
  .ficha-doc-accion .badge{ display: none; }
}
@media print{ .ficha-subir-btn{ display: none !important; } .ficha-doc-accion .badge{ display: inline-flex !important; } }


/* Beneficiario en la ficha: fecha de condición de BF y % acciones junto al nombre */
[data-cliente-detalle] .ficha-persona{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
[data-cliente-detalle] .ficha-persona-texto{ min-width: 0; }
[data-cliente-detalle] .ficha-persona-meta{
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 7px 16px; background: #f8fbf8;
  border: 1px solid var(--line-soft); border-radius: 999px;
}
[data-cliente-detalle] .ficha-meta-item{ display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
[data-cliente-detalle] .ficha-meta-item svg{ width: 14px; height: 14px; color: var(--brand-600); flex: none; }
[data-cliente-detalle] .ficha-meta-etq{ font-size: 12px; color: var(--ink-500); }
[data-cliente-detalle] .ficha-meta-valor{ font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
[data-cliente-detalle] .ficha-meta-valor.detalle-vacio{ color: var(--ink-300); font-weight: 400; }
[data-cliente-detalle] .ficha-meta-sep{ width: 1px; height: 16px; background: var(--line); }

/* Documento faltante: resaltado redondeado y botón "Subir documento" más cuidado */
[data-cliente-detalle] .list-row.ficha-doc-pend{
  margin: 2px -12px; padding-left: 12px !important; padding-right: 12px !important;
  border-radius: 12px; transition: background .15s ease;
}
[data-cliente-detalle] .ficha-subir-btn{
  align-items: center; gap: 7px;
  padding: 7px 16px; border-radius: 999px;
  background: #fff; color: var(--brand-700);
  border: 1px solid var(--brand-200);
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  box-shadow: 0 1px 2px rgba(18,42,22,.06), 0 2px 8px rgba(18,42,22,.06);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
[data-cliente-detalle] .ficha-subir-btn::before{
  content: ''; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b35' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-cliente-detalle] .ficha-subir-btn:hover{
  background: var(--brand-50); border-color: var(--brand-500);
  box-shadow: 0 2px 4px rgba(18,42,22,.08), 0 6px 14px rgba(18,42,22,.08);
  transform: translateY(-1px);
}
[data-cliente-detalle] .ficha-subir-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--brand-100); }
[data-cliente-detalle] .ficha-subir-btn[disabled]{ opacity: .7; transform: none; cursor: progress; }

/* Fecha de actualización de las listas de sanciones */
.estado-listas{ margin: 0 0 18px; }
.estado-listas-cab{ font-size: 12.5px; color: var(--ink-500); margin-bottom: 8px; }
.estado-listas-cab strong{ color: var(--ink-700); }
.estado-listas-items{ display: flex; flex-wrap: wrap; gap: 6px; }
.estado-listas-item{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--brand-50); color: var(--brand-800); border: 1px solid var(--brand-100);
}
.estado-listas-item small{ font-weight: 400; color: var(--ink-500); }
.estado-listas-item .punto{ width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.estado-listas-item.con-error{ background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.estado-listas-item.con-error .punto{ background: #ea580c; }

/* Campana: ícono para eliminar una notificación (aparece al pasar el mouse) */
.notif-bell-item{ position: relative; }
.notif-bell-borrar{
  flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: none; background: transparent; border-radius: 6px;
  color: var(--ink-500); cursor: pointer; opacity: 0; transition: opacity .12s ease;
}
.notif-bell-item:hover .notif-bell-borrar, .notif-bell-borrar:focus-visible{ opacity: 1; }
@media (hover: none){ .notif-bell-borrar{ opacity: 1; } }
.notif-bell-deshacer{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 8px 12px; padding: 8px 12px; border-radius: 8px;
  background: var(--ink-900); color: #fff; font-size: 12.5px;
}
.notif-bell-deshacer button{ border: none; background: transparent; color: #fff; font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 12.5px; padding: 0; }