/* ============================================================
   Certapp — Sistema de diseño base
   Mismo esquema de variables/sidebar que pfanilisis-app y
   ValidacionFiscalAPI (mini/abierta, acordeón de grupos), con
   paleta propia de Certapp.
   ============================================================ */

:root {
  --c-primario:   #1b3a34;   /* sidebar / marca (verde oscuro) */
  --c-acento:     #1f9d7c;   /* acciones principales */
  --c-acento-hover: #17805f;
  --c-fondo:      #f6f8f7;
  --c-superficie: #ffffff;
  --c-texto:      #1f2a27;
  --c-texto-suave:#5b6b66;
  --c-borde:      #e1e7e4;
  --c-error:      #d9534f;
  --c-exito:      #1f9d7c;
  --c-advertencia:#c98a2c;

  --sidebar-w:      248px;
  --sidebar-w-mini: 64px;
  --topbar-h:       60px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-8: 48px;

  --radio: 10px;
  --radio-sm: 6px;
  --t-rapido: 120ms ease;
  --t-medio: 200ms ease;
  --sombra: 0 1px 2px rgba(16, 24, 22, 0.06), 0 1px 8px rgba(16, 24, 22, 0.04);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-size: 14px;
  line-height: 1.45;
}
a { color: var(--c-acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 var(--sp-2); font-weight: 600; }
p { margin: 0 0 var(--sp-3); color: var(--c-texto-suave); }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 10px 18px; border-radius: var(--radio-sm); border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--t-rapido), opacity var(--t-rapido);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primario { background: var(--c-acento); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--c-acento-hover); }
.btn-secundario { background: var(--c-superficie); color: var(--c-texto); border-color: var(--c-borde); }
.btn-secundario:hover:not(:disabled) { background: var(--c-fondo); }
.btn-peligro { background: var(--c-error); color: #fff; }
.btn-texto { background: none; color: var(--c-acento); padding: 6px 8px; }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-icono { background: none; border: none; cursor: pointer; font-size: 15px; padding: 4px 6px; border-radius: 6px; }
.btn-icono:hover { background: var(--c-fondo); }

/* ── Inputs ── */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--sp-1); color: var(--c-texto); }
.campo { margin-bottom: var(--sp-4); }
.campo small.ayuda { display: block; color: var(--c-texto-suave); margin-top: 4px; font-size: 12px; }
.campo small.error { display: block; color: var(--c-error); margin-top: 4px; font-size: 12px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--c-borde); border-radius: var(--radio-sm);
  font-size: 14px; font-family: inherit; background: var(--c-superficie); color: var(--c-texto);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-acento); box-shadow: 0 0 0 3px rgba(31, 157, 124, 0.15);
}
/* Los checkboxes/radios NO deben heredar el estilo de input de texto --
   sin esto, cada casilla se veía como un bloque enorme con padding y
   borde (la "distorsión" que reportó Kevin en Estándares/Asignación/
   Verificación: cualquier <input type="checkbox"> suelto, fuera del
   patrón .switch de Roles, se ve afectado). */
input[type="checkbox"], input[type="radio"] {
  width: auto; height: auto; padding: 0; border: none; border-radius: 0; background: none; flex-shrink: 0;
  accent-color: var(--c-acento);
}
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* ── Cards ── */
.card {
  background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: var(--sp-5);
}

/* ── Badges / estados ── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-exito { background: rgba(31,157,124,0.12); color: var(--c-exito); }
.badge-advertencia { background: rgba(201,138,44,0.14); color: var(--c-advertencia); }
.badge-neutro { background: var(--c-fondo); color: var(--c-texto-suave); border: 1px solid var(--c-borde); }
.badge-error { background: rgba(217,83,79,0.12); color: var(--c-error); }

/* ── Estado de carga ── */
.spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: girar 0.7s linear infinite; display: inline-block;
}
.btn-secundario .spinner, .btn-texto .spinner { border-color: rgba(31,157,124,0.3); border-top-color: var(--c-acento); }
@keyframes girar { to { transform: rotate(360deg); } }

/* ============================================================
   PANTALLAS DE ACCESO (login / registro / onboarding)
   ============================================================ */
.pantalla-acceso {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5); background: linear-gradient(160deg, var(--c-primario) 0%, #0d211c 100%);
}
.caja-acceso {
  width: 100%; max-width: 440px; background: var(--c-superficie); border-radius: 16px;
  padding: var(--sp-6); box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.caja-acceso.ancha { max-width: 620px; }
.marca-acceso { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.marca-acceso .logo-mark {
  width: 36px; height: 36px; border-radius: 9px; background: var(--c-acento);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.marca-acceso span { font-weight: 700; font-size: 18px; }
.alerta { padding: var(--sp-3) var(--sp-4); border-radius: var(--radio-sm); font-size: 13px; margin-bottom: var(--sp-4); }
.alerta-error { background: rgba(217,83,79,0.1); color: var(--c-error); border: 1px solid rgba(217,83,79,0.25); }
.alerta-info { background: rgba(31,157,124,0.08); color: var(--c-exito); border: 1px solid rgba(31,157,124,0.2); }
.alerta-advertencia { background: rgba(240,173,78,0.12); color: #8a6100; border: 1px solid rgba(240,173,78,0.35); }

/* Selección de tarjetas (tipo de cuenta / tipo de organización) */
.opciones-tarjeta { display: grid; gap: var(--sp-3); }
.opcion-tarjeta {
  display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4);
  border: 1.5px solid var(--c-borde); border-radius: var(--radio); cursor: pointer; transition: border-color var(--t-rapido), background var(--t-rapido);
  background: var(--c-superficie);
}
.opcion-tarjeta:hover { border-color: var(--c-acento); }
.opcion-tarjeta.seleccionada { border-color: var(--c-acento); background: rgba(31,157,124,0.06); }
.opcion-tarjeta .icono { font-size: 22px; line-height: 1; }
.opcion-tarjeta .titulo { font-weight: 600; margin-bottom: 2px; }
.opcion-tarjeta .desc { font-size: 12.5px; color: var(--c-texto-suave); }
.opcion-tarjeta input[type="radio"] { width: auto; margin-top: 3px; }

/* Stepper de onboarding */
.stepper { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.stepper .paso {
  flex: 1; height: 4px; border-radius: 2px; background: var(--c-borde); position: relative;
}
.stepper .paso.activo, .stepper .paso.hecho { background: var(--c-acento); }
.stepper-etiquetas { display: flex; justify-content: space-between; font-size: 12px; color: var(--c-texto-suave); margin-bottom: var(--sp-4); }
.stepper-etiquetas span.activo { color: var(--c-acento); font-weight: 600; }

.zona-subida {
  border: 1.5px dashed var(--c-borde); border-radius: var(--radio); padding: var(--sp-6);
  text-align: center; cursor: pointer; transition: border-color var(--t-rapido), background var(--t-rapido);
}
.zona-subida:hover, .zona-subida.arrastrando { border-color: var(--c-acento); background: rgba(31,157,124,0.05); }
.zona-subida .icono { font-size: 28px; margin-bottom: var(--sp-2); }

/* ============================================================
   PANEL / APP SHELL (sidebar retráctil)
   ============================================================ */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w); background: var(--c-primario); color: #fff; display: flex;
  flex-direction: column; flex-shrink: 0; height: 100vh; transition: width var(--t-medio); z-index: 20;
}
.sidebar-top { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4); border-bottom: 1px solid rgba(255,255,255,0.08); min-height: var(--topbar-h); }
.sidebar-top .logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--c-acento); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.sidebar.mini .sidebar-top .logo-mark,
.sidebar.mini .sidebar-top .logo-img { display: none; }
.sidebar-top .nombre-app { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; }
.sidebar-top .btn-launchpad { margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 16px; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sidebar-top .btn-launchpad:hover { background: rgba(255,255,255,0.12); color: #fff; }
.sidebar-top .logo-img { height: 30px; width: auto; max-width: 140px; object-fit: contain; flex-shrink: 0; }

.btn-organizacion {
  margin: var(--sp-3) var(--sp-3) 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radio-sm);
  background: rgba(255,255,255,0.06); color: #fff; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px;
}
.btn-organizacion .tipo { color: rgba(255,255,255,0.55); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.sidebar.mini .btn-organizacion { display: none !important; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--sp-3) 0; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.nav-grupo-titulo {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  background: none; border: none; color: rgba(255,255,255,0.5); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: var(--sp-3) var(--sp-4) 6px; cursor: pointer;
}
.nav-grupo-titulo .flecha { transition: transform var(--t-rapido); font-size: 10px; }
.nav-grupo.cerrado .nav-grupo-titulo .flecha { transform: rotate(-90deg); }
.nav-grupo-items { overflow: hidden; max-height: 600px; transition: max-height var(--t-medio); }
.nav-grupo.cerrado .nav-grupo-items { max-height: 0; }

.nav-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-4); color: rgba(255,255,255,0.82);
  cursor: pointer; font-size: 13.5px; border-left: 3px solid transparent; white-space: nowrap;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.activo { background: rgba(255,255,255,0.1); border-left-color: var(--c-acento); color: #fff; font-weight: 600; }
.nav-item .icono { width: 18px; text-align: center; flex-shrink: 0; }
.nav-item .badge-proximamente { margin-left: auto; font-size: 10px; padding: 1px 6px; background: rgba(255,255,255,0.12); border-radius: 999px; }

.sidebar.mini { width: var(--sidebar-w-mini); }
.sidebar.mini .texto-nav,
.sidebar.mini .nav-grupo-titulo span:first-child,
.sidebar.mini .nav-grupo-titulo .flecha,
.sidebar.mini .nombre-app,
.sidebar.mini .nav-item .badge-proximamente { display: none; }
.sidebar.mini .sidebar-top { justify-content: center; padding: var(--sp-4) 0; }
.sidebar.mini .nav-grupo-titulo { padding: 10px 0 4px; justify-content: center; }
.sidebar.mini .nav-item { justify-content: center; padding: 10px 0; }
.sidebar.mini .nav-grupo.cerrado .nav-grupo-items { max-height: 600px; }

.contenido-app { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow: hidden; }
.topbar {
  height: var(--topbar-h); flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-5); background: var(--c-superficie); border-bottom: 1px solid var(--c-borde);
}
.topbar .btn-menu-movil { display: none; background: none; border: none; font-size: 18px; cursor: pointer; }
.topbar h1 { font-size: 16px; margin: 0; }
.topbar .usuario-actual { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; position: relative; }
.avatar-inicial, .btn-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--c-acento); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  border: none; cursor: pointer; padding: 0; flex-shrink: 0;
}
.btn-avatar:hover { background: var(--c-acento-hover); }

/* Menú flotante de cuenta (avatar) -- mismo patrón que pfanilisis-app */
.menu-flotante {
  position: fixed; display: none; flex-direction: column; min-width: 180px; background: var(--c-superficie);
  border: 1px solid var(--c-borde); border-radius: var(--radio-sm); box-shadow: var(--sombra); padding: var(--sp-2); z-index: 50;
}
.menu-flotante.activo { display: flex; }
.menu-flotante button {
  display: flex; align-items: center; gap: var(--sp-2); background: none; border: none; text-align: left;
  padding: 8px 10px; border-radius: 6px; font-size: 13.5px; color: var(--c-texto); cursor: pointer; width: 100%;
}
.menu-flotante button:hover { background: var(--c-fondo); }

.zona-contenido { flex: 1; overflow-y: auto; padding: var(--sp-6); }
.encabezado-seccion { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); gap: var(--sp-3); flex-wrap: wrap; }
.encabezado-seccion h2 { font-size: 20px; }

table.tabla { width: 100%; border-collapse: collapse; background: var(--c-superficie); }
table.tabla th, table.tabla td { text-align: left; padding: 10px var(--sp-4); border-bottom: 1px solid var(--c-borde); font-size: 13.5px; }
table.tabla th { color: var(--c-texto-suave); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
table.tabla tr:last-child td { border-bottom: none; }

.modal-fondo { position: fixed; inset: 0; background: rgba(16,24,22,0.45); display: none; align-items: center; justify-content: center; z-index: 40; padding: var(--sp-4); }
.modal-fondo.visible { display: flex; }
.modal { width: 100%; max-width: 480px; background: var(--c-superficie); border-radius: var(--radio); padding: var(--sp-5); max-height: 90vh; overflow-y: auto; }
.modal-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.modal-cabecera button { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--c-texto-suave); }

.lista-permisos { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 260px; overflow-y: auto; border: 1px solid var(--c-borde); border-radius: var(--radio-sm); padding: var(--sp-3); }
.fila-permiso { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 4px 0; }
.fila-permiso .switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.fila-permiso .switch input { opacity: 0; width: 0; height: 0; }
.fila-permiso .switch .rail { position: absolute; inset: 0; background: var(--c-borde); border-radius: 999px; transition: background var(--t-rapido); cursor: pointer; }
.fila-permiso .switch .rail::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--t-rapido); }
.fila-permiso .switch input:checked + .rail { background: var(--c-acento); }
.fila-permiso .switch input:checked + .rail::before { transform: translateX(16px); }

@media (max-width: 860px) {
  .sidebar { position: fixed; left: -260px; top: 0; transition: left var(--t-medio); }
  .sidebar.abierta { left: 0; }
  .topbar .btn-menu-movil { display: inline-flex; }
}


/* ── Subpestañas (Configuración) ── */
.sub-tabs {
  display: flex; align-items: center; gap: 4px; margin-bottom: var(--sp-5);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tab-item {
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3;
  color: var(--c-primario); opacity: .72; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, opacity .15s;
}
.sub-tab-item:hover { background: rgba(31, 157, 124, 0.08); opacity: 1; }
.sub-tab-item:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 1px; }
.sub-tab-item.activo {
  background: rgba(31, 157, 124, 0.13); color: var(--c-acento-hover); opacity: 1;
  border-color: rgba(31, 157, 124, 0.28);
}

/* Vistas sin encabezado propio (p.ej. Configuración): las sub-tabs quedan
   pegadas al topbar, sin el hueco que dejaría el <h2> ni el padding
   superior/lateral de .zona-contenido. */
.vista-sin-encabezado {
  margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) 0;
}
.vista-sin-encabezado .sub-tabs {
  margin-bottom: 0;
  padding: 10px var(--sp-6);
  background: var(--c-superficie);
  border-bottom: 1px solid var(--c-borde);
}
.vista-sin-encabezado #sub-tab-body-configuracion,
.vista-sin-encabezado #sub-tab-body-procesos-evaluacion {
  padding: var(--sp-6);
}
.zona-subida-logo { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }

/* ── Estándares acreditados (pestaña Estándares) ── */
.fila-estandar { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-borde); }
.fila-estandar:last-child { border-bottom: none; }
.panel-config-estandar {
  margin-top: var(--sp-3); padding: var(--sp-4); background: var(--c-fondo); border-radius: var(--radio-sm);
}
.panel-config-estandar .campo { margin-bottom: var(--sp-3); }
.panel-config-estandar .campo:last-child { margin-bottom: 0; }

/* ── Verificación de información: filas de datos/documentos a revisar ── */
.campo-verificable {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-borde); border-radius: var(--radio-sm);
  margin-bottom: var(--sp-2);
}
.campo-verificable .texto-campo { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.campo-verificable .texto-campo strong {
  font-size: 11px; color: var(--c-texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
label.marcar { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: normal; color: var(--c-error); white-space: nowrap; flex-shrink: 0; }

/* ── Cuestionario de diagnóstico (examen del candidato) ── */
.item-examen {
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-borde); border-radius: var(--radio-sm);
  margin-bottom: var(--sp-3);
}
.opcion-examen {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: normal;
  margin: 4px 0; padding: 4px 0;
}
.banco-conceptos {
  padding: var(--sp-3); border: 1px dashed var(--c-borde); border-radius: var(--radio-sm);
  margin-bottom: var(--sp-3); background: var(--c-fondo);
}
.opciones-examen-compactas { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.opciones-examen-compactas .opcion-examen { margin: 2px 0; }
.pastilla-bloque {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--c-borde);
  background: none; font-size: 12px; cursor: pointer; color: var(--c-texto-suave);
}
.pastilla-bloque.activa { background: var(--c-acento); border-color: var(--c-acento); color: #fff; font-weight: 600; }

.zona-subida-logo .preview-logo {
  width: 72px; height: 72px; border-radius: 10px; object-fit: contain; padding: 6px;
  border: 1px solid var(--c-borde);
  /* Fondo de cuadros (como Photoshop/Figma) para poder ver a simple vista
     si el logo subido tiene fondo transparente o no -- Kevin preguntó si
     el sistema le quita el fondo: no lo hace automáticamente, así que este
     patrón deja ver de inmediato si el PNG que subió ya viene transparente. */
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
  background-color: #fff;
}

/* ---- Evaluación: cajas Sí/No, favorable, chips y subsecciones del plan ---- */
.ev-caja { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--c-borde); border-radius: 6px; background: var(--c-superficie); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--c-texto); font-family: inherit; }
.ev-caja:hover { background: var(--c-fondo); }
.ev-caja.activa { border-color: var(--c-acento); background: rgba(31,157,124,0.12); color: var(--c-acento); }
.ev-caja.ev-si.activa, .ev-caja.ev-fav.activa { background: var(--c-exito); border-color: var(--c-exito); color: #fff; }
.ev-caja.ev-no.activa, .ev-caja.ev-nofav.activa { background: var(--c-error); border-color: var(--c-error); color: #fff; }
.ev-x { display: inline-block; min-width: 12px; text-align: center; font-weight: 700; }
.ev-chip { padding: 4px 10px; border: 1px dashed var(--c-borde); border-radius: 999px; background: var(--c-fondo); font-size: 12px; cursor: pointer; color: var(--c-texto); font-family: inherit; text-align: left; }
.ev-chip:hover { border-color: var(--c-acento); color: var(--c-acento); }
table.tabla tr.ev-seccion td { background: var(--c-fondo); font-size: 13px; }


/* ---- Impresión: hojas de captura, cédula y encuesta (modo papel) ---- */
#zona-impresion { display: none; }
@media print {
  body > *:not(#zona-impresion) { display: none !important; }
  #zona-impresion { display: block !important; color: #000; background: #fff; font-size: 11px; }
  #zona-impresion .salto { break-after: page; }
  @page { margin: 12mm; }
}
#zona-impresion .hoja-cab h1 { font-size: 16px; margin: 4px 0 8px; }
#zona-impresion .hoja-marca { font-size: 12px; font-weight: 700; }
#zona-impresion h2 { font-size: 13px; margin: 14px 0 6px; }
#zona-impresion h3 { font-size: 12px; margin: 0 0 4px; }
#zona-impresion .hoja-tabla { width: 100%; border-collapse: collapse; }
#zona-impresion .hoja-tabla th, #zona-impresion .hoja-tabla td { border: 1px solid #000; padding: 3px 5px; vertical-align: top; text-align: left; }
#zona-impresion .hoja-tabla th { background: #e8e8e8; }
#zona-impresion .hoja-tabla td.et { background: #f1f1f1; font-weight: 700; width: 18%; }
#zona-impresion .hoja-tabla td.c { text-align: center; }
#zona-impresion .hoja-tabla td.obs { height: 26px; }
#zona-impresion .hoja-tabla tr.sec td { background: #ddd; font-weight: 700; }
#zona-impresion .cuadro { display: inline-block; width: 13px; height: 13px; border: 1.5px solid #000; text-align: center; line-height: 12px; font-size: 11px; vertical-align: middle; }
#zona-impresion .lineas div { border-bottom: 1px solid #000; height: 20px; }
#zona-impresion .hoja-bloque { margin: 10px 0; }
#zona-impresion .opc { margin: 3px 0; }
#zona-impresion .opc-fila { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
#zona-impresion .nota { font-size: 10px; margin: 4px 0; }
#zona-impresion ul { margin: 2px 0 2px 18px; padding: 0; }
#zona-impresion .hoja-firmas { width: 100%; margin-top: 46px; border-collapse: collapse; }
#zona-impresion .hoja-firmas td { width: 50%; border-top: 1px solid #000; text-align: center; padding-top: 3px; }

/* ---------- Créditos ---------- */
.chip-creditos { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--c-borde); background: var(--c-superficie); color: var(--c-texto); font-size: 13px; cursor: pointer; font-family: inherit; }
.chip-creditos:hover { border-color: var(--c-acento); }
.chip-creditos .ico { color: var(--c-acento); }
.chip-creditos.bajo { border-color: var(--c-advertencia); background: rgba(201,138,44,0.1); }
.chip-creditos.bajo .ico { color: var(--c-advertencia); }
.cr-resumen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-4); margin-bottom: var(--sp-4); align-items: stretch; }
.cr-resumen .card { margin-bottom: 0; }
.cr-etq { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-texto-suave); font-weight: 600; }
.cr-cifra { font-size: 54px; font-weight: 700; line-height: 1.1; margin: 6px 0 4px; color: var(--c-primario); }
.cr-cifra.bajo { color: var(--c-advertencia); }
.cr-sub { font-size: 12.5px; color: var(--c-texto-suave); }
.cr-paquetes { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: 8px; }
.cr-total { border-top: 1px solid var(--c-borde); padding-top: 8px; margin-bottom: 12px; font-size: 13.5px; }
.cr-total > div { display: flex; justify-content: space-between; padding: 2px 0; }
.cr-total .gran { font-weight: 700; font-size: 15px; }
.cr-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.cr-kpis .card { margin-bottom: 0; }
.cr-kpi { font-size: 30px; font-weight: 700; color: var(--c-primario); }
.cr-form-fila { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end; }
.cr-form-fila .campo { margin-bottom: 0; min-width: 160px; }
table.tabla th.der, table.tabla td.der { text-align: right; }
.cr-monto { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-monto.mas { color: var(--c-exito); }
.cr-monto.menos { color: var(--c-error); }
.cr-fecha { white-space: nowrap; color: var(--c-texto-suave); font-size: 12.5px; }
@media (max-width: 760px) { .cr-resumen, .cr-kpis { grid-template-columns: 1fr; } }


/* ---- Sin zoom en teléfonos ----
   - touch-action: manipulation quita el zoom por doble toque.
   - Safari de iPhone amplía la página sola al enfocar un campo con letra menor a 16 px;
     en pantallas táctiles/chicas los campos usan 16 px para que eso no ocurra. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]), select, textarea { font-size: 16px !important; }
}