/* Seguros Digitales SDI — base styles */
@import url("../assets/brand/sdi-tokens.css");

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--sdi-font-body);
  background: var(--sdi-gris-100);
  color: var(--sdi-tinta);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Jerarquía tipográfica — Space Grotesk en headings, Inter en body (ya heredado) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sdi-font-display);
  font-weight: var(--sdi-weight-medium);
  letter-spacing: -0.02em;
  line-height: var(--sdi-lh-snug);
  color: var(--sdi-tinta);
}

/* Código, IDs, monospace → JetBrains Mono */
code, pre, kbd, samp {
  font-family: var(--sdi-font-mono);
}

.pantalla { display: none; min-height: 100vh; }
.pantalla.activa { display: block; }

/* ===== Login ===== */
#pantallaLogin, #pantallaAdminLogin {
  display: none;
  align-items: center;
  justify-content: center;
}
#pantallaLogin.activa, #pantallaAdminLogin.activa { display: flex; }

.login-box {
  background: var(--sdi-blanco);
  padding: 40px;
  border-radius: var(--sdi-radius-lg);
  box-shadow: var(--sdi-shadow-lg);
  max-width: 420px;
  width: 90%;
  text-align: center;
}
.login-logo {
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
  margin: 0 auto 6px;
}
.subtitulo {
  color: var(--sdi-gris-500);
  margin-bottom: 24px;
  font-size: var(--sdi-text-body);
  font-family: var(--sdi-font-body);
}
.login-box input {
  width: 100%;
  padding: 12px 14px;
  border: var(--sdi-border-regular);
  border-radius: var(--sdi-radius-md);
  font-size: 16px;
  font-family: var(--sdi-font-body);
  margin-bottom: 12px;
  transition: var(--sdi-transition-fast);
  box-sizing: border-box;
}
.login-box input:focus {
  outline: none;
  border-color: var(--sdi-azul);
  box-shadow: var(--sdi-shadow-focus);
}
.login-box button {
  width: 100%;
  padding: 12px;
  background: var(--sdi-azul);
  color: var(--sdi-blanco);
  border: none;
  border-radius: var(--sdi-radius-md);
  font-size: 16px;
  font-family: var(--sdi-font-body);
  font-weight: var(--sdi-weight-medium);
  cursor: pointer;
  transition: var(--sdi-transition-fast);
}
.login-box button:hover { opacity: 0.9; }
.login-box button:focus { outline: none; box-shadow: var(--sdi-shadow-focus); }
.msg { margin-top: 12px; font-size: var(--sdi-text-body); font-family: var(--sdi-font-body); min-height: 20px; }
.msg.error { color: var(--sdi-danger); }
.msg.ok { color: var(--sdi-success-text); }

.login-footer {
  margin-top: 24px;
  font-size: var(--sdi-text-caption);
  color: var(--sdi-gris-500);
  line-height: var(--sdi-lh-normal);
  font-family: var(--sdi-font-body);
}

/* ===== Acuerdo ===== */
#pantallaAcuerdo { padding: 40px 20px; }
.acuerdo-box {
  max-width: 720px;
  margin: 0 auto;
  background: var(--sdi-blanco);
  padding: 32px;
  border-radius: var(--sdi-radius-lg);
  box-shadow: var(--sdi-shadow-md);
}
.acuerdo-box h2 {
  color: var(--sdi-azul);
  margin-bottom: 20px;
  font-family: var(--sdi-font-display);
  font-weight: var(--sdi-weight-medium);
  letter-spacing: -0.02em;
  font-size: var(--sdi-text-h2);
}
.acuerdo-texto {
  max-height: 400px;
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--sdi-gris-100);
  border-radius: var(--sdi-radius-md);
  margin-bottom: 16px;
  font-size: var(--sdi-text-body);
  font-family: var(--sdi-font-body);
  line-height: var(--sdi-lh-relaxed);
  color: var(--sdi-gris-700);
}
.acuerdo-texto p { margin-bottom: 12px; }
.acuerdo-texto strong { color: var(--sdi-tinta); font-weight: var(--sdi-weight-semibold); }
.checkbox-acuerdo {
  display: block;
  margin: 16px 0;
  font-size: var(--sdi-text-body);
  font-family: var(--sdi-font-body);
  color: var(--sdi-gris-700);
  cursor: pointer;
}
.checkbox-acuerdo input { margin-right: 8px; accent-color: var(--sdi-azul); }
#btnAceptarAcuerdo {
  width: 100%;
  padding: 12px;
  background: var(--sdi-azul);
  color: var(--sdi-blanco);
  border: none;
  border-radius: var(--sdi-radius-md);
  font-size: 16px;
  font-family: var(--sdi-font-body);
  font-weight: var(--sdi-weight-medium);
  cursor: pointer;
  transition: var(--sdi-transition-fast);
}
#btnAceptarAcuerdo:hover:not(:disabled) { opacity: 0.9; }
#btnAceptarAcuerdo:disabled { background: var(--sdi-gris-500); cursor: not-allowed; opacity: 0.7; }

/* ===== App ===== */
.top-bar {
  background: var(--sdi-azul);
  color: var(--sdi-blanco);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--sdi-shadow-sm);
}
.marca { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 18px; }
.marca .logo-sdi { height: 28px; width: auto; display: block; }
/* Por defecto (modo agente · fondo azul SDI) se muestra la versión negativa.
   El modo cliente hace el toggle al logo color sobre fondo cream. */
.marca .logo-sdi--negativo { display: block; }
.marca .logo-sdi--color { display: none; }
.marca .marca-admin-tag {
  font-family: var(--sdi-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: var(--sdi-radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--sdi-blanco);
  text-transform: uppercase;
}
/* Legacy: marca con texto (login/acuerdo/bienvenida todavía lo usan hasta Fase 6) */
.marca span { color: var(--sdi-dorado); }
.marca span i { font-style: normal; }

.agente-info { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.agente-info button {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--sdi-blanco);
  border-radius: var(--sdi-radius-md);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--sdi-font-body);
  font-weight: var(--sdi-weight-medium);
  transition: var(--sdi-transition-fast);
}
.agente-info button:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.7); }
.btn-modo {
  /* Retirado el dorado del flujo normal — botón Admin pasa a outline blanco estándar (dorado reservado para Pro badge futuro) */
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: var(--sdi-blanco) !important;
  font-weight: var(--sdi-weight-medium);
}
.btn-modo:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.7) !important; }

/* Monitor tokens */
.monitor-tokens {
  background: #fff;
  padding: 12px 24px;
  border-bottom: 1px solid #e5e7eb;
}
.monitor-tokens.oculto { display: none; }
.monitor-linea {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.barra {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.barra-fill {
  height: 100%;
  width: 0%;
  background: #059669;
  transition: width .3s, background .3s;
}
.barra-fill.amarillo { background: var(--sdi-dorado); }
.barra-fill.rojo { background: var(--sdi-danger); }
.alerta { margin-top: 6px; font-size: var(--sdi-text-small); color: var(--sdi-warning-text); }
.alerta.oculto { display: none; }

/* Menú módulos */
.menu-modulos {
  background: var(--sdi-blanco);
  padding: 0 24px;
  border-bottom: var(--sdi-border-regular);
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.menu-modulos button {
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: var(--sdi-text-body);
  font-family: var(--sdi-font-body);
  font-weight: var(--sdi-weight-medium);
  color: var(--sdi-gris-500);
  white-space: nowrap;
  transition: color var(--sdi-transition-fast), border-color var(--sdi-transition-fast);
}
.menu-modulos button:hover { color: var(--sdi-gris-900); }
.menu-modulos button.activo {
  color: var(--sdi-azul);
  border-bottom-color: var(--sdi-azul);
}

/* ===== Stepper flujo reclamo (visible solo en Reclamos y Liquidación previa) ===== */
.stepper-flujo {
  display: none;
  background: var(--sdi-tinta);
  padding: 14px 24px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.stepper-flujo.visible { display: flex; }
.stepper-paso {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; cursor: pointer;
  color: var(--sdi-gris-500); font-size: var(--sdi-text-body);
  font-weight: var(--sdi-weight-semibold);
  font-family: var(--sdi-font-body);
  padding: 4px 6px; border-radius: var(--sdi-radius-md);
  transition: color var(--sdi-transition-fast);
}
.stepper-paso:hover { color: var(--sdi-blanco); }
.stepper-paso.activo { color: var(--sdi-blanco); }
.stepper-num {
  width: 32px; height: 32px; border-radius: var(--sdi-radius-full);
  background: rgba(255,255,255,.14); color: var(--sdi-gris-300);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--sdi-weight-bold); font-size: var(--sdi-text-body);
  font-family: var(--sdi-font-display);
  letter-spacing: -0.02em;
  transition: background var(--sdi-transition-fast), color var(--sdi-transition-fast);
}
.stepper-paso:hover .stepper-num { background: rgba(255,255,255,.22); color: var(--sdi-blanco); }
.stepper-paso.activo .stepper-num { background: var(--sdi-blanco); color: var(--sdi-tinta); }
.stepper-paso.activo:hover .stepper-num { background: var(--sdi-blanco); color: var(--sdi-tinta); }

/* Pulso suave para llamar la atención al siguiente paso (post-PDF) */
.stepper-paso.llamar-atencion .stepper-num {
  background: var(--sdi-verde); color: var(--sdi-blanco);
  animation: sdiPulsoStep 1.8s ease-in-out infinite;
}
.stepper-paso.llamar-atencion { color: var(--sdi-success-bg); }
@keyframes sdiPulsoStep {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(13, 148, 136, 0); }
}
.stepper-label small {
  font-weight: var(--sdi-weight-regular); opacity: .7; font-size: var(--sdi-text-small); margin-left: 2px;
}
.stepper-linea {
  flex: 0 0 56px; height: 2px; background: rgba(255,255,255,.2);
}
@media (max-width: 640px) {
  .stepper-flujo { padding: 10px 12px; gap: 10px; }
  .stepper-linea { flex-basis: 24px; }
  .stepper-label { font-size: 13px; }
  .stepper-label small { display: none; }
}

/* Contenido */
.contenido { padding: 32px 24px; max-width: 1200px; margin: 0 auto; }
.modulo { display: none; }
.modulo.activo { display: block; }
.modulo h2 {
  color: var(--sdi-azul);
  margin-bottom: 16px;
  font-family: var(--sdi-font-display);
  font-weight: var(--sdi-weight-medium);
  font-size: var(--sdi-text-h2);
  letter-spacing: -0.02em;
  line-height: var(--sdi-lh-snug);
}
.placeholder {
  padding: 40px;
  background: var(--sdi-blanco);
  border-radius: var(--sdi-radius-lg);
  text-align: center;
  color: var(--sdi-gris-500);
  font-family: var(--sdi-font-body);
  box-shadow: var(--sdi-shadow-sm);
}

.app-footer {
  text-align: center;
  padding: 16px;
  font-size: var(--sdi-text-small);
  color: var(--sdi-gris-500);
  font-family: var(--sdi-font-body);
}
.app-footer .legal {
  margin-top: 6px;
  font-size: var(--sdi-text-caption);
  color: var(--sdi-gris-300);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--sdi-lh-normal);
}

/* ===== Admin · íconos SVG oficiales (mask-image para heredar currentColor) ===== */
.admin-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
.admin-icon--cliente    { -webkit-mask-image: url('../assets/icons/cliente.svg');    mask-image: url('../assets/icons/cliente.svg'); }
.admin-icon--dashboard  { -webkit-mask-image: url('../assets/icons/dashboard.svg');  mask-image: url('../assets/icons/dashboard.svg'); }
.admin-icon--buscar     { -webkit-mask-image: url('../assets/icons/buscar.svg');     mask-image: url('../assets/icons/buscar.svg'); }
.admin-icon--cobro      { -webkit-mask-image: url('../assets/icons/cobro.svg');      mask-image: url('../assets/icons/cobro.svg'); }
.admin-icon--documento  { -webkit-mask-image: url('../assets/icons/documento.svg');  mask-image: url('../assets/icons/documento.svg'); }
.admin-icon--alerta     { -webkit-mask-image: url('../assets/icons/alerta.svg');     mask-image: url('../assets/icons/alerta.svg'); }
.admin-icon--ajustes    { -webkit-mask-image: url('../assets/icons/ajustes.svg');    mask-image: url('../assets/icons/ajustes.svg'); }

/* ===== Admin ===== */
.admin-body { background: var(--sdi-tinta); }
.admin-body .top-bar { background: var(--sdi-gris-900); }
.admin-body .menu-modulos { background: var(--sdi-gris-900); border-color: var(--sdi-gris-700); }
.admin-body .menu-modulos button { color: var(--sdi-gris-300); }
.admin-body .menu-modulos button:hover { color: var(--sdi-blanco); }
/* Dorado SDI oficial para el módulo activo en admin (uso 5% · tier Pro) */
.admin-body .menu-modulos button.activo { color: var(--sdi-dorado); border-bottom-color: var(--sdi-dorado); }
.admin-body .modulo { background: var(--sdi-blanco); padding: 24px; border-radius: var(--sdi-radius-lg); box-shadow: var(--sdi-shadow-sm); }

.tabla-agentes {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: var(--sdi-text-body);
  font-family: var(--sdi-font-body);
}
.tabla-agentes th, .tabla-agentes td {
  padding: 10px;
  text-align: left;
  border-bottom: var(--sdi-border-regular);
}
.tabla-agentes th { background: var(--sdi-gris-100); font-weight: var(--sdi-weight-semibold); color: var(--sdi-gris-500); font-size: var(--sdi-text-small); text-transform: uppercase; letter-spacing: 0.04em; }

#btnNuevoAgente {
  padding: 10px 18px;
  background: var(--sdi-azul);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 12px;
  font-weight: 600;
}
#btnNuevoAgente:hover { background: #002a56; }

/* ===== Admin: tabla de agentes ===== */
.agente-nombre { font-weight: 600; color: #1f2937; }
.agente-lic { font-size: 11px; color: #9ca3af; }
.pin-code {
  background: #f3f4f6; padding: 2px 8px; border-radius: 4px;
  font-family: var(--sdi-font-mono); font-size: 12px; color: #374151;
}
.plan-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
.plan-demo     { background: #f3f4f6; color: #6b7280; }
.plan-basico   { background: #dbeafe; color: #1e40af; }
.plan-pro      { background: #ede9fe; color: #5b21b6; }
.plan-agencia_s, .plan-agencia_m, .plan-agencia_l { background: #fef3c7; color: #92400e; }

.tokens-info { font-size: 12px; color: #374151; margin-bottom: 4px; }
.barra-mini { height: 4px; }

.estado-pill {
  display: inline-block; padding: 2px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 600; text-transform: capitalize;
}
.estado-activo     { background: #d1fae5; color: #065f46; }
.estado-suspendido { background: #fef3c7; color: #92400e; }
.estado-vencido    { background: #fee2e2; color: #991b1b; }

.vence-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 8px; font-size: 10px; font-weight: 600;
}
.vence-rojo     { background: #fee2e2; color: #991b1b; }
.vence-amarillo { background: #fef3c7; color: #92400e; }

.acciones-agente { display: flex; gap: 4px; }
.btn-mini {
  background: transparent; border: var(--sdi-border-regular);
  padding: 4px 8px; border-radius: var(--sdi-radius-sm); cursor: pointer;
  font-size: var(--sdi-text-body);
  font-family: var(--sdi-font-body);
  color: var(--sdi-gris-700);
  transition: var(--sdi-transition-fast);
}
.btn-mini:hover { background: var(--sdi-gris-100); }
.btn-mini-danger:hover { background: var(--sdi-danger-bg); border-color: var(--sdi-danger); color: var(--sdi-danger); }

/* ===== Admin: modal ===== */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6);
  z-index: 1000; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.modal-overlay.activo { display: flex; }
.modal-box {
  background: #fff; border-radius: 12px; padding: 28px;
  max-width: 520px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-box h3 {
  color: var(--sdi-azul); margin-bottom: 14px; font-size: 18px;
}

.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.form-grid label {
  display: flex; flex-direction: column; font-size: 13px; color: #6b7280; font-weight: 500;
}
.form-grid label:has(input[type=text]):nth-child(1),
.form-grid .form-acciones { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea {
  margin-top: 4px; padding: 8px 10px;
  border: 1px solid #d1d5db; border-radius: 6px;
  font-size: 14px; color: #1f2937; font-family: inherit;
}
.form-grid textarea { resize: vertical; }

.slider-row { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.slider-row input[type=range] { flex: 1; accent-color: var(--sdi-azul); }
.slider-row input[type=number] { width: 110px; text-align: right; }

.form-acciones {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 8px; padding-top: 14px; border-top: 1px solid #f1f5f9;
}

/* ===== Admin: monitor global ===== */
.monitor-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 24px;
}
.stat-box {
  background: #f9fafb; border-radius: 8px; padding: 16px;
  border-left: 4px solid var(--sdi-azul);
}
.stat-box.alerta { border-left-color: #d97706; background: #fffbeb; }
.stat-num { font-size: 24px; font-weight: 700; color: var(--sdi-azul); }
.stat-box.alerta .stat-num { color: #d97706; }
.stat-label { font-size: 12px; color: #6b7280; margin-top: 4px; }

.lista-alerta { list-style: none; padding: 0; }
.lista-alerta li {
  padding: 10px 14px; background: #fffbeb; border-left: 3px solid #d97706;
  border-radius: 6px; margin-bottom: 6px; font-size: 13px;
}

/* ===== Módulo Reclamos ===== */
.hint { color: #6b7280; font-size: 14px; margin-bottom: 16px; }
/* ===== Hero + pasos + tip (UX onboarding) ===== */
.hero-modulo {
  background: linear-gradient(135deg, var(--sdi-azul) 0%, #0057b8 100%);
  color: #fff; padding: 20px 24px; border-radius: 12px; margin-bottom: 18px;
}
.hero-modulo h2 { margin: 0 0 6px 0; color: #fff; font-size: 22px; }
.hero-modulo .hero-sub { margin: 0; color: #dbeafe; font-size: 14px; line-height: 1.5; }
.hero-modulo strong { color: #fff; }

.pasos {
  list-style: none; padding: 0; margin: 0 0 14px 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.pasos li {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
}
.paso-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--sdi-azul); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.pasos strong { font-size: 14px; color: #111827; }
.paso-det { font-size: 12.5px; color: #6b7280; line-height: 1.4; }

.tip-box {
  background: #fffbeb; border-left: 4px solid #f59e0b;
  padding: 12px 14px; border-radius: 6px; font-size: 13px;
  color: #78350f; margin-bottom: 16px; line-height: 1.5;
}
.tip-box code {
  background: #fef3c7; padding: 1px 6px; border-radius: 3px;
  font-size: 12px; color: #92400e;
}
.tip-lista {
  margin: 8px 0 6px 18px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.tip-lista li { font-size: 12.5px; line-height: 1.5; }
.tip-box small { display: block; margin-top: 8px; color: #92400e; font-size: 11.5px; }

/* Versión colapsable del tip (solo agente) — menos ruido visual inicial */
.tip-collapsable {
  padding: 10px 14px;
  cursor: pointer;
  transition: background .15s;
}
.tip-collapsable summary {
  list-style: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.tip-collapsable summary::-webkit-details-marker { display: none; }
.tip-collapsable summary::before {
  content: '▸';
  font-size: 11px;
  color: #b45309;
  transition: transform .15s;
  display: inline-block;
}
.tip-collapsable[open] summary::before { transform: rotate(90deg); }
.tip-collapsable .tip-hint {
  font-size: 11.5px;
  color: #b45309;
  font-weight: 400;
}
.tip-collapsable .tip-intro {
  margin: 10px 0 6px;
  font-size: 12.5px;
}
.tip-collapsable[open] { background: #fffbeb; }

/* ===== Bloque colapsable "¿Cómo funciona?" — guía del módulo ===== */
.como-funciona {
  margin: 20px 0 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
}
.como-funciona > summary {
  cursor: pointer; user-select: none; list-style: none;
  padding: 12px 16px; font-size: 14px; font-weight: 500; color: #475569;
  outline: none;
}
.como-funciona > summary::-webkit-details-marker { display: none; }
.como-funciona > summary::before {
  content: '▸'; display: inline-block; margin-right: 8px;
  color: #64748b; transition: transform .15s ease;
}
.como-funciona[open] > summary::before { transform: rotate(90deg); }
.como-funciona[open] > summary { border-bottom: 1px dashed #cbd5e1; }
.como-funciona-cuerpo { padding: 4px 16px 16px; }
.como-funciona-cuerpo .hero-modulo { margin-top: 10px; }

/* Banner prominente post-PDF con CTA al siguiente paso (solo agente) */
.banner-exito-agente {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1.5px solid #6ee7b7;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(16, 185, 129, .12);
  animation: sdiEntraBanner .35s ease-out;
}
@keyframes sdiEntraBanner {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bea-icono { font-size: 32px; line-height: 1; }
.bea-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bea-texto strong { color: #065f46; font-size: 16px; }
.bea-texto span { color: #047857; font-size: 13.5px; line-height: 1.45; }
.bea-cta {
  padding: 12px 20px;
  background: linear-gradient(135deg, #047857, #10b981);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(16, 185, 129, .3);
  transition: all .15s;
}
.bea-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, .45);
}
@media (max-width: 640px) {
  .banner-exito-agente { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; }
  .bea-cta { width: 100%; }
}

/* Modo cliente — ocultar controles de agente */
.modo-cliente #btnModoAdmin,
.modo-cliente #btnCompartirCliente,
.modo-cliente #monitorTokens { display: none !important; }

/* Botón compartir portal cliente */
.btn-modo.btn-compartir { background: var(--sdi-verde) !important; color: var(--sdi-blanco) !important; border-color: var(--sdi-verde) !important; }
.btn-modo.btn-compartir:hover { opacity: 0.9; }

/* ===== Selector de póliza (página 1) ===== */
.card-poliza {
  background: var(--sdi-blanco); border: 1.5px solid var(--sdi-azul); border-radius: var(--sdi-radius-lg);
  padding: 16px 18px; margin-bottom: 20px;
  box-shadow: var(--sdi-shadow-sm);
}
.card-poliza-header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px;
}
.card-poliza-icono { font-size: 20px; line-height: 1.2; flex-shrink: 0; color: var(--sdi-azul); }
.card-poliza-texto strong { font-size: var(--sdi-text-body); color: var(--sdi-azul); display: block; font-family: var(--sdi-font-display); font-weight: var(--sdi-weight-medium); }
.card-poliza-sub { font-size: var(--sdi-text-small); color: var(--sdi-gris-500); margin-top: 2px; }
.tabs-producto { display: flex; gap: 8px; margin-bottom: 14px; }
.tab-producto {
  flex: 1; padding: 9px 12px; border: var(--sdi-border-regular); border-radius: var(--sdi-radius-md);
  background: var(--sdi-gris-100); color: var(--sdi-gris-700);
  font-size: 13px; font-weight: var(--sdi-weight-medium);
  font-family: var(--sdi-font-body);
  cursor: pointer; transition: var(--sdi-transition-fast);
}
.tab-producto.activo { background: var(--sdi-azul); color: var(--sdi-blanco); border-color: var(--sdi-azul); }
.tab-producto:hover:not(.activo) { border-color: var(--sdi-azul); color: var(--sdi-azul); }
.opts-poliza { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-plan {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 9px 13px; border: var(--sdi-border-regular); border-radius: var(--sdi-radius-md);
  background: var(--sdi-gris-100); cursor: pointer; text-align: left;
  transition: var(--sdi-transition-fast);
  min-width: 140px;
  font-family: var(--sdi-font-body);
}
.chip-plan-label { font-size: 13px; font-weight: var(--sdi-weight-semibold); color: var(--sdi-tinta); line-height: 1.3; }
.chip-plan-det { font-size: var(--sdi-text-caption); color: var(--sdi-gris-500); margin-top: 3px; line-height: 1.35; }
.chip-plan.activo { background: var(--sdi-info-bg); border-color: var(--sdi-azul); box-shadow: var(--sdi-shadow-focus); }
.chip-plan.activo .chip-plan-label { color: var(--sdi-azul); }
.chip-plan:hover:not(.activo) { border-color: var(--sdi-gris-500); background: #E2E8F0; }

/* Tab Vital 360 — naranja SDI */
.tab-producto[data-prod="vital_360"].activo { background: var(--sdi-naranja); border-color: var(--sdi-naranja); color: var(--sdi-blanco); }
.tab-producto[data-prod="vital_360"]:hover:not(.activo) { border-color: var(--sdi-naranja); color: var(--sdi-naranja); }

/* INS Medical chips — escala azul tenue */
.chip-plan[data-var="regional"]           { background: #f0f7ff; border-color: #bfdbfe; }
.chip-plan[data-var="internacional"]      { background: #e8f0fe; border-color: #93c5fd; }
.chip-plan[data-var="grandes_deducibles"] { background: #eef2ff; border-color: #a5b4fc; }
.chip-plan[data-var="regional"].activo,
.chip-plan[data-var="internacional"].activo,
.chip-plan[data-var="grandes_deducibles"].activo { background: #dbeafe; border-color: var(--sdi-azul); }

/* Vital 360 chips — escala verde → teal → azul → premium */
.chip-plan[data-var="esencial_1"]  { background: #f0fdf4; border-color: #86efac; }
.chip-plan[data-var="esencial_2"]  { background: #dcfce7; border-color: #4ade80; }
.chip-plan[data-var="pro_1"]       { background: #d1fae5; border-color: #34d399; }
.chip-plan[data-var="pro_2"]       { background: #ccfbf1; border-color: #2dd4bf; }
.chip-plan[data-var="platinum_1"]  { background: #e0f2fe; border-color: #38bdf8; }
.chip-plan[data-var="platinum_2"]  { background: #dbeafe; border-color: #60a5fa; }
.chip-plan[data-var="deluxe"]      { background: #fdf4ff; border-color: #c084fc; }
.chip-plan[data-var="esencial_1"].activo  { background: #bbf7d0; border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.2); }
.chip-plan[data-var="esencial_2"].activo  { background: #bbf7d0; border-color: #15803d; box-shadow: 0 0 0 2px rgba(21,128,61,.2); }
.chip-plan[data-var="pro_1"].activo       { background: #a7f3d0; border-color: #059669; box-shadow: 0 0 0 2px rgba(5,150,105,.2); }
.chip-plan[data-var="pro_2"].activo       { background: #99f6e4; border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,.2); }
.chip-plan[data-var="platinum_1"].activo  { background: #bae6fd; border-color: #0284c7; box-shadow: 0 0 0 2px rgba(2,132,199,.2); }
.chip-plan[data-var="platinum_2"].activo  { background: #bfdbfe; border-color: #1d4ed8; box-shadow: 0 0 0 2px rgba(29,78,216,.2); }
.chip-plan[data-var="deluxe"].activo      { background: #e9d5ff; border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.2); }

/* Botón continuar verde cuando hay docs cargados */
.btn-continuar.con-docs {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
}

/* Badge de póliza activa en Liquidación previa */
.poliza-activa-label { font-size: 11px; color: var(--sdi-azul); font-weight: 600; margin-left: 6px; }

/* Iconos en la lista del tip-box */
.tip-icono { display: inline-block; width: 22px; font-size: 14px; text-align: center; }

/* Modo cliente: ocultar selector de póliza, stepper y CTA continuar */
.modo-cliente .card-poliza,
.modo-cliente .stepper-flujo,
.modo-cliente #btnIrReporte { display: none !important; }

/* Modo cliente: pasos con colores friendly — ver reglas tokenizadas en sección body.modo-cliente (líneas ~1927+) */

/* Modo cliente: tip-box más grande y prominente */
.modo-cliente .tip-box {
  padding: 18px 22px; font-size: 14.5px; border-left-width: 5px;
  border-radius: 10px; box-shadow: 0 2px 8px rgba(245,158,11,.12);
}
.modo-cliente .tip-box strong { font-size: 15.5px; }
.modo-cliente .tip-lista { margin: 12px 0 8px 6px; gap: 8px; }
.modo-cliente .tip-lista li { font-size: 14px; line-height: 1.6; }
.modo-cliente .tip-icono { font-size: 18px; width: 28px; }
.modo-cliente .tip-box code { font-size: 13px; padding: 2px 8px; }
.modo-cliente .tip-box small { font-size: 12.5px; margin-top: 12px; }

.siguiente-paso {
  margin-top: 32px;
  background: #ecfdf5; border: 1px solid #6ee7b7; border-radius: 10px;
  padding: 18px 20px;
}
.siguiente-paso-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.paso-check {
  width: 28px; height: 28px; border-radius: 50%;
  background: #10b981; color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.siguiente-paso h3 { margin: 0; color: #065f46; font-size: 16px; }
.siguiente-paso p { margin: 4px 0 12px 0; color: #065f46; font-size: 14px; line-height: 1.5; }
.siguiente-paso-acciones { display: flex; gap: 10px; flex-wrap: wrap; }

.drop-zone {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  background: #fff;
  transition: all .2s;
  margin-bottom: 16px;
  cursor: default;
}
.drop-zone:hover { border-color: #94a3b8; }
.drop-zone.drag-over { border-color: var(--sdi-azul); background: #eff6ff; }
.drop-zone p { color: #94a3b8; margin: 10px 0 0; }
.drop-sub { font-size: 12px; }
.drop-acciones {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.btn-subir {
  background: var(--sdi-azul); color: var(--sdi-blanco); border: none;
  padding: 10px 20px; border-radius: var(--sdi-radius-md); font-size: var(--sdi-text-body);
  font-weight: var(--sdi-weight-medium); font-family: var(--sdi-font-body);
  cursor: pointer; transition: var(--sdi-transition-fast);
  min-width: 160px;
}
.btn-subir:hover { opacity: 0.9; }
.btn-subir:focus { outline: none; box-shadow: var(--sdi-shadow-focus); }
.link {
  background: none; border: none; color: var(--sdi-azul);
  text-decoration: underline; cursor: pointer; font-size: inherit;
  padding: 0;
}
.controles-reclamos {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; flex-wrap: wrap; gap: 12px;
}
.controles-reclamos label { font-size: 14px; }
.controles-reclamos select {
  padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; margin-left: 6px;
}
.contador { font-size: 13px; color: #6b7280; }

.lista-docs {
  background: #fff; border-radius: 8px; padding: 12px; margin-bottom: 16px;
  min-height: 100px;
}
.placeholder-inline { color: #9ca3af; text-align: center; padding: 20px; }
.tabla-docs { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-docs th, .tabla-docs td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #f1f5f9; }
.tabla-docs th { background: #f9fafb; font-weight: 600; font-size: 12px; color: #6b7280; text-transform: uppercase; }
.btn-quitar {
  background: transparent; border: none; color: var(--sdi-danger); cursor: pointer;
  font-size: 16px; padding: 2px 8px;
  transition: var(--sdi-transition-fast);
}
.btn-quitar:hover { background: var(--sdi-danger-bg); border-radius: var(--sdi-radius-sm); }

.chip {
  display: inline-block; padding: 2px 10px; border-radius: var(--sdi-radius-full);
  font-size: var(--sdi-text-small); font-weight: var(--sdi-weight-medium);
  background: var(--sdi-gris-100); color: var(--sdi-gris-700);
  font-family: var(--sdi-font-body);
}
.chip-factura     { background: var(--sdi-info-bg);     color: var(--sdi-info-text); }
.chip-receta      { background: var(--sdi-warning-bg);  color: var(--sdi-warning-text); }
.chip-reporte     { background: var(--sdi-success-bg);  color: var(--sdi-success-text); }
.chip-solicitud   { background: var(--sdi-premium-bg);  color: var(--sdi-premium-text); }
.chip-laboratorio { background: var(--sdi-danger-bg);   color: var(--sdi-danger); }
.chip-imagen      { background: #CFFAFE;                color: #0E7490; }
.chip-otro        { background: var(--sdi-gris-100);    color: var(--sdi-gris-700); }
.chip-error       { background: var(--sdi-danger-bg);   color: var(--sdi-danger); }

select.chip {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: none; cursor: pointer; padding-right: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 4px center;
}
select.chip:hover { filter: brightness(0.95); }
select.chip:focus { outline: none; box-shadow: var(--sdi-shadow-focus); }

.acciones-reclamos {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.btn-primario {
  padding: 10px 20px; background: var(--sdi-azul); color: var(--sdi-blanco);
  border: none; border-radius: var(--sdi-radius-md);
  cursor: pointer; font-weight: var(--sdi-weight-medium);
  font-family: var(--sdi-font-body); font-size: var(--sdi-text-body);
  transition: var(--sdi-transition-fast);
}
.btn-primario:hover { opacity: 0.9; }
.btn-primario:focus { outline: none; box-shadow: var(--sdi-shadow-focus); }
.btn-verde {
  padding: 10px 20px; background: var(--sdi-verde); color: var(--sdi-blanco);
  border: none; border-radius: var(--sdi-radius-md);
  cursor: pointer; font-weight: var(--sdi-weight-medium);
  font-family: var(--sdi-font-body); font-size: var(--sdi-text-body);
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: var(--sdi-shadow-sm);
  transition: var(--sdi-transition-fast);
}
.btn-verde:hover { opacity: 0.9; box-shadow: var(--sdi-shadow-md); }
.btn-primario.pdf-listo {
  background: var(--sdi-verde);
  box-shadow: var(--sdi-shadow-md);
}
.btn-primario.pdf-listo:hover {
  opacity: 0.9;
  box-shadow: var(--sdi-shadow-lg);
}
.btn-secundario {
  padding: 10px 20px; background: var(--sdi-blanco); color: var(--sdi-gris-700);
  border: var(--sdi-border-regular); border-radius: var(--sdi-radius-md);
  cursor: pointer; font-family: var(--sdi-font-body);
  font-weight: var(--sdi-weight-medium); font-size: var(--sdi-text-body);
  transition: var(--sdi-transition-fast);
}
.btn-secundario:hover { background: var(--sdi-gris-100); }
.estado-msg { font-size: 13px; color: var(--sdi-gris-500); }
.btn-limpiar { margin-left: auto; color: var(--sdi-danger); border-color: var(--sdi-danger-bg); }
.btn-limpiar:hover { background: var(--sdi-danger-bg); }

/* CTA "Continuar a Liquidación previa" — empujado a la derecha de acciones-reclamos */
.btn-continuar {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; background: var(--sdi-blanco); color: var(--sdi-success-text);
  border: 1.5px solid var(--sdi-verde); border-radius: var(--sdi-radius-md); cursor: pointer;
  font-size: var(--sdi-text-body); font-weight: var(--sdi-weight-medium);
  font-family: var(--sdi-font-body);
  transition: var(--sdi-transition-normal);
}
.btn-continuar .flecha { font-size: 18px; transition: transform var(--sdi-transition-normal); }
.btn-continuar:hover {
  background: var(--sdi-success-bg); color: var(--sdi-success-text);
  box-shadow: var(--sdi-shadow-sm);
}
.btn-continuar:hover .flecha { transform: translateX(4px); }

/* Estado destacado — después de generar PDF: verde sólido + pulse */
.btn-continuar.destacar {
  background: var(--sdi-verde); border-color: var(--sdi-verde); color: var(--sdi-blanco);
  box-shadow: var(--sdi-shadow-md);
  animation: pulse-verde 2s ease-in-out 2;
}
.btn-continuar.destacar:hover {
  opacity: 0.9; color: var(--sdi-blanco);
}
@keyframes pulse-verde {
  0%, 100% { box-shadow: 0 2px 10px rgba(13, 148, 136, .35); }
  50% { box-shadow: 0 2px 18px rgba(13, 148, 136, .55); }
}

/* ===== Módulo Reporte ===== */
.grid-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.grid-form label {
  display: flex; flex-direction: column; font-size: 13px; color: #6b7280;
}
.grid-form input, .grid-form select {
  margin-top: 4px; padding: 8px 10px;
  border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px;
}
.grid-form .num { text-align: right; }

.tabla-facturas-cont {
  background: #fff; border-radius: 8px; padding: 12px; margin-bottom: 12px;
  overflow-x: auto;
}
.tabla-facturas { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-facturas th, .tabla-facturas td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; }
.tabla-facturas th { background: #f9fafb; font-weight: 600; font-size: 11px; color: #6b7280; text-transform: uppercase; text-align: left; }
.tabla-facturas input, .tabla-facturas select {
  padding: 4px 6px; border: 1px solid #e5e7eb; border-radius: 4px;
  font-size: 13px; width: 100%;
}
.tabla-facturas input.num { text-align: right; }

.resultado-box {
  margin-top: 20px; background: var(--sdi-blanco);
  padding: 16px; border-radius: var(--sdi-radius-lg);
  border-left: 4px solid var(--sdi-azul);
  box-shadow: var(--sdi-shadow-sm);
}
.resultado-box h3 {
  color: var(--sdi-azul); margin-bottom: 12px;
  font-size: var(--sdi-text-h3);
  font-family: var(--sdi-font-display);
  font-weight: var(--sdi-weight-medium);
  letter-spacing: -0.02em;
}
.tabla-resultado { width: 100%; border-collapse: collapse; font-size: var(--sdi-text-body); font-family: var(--sdi-font-body); }
.tabla-resultado th, .tabla-resultado td { padding: 8px 12px; border-bottom: 1px solid var(--sdi-gris-300); text-align: right; }
.tabla-resultado th:first-child, .tabla-resultado td:first-child { text-align: left; }
.tabla-resultado th { background: var(--sdi-gris-100); font-size: var(--sdi-text-small); color: var(--sdi-gris-500); font-weight: var(--sdi-weight-semibold); }
.info-deducible {
  margin-top: 12px; padding: 12px 14px;
  background: var(--sdi-info-bg); border-radius: var(--sdi-radius-md);
  border-left: 3px solid var(--sdi-azul);
  font-size: 13px; color: var(--sdi-info-text);
}
.fila-revisar td { background: var(--sdi-warning-bg); }
.fila-revisar input, .fila-revisar select { border-color: var(--sdi-naranja) !important; }
.warn { color: var(--sdi-naranja); font-weight: bold; margin-right: 6px; font-size: 16px; }
.fila-consolidado td { background: var(--sdi-gris-100); color: var(--sdi-gris-700); font-style: italic; }

.col-excedido { color: var(--sdi-warning-text); }
.tabla-resultado th.col-excedido { color: var(--sdi-warning-text); }
.tabla-resultado td.col-excedido { font-weight: var(--sdi-weight-semibold); }

.alerta-excedido {
  margin-top: 14px; background: var(--sdi-warning-bg);
  border-left: 3px solid var(--sdi-naranja);
  padding: 14px 18px; border-radius: var(--sdi-radius-md);
  font-size: var(--sdi-text-body); color: var(--sdi-warning-text);
  line-height: var(--sdi-lh-normal);
}
.alerta-excedido strong { display: block; margin-bottom: 6px; font-weight: var(--sdi-weight-semibold); }
.alerta-excedido ul { margin: 4px 0 8px 20px; padding: 0; font-size: 12.5px; line-height: 1.55; }
.alerta-excedido small { color: var(--sdi-warning-text); font-size: 11.5px; opacity: 0.85; }

.select-tipo-consulta {
  margin-top: 4px; font-size: 11.5px !important; padding: 4px 6px !important;
  background: #fffbeb; border: 1px solid #fcd34d !important; color: #78350f;
  border-radius: 4px; width: 100%;
}

/* ===== Módulo Chatbot ===== */
.chat-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; margin: 14px 0 10px;
  padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
}
.chat-titulo { display: flex; align-items: center; gap: 12px; }
.chat-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 22px; box-shadow: 0 2px 6px rgba(99, 102, 241, .25);
  border: 2px solid #c7d2fe;
}
.chat-titulo-txt { display: flex; flex-direction: column; line-height: 1.25; }
.chat-titulo-txt strong { color: #1e3a8a; font-size: 15px; }
.chat-titulo-txt span { color: #475569; font-size: 12px; }
.chat-header label { font-size: 13px; color: #6b7280; }
.chat-header select {
  margin-left: 8px; padding: 6px 10px; border: 1px solid #d1d5db;
  border-radius: 6px; font-size: 14px;
}
.chat-mensajes {
  background: #fff; border-radius: 8px; padding: 16px;
  min-height: 400px; max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px;
}
.msg-bubble {
  max-width: 80%; padding: 10px 14px; border-radius: 12px;
  font-size: 14px; line-height: 1.5;
}
.msg-user {
  align-self: flex-end; background: var(--sdi-azul); color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-assistant {
  align-self: flex-start; background: #f3f4f6; color: #1f2937;
  border-bottom-left-radius: 4px;
}
.msg-header {
  font-size: 11px; font-weight: 600; margin-bottom: 4px;
  opacity: 0.8; text-transform: uppercase; letter-spacing: 0.3px;
}
.msg-meta { font-weight: 400; opacity: 0.7; margin-left: 6px; text-transform: none; }
.msg-pensando { opacity: 0.6; font-style: italic; }
.chat-input-row {
  display: flex; gap: 8px; align-items: flex-end;
}
.chat-input-row textarea {
  flex: 1; padding: 10px 12px; border: 1px solid #d1d5db;
  border-radius: 8px; resize: vertical; font-family: inherit; font-size: 14px;
}
.chat-input-row button { align-self: stretch; padding: 0 20px; }

.chat-header-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-header-right .btn-secundario { padding: 6px 12px; font-size: 13px; }

.chat-ejemplos {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 8px 0 10px 0;
}
.ejemplos-lbl { font-size: 12px; color: #6b7280; font-weight: 600; margin-right: 4px; }
.chip-ejemplo {
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a;
  padding: 4px 10px; border-radius: 14px; font-size: 12px;
  cursor: pointer; transition: background .15s;
}
.chip-ejemplo:hover { background: #dbeafe; }

.panel-docs {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 14px; margin-bottom: 12px;
}
.panel-docs.oculto { display: none; }
.docs-subir {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;
}
.docs-grupo { margin-bottom: 12px; }
.docs-grupo h4 { font-size: 13px; color: #6b7280; margin-bottom: 8px; text-transform: uppercase; }
.doc-vacio { font-size: 13px; color: #9ca3af; font-style: italic; }

.doc-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; border-radius: 6px; margin-bottom: 4px;
  border: 1px solid transparent;
}
.doc-item:hover { background: #f9fafb; }
.doc-item.activo { background: #eff6ff; border-color: #bfdbfe; }
.doc-item label { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; font-size: 13px; }
.doc-nombre { font-weight: 500; color: #1f2937; }
.doc-meta { font-size: 11px; color: #9ca3af; margin-left: 6px; }
.doc-del {
  background: transparent; border: none; color: #dc2626;
  cursor: pointer; padding: 2px 8px; border-radius: 4px;
}
.doc-del:hover { background: #fee2e2; }

/* ===== Módulo Checklist ===== */
.checklist-tipos {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px;
}
.tipo-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 16px; background: #fff; border: 2px solid #e5e7eb;
  border-radius: 10px; cursor: pointer; min-width: 110px;
  transition: all .15s; font-family: inherit;
}
.tipo-btn:hover { border-color: #93c5fd; background: #eff6ff; }
.tipo-btn.activo { border-color: var(--sdi-azul); background: #eff6ff; }
.tipo-emoji { font-size: 24px; }
.tipo-label { font-size: 12px; font-weight: 600; color: #374151; text-align: center; }

.checklist-panel {
  background: #fff; border-radius: 10px; padding: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.checklist-top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;
}
.checklist-top h3 { color: var(--sdi-azul); font-size: 18px; }
.checklist-reset { padding: 6px 14px; font-size: 13px; }

.checklist-progreso { margin-bottom: 20px; }
.progreso-texto {
  display: flex; justify-content: space-between;
  font-size: 13px; color: #6b7280; margin-bottom: 6px;
}
.progreso-pct { font-weight: 700; color: #374151; }
.progreso-pct.completo { color: #059669; }
.checklist-listo {
  margin-top: 8px; padding: 8px 12px; background: #d1fae5;
  border-radius: 6px; font-size: 13px; color: #065f46; font-weight: 600;
}

.checklist-seccion {
  font-size: 13px; color: var(--sdi-azul); margin: 18px 0 8px 0;
  text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
  border-bottom: 2px solid #dbeafe; padding-bottom: 4px;
}
.checklist-items { list-style: none; padding: 0; margin-bottom: 16px; }
.checklist-item {
  padding: 10px 12px; border-bottom: 1px solid #f1f5f9; border-radius: 6px;
  transition: background .1s;
}
.checklist-item:hover { background: #f9fafb; }
.checklist-item.marcado { background: #f0fdf4; }
.checklist-item label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
}
.checklist-item input[type=checkbox] { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--sdi-azul); }
.item-texto {
  flex: 1; font-size: 14px; line-height: 1.4; color: #1f2937;
  transition: color .15s;
}
.checklist-item.marcado .item-texto { color: #6b7280; text-decoration: line-through; }
.badge-req {
  font-size: var(--sdi-text-caption); font-weight: var(--sdi-weight-semibold);
  background: var(--sdi-info-bg); color: var(--sdi-info-text);
  padding: 2px 10px; border-radius: var(--sdi-radius-full);
  flex-shrink: 0; white-space: nowrap;
  font-family: var(--sdi-font-body);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.badge-opc {
  font-size: var(--sdi-text-caption); font-weight: var(--sdi-weight-medium);
  background: var(--sdi-gris-100); color: var(--sdi-gris-500);
  padding: 2px 10px; border-radius: var(--sdi-radius-full);
  flex-shrink: 0; white-space: nowrap;
  font-family: var(--sdi-font-body);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.checklist-notas {
  background: #f9fafb; border-radius: 8px; padding: 14px 16px; margin-bottom: 20px;
}
.checklist-notas h4 { font-size: 13px; color: #374151; margin-bottom: 8px; }
.checklist-notas ul { list-style: none; padding: 0; }
.checklist-notas li {
  font-size: 13px; color: #4b5563; padding: 3px 0;
  padding-left: 14px; position: relative;
}
.checklist-notas li::before { content: "•"; position: absolute; left: 0; color: var(--sdi-azul); }

.checklist-acciones { display: flex; gap: 10px; flex-wrap: wrap; }

/* ===== Módulo Manual ===== */
.manual-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; margin-bottom: 6px;
}
.manual-acciones { display: flex; gap: 8px; }

.manual-layout {
  display: grid; grid-template-columns: 260px 1fr; gap: 20px; margin-top: 16px;
}
.manual-nav {
  background: #fff; border-radius: 10px; padding: 10px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 12px; align-self: start;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.manual-nav-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: transparent; border: none;
  border-radius: 8px; cursor: pointer; text-align: left;
  font-size: 14px; color: #374151; font-family: inherit;
  transition: background .15s;
}
.manual-nav-btn:hover { background: #f3f4f6; }
.manual-nav-btn.activo {
  background: #eff6ff; color: var(--sdi-azul); font-weight: 600;
}
.nav-icono { font-size: 18px; }
.nav-texto { flex: 1; }

.manual-contenido {
  background: #fff; border-radius: 10px; padding: 28px 32px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  min-height: 400px;
}
.manual-seccion h3 {
  color: var(--sdi-azul); font-size: 20px; margin-bottom: 14px;
  border-bottom: 2px solid var(--sdi-azul); padding-bottom: 8px;
}
.manual-seccion h4 {
  color: #374151; font-size: 15px; margin-top: 20px; margin-bottom: 8px;
  font-weight: 600;
}
.manual-seccion p { color: #4b5563; margin-bottom: 10px; line-height: 1.6; }
.manual-seccion ul, .manual-seccion ol { margin-left: 24px; margin-bottom: 12px; }
.manual-seccion li { margin-bottom: 4px; color: #4b5563; line-height: 1.6; }
.manual-seccion strong { color: #1f2937; }

.manual-seccion .callout {
  background: #eff6ff; padding: 12px 16px; border-left: 4px solid var(--sdi-azul);
  border-radius: 4px; font-size: 13px; color: #1e40af; margin: 14px 0;
}
.tabla-manual {
  width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px;
}
.tabla-manual th, .tabla-manual td {
  padding: 8px 12px; border: 1px solid #e5e7eb; text-align: left;
}
.tabla-manual th { background: #f3f4f6; color: #374151; font-weight: 600; }

@media (max-width: 768px) {
  .manual-layout { grid-template-columns: 1fr; }
  .manual-nav { position: static; flex-direction: row; overflow-x: auto; }
  .nav-texto { white-space: nowrap; }
}

/* ===== Modal clasificación de fotos ===== */
.modal-overlay-clasif {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 16px;
}
.modal-clasif {
  background: #fff; border-radius: 12px; padding: 24px;
  max-width: 480px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.modal-clasif h3 { margin: 0 0 8px; color: var(--sdi-azul); font-size: 18px; }
.modal-clasif-archivo { margin: 0 0 16px; font-size: 13px; color: #666; word-break: break-all; }
.modal-clasif-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-tipo-modal {
  background: var(--sdi-info-bg); border: 1px solid #BFDBFE; color: var(--sdi-azul);
  padding: 8px 14px; border-radius: var(--sdi-radius-full); cursor: pointer;
  font-size: var(--sdi-text-body); font-family: var(--sdi-font-body);
  font-weight: var(--sdi-weight-medium);
  transition: var(--sdi-transition-fast);
}
.chip-tipo-modal:hover { background: var(--sdi-azul); color: var(--sdi-blanco); border-color: var(--sdi-azul); }
.chip-tipo-modal.chip-otro { background: var(--sdi-premium-bg); border-color: #FDE68A; color: var(--sdi-premium-text); }
.chip-tipo-modal.chip-otro:hover { background: var(--sdi-dorado); color: var(--sdi-blanco); border-color: var(--sdi-dorado); }
.modal-clasif-cancelar {
  width: 100%; background: transparent; border: var(--sdi-border-regular); color: var(--sdi-gris-500);
  padding: 8px; border-radius: var(--sdi-radius-md); cursor: pointer;
  font-size: 13px; font-family: var(--sdi-font-body);
  transition: var(--sdi-transition-fast);
}
.modal-clasif-cancelar:hover { background: var(--sdi-gris-100); }

/* ===== Opciones de envío ===== */
.envio-opciones {
  margin-top: 20px; padding: 18px; background: var(--sdi-info-bg);
  border: 1px solid #BFDBFE; border-radius: var(--sdi-radius-lg);
}
.envio-titulo { margin: 0 0 6px; font-weight: var(--sdi-weight-semibold); color: var(--sdi-azul); font-family: var(--sdi-font-display); }
.envio-nota { margin: 0 0 12px; font-size: var(--sdi-text-body); color: var(--sdi-gris-700); }
.envio-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-envio {
  display: inline-block; padding: 10px 18px; border-radius: var(--sdi-radius-md);
  text-decoration: none; font-weight: var(--sdi-weight-medium);
  color: var(--sdi-blanco);
  font-family: var(--sdi-font-body);
  font-size: var(--sdi-text-body);
  transition: var(--sdi-transition-fast);
}
.btn-envio:hover { opacity: 0.9; }
.btn-correo { background: var(--sdi-azul); }
/* WhatsApp mantiene su verde oficial de marca (#25D366) por reconocibilidad */
.btn-wa { background: #25d366; }

.btn-camara { margin-top: 0; background: var(--sdi-naranja); color: var(--sdi-blanco); }
.btn-camara:hover { opacity: 0.9; }

/* Compartir / CTA secundario usa naranja SDI (acción) en lugar del violeta anterior */
.btn-compartir { background: var(--sdi-naranja); border: none; cursor: pointer; font-size: 15px; color: var(--sdi-blanco); }
.btn-compartir:hover { opacity: 0.9; }

.campo-cliente-nombre {
  margin-top: 14px; padding: 12px 14px; background: var(--sdi-blanco);
  border: 2px solid #BFDBFE; border-radius: var(--sdi-radius-lg);
}
.campo-cliente-nombre label {
  display: block; font-weight: var(--sdi-weight-semibold); color: var(--sdi-azul);
  margin-bottom: 6px; font-size: var(--sdi-text-body);
  font-family: var(--sdi-font-body);
}
.campo-cliente-nombre .opcional { font-weight: var(--sdi-weight-regular); color: var(--sdi-gris-500); font-size: var(--sdi-text-small); }
.campo-cliente-nombre input {
  width: 100%; padding: 10px 14px; border: var(--sdi-border-regular); border-radius: var(--sdi-radius-md);
  font-size: 15px; box-sizing: border-box; font-family: var(--sdi-font-body);
  transition: var(--sdi-transition-fast);
}
.campo-cliente-nombre input:focus { outline: none; border-color: var(--sdi-azul); box-shadow: var(--sdi-shadow-focus); }

.btn-compartir-grande {
  display: block; width: 100%; background: var(--sdi-naranja); color: var(--sdi-blanco); border: none;
  padding: 16px 20px; border-radius: var(--sdi-radius-lg);
  font-family: var(--sdi-font-body);
  font-size: 17px; font-weight: var(--sdi-weight-semibold);
  cursor: pointer; box-shadow: var(--sdi-shadow-md);
  transition: var(--sdi-transition-fast);
}
.btn-compartir-grande:hover { opacity: 0.92; box-shadow: var(--sdi-shadow-lg); }
.envio-hint { margin: 8px 0 16px; font-size: 13px; color: #555; text-align: center; }
.envio-fallback-titulo {
  margin: 14px 0 8px; font-size: 12px; color: #888; text-align: center;
  border-top: 1px dashed #ddd; padding-top: 12px;
}
.envio-botones.secundarios .btn-envio {
  font-size: 13px; padding: 8px 14px; opacity: 0.85;
}

.btn-descargar { background: var(--sdi-azul); color: var(--sdi-blanco); border: none; cursor: pointer; font-size: var(--sdi-text-body); transition: var(--sdi-transition-fast); }
.btn-descargar:hover { opacity: 0.9; }

/* ===== Cargar reclamo por código ===== */
.cargar-codigo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--sdi-premium-bg); border: 1px solid #FDE68A; border-radius: var(--sdi-radius-lg);
  padding: 14px 16px; margin-bottom: 16px;
}
.cargar-codigo-icono { font-size: 24px; color: var(--sdi-premium-text); }
.cargar-codigo-texto { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.cargar-codigo-texto strong { color: var(--sdi-premium-text); font-size: var(--sdi-text-body); font-weight: var(--sdi-weight-semibold); }
.cargar-codigo-texto span { color: var(--sdi-warning-text); font-size: var(--sdi-text-small); }
.cargar-codigo input {
  padding: 8px 12px; border: 1px solid #FDE68A; border-radius: var(--sdi-radius-md);
  font-size: 15px; font-family: var(--sdi-font-mono); text-transform: uppercase; width: 140px;
  background: var(--sdi-blanco);
  transition: var(--sdi-transition-fast);
}
.cargar-codigo input:focus { outline: none; border-color: var(--sdi-dorado); box-shadow: 0 0 0 3px rgba(201,162,39,0.2); }
.cargar-codigo button { padding: 8px 16px; }

/* ===== Wrapper colapsable del código (oculto por defecto cuando viene del paso 1) ===== */
.cargar-codigo-wrap { margin-bottom: 16px; }
.cargar-codigo-wrap .cargar-codigo { margin-bottom: 0; }
.cargar-codigo-summary {
  cursor: pointer; user-select: none;
  padding: 10px 14px; background: #fef9e7; border: 1px dashed #fcd34d;
  border-radius: 8px; font-size: 13px; color: #78350f; font-weight: 500;
  list-style: none; position: relative;
}
.cargar-codigo-summary::-webkit-details-marker { display: none; }
.cargar-codigo-summary::before {
  content: '▸'; display: inline-block; margin-right: 6px;
  transition: transform .15s ease; color: #92400e;
}
.cargar-codigo-wrap[open] > .cargar-codigo-summary::before { transform: rotate(90deg); }
.cargar-codigo-wrap[open] > .cargar-codigo-summary {
  border-radius: 8px 8px 0 0; border-bottom: none; background: #fef3c7;
}
.cargar-codigo-wrap[open] .cargar-codigo {
  border-radius: 0 0 10px 10px; border-top: none;
}

/* ===== Acciones del reporte — jerarquía visual clara ===== */
.acciones-reporte {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; margin: 16px 0;
}
.acciones-primarias { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-link-accion {
  background: transparent; border: none; color: var(--sdi-azul); cursor: pointer;
  padding: 8px 6px; font-size: var(--sdi-text-body);
  font-family: var(--sdi-font-body); font-weight: var(--sdi-weight-medium);
  text-decoration: underline; text-underline-offset: 3px;
  transition: var(--sdi-transition-fast);
}
.btn-link-accion:hover { color: #0c4a6e; }
.btn-texto-sutil {
  background: transparent; border: none; color: #94a3b8; cursor: pointer;
  padding: 6px 10px; font-size: 12px;
}
.btn-texto-sutil:hover { color: #b91c1c; }
#rptGenerar:disabled {
  opacity: .45; cursor: not-allowed; background: #94a3b8;
  box-shadow: none;
}

.codigo-sesion {
  background: #ecfdf5; border: 2px dashed #10b981; border-radius: 10px;
  padding: 14px; margin: 12px 0; text-align: center;
}
.codigo-sesion-label { display: block; color: #065f46; font-weight: 600; font-size: 13px; }
.codigo-sesion-valor {
  display: block; font-family: var(--sdi-font-mono); font-size: 28px; font-weight: 700;
  color: #047857; letter-spacing: 2px; margin: 6px 0;
}
.codigo-sesion small { display: block; color: #047857; font-size: 11px; }

/* ===== Control de deducibles ===== */
.dedu-barra {
  display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap;
}
.dedu-barra input[type="search"] {
  flex: 1; min-width: 200px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px;
}
.dedu-lista { display: grid; gap: 12px; margin-top: 12px; }
.dedu-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.dedu-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap;
}
.dedu-card-head strong { display: block; font-size: 16px; color: #0f172a; }
.dedu-meta { display: block; color: #64748b; font-size: 12px; margin-top: 2px; }
.dedu-card-acciones button {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 7px 16px; margin-left: 6px; cursor: pointer; font-size: 13px;
  color: #334155; font-weight: 500; transition: all .15s ease;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.dedu-card-acciones button:hover {
  background: #f1f5f9; border-color: #94a3b8; transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(15,23,42,0.08);
}
.dedu-card-acciones .dedu-ver { color: #1e40af; border-color: #bfdbfe; background: #eff6ff; }
.dedu-card-acciones .dedu-ver:hover { background: #dbeafe; border-color: #60a5fa; }
.dedu-card-acciones .dedu-editar { color: #6d28d9; border-color: #ddd6fe; background: #f5f3ff; }
.dedu-card-acciones .dedu-editar:hover { background: #ede9fe; border-color: #a78bfa; }
.dedu-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin-top: 12px;
}
.dedu-numeros > div { background: #f8fafc; padding: 8px 10px; border-radius: 6px; }
.dedu-numeros span { display: block; color: #64748b; font-size: 11px; text-transform: uppercase; }
.dedu-numeros b { display: block; font-size: 15px; color: #0f172a; margin-top: 2px; }
.dedu-venc { color: #dc2626 !important; }
.dedu-barra-acum {
  height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-top: 10px;
}
.dedu-barra-acum > div { height: 100%; background: linear-gradient(90deg, #10b981, #f59e0b); }
.dedu-liq-count { color: #64748b; font-size: 12px; margin-top: 8px; }

.dedu-form { display: grid; gap: 10px; margin: 10px 0; }
.dedu-form label { display: block; font-size: 13px; color: #475569; font-weight: 600; }
.dedu-form input, .dedu-form select {
  width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px;
  font-size: 14px; margin-top: 4px;
}
.dedu-form-botones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.dedu-form-botones button {
  padding: 11px 22px; border: none; border-radius: 999px; cursor: pointer; font-weight: 600;
  font-size: 14px; transition: all .15s ease; box-shadow: 0 1px 3px rgba(15,23,42,0.08);
}
.dedu-form-botones button:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15,23,42,0.12); }
.dedu-form-botones .modal-clasif-cancelar {
  background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #cbd5e1 !important;
}
.dedu-form-botones .modal-clasif-cancelar:hover { background: #e2e8f0 !important; }
.dedu-form-botones .dedu-guardar { background: linear-gradient(135deg, #10b981, #059669) !important; }
.dedu-form-botones .dedu-eliminar { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; }
.hint-inline { color: #94a3b8; font-weight: 400; font-size: 11px; font-style: italic; }

/* Barra superior: botones más redondeados */
.dedu-barra .btn-modo {
  border-radius: 999px !important; padding: 10px 18px !important;
}
.dedu-detalle-nums {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0;
}
.dedu-detalle-nums > div { background: #f8fafc; padding: 10px; border-radius: 6px; }
.dedu-detalle-nums span { display: block; color: #64748b; font-size: 11px; text-transform: uppercase; }
.dedu-detalle-nums b { display: block; font-size: 18px; margin-top: 2px; }
.dedu-tabla-wrap { max-height: 360px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 6px; }
.dedu-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.dedu-tabla th, .dedu-tabla td {
  padding: 8px 10px; text-align: left; border-bottom: 1px solid #e2e8f0;
}
.dedu-tabla th { background: #f8fafc; position: sticky; top: 0; color: #475569; }

/* Banner cliente encontrado en reporte */
.dedu-ctrl-banner {
  background: #ecfdf5; border: 1px solid #10b981; border-radius: 8px;
  padding: 10px 14px; margin: 8px 0 12px; color: #065f46; font-size: 13px;
}
.dedu-guardar-hist { margin-top: 12px; text-align: right; }
.dedu-guardar-hist button { padding: 10px 18px; font-size: 14px; }

/* ===== Branding del agente en portal cliente ===== */
.branding-agente {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 14px;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.18);
}
.branding-cabecera {
  display: flex; align-items: center; gap: 12px;
}
.branding-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff; font-weight: 700; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.branding-info { flex: 1; min-width: 0; }
.branding-nombre { font-size: 16px; font-weight: 600; line-height: 1.2; }
.branding-lic { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.branding-marca { font-size: 11px; opacity: 0.75; margin-top: 4px; }
.branding-acciones {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.branding-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.95); color: #1e3a8a;
  text-decoration: none; font-weight: 600; font-size: 13px;
  transition: transform .12s ease, background .12s ease;
}
.branding-btn:hover { background: #fff; transform: translateY(-1px); }
.branding-wa { color: #047857; }
.branding-email { color: #1e3a8a; }
@media (max-width: 600px) {
  .branding-acciones { flex-direction: column; }
  .branding-btn { justify-content: center; }
}

/* ===== Auditoría admin ===== */
.audit-controles {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: end;
  margin: 12px 0;
}
.audit-controles label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #475569; }
.audit-controles select, .audit-controles input {
  padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px;
}
.audit-alertas { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; }
.audit-alerta {
  background: #fef3c7; border-left: 4px solid #f59e0b;
  padding: 8px 12px; border-radius: 4px; font-size: 13px; color: #78350f;
}
.tabla-auditoria { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabla-auditoria th, .tabla-auditoria td {
  padding: 7px 10px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top;
}
.tabla-auditoria th { background: #f1f5f9; color: #334155; font-weight: 600; position: sticky; top: 0; }
.audit-fecha { white-space: nowrap; color: #64748b; font-family: var(--sdi-font-mono); font-size: 11px; }
.audit-evento { font-weight: 600; }
.audit-detalle { color: #475569; }
.audit-ip { color: #94a3b8; font-family: var(--sdi-font-mono); font-size: 11px; }

/* Último acceso col */
.ultimo-acceso { font-size: 12px; color: #475569; white-space: nowrap; }
.acc-reciente { color: #047857; font-weight: 600; }

/* Toast notif admin */
.sdi-toast {
  position: fixed; bottom: 24px; right: 24px;
  background: #1e293b; color: #fff;
  padding: 12px 18px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none; z-index: 9999;
  max-width: 360px;
}
.sdi-toast.visible { opacity: 1; transform: translateY(0); }
.sdi-toast.tipo-ok { background: linear-gradient(135deg, #047857, #059669); }
.sdi-toast.tipo-err { background: linear-gradient(135deg, #b91c1c, #dc2626); }
.sdi-toast.tipo-info { background: linear-gradient(135deg, #1e3a8a, #2563eb); }

/* Tabla comparativo planes (admin) */
.tabla-comparativo th:nth-child(3),
.tabla-comparativo td:nth-child(3) {
  background: #eff6ff;
  border-left: 2px solid #2563eb;
}
.tabla-comparativo th:nth-child(3) { color: #1e3a8a; }
.tabla-comparativo th:nth-child(2) { color: #475569; }

/* ===== Pantalla de bienvenida — selector de acción rápida ===== */
.bienvenida-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}
.bienvenida-titulo {
  font-size: var(--sdi-text-h1);
  color: var(--sdi-azul);
  margin: 0 0 10px;
  font-weight: var(--sdi-weight-medium);
  font-family: var(--sdi-font-display);
  text-align: center;
  letter-spacing: -0.02em;
  line-height: var(--sdi-lh-tight);
}
.bienvenida-sub {
  text-align: center;
  color: var(--sdi-gris-500);
  margin: 0 auto 40px;
  font-size: var(--sdi-text-body-lg);
  font-family: var(--sdi-font-body);
  max-width: 560px;
  line-height: var(--sdi-lh-normal);
}
.bienvenida-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 28px;
}
.bienvenida-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 24px;
  background: var(--sdi-blanco);
  border: 2px solid var(--sdi-gris-300);
  border-radius: var(--sdi-radius-xl);
  cursor: pointer;
  text-align: left;
  font-family: var(--sdi-font-body);
  color: var(--sdi-tinta);
  min-height: 190px;
  transition: transform var(--sdi-transition-normal), border-color var(--sdi-transition-normal), box-shadow var(--sdi-transition-normal);
}
.bienvenida-card:hover,
.bienvenida-card:focus-visible {
  border-color: var(--sdi-azul);
  transform: translateY(-3px);
  box-shadow: var(--sdi-shadow-md);
  outline: none;
}
.bv-icono {
  font-size: 44px;
  line-height: 1;
}
.bv-titulo {
  font-size: 17px;
  color: var(--sdi-azul);
  font-family: var(--sdi-font-display);
  font-weight: var(--sdi-weight-medium);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.bv-desc {
  font-size: 13.5px;
  color: var(--sdi-gris-500);
  line-height: var(--sdi-lh-normal);
  font-family: var(--sdi-font-body);
}
.bienvenida-skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--sdi-gris-500);
  font-size: 13px;
  font-family: var(--sdi-font-body);
  cursor: pointer;
  margin-top: 12px;
  user-select: none;
}
.bienvenida-skip input { cursor: pointer; accent-color: var(--sdi-azul); }

@media (max-width: 640px) {
  .bienvenida-main { padding: 28px 16px 48px; }
  .bienvenida-titulo { font-size: 24px; }
  .bienvenida-sub { font-size: 14px; margin-bottom: 28px; }
  .bienvenida-card { min-height: auto; padding: 22px 20px; }
  .bv-icono { font-size: 38px; }
  .bv-titulo { font-size: 16px; }
}

/* ==========================================================================
   REDISEÑO PORTAL CLIENTE 2026 — Soft Minimalism · Paleta INS + Google
   Solo aplica bajo body.modo-cliente. Modo agente queda intacto.
   ========================================================================== */

body.modo-cliente {
  /* Fondo cream + neutros: firma visual del portal cliente (tono cálido
     diferenciado del azul corporate del modo agente). El cream (#FBF8F3)
     y border-cream (#DCE5DD) se mantienen — no tienen equivalente en la
     paleta SDI pero son parte de la identidad "portal cliente". */
  --pc-bg: #FBF8F3;
  --pc-surface: var(--sdi-blanco);
  --pc-ink: var(--sdi-tinta);
  --pc-ink-soft: var(--sdi-gris-700);
  --pc-muted: var(--sdi-gris-500);
  --pc-border: var(--sdi-gris-300);
  --pc-border-soft: #EAF0EB;

  /* Primario verde · ahora es el verde SDI oficial (#0D9488) en vez del
     verde INS vibrante. Unifica el "éxito/CTA primario" con el modo agente. */
  --pc-primary: var(--sdi-verde);
  --pc-primary-hover: #0B7F74;
  --pc-primary-tint: var(--sdi-success-bg);

  /* Azul · SDI oficial (#0369A1) en vez de Google Blue. */
  --pc-teal: var(--sdi-azul);
  --pc-teal-ink: var(--sdi-info-text);
  --pc-teal-tint: var(--sdi-info-bg);

  /* Naranja · SDI oficial (#EA580C) — coincide exacto con la paleta. */
  --pc-orange: var(--sdi-naranja);
  --pc-orange-hover: #C2410C;
  --pc-orange-tint: var(--sdi-warning-bg);
  --pc-orange-tint-soft: #FFE8D0;
  --pc-orange-ink: var(--sdi-warning-text);

  /* Dorado/premium · reemplaza Google Yellow por el dorado SDI (#C9A227,
     tier Pro). Se usa para la pill PORTAL CLIENTE y highlights suaves. */
  --pc-lime: var(--sdi-dorado);
  --pc-lime-tint: var(--sdi-premium-bg);
  --pc-lime-ink: var(--sdi-premium-text);

  background: var(--pc-bg);
  color: var(--pc-ink);
  font-family: var(--sdi-font-body);
}

/* Footer del login oculto en portal cliente */
body.modo-cliente .login-footer { display: none !important; }

/* ---------- Top-bar rediseñado (SDI · Portal cliente) ----------
   Ahora monta el logo oficial SDI v1.0 en cream. El logo negativo se oculta
   y el compacto color se muestra. La etiqueta "PORTAL CLIENTE" reemplaza
   el bloque del agente mediante la pill a la derecha. */
body.modo-cliente .top-bar {
  background: #F0E8D8 !important;
  color: var(--pc-ink) !important;
  border-bottom: 1px solid #E0D6C0;
  padding: 14px 24px;
}
/* Toggle de logos: mostrar logo-compacto color, ocultar negativo */
body.modo-cliente .top-bar .marca .logo-sdi--negativo { display: none; }
body.modo-cliente .top-bar .marca .logo-sdi--color { display: block; }

/* Pill PORTAL CLIENTE reemplaza el nombre del agente en modo cliente */
body.modo-cliente .top-bar .agente-info {
  font-size: 0;
}
body.modo-cliente .top-bar .agente-info > * {
  display: none !important;
}
body.modo-cliente .top-bar .agente-info::before {
  content: "• Portal cliente";
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pc-lime-tint);
  color: #7A3D00;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- Branding del agente ---------- */
body.modo-cliente .branding-agente {
  background: var(--pc-surface);
  color: var(--pc-ink);
  border: 1px solid var(--pc-border-soft);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 0 0 48px;
  box-shadow: 0 1px 2px rgba(0,110,66,.05);
}
body.modo-cliente .branding-cabecera { gap: 18px; }
body.modo-cliente .branding-avatar {
  width: 56px; height: 56px;
  background: var(--pc-primary-tint);
  color: var(--pc-primary);
  font-family: var(--sdi-font-display);
  font-size: 30px; font-weight: var(--sdi-weight-medium);
  letter-spacing: -0.02em;
}
body.modo-cliente .branding-nombre {
  color: var(--pc-ink);
  font-size: 16px; font-weight: 600;
  letter-spacing: -.015em;
}
body.modo-cliente .branding-lic {
  display: inline-block;
  background: var(--pc-border-soft);
  color: var(--pc-muted);
  padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: .03em;
  opacity: 1; margin-top: 6px;
}
body.modo-cliente .branding-marca {
  color: var(--pc-muted);
  opacity: 1; margin-top: 6px; font-size: 11px;
}
body.modo-cliente .branding-marca strong { color: var(--pc-ink-soft); }
body.modo-cliente .branding-acciones { gap: 8px; margin-top: 14px; }
body.modo-cliente .branding-btn {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  color: var(--pc-ink-soft) !important;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px; font-weight: 500;
  transition: all .2s cubic-bezier(.2,.8,.2,1);
}
body.modo-cliente .branding-btn:hover {
  background: var(--pc-primary);
  color: #fff !important;
  border-color: var(--pc-primary);
  transform: translateY(-1px);
}

/* ---------- Hero "¡Hola María, armá tu reclamo" ---------- */
body.modo-cliente .hero-modulo {
  background: transparent;
  color: var(--pc-ink);
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 32px;
}
body.modo-cliente .hero-modulo h2 {
  font-family: var(--sdi-font-display);
  font-weight: var(--sdi-weight-medium);
  font-size: var(--sdi-text-display);
  line-height: var(--sdi-lh-tight);
  letter-spacing: -0.02em;
  color: var(--pc-primary);
  margin-bottom: 10px;
}
body.modo-cliente .hero-modulo .hero-sub {
  color: var(--pc-muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 54ch;
  margin-top: 18px;
}
body.modo-cliente .hero-modulo strong {
  color: var(--pc-ink);
  font-weight: 600;
}

/* ---------- Pasos — bento boxes (override gradientes viejos) ---------- */
body.modo-cliente .pasos {
  gap: 12px;
  margin: 32px 0 28px;
}
body.modo-cliente .pasos li {
  background: var(--pc-primary-tint) !important;
  border: none !important;
  border-left: none !important;
  padding: 22px 20px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  gap: 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
body.modo-cliente .pasos li:hover {
  transform: translateY(-3px);
  box-shadow: none;
}
body.modo-cliente .pasos li:nth-child(1) { background: var(--pc-teal-tint) !important; }
body.modo-cliente .pasos li:nth-child(2) { background: var(--pc-primary-tint) !important; }
body.modo-cliente .pasos li:nth-child(3) { background: var(--pc-orange-tint) !important; }
body.modo-cliente .pasos li .paso-num {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  color: var(--pc-ink) !important;
  font-weight: 700 !important;
  font-size: 30px !important;
  border-radius: 0 !important;
  display: block !important;
  margin-bottom: 8px !important;
  letter-spacing: -.02em;
  padding: 0 !important;
}
body.modo-cliente .pasos li:nth-child(1) .paso-num { color: var(--pc-teal-ink) !important; }
body.modo-cliente .pasos li:nth-child(2) .paso-num { color: var(--pc-primary) !important; }
body.modo-cliente .pasos li:nth-child(3) .paso-num { color: var(--pc-orange-ink) !important; }
body.modo-cliente .pasos strong {
  color: var(--pc-ink);
  font-size: 14px; font-weight: 600;
  letter-spacing: -.005em;
}
body.modo-cliente .paso-det {
  color: var(--pc-ink-soft);
  opacity: .75;
  font-size: 13px;
  line-height: 1.55;
  display: block;
  margin-top: 2px;
}

/* ---------- Drop-zone ---------- */
body.modo-cliente .drop-zone {
  background: var(--pc-surface);
  border: 2px dashed var(--pc-border);
  border-radius: 20px;
  padding: 48px 24px;
  text-align: center;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
}
body.modo-cliente .drop-zone:hover,
body.modo-cliente .drop-zone.drag-over {
  border-color: var(--pc-primary);
  background: #FDFCF9;
}
body.modo-cliente .drop-zone .drop-sub {
  color: var(--pc-muted);
  font-size: 13.5px;
  margin-top: 18px;
}
body.modo-cliente .drop-acciones { gap: 10px; }

/* Botones subir archivos / tomar foto */
body.modo-cliente .btn-subir {
  background: var(--pc-primary-tint);
  color: var(--pc-primary);
  border: 1px solid transparent;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600; font-size: 14.5px;
  letter-spacing: -.01em;
  min-width: auto;
  transition: all .2s cubic-bezier(.2,.8,.2,1);
}
body.modo-cliente .btn-subir:hover {
  background: var(--pc-primary);
  color: #fff;
  transform: translateY(-1px);
}
body.modo-cliente .btn-subir.btn-camara {
  background: var(--pc-orange-tint);
  color: var(--pc-orange-ink);
}
body.modo-cliente .btn-subir.btn-camara:hover {
  background: var(--pc-orange);
  color: #fff;
}

/* ---------- Chips de tipo de documento (tabla de archivos) ---------- */
body.modo-cliente .chip-factura     { background: var(--pc-orange-tint); color: var(--pc-orange-ink); }
body.modo-cliente .chip-receta      { background: var(--pc-lime-tint); color: var(--pc-lime-ink); }
body.modo-cliente .chip-reporte     { background: var(--pc-primary-tint); color: var(--pc-primary); }
body.modo-cliente .chip-solicitud   { background: var(--pc-teal-tint); color: var(--pc-teal-ink); }
body.modo-cliente .chip-laboratorio { background: var(--sdi-danger-bg); color: var(--sdi-danger); }
body.modo-cliente .chip-imagen      { background: var(--pc-teal-tint); color: var(--pc-teal-ink); }
body.modo-cliente .chip-otro        { background: var(--pc-border-soft); color: var(--pc-muted); }

/* ---------- Botón "Generar PDF" (CTA principal) ---------- */
body.modo-cliente .btn-primario,
body.modo-cliente #btnGenerar,
body.modo-cliente button.con-docs {
  background: var(--pc-primary) !important;
  border-color: var(--pc-primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 13px 26px !important;
  transition: all .2s cubic-bezier(.2,.8,.2,1) !important;
}
body.modo-cliente .btn-primario:hover,
body.modo-cliente #btnGenerar:hover,
body.modo-cliente button.con-docs:hover {
  background: var(--pc-primary-hover) !important;
  border-color: var(--pc-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,110,66,.18);
}

/* ---------- Tabla de docs en modo cliente (lighter) ---------- */
body.modo-cliente .lista-docs {
  background: transparent;
  padding: 0;
}
body.modo-cliente .tabla-docs th {
  background: transparent;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--pc-muted);
}
body.modo-cliente .tabla-docs td,
body.modo-cliente .tabla-docs th {
  border-bottom-color: var(--pc-border-soft);
}