/* ==========================================================
   CRM Ventas — Estilos generales
   v18: paleta rediseñada (tonos navy + dorado + teal, más amigable),
   semáforo v5, barra de embudo de ventas, módulo Desarrollos.
   Se mantienen los MISMOS nombres de variable que ya usaba el
   proyecto (--primario, --gris-950, --dorado, etc.) — solo cambian
   los valores hexadecimales, así el nuevo estilo se aplica en
   cascada a todo lo que ya existía sin tocar cada selector.
   ========================================================== */
:root {
    --primario: #48607c;
    --primario-oscuro: #3a4f66;
    --acento: #3fa9b0;
    --gris-950: #22324a;
    --gris-800: #34455e;
    --gris-600: #5b6b83;
    --gris-500: #8590a3;
    --gris-400: #aab4c4;
    --gris-200: #e1e6ee;
    --gris-100: #eef1f6;
    --gris-50: #f5f7fa;
    --verde: #3fa76c;
    --rojo: #d9636f;
    --amarillo: #e3a23c;
    --morado: #8c6bc2;
    --gris-semaforo: #8a94a6;
    --dorado: #d9a544;
    --dorado-oscuro: #b8862c;
    --teal: #2f6b76;
    --teal-claro: #3fa9b0;
    --teal-palido: #e4eef0;
    --radio: 12px;
    --sombra: 0 1px 3px rgba(34, 50, 74, 0.08), 0 1px 2px rgba(34, 50, 74, 0.06);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--gris-100);
    color: var(--gris-950);
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .sidebar-logo { font-family: 'Poppins', 'Inter', sans-serif; }

a { color: var(--primario); text-decoration: none; }

/* ---------- Login ---------- */
:root {
    --azul-marino: #34455e;
    --azul-marino-oscuro: #283549;
}
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #eef1f6;
    padding: 20px;
}
.login-wrap { width: 100%; max-width: 460px; }
.login-marca { text-align: center; margin-bottom: 32px; }
.login-marca-nombre { font-family: 'Poppins', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: 0.02em; color: var(--gris-950); }
.login-marca-sub { font-size: 13px; letter-spacing: 0.08em; color: var(--azul-marino); text-transform: uppercase; font-weight: 700; margin-top: 8px; }
.login-box {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    width: 100%;
    box-shadow: 0 12px 30px rgba(34,50,74,0.10);
}
.login-label { font-size: 11px !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul-marino); font-weight: 700 !important; }
.login-box input { padding: 13px 14px !important; }
.btn-login {
    display: block;
    width: 100%;
    margin-top: 26px;
    padding: 14px 16px;
    border: none;
    border-radius: 8px;
    background: var(--azul-marino);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.btn-login:hover { background: var(--azul-marino-oscuro); }
.login-pie { text-align: center; color: var(--gris-400); font-size: 12px; margin-top: 22px; }
.login-title { margin: 0 0 4px; font-size: 24px; font-weight: 700; }
.login-subtitle { margin: 0 0 24px; color: var(--gris-600); font-size: 14px; }

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

.sidebar {
    width: 250px;
    background: #fff;
    color: var(--gris-800);
    border-right: 1px solid var(--gris-200);
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    flex-shrink: 0;
    overflow-y: auto;
}
.sidebar-logo { margin-bottom: 20px; padding: 0 8px; border-bottom: 1px solid var(--gris-200); padding-bottom: 18px; }
.sidebar-logo-marca { font-size: 14.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--gris-950); line-height: 1.3; }
.sidebar-logo-sub { font-size: 10.5px; color: var(--gris-500); margin-top: 3px; line-height: 1.4; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-seccion {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gris-400);
    margin: 16px 12px 4px;
}
/* v50: las secciones con submenú (Casas, Living Maderas, Dashboards, Equipo,
   Leads) se veían igual que un simple separador de texto — nada indicaba que
   eran clickeables ni que escondían más opciones adentro (pedido explícito de
   Juan: "resalta en el menu las secciones con un sub menu"). Ahora se ven y
   se comportan como los demás botones del menú (fondo, borde, hover), con un
   ícono de "carpeta" fijo (▤) que siempre identifica a un grupo desplegable
   — nunca se usa ese ícono en un link normal — y una guía vertical a la
   izquierda de sus hijos para que se lean como "adentro de" ese grupo. */
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gris-800);
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
}
.sidebar-nav a:hover { background: var(--gris-100); color: var(--gris-950); }
.sidebar-nav a.activo { background: var(--teal); color: #fff; font-weight: 700; }
.sidebar-nav a.activo .nav-icono { color: #fff; }
.sidebar-nav a.nav-secundario { color: var(--gris-500); font-size: 12.5px; font-weight: 600; }
.nav-icono { font-size: 15px; line-height: 1; width: 18px; text-align: center; opacity:.8; }
.sidebar-footer { border-top: 1px solid var(--gris-200); padding-top: 14px; margin-top: 14px; }
.sidebar-user { padding: 0 8px; }
.sidebar-user-nombre { font-weight: 700; font-size: 13.5px; color: var(--gris-950); }
.sidebar-user-rol { font-size: 11.5px; color: var(--gris-500); }

.contenido { flex: 1; padding: 32px 40px; max-width: 1300px; width: 100%; }
/* Solo "Metas mensuales" (metas.php, desde v43) y, desde esta entrega, "Inicio"
   (home.php) usan este ancho más amplio — metas.php para que su tabla de 10 columnas
   quepa sin scroll horizontal, home.php para que las tarjetas de Metas del mes y los
   9 recuadros de Rankings aprovechen el espacio libre en pantallas grandes. El resto
   de las páginas del CRM se queda con el max-width:1300px de siempre. Sin efecto en
   celular: en pantallas angostas .contenido ya usa el 100% disponible sin llegar ni de
   cerca a 1300px, con o sin este límite más amplio. */
.contenido-ancha { max-width: 1700px; }

/* ---------- Encabezados de pagina ---------- */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.page-header h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.page-header p { margin: 0; color: var(--gris-600); font-size: 14px; }

/* Grupo de botones de un page-header (ej. Descargar/Importar CSV + Nuevo
   cliente en clientes.php). En pantallas angostas pasa de una fila que
   se desborda a una cuadrícula compacta de 2 columnas. */
.acciones-header { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}
.btn-primary { background: var(--primario); color: #fff; }
.btn-primary:hover { background: var(--primario-oscuro); }
.btn-secondary { background: var(--gris-800); color: #fff; }
.btn-secondary:hover { background: #1c1d21; }
.btn-outline { background: #fff; color: var(--gris-800); border: 1px solid var(--gris-200); }
.btn-outline:hover { background: var(--gris-100); }
.btn-danger { background: #fff; color: var(--rojo); border: 1px solid #f4c6cc; }
.btn-danger:hover { background: #fdf1f3; }
.btn-success { background: #fff; color: var(--verde); border: 1px solid #bfe6d1; }
.btn-success:hover { background: #eefdf6; }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-block { width: 100%; margin-top: 8px; }

/* ---------- Formularios ---------- */
form label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--gris-800); }
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form select,
form textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--gris-200);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    color: var(--gris-950);
}
form input:focus, form select:focus, form textarea:focus {
    outline: none;
    border-color: var(--primario);
    box-shadow: 0 0 0 3px rgba(72,96,124,0.16);
}
form textarea { resize: vertical; min-height: 90px; }
.form-card { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); padding: 24px; max-width: 520px; box-shadow: var(--sombra); }
.form-fila { display: flex; gap: 16px; }
.form-fila > div { flex: 1; }
.form-acciones { display: flex; gap: 10px; margin-top: 22px; }
/* .form-fila-2col es un modificador opcional (se agrega junto a .form-fila, nunca la
   reemplaza) para las parejas de campos de "Nuevo cliente"/"Editar cliente"
   (cliente_form.php) — pedido explícito de Juan: que Teléfono/Correo, Canal/Sub Canal y
   Desarrollo de interés/Procedencia se vean lado a lado también en celular, en vez de
   apilarse uno debajo del otro como ya hacía (y sigue haciendo) el resto de los usos de
   .form-fila (el layout de dos paneles de "Detalle de cliente" y el selector de
   destinatario de "Mensajes"), que NO llevan esta clase nueva y por lo tanto no cambian
   en absoluto — ver el ajuste de abajo, dentro de los mismos breakpoints que ya existían. */

/* ---------- Alertas ---------- */
.alerta { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 20px; line-height: 1.5; }
.alerta-exito { background: #e7f7ef; color: #1d6b3f; border: 1px solid #bfe6d1; }
.alerta-error { background: #fdf1f3; color: #a3283f; border: 1px solid #f4c6cc; }
.alerta-info { background: #eef6fd; color: #1c5c8c; border: 1px solid #bfe0f7; }

/* ---------- Tarjetas / KPIs ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi-card { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra); }
.kpi-card .kpi-label { font-size: 13px; color: var(--gris-600); margin-bottom: 6px; }
.kpi-card .kpi-valor { font-size: 26px; font-weight: 700; }

.panel { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); padding: 20px 24px; box-shadow: var(--sombra); margin-bottom: 24px; }
.panel h2 { margin: 0 0 16px; font-size: 16px; font-weight: 700; }
.panel-gris { background: var(--gris-100); border-color: var(--gris-200); box-shadow: none; }

/* ---------- Barras ---------- */
.barra-fila { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; }
.barra-fila .barra-nombre { width: 120px; color: var(--gris-800); font-weight: 600; flex-shrink: 0; }
.barra-track { flex: 1; background: var(--gris-100); border-radius: 6px; height: 12px; overflow: hidden; }
.barra-fill { height: 100%; border-radius: 6px; background: var(--primario); }
.barra-cantidad { width: 40px; text-align: right; color: var(--gris-600); flex-shrink: 0; }

/* ---------- Filtros ---------- */
.filtros { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.filtros select, .filtros input { padding: 9px 12px; border: 1px solid var(--gris-200); border-radius: 8px; font-size: 13px; background: #fff; }

/* ---------- Pestañas de grupo (Ventas / Seguimiento / Junk) ---------- */
.grupo-tabs { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.grupo-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 999px;
    font-family: 'Poppins', 'Inter', sans-serif; font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.04em;
    background: #fff; border: 2px solid var(--gris-200); color: var(--gris-600);
    box-shadow: var(--sombra);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.grupo-tab:hover { transform: translateY(-1px); }
/* .grupo-tab-nuevos (Corrección v71, pedido explícito de Juan): pestaña nueva
   "Nuevos" en Clientes, para los leads recién creados que todavía no ha
   trabajado el asesor — ver includes/functions.php::semaforoDisponibles(). */
.grupo-tab-nuevos { color: var(--morado); border-color: #e6ddf5; }
.grupo-tab-seguimiento { color: var(--verde); border-color: #cdecdc; }
.grupo-tab-ventas { color: var(--primario); border-color: #cbd7e2; }
.grupo-tab-junk { color: var(--rojo); border-color: #f4d3d8; }
.grupo-tab.activo.grupo-tab-nuevos { background: var(--morado); border-color: var(--morado); color: #fff; }
.grupo-tab.activo.grupo-tab-seguimiento { background: var(--verde); border-color: var(--verde); color: #fff; }
.grupo-tab.activo.grupo-tab-ventas { background: var(--primario); border-color: var(--primario); color: #fff; }
.grupo-tab.activo.grupo-tab-junk { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.grupo-tab-contador { background: rgba(0,0,0,0.06); border-radius: 20px; padding: 2px 9px; font-size: 11px; }
.grupo-tab.activo .grupo-tab-contador { background: rgba(255,255,255,0.3); }
.grupo-tab-todos { font-size: 12px; color: var(--gris-600); text-decoration: underline; padding: 10px 6px; margin-left: 2px; }
.grupo-tab-todos.activo { color: var(--gris-950); font-weight: 700; text-decoration: none; }

/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: collapse; background: #fff; }
.tabla-wrap { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); overflow-x: auto; box-shadow: var(--sombra); }
th, td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--gris-100); white-space: nowrap; }
th { background: var(--gris-50); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris-600); }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--gris-50); }
td.acciones { display: flex; gap: 8px; }

.vacio { text-align: center; padding: 40px 20px; color: var(--gris-600); font-size: 14px; white-space: normal; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }

.badge-llamada { background: #dbeafe; color: #1d4ed8; }
.badge-whatsapp { background: #dcfce7; color: #15803d; }
.badge-correo { background: #fef3c7; color: #92400e; }
.badge-presentacion { background: #ede9fe; color: #5b21b6; }
.badge-nota { background: #eef0f4; color: #676879; }

.badge-activo { background: #e6fbf1; color: #0d7a4c; }
.badge-inactivo { background: #eef0f4; color: #676879; }
.badge-gerente { background: #f1e8fb; color: #7a2ec9; }
.badge-asesor { background: #e3f0fe; color: #0060c2; }

/* Semaforo — pastillas solidas de color, texto blanco.
   Corrección v71 (pedido explícito de Juan): se reintegra 'no_calificado'
   (usa la misma clase que ya existía sin usarse desde v68) y se agrega
   'nuevo' (clave nueva, ver includes/functions.php::semaforoClase()).
   'sin_respuesta' sigue sin existir en el catálogo — esa clase se deja
   aquí sin usar por si quedara algún dato o caché viejo con ella. */
.badge-semaforo-nuevo         { background: var(--acento); color: #fff; }
.badge-semaforo-seguimiento   { background: var(--amarillo); color: #fff; }
.badge-semaforo-sin-respuesta { background: var(--rojo); color: #fff; }
.badge-semaforo-no-calificado { background: var(--gris-semaforo); color: #fff; }
.badge-semaforo-no-interesa   { background: var(--morado); color: #fff; }
.badge-semaforo-junk          { background: #4a5568; color: #fff; }

/* Resultado del embudo (independiente de la etapa) */
.badge-resultado-proceso { background: var(--gris-100); color: var(--gris-600); }
.badge-resultado-ganado  { background: var(--verde); color: #fff; }
.badge-resultado-perdido { background: var(--rojo); color: #fff; }

/* Etapa del embudo de ventas (listado de clientes.php) — progresión clara de
   "recién llegado" a "cerrado", usada para que el asesor filtre por interés.
   Ver includes/functions.php::etapaEmbudoClase() y etapaEmbudoDisponibles(). */
.badge-etapa-nuevo                    { background: var(--gris-100); color: var(--gris-600); }
.badge-etapa-lead-calificado          { background: var(--teal-palido); color: var(--teal); }
.badge-etapa-presentacion-agendada    { background: #e3f0fe; color: #0060c2; }
.badge-etapa-presentacion-realizada   { background: #ede9fe; color: #5b21b6; }
.badge-etapa-negociacion              { background: var(--dorado); color: #fff; }
.badge-etapa-cierre                   { background: var(--verde); color: #fff; }

/* Próximo contacto agendado (ficha de cliente) — teal normal, rojo si ya se pasó la fecha */
.badge-proximo-contacto          { background: var(--teal-palido); color: var(--teal); }
.badge-proximo-contacto-atrasado { background: #f4c6cc; color: var(--rojo); }

/* Temperatura de seguimiento (Frío/Tibio/Caliente) — sub-opción visual DENTRO del
   semáforo "Seguimiento", solo para identificación del asesor en la lista de Clientes
   y en la ficha (nunca aparece en ningún Dashboard). Ver includes/functions.php::
   temperaturaClase() y temperaturaDisponibles(). */
.badge-temp-frio     { background: #e0f2fe; color: #0369a1; }
.badge-temp-tibio    { background: #ffedd5; color: #c2410c; }
.badge-temp-caliente { background: #fee2e2; color: #b91c1c; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 12px 0; border-bottom: 1px solid var(--gris-100); font-size: 14px; }
.timeline li:last-child { border-bottom: none; }
.timeline .timeline-fecha { color: var(--gris-400); font-size: 12px; margin-top: 4px; }

/* ==========================================================
   Embudo de ventas — barra superior en la ficha de cada cliente
   Etapas fijas: Nuevo / Lead Calificado / Presentación Agendada /
   Presentación Realizada / Negociación / Cierre.
   El resultado (Ganado/Perdido) es independiente de la etapa.
   ========================================================== */
.gi-funnel-card { background:#fff; border:1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px 22px 22px; margin-bottom: 24px; }
.gi-funnel-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.gi-funnel-top h2 { margin:0; font-size:15px; font-weight:700; color:var(--gris-950); }
.gi-funnel-resultado { display:flex; gap:8px; align-items:center; }
.gi-funnel-btn { border:1.5px solid var(--gris-200); background:#fff; color:var(--gris-600); font-family:inherit; font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:99px; cursor:pointer; transition:.12s; }
.gi-funnel-btn:hover { transform:translateY(-1px); }
.gi-funnel-btn.ganado { color:var(--verde); border-color:#bfe6d1; }
.gi-funnel-btn.ganado.activo { background:var(--verde); border-color:var(--verde); color:#fff; }
.gi-funnel-btn.perdido { color:var(--rojo); border-color:#f4d3d8; }
.gi-funnel-btn.perdido.activo { background:var(--rojo); border-color:var(--rojo); color:#fff; }

.gi-funnel { display:flex; width:100%; }
.gi-stage {
    flex:1; position:relative; text-align:center; padding:10px 6px 10px 22px;
    background: var(--gris-100); color: var(--gris-500); font-size:11.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
    margin-left:-14px; transition: background .15s, color .15s;
}
.gi-stage:first-child { margin-left:0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.gi-stage.done { background: var(--teal-claro); color:#fff; }
.gi-stage.current { background: var(--teal); color:#fff; font-weight:800; }
.gi-stage button { all:unset; display:block; width:100%; height:100%; cursor:pointer; }
@media(max-width:820px){ .gi-funnel{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .gi-stage{ clip-path:none !important; margin-left:0 !important; border-radius:8px; padding:10px 6px; } }

/* ==========================================================
   Módulo Desarrollos — catálogo por desarrollo (Drive/Canva)
   ========================================================== */
.status-pill{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:4px 10px;border-radius:20px;}
.status-preventa{background:var(--teal-palido);color:var(--teal);}
.status-entrega{background:#dcf3e5;color:#1d6b3f;}

.dev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.dev-btn{background:#fff;border:1px solid var(--gris-200);border-radius:12px;padding:16px;box-shadow:var(--sombra);transition:.12s;position:relative;text-decoration:none;display:block;color:inherit;}
.dev-btn:hover{border-color:var(--teal);transform:translateY(-2px);}
.dev-btn .dev-name{font-weight:700;font-size:13.5px;color:var(--gris-950);margin-bottom:8px;line-height:1.3;}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.cat-card{border:1px solid var(--gris-200);border-radius:12px;padding:16px;text-align:center;transition:.12s;text-decoration:none;color:var(--gris-950);display:block;}
.cat-card .icon{font-size:22px;margin-bottom:8px;}
.cat-card .label{font-size:12.5px;font-weight:700;}
.cat-card .sub{font-size:10px;color:var(--gris-600);margin-top:4px;}
.cat-card.ready{background:var(--teal-palido);border-color:var(--teal);}
.cat-card.ready:hover{background:#d6e6e9;}
.cat-card.pending{background:var(--gris-50);color:var(--gris-600);cursor:default;}
.cat-card.pending .sub{color:var(--gris-400);}
.dev-embed{position:relative;width:100%;padding-top:56.25%;border-radius:10px;overflow:hidden;box-shadow:var(--sombra);margin-top:16px;}
.dev-embed iframe{position:absolute;width:100%;height:100%;top:0;left:0;border:none;}

/* ==========================================================
   Responsive: tablet y celular — menú lateral en "cajón" (off-canvas)
   con topbar fija + overlay, en vez de la barra inferior anterior.
   Rompe en 1100px (no 900px) para cubrir también celulares en
   horizontal, que es donde el sidebar fijo ocupaba demasiado espacio.
   ========================================================== */

/* Espaciado dentro de cada grupo de sección, en escritorio y en móvil */
.sidebar-seccion-links { display: flex; flex-direction: column; gap: 2px; }

/* Botones de clientes.php (Descargar/Importar CSV + Nuevo cliente):
   en celular pasan a una cuadrícula de 2 columnas, con "+ Nuevo
   cliente" ocupando el ancho completo debajo — antes se desbordaban
   en una sola fila apretada. */
@media (max-width: 640px) {
    .acciones-header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    .acciones-header .btn-primary { grid-column: 1 / -1; }
}

/* Formularios (ej. cliente_form.php) en celular: la tarjeta va de
   borde a borde en vez de quedar flotando con sombra/padding grande,
   y los botones de acción se apilan en vez de quedar muy juntos. */
@media (max-width: 640px) {
    .form-card { max-width: 100%; padding: 18px 16px; box-shadow: none; border: 1px solid var(--gris-200); }
    .form-acciones { flex-direction: column; }
    .form-acciones .btn { width: 100%; }
}

/* Quita el triángulo nativo de <summary> en todos los anchos; el
   chevron propio (::after) solo se activa dentro del breakpoint móvil. */
.sidebar-seccion-grupo summary.sidebar-seccion { list-style: none; }
.sidebar-seccion-grupo summary.sidebar-seccion::-webkit-details-marker { display: none; }
.sidebar-seccion-grupo summary.sidebar-seccion::marker { content: ''; }

/* Secciones plegables (Dashboards/Equipo/Leads) en cualquier ancho: tocar
   el título las contrae/expande. Empiezan cerradas salvo que la página
   activa esté dentro de ese grupo (ver header.php) — así el menú se
   siente compacto sin esconder dónde estás parado. */
.sidebar-seccion-grupo summary.sidebar-seccion {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 10px 0 2px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--gris-50);
    border: 1px solid var(--gris-100);
    color: var(--gris-600);
    transition: background .15s, border-color .15s, color .15s;
}
.sidebar-seccion-grupo summary.sidebar-seccion:hover {
    background: var(--gris-100);
    border-color: var(--gris-200);
    color: var(--gris-950);
}
.sidebar-seccion-grupo[open] > summary.sidebar-seccion {
    background: var(--gris-100);
    border-color: var(--gris-200);
    color: var(--gris-950);
}
.sidebar-seccion-etiqueta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.sidebar-seccion-grupo summary.sidebar-seccion::after {
    content: '▾';
    font-size: 10px;
    color: var(--gris-400);
    transition: transform .15s;
    flex-shrink: 0;
}
.sidebar-seccion-grupo:not([open]) summary.sidebar-seccion::after { transform: rotate(-90deg); }

/* Guía vertical: los links dentro de un grupo se ven "adentro" de su
   sección, no sueltos al mismo nivel que Inicio/Cotizador/Calendario. */
.sidebar-seccion-grupo .sidebar-seccion-links {
    margin: 2px 0 6px 18px;
    padding-left: 10px;
    border-left: 2px solid var(--gris-100);
}

.mobile-topbar { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 1100px) {
    .contenido { padding: 20px 16px 32px; }
    .form-fila { flex-direction: column; gap: 0; }

    .app { flex-direction: column; padding-top: 56px; }

    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 56px;
        padding: 0 14px;
        background: #fff;
        border-bottom: 1px solid var(--gris-200);
        z-index: 60;
    }
    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        border: none;
        background: transparent;
        border-radius: 8px;
        padding: 0;
        cursor: pointer;
    }
    .menu-toggle:hover { background: var(--gris-100); }
    .menu-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--gris-800);
        transition: transform .18s, opacity .18s;
    }
    body.sidebar-abierta .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    body.sidebar-abierta .menu-toggle span:nth-child(2) { opacity: 0; }
    body.sidebar-abierta .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .mobile-topbar-brand { display: flex; align-items: center; gap: 8px; color: var(--gris-950); text-decoration: none; min-width: 0; }
    .mobile-topbar-brand img { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; }
    .mobile-topbar-brand span {
        font-family: 'Poppins', sans-serif;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(34,50,74,0.45);
        z-index: 70;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
    }
    body.sidebar-abierta .sidebar-overlay { opacity: 1; pointer-events: auto; }
    body.sidebar-abierta { overflow: hidden; }

    .sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: 82%;
        max-width: 300px;
        transform: translateX(-100%);
        transition: transform .22s ease;
        z-index: 80;
        box-shadow: 2px 0 18px rgba(0,0,0,0.18);
    }
    body.sidebar-abierta .sidebar { transform: translateX(0); }

    .sidebar-logo, .sidebar-footer, .sidebar-seccion { display: block; }

    .sidebar-nav { flex-direction: column; overflow-x: visible; }
    .sidebar-nav a {
        flex-direction: row;
        gap: 10px;
        padding: 9px 12px;
        font-size: 13.5px;
        text-align: left;
        white-space: normal;
        border-radius: 8px;
    }
    .nav-icono { font-size: 15px; width: 18px; }
}

/* ==========================================================
   .form-fila-2col (cliente_form.php) — mantiene las parejas de campos lado a lado
   incluso en celular, a diferencia del resto de los usos de .form-fila (que sí se
   apilan arriba, en el bloque de max-width:1100px). Los tres pasos de abajo van
   siempre de más ancho a más angosto y en ese orden en el archivo a propósito:
   como los tres seleccionan con la misma especificidad (.form-fila.form-fila-2col),
   el que aparece más abajo en el archivo es el que gana dentro de cada rango que se
   traslapa — por eso el de 360px (el más angosto) va al final, no antes.
   ========================================================== */
@media (max-width: 1100px) {
    .form-fila.form-fila-2col { flex-direction: row; gap: 16px; }
}
@media (max-width: 640px) {
    .form-fila.form-fila-2col { gap: 10px; }
}
@media (max-width: 360px) {
    /* Celulares muy angostos (320-360px): dos campos lado a lado ya no caben con
       comodidad, así que aquí sí se apilan, igual que el resto de .form-fila. */
    .form-fila.form-fila-2col { flex-direction: column; gap: 0; }
}

/* ==========================================================
   Gerencia Imperium v4 — home, usuarios, avatares, equipo
   ========================================================== */
.sidebar-logo { display:block; text-decoration:none; }

.home-hero { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.home-saludo { font-family:'Poppins',sans-serif; font-size:26px; font-weight:800; margin:0; }
.home-rol { color:var(--azul-marino); font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; margin-top:4px; }
.home-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.home-btn { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--gris-200); border-radius:14px;
    padding:20px; box-shadow:0 1px 2px rgba(34,50,74,.06); text-decoration:none; color:var(--gris-950);
    transition:transform .12s,box-shadow .15s,border-color .15s; }
.home-btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(34,50,74,.10); border-color:#e3d5b8; }
.home-btn-ico { width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    background:#F7F5F0; color:var(--azul-marino); font-size:19px; flex-shrink:0; border:1px solid #EEE7D8; }
.home-btn-t { font-weight:700; font-size:14.5px; color:var(--gris-950); }
.home-btn-d { font-size:12px; color:var(--gris-600); margin-top:2px; line-height:1.4; }

.avatar { border-radius:50%; object-fit:cover; display:inline-block; vertical-align:middle; }
.avatar-ini { background:linear-gradient(135deg,var(--dorado),var(--azul-marino)); color:#fff; font-weight:800;
    display:inline-flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; }
.sidebar-user { display:flex; align-items:center; gap:10px; }

.page-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.page-sub { color:var(--gris-600); font-size:13px; margin:2px 0 0; }
.filtros-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; align-items:center; }
.filtros-bar input[type=text], .filtros-bar select { padding:9px 12px; border:1px solid var(--gris-200); border-radius:8px; font:inherit; }
.chip { padding:7px 14px; border-radius:99px; border:1px solid var(--gris-200); background:#fff; color:var(--gris-600); font-size:13px; font-weight:700; text-decoration:none; }
.chip-on { background:var(--azul-marino); color:#fff; border-color:var(--azul-marino); }
.chip-coord { display:inline-flex; align-items:center; gap:8px; background:var(--gris-100); border-radius:99px; padding:6px 6px 6px 14px; font-size:13px; font-weight:700; margin:0 8px 8px 0; }
.chip-coord-off { opacity:.5; }
.chip-x { border:none; background:#fff; border-radius:50%; width:22px; height:22px; cursor:pointer; font-weight:800; }
.chips-list { display:flex; flex-wrap:wrap; }

.badge-rol { background:#eef1f6; color:var(--azul-marino); }
.badge-etq-activo { background:#e3f9ee; color:#0a8a4c; }
.badge-etq-desactivo { background:#f1f2f5; color:var(--gris-600); }
.badge-etq-externo { background:#fdf0e3; color:#b8630f; }
.badge-etq-fuerzab { background:#fde3e9; color:#c22850; }
.fila-inactiva { opacity:.55; }
.acciones-cell { display:flex; gap:6px; flex-wrap:wrap; }
.btn-mini { font-size:12px; padding:6px 10px; border-radius:6px; border:1px solid var(--gris-200); background:#fff; cursor:pointer; font-weight:700; }
.btn-mini-peligro { color:var(--rojo); border-color:#f4c6cf; }
.switch { width:38px; height:22px; border-radius:99px; background:var(--gris-400); border:none; cursor:pointer; position:relative; }
.switch::after { content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:2px; left:2px; transition:.15s; }
.switch-on { background:var(--verde); }
.switch-on::after { left:18px; }

.modal { display:none; position:fixed; inset:0; background:rgba(34,50,74,.5); align-items:center; justify-content:center; z-index:50; padding:16px; }
.modal.abierto { display:flex; }
.modal-caja { background:#fff; border-radius:var(--radio); padding:26px; width:100%; max-width:440px; max-height:90vh; overflow-y:auto; }
.modal-caja label { display:block; font-size:12px; font-weight:700; color:var(--gris-600); margin:12px 0 4px; }
.modal-caja input, .modal-caja select { width:100%; padding:9px 12px; border:1px solid var(--gris-200); border-radius:8px; font:inherit; }
.modal-acciones { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* Mensaje de bienvenida al iniciar sesión -- ocupa ~45% del ancho de
   pantalla en escritorio, con la paleta navy/dorado/teal del proyecto. */
.modal-bienvenida-overlay { z-index:70; }
.modal-bienvenida {
    width:45vw; max-width:45vw; min-width:320px;
    background:linear-gradient(135deg, var(--gris-950) 0%, var(--teal) 100%);
    color:#fff; text-align:center; padding:40px 34px 34px; position:relative;
    box-shadow:0 24px 60px rgba(18,26,40,.4);
}
.modal-bienvenida-marca { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dorado); font-weight:700; margin-bottom:16px; }
.modal-bienvenida-texto { font-family:'Poppins', sans-serif; font-size:21px; font-weight:600; line-height:1.55; }
.modal-bienvenida-cerrar {
    position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,.14); border:none; color:#fff; font-size:16px; line-height:1;
    cursor:pointer; transition:background .15s;
}
.modal-bienvenida-cerrar:hover { background:rgba(255,255,255,.28); }
@media (max-width:900px) {
    .modal-bienvenida { width:90vw; max-width:90vw; padding:32px 22px 26px; }
    .modal-bienvenida-texto { font-size:17px; }
}

.check-linea { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; }
.check-linea input { width:auto; }

.asignar-barra { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--gris-200); border-radius:12px; padding:12px 16px; margin-bottom:14px; flex-wrap:wrap; }
.asignar-barra select { padding:8px 12px; border-radius:8px; border:1px solid var(--gris-200); font:inherit; }
.texto-tenue { color:var(--gris-600); }
.tabla-vacia { text-align:center; padding:30px; color:var(--gris-600); }

.card { background:#fff; border:1px solid var(--gris-200); border-radius:var(--radio); padding:20px; box-shadow:var(--sombra); }
.form-fila { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* Equipo — árbol y tarjetas */
.equipo-coord { margin-bottom:28px; }
.equipo-coord-h { font-family:'Poppins',sans-serif; font-weight:800; font-size:16px; color:var(--azul-marino); margin-bottom:10px;
    display:flex; align-items:center; gap:8px; }
.equipo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.asesor-card { background:#fff; border:1px solid var(--gris-200); border-radius:12px; padding:16px; text-align:center; text-decoration:none; color:inherit; box-shadow:var(--sombra); transition:transform .12s; }
.asesor-card:hover { transform:translateY(-2px); }
.asesor-card .avatar { width:56px; height:56px; margin:0 auto 10px; }
.asesor-card-n { font-weight:700; font-size:14px; }
.asesor-card-stats { display:flex; justify-content:center; gap:10px; margin-top:10px; font-size:11.5px; color:var(--gris-600); }
.asesor-card-stats b { display:block; color:var(--gris-950); font-size:15px; }

@media(max-width:600px){
    .home-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .home-btn { flex-direction:column; text-align:center; padding:16px 10px; }
    .home-btn-d { display:none; }
    .filtros-bar, .asignar-barra { flex-direction:column; align-items:stretch; }
    .tabla-wrap { overflow-x:auto; }
    .tabla { min-width:720px; }
}

/* ==========================================================
   Fase 2 — Metas y Uno a Uno
   ========================================================== */
.input-meta { width:70px; padding:6px 8px; border:1px solid var(--gris-200); border-radius:6px; font:inherit; text-align:center; }
.meta-avance { display:flex; align-items:center; gap:8px; }
.meta-avance b { min-width:20px; }
.meta-barra { flex:1; height:6px; background:var(--gris-200); border-radius:99px; overflow:hidden; min-width:50px; }
.meta-barra div { height:100%; border-radius:99px; }

.uau-layout { display:grid; grid-template-columns:240px 1fr; gap:20px; align-items:start; }
.uau-lista { background:#fff; border:1px solid var(--gris-200); border-radius:var(--radio); padding:10px; display:flex; flex-direction:column; gap:4px; box-shadow:var(--sombra); }
.uau-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; text-decoration:none; color:inherit; }
.uau-item:hover { background:var(--gris-100); }
.uau-item-on { background:#eef1f6; }
.uau-item-n { font-weight:700; font-size:13.5px; }
.uau-panel textarea, .uau-panel input[type=text], .uau-panel input[type=number], .uau-panel select {
    width:100%; padding:9px 12px; border:1px solid var(--gris-200); border-radius:8px; font:inherit; margin-bottom:2px; resize:vertical;
}
.uau-panel label { display:block; font-size:12px; font-weight:700; color:var(--gris-600); margin:12px 0 4px; }

.asesor-card-uau { display:block; margin-top:10px; padding-top:10px; border-top:1px solid var(--gris-200); font-size:12px; font-weight:700; color:var(--primario); text-decoration:none; }

@media(max-width:700px){
    .uau-layout { grid-template-columns:1fr; }
    .uau-lista { flex-direction:row; overflow-x:auto; }
    .uau-item { flex-shrink:0; }
}

/* ==========================================================
   Rankings de Inicio — podio a color, resto en blanco y negro
   ========================================================== */
.rank-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(max-width:800px){ .rank-grid{ grid-template-columns:1fr; } }
.rank-list { display:flex; flex-direction:column; gap:2px; max-height:420px; overflow-y:auto; }
.rank-item { display:flex; align-items:center; gap:10px; padding:7px 4px; border-radius:8px; transition:background .1s; }
.rank-item:hover { background:var(--gris-100); }
.rank-pos { width:22px; height:22px; border-radius:50%; background:var(--gris-200); color:var(--gris-600);
    font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rank-pos-top { background:linear-gradient(135deg,var(--dorado),var(--dorado-oscuro)); color:#fff; }
.rank-nombre { flex:1; font-size:13.5px; font-weight:700; color:var(--gris-950); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-valor { font-size:13px; font-weight:900; color:var(--azul-marino); flex-shrink:0; }

/* Blanco y negro para todo lo que no es podio */
.rank-gris .avatar { filter:grayscale(100%); opacity:.6; }
.rank-gris .avatar-ini { filter:grayscale(100%); opacity:.6; background:linear-gradient(135deg,#bbb,#888) !important; }
.rank-gris .rank-nombre { color:var(--gris-600); font-weight:600; }
.rank-gris .rank-valor { color:var(--gris-500); }

/* ==========================================================
   Metas del mes (Inicio) — tarjetas de meta $ / leads, arriba
   de Rankings.
   ========================================================== */
.home-metas-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.home-meta-card { background:#fff; border:1px solid var(--gris-200); border-radius:14px; padding:16px;
    box-shadow:0 1px 3px rgba(34,50,74,.05); }
.home-meta-card h4 { font-size:13px; font-weight:800; color:var(--gris-950); margin:0 0 10px; }
.home-meta-valor { font-size:26px; font-weight:900; color:var(--gris-950); }
/* .home-meta-de es el "de $X" que va pegado a .home-meta-valor (pedido de Juan: avance Y
   meta juntos, en letra grande y fácil de entender, en vez del avance solo arriba y la meta
   chiquita debajo) — más chico y en gris que el avance, para que el avance siga siendo lo
   primero que se lee, pero sin ser una nota al pie casi invisible como antes. */
.home-meta-de { font-size:16px; font-weight:700; color:var(--gris-500); }
.home-meta-sinmeta { font-size:12px; color:var(--gris-600); margin-top:4px; }
.home-meta-barra { height:8px; background:var(--gris-200); border-radius:99px; overflow:hidden; margin-top:8px; }
.home-meta-barra div { height:100%; border-radius:99px; }
.home-meta-pct { font-size:12px; font-weight:800; margin-top:6px; text-align:right; }

/* ==========================================================
   Rankings 3×3 — podio de fotos + barras por coordinación
   ========================================================== */
/* v43 (esta entrega): recuadros más amplios, con más padding y letra más delgada
   (pedido explícito de Juan — "más limpia visualmente... más amplia o una letra más
   delgada"), aprovechando el ancho extra que ahora tiene home.php (ver .contenido-ancha
   arriba). Gap 16px→20px, padding 16px→22px y radius 14px→16px solo se notan en
   pantallas anchas: en el breakpoint de abajo (max-width:1000px) las columnas ya
   colapsan a 1 y el celular no cambia. */
.rk9-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:1000px){ .rk9-grid{ grid-template-columns:1fr; } }
.rk9-card { background:#fff; border:1px solid var(--gris-200); border-radius:16px; padding:22px;
    box-shadow:0 1px 3px rgba(34,50,74,.05); display:flex; flex-direction:column; min-height:220px; }
.rk9-card h4 { font-size:15px; font-weight:700; letter-spacing:.1px; color:var(--gris-950); margin-bottom:16px; text-align:center; }
.rk9-vacio { text-align:center; padding:30px 0; font-size:12.5px; }

/* Podio: 2º-1º-3º con la foto a color y medalla */
.rk9-podio { display:flex; align-items:flex-end; justify-content:center; gap:14px; margin-bottom:12px; }
.rk9-podio-slot { display:flex; flex-direction:column; align-items:center; width:78px; }
.rk9-podio-vacio { visibility:hidden; }
.rk9-podio-medalla { font-size:16px; margin-bottom:2px; }
.rk9-podio-p1 { order:2; } .rk9-podio-p2 { order:1; } .rk9-podio-p3 { order:3; }
.rk9-podio-p1 .avatar, .rk9-podio-p1 .avatar-ini { width:56px!important; height:56px!important;
    box-shadow:0 0 0 3px var(--dorado); }
.rk9-podio-p2 .avatar, .rk9-podio-p2 .avatar-ini,
.rk9-podio-p3 .avatar, .rk9-podio-p3 .avatar-ini { width:46px!important; height:46px!important;
    box-shadow:0 0 0 2px var(--gris-300); }
.rk9-podio-nombre { font-size:12px; font-weight:600; margin-top:6px; text-align:center; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; max-width:78px; }
.rk9-podio-valor { font-size:13px; font-weight:700; color:var(--azul-marino); }

/* Lista compacta 4º en adelante, en blanco y negro */
.rk9-lista { display:flex; flex-direction:column; gap:3px; max-height:230px; overflow-y:auto;
    border-top:1px dashed var(--gris-200); padding-top:10px; margin-top:auto; }
.rk9-fila { display:flex; align-items:center; gap:8px; padding:4px 2px; }
.rk9-fila .avatar, .rk9-fila .avatar-ini { filter:grayscale(100%); opacity:.65; }
.rk9-num { width:18px; font-size:11px; color:var(--gris-500); font-weight:600; flex-shrink:0; }
.rk9-fila-nombre { flex:1; font-size:12.5px; font-weight:500; color:var(--gris-600); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
.rk9-fila-valor { font-size:12.5px; font-weight:700; color:var(--gris-500); flex-shrink:0; }

/* Tarjetas de coordinación: solo gráfica */
.rk9-canvas { max-height:200px; flex:1; }

@media(max-width:600px){
    .rk9-podio-slot { width:58px; }
    .rk9-podio-nombre { max-width:54px; }
}

/* ==========================================================
   Acción Mensual — landing, contratación, metas, equipo
   ========================================================== */
.am-nav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 8px}
@media(max-width:900px){.am-nav-grid{grid-template-columns:1fr}}
.am-nav-card{display:block;background:#fff;border:1px solid var(--gris-200);border-radius:16px;padding:20px;
    box-shadow:var(--sombra);text-decoration:none;color:inherit;border-top:4px solid var(--primario);transition:transform .15s}
.am-nav-card:hover{transform:translateY(-3px)}
.am-nav-card.am-activa{outline:2px solid var(--gris-950);outline-offset:2px}
.am-nav-titulo{font-size:15px;font-weight:900;color:var(--gris-950);margin-bottom:2px}
.am-nav-sub{font-size:11px;color:var(--gris-600);font-weight:700;margin-bottom:14px}
.am-nav-pct{font-size:28px;font-weight:900}
.am-nav-track{height:7px;background:var(--gris-100);border-radius:6px;overflow:hidden;margin-top:8px}
.am-nav-fill{height:100%;border-radius:6px}

.sec-title{font-size:19px;font-weight:900;margin:26px 0 4px}
.sec-sub{color:var(--gris-600);font-size:12.5px;margin-bottom:16px}

.lote-card{background:#fff;border:1px solid var(--gris-200);border-radius:14px;padding:18px 20px;margin-bottom:14px;box-shadow:var(--sombra)}
.lote-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.lote-lote{font-size:16px;font-weight:900}
.lote-asesor{font-size:12.5px;color:var(--gris-600);margin-top:2px;font-weight:700}
.sep{color:var(--gris-400)}
.lote-monto{font-size:18px;font-weight:900;color:var(--gris-950)}
.lote-estado-fila{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.btn-expandir{display:flex;align-items:center;gap:10px;background:var(--gris-100);border:1px solid var(--gris-200);
    border-radius:99px;padding:6px 14px;cursor:pointer;font-family:inherit;transition:background .15s}
.btn-expandir:hover{background:var(--gris-200)}
.flecha{font-size:11.5px;font-weight:800;color:var(--gris-950)}

.toques-wrap{display:flex;flex-direction:column;gap:10px;border-top:1px dashed var(--gris-200);padding-top:14px;margin-top:14px}
.toque{display:flex;gap:12px;padding:10px 12px;border-radius:10px}
.toque-hecho{background:#F3FBF5}
.toque-pendiente{background:var(--gris-100)}
.marca{width:10px;height:10px;border-radius:50%;border:2px solid var(--gris-400);flex-shrink:0;margin-top:4px}
.marca-hecha{background:#1C7A45;border-color:#1C7A45}
.toque-cuerpo{flex:1}
.toque-titulo{font-size:12.5px;font-weight:800}
.toque-hecho .toque-titulo{color:#1C7A45}
.toque-detalle{font-size:11.5px;color:var(--gris-600);margin-top:3px;line-height:1.55}
.comentario-lleno{margin-top:8px;background:#fff;border:1px solid #D3F1DF;border-radius:8px;padding:8px 10px}
.comentario-fecha{display:block;font-size:10.5px;font-weight:800;color:#1C7A45;margin-bottom:3px}
.comentario-texto{font-size:12px;color:var(--gris-600);font-style:italic}
.comentario-campo{margin-top:8px;display:flex;gap:8px;align-items:flex-start}
.comentario-input{font-family:inherit;font-size:12px;border:1px solid var(--gris-200);border-radius:6px;padding:7px 10px;background:#fff;flex:1;resize:vertical}
.btn-guardar-comentario{font-family:inherit;font-size:11.5px;font-weight:800;background:var(--gris-950);color:#fff;
    border:none;border-radius:6px;padding:7px 12px;cursor:pointer}
.comentario-nota{font-size:10.5px;color:var(--gris-400);margin-top:5px;font-style:italic}
.comentario-bloqueado{margin-top:8px;font-size:11px;color:var(--gris-400);font-style:italic}
.badge-ok{background:var(--gris-100);color:var(--gris-800);font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:99px}

.cal-banner{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--gris-200);
    border-radius:14px;padding:18px 22px;margin-bottom:20px;box-shadow:var(--sombra)}
.cal-banner-txt{font-size:13px;font-weight:800;color:var(--gris-600)}
.cal-banner-num{font-size:30px;font-weight:900}

.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
@media(max-width:900px){.kpi-grid{grid-template-columns:1fr 1fr}}
.kpi-card{background:#fff;border:1px solid var(--gris-200);border-radius:14px;padding:16px 18px;box-shadow:var(--sombra)}
.kpi-nombre{font-size:12px;font-weight:800;color:var(--gris-600);margin-bottom:10px;min-height:32px}
.kpi-fila{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px}
.kpi-real{font-size:24px;font-weight:900}
.kpi-meta-wrap{text-align:right}
.kpi-meta-lbl{display:block;font-size:9.5px;font-weight:800;color:var(--gris-400);text-transform:uppercase}
.kpi-meta-val{display:block;font-size:13px;font-weight:800;color:var(--gris-600)}
.kpi-editar{font-family:inherit;font-size:9.5px;font-weight:800;color:var(--primario);background:none;border:none;
    cursor:pointer;text-decoration:underline;padding:0;margin-top:2px}
.kpi-editar:disabled{cursor:not-allowed;text-decoration:none;opacity:.4}
.kpi-track{height:7px;background:var(--gris-100);border-radius:6px;overflow:hidden;margin-bottom:8px}
.kpi-fill{height:100%;border-radius:6px}
.kpi-pie{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.kpi-pct{font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px}
.kpi-fuente{font-size:9.5px;color:var(--gris-400);font-weight:700;text-transform:uppercase}
.kpi-permiso{display:block;font-size:10px;color:var(--gris-400);font-style:italic;margin-top:2px}
.kpi-permiso-coord{color:var(--primario);font-weight:700;font-style:normal}

.diario-card{background:#fff;border:1px solid var(--gris-200);border-radius:14px;padding:18px 20px;box-shadow:var(--sombra);margin-bottom:30px}
.diario-card h4{font-size:14px;font-weight:900;margin-bottom:8px}
.diario-nota{font-size:12.5px;color:var(--gris-600);line-height:1.7;margin-bottom:14px}
.diario-nuevo{display:flex;gap:8px;margin-bottom:16px}
.diario-input{flex:1;font-family:inherit;font-size:13px;border:1px solid var(--gris-200);border-radius:8px;padding:10px 12px;resize:vertical}
.diario-btn{font-family:inherit;font-weight:800;font-size:12.5px;background:var(--gris-950);color:#fff;border:none;
    border-radius:8px;padding:0 18px;cursor:pointer}
.diario-entry{border-left:3px solid var(--gris-200);padding:4px 0 4px 14px;margin-bottom:14px}
.diario-fecha{font-size:11px;font-weight:800;color:var(--gris-400);margin-bottom:3px}
.diario-texto{font-size:12.5px;color:var(--gris-600);line-height:1.6}

.asesores-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:750px){.asesores-grid{grid-template-columns:1fr}}
.asesor-card{background:#fff;border:1px solid var(--gris-200);border-radius:14px;box-shadow:var(--sombra);overflow:hidden}
.asesor-top{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer}
.asesor-avatar-wrap{position:relative;flex-shrink:0}
.asesor-cara{position:absolute;bottom:-4px;right:-4px;width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.asesor-info{flex:1;min-width:0}
.asesor-nombre{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.animo-track{height:6px;background:var(--gris-100);border-radius:6px;overflow:hidden;margin:8px 0 5px}
.animo-fill{height:100%;border-radius:6px}
.asesor-estado{font-size:11px;font-weight:800}
.asesor-flecha{font-size:11px;font-weight:800;color:var(--primario);flex-shrink:0}
.asesor-detalle{border-top:1px solid var(--gris-100);padding:16px 18px;background:var(--gris-50)}
.animo-selector-lbl{font-size:11.5px;font-weight:800;color:var(--gris-600);display:block;margin-bottom:8px}
.animo-escala{display:flex;gap:5px;margin-bottom:12px;flex-wrap:wrap}
.animo-punto{width:26px;height:26px;border-radius:6px;border:1.5px solid var(--c);color:var(--c);
    background:#fff;font-size:11px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center}
.animo-punto-on{background:var(--c);color:#fff}
.animo-comentario{width:100%;font-family:inherit;font-size:12.5px;border:1px solid var(--gris-200);
    border-radius:8px;padding:9px 11px;resize:vertical;margin-bottom:8px}
.animo-guardar{font-family:inherit;font-weight:800;font-size:12px;background:var(--gris-950);color:#fff;
    border:none;border-radius:8px;padding:8px 16px;cursor:pointer}
.animo-nota{font-size:10px;color:var(--gris-400);font-style:italic;margin-top:6px}
.animo-historial{margin-top:16px;border-top:1px dashed var(--gris-200);padding-top:12px}
.animo-entry{margin-bottom:12px}
.animo-entry-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;flex-wrap:wrap;gap:4px}
.animo-entry-fecha{font-size:10.5px;font-weight:800;color:var(--gris-400)}
.animo-entry-badge{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:99px}
.animo-entry-texto{font-size:12px;color:var(--gris-600);font-style:italic}
.animo-vacio{font-size:11.5px;color:var(--gris-400);font-style:italic}

/* Acción Mensual — barras de avance por lote */
.lote-barras{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.lote-barra-fila{display:flex;align-items:center;gap:10px}
.lote-barra-lbl{font-size:10.5px;font-weight:800;color:var(--gris-600);width:120px;flex-shrink:0}
.lote-barra-track{flex:1;height:7px;background:var(--gris-100);border-radius:6px;overflow:hidden}
.lote-barra-fill{height:100%;border-radius:6px}
.lote-barra-val{font-size:11px;font-weight:800;color:var(--gris-600);width:80px;text-align:right;flex-shrink:0}

/* ==========================================================
   1a1 Coordinador — formato gerencial
   ========================================================== */
.modal-ancho{max-width:640px}
.f-sec{font-size:14px;font-weight:900;color:var(--gris-950);margin:22px 0 6px;
    padding-bottom:6px;border-bottom:2px solid var(--gris-100)}
.f-sec-clave{color:var(--primario);border-bottom-color:var(--dorado)}
.f-nota{font-size:11.5px;color:var(--gris-600);margin-bottom:10px;font-style:italic}
.label-clave{font-weight:800!important;color:var(--gris-950)!important;font-size:13px!important;line-height:1.5}

.sem-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:8px 10px;border-radius:8px;background:var(--gris-50);margin-bottom:6px}
.sem-fila-lbl{font-size:12.5px;font-weight:700;color:var(--gris-800)}
.sem-opciones{display:flex;gap:6px;flex-shrink:0}
.sem-opt{width:26px;height:26px;border-radius:50%;border:2px solid var(--c);cursor:pointer;
    display:flex;align-items:center;justify-content:center;background:#fff}
.sem-opt span{width:12px;height:12px;border-radius:50%;background:transparent}
.sem-opt.opt-on{background:var(--c)}
.sem-opt.opt-on span{background:#fff}

.animo-opciones{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.animo-opt{font-size:11.5px;font-weight:700;padding:7px 12px;border-radius:99px;
    border:1.5px solid var(--c);color:var(--c);background:#fff;cursor:pointer}
.animo-opt.opt-on{background:var(--c);color:#fff}

.tabla-meta{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:8px}
.tabla-meta th{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--gris-600);
    font-weight:800;text-align:left;padding:6px 8px;border-bottom:2px solid var(--gris-100)}
.tabla-meta td{padding:6px 8px;border-bottom:1px solid var(--gris-100);font-weight:700;color:var(--gris-800)}
.tabla-meta input{width:80px;padding:6px 8px;border:1px solid var(--gris-200);border-radius:6px;
    font:inherit;text-align:center}

.sem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:700px){.sem-grid{grid-template-columns:1fr 1fr}}
.sem-item{padding:9px 11px;border-radius:8px}
.sem-lbl{display:block;font-size:10px;font-weight:800;color:var(--gris-600);text-transform:uppercase;letter-spacing:.3px}
.sem-val{display:block;font-size:12.5px;font-weight:800;margin-top:2px}
.sem-punto{width:11px;height:11px;border-radius:50%;display:inline-block}
.pill-animo{font-size:11px;font-weight:800;padding:3px 10px;border-radius:99px;margin-left:8px}

/* ==========================================================
   Reconocimiento semanal — 3 formatos
   ========================================================== */
.cartel-marco{display:flex;justify-content:center;padding:10px 0 40px;overflow:auto}
.cartel{
    background:#fff;position:relative;box-shadow:0 6px 30px rgba(34,50,74,.16);
    font-family:'Lato','Segoe UI',system-ui,sans-serif;color:#16202E;
    overflow:hidden;display:flex;flex-direction:column;
}
.cartel:before{content:'';position:absolute;top:0;left:0;right:0;height:9px;
    background:linear-gradient(90deg,#B8862C 0%,#D9A544 50%,#B8862C 100%);z-index:2}

/* Tamaños por formato */
.f-whatsapp{width:1080px;height:1920px;padding:0 0 46px}
.f-carta{width:816px;height:1056px;padding:0 0 28px}
.f-horizontal{width:1920px;height:1080px;padding:0 0 30px}

/* ── Encabezado ── */
.c-head{text-align:center;padding:24px 0 0;flex-shrink:0}
.c-logo{border-radius:50%;object-fit:cover;border:5px solid #D9A544;box-sizing:border-box}
.c-marca{font-weight:900;letter-spacing:4px;color:#16202E;margin-top:10px}
.c-sede{letter-spacing:2.5px;color:#98A2B3;text-transform:uppercase;margin-top:3px}

.c-titulo{text-align:center;padding:14px 60px 2px;flex-shrink:0}
.c-kicker{letter-spacing:6px;text-transform:uppercase;color:#B8862C;font-weight:800}
.c-titulo h2{line-height:1.1;font-weight:900;margin:8px 0 0;letter-spacing:-.5px}
.c-rango{display:inline-block;font-weight:700;color:#475467;background:#F2F4F7;border-radius:99px}

/* ── Secciones ── */
.c-cuerpo{flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
.c-sec-head{display:flex;align-items:baseline;gap:10px;border-bottom:2.5px solid #16202E;justify-content:flex-start}
.c-sec-t{font-weight:900;letter-spacing:.3px;color:#22324a}
.c-sec-s{color:#98A2B3;font-weight:600}
.c-sec-f{color:#98A2B3;font-weight:600}
.c-podio{display:flex;justify-content:center;align-items:flex-end}
.c-p{text-align:center}
.c-p1{order:2}.c-p2{order:1}.c-p3{order:3}
.c-avatar{position:relative;margin:0 auto;border-radius:50%;
    background:linear-gradient(135deg,#D9A544,#22324a);
    display:flex;align-items:center;justify-content:center}
.c-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.c-avatar .ini{color:#fff;font-weight:900}
.c-pos{position:absolute;border-radius:50%;background:#16202E;color:#D9A544;
    font-weight:900;display:flex;align-items:center;justify-content:center;border:3px solid #fff}
.c-p1 .c-pos{background:#D9A544;color:#16202E}
.c-nom{font-weight:800}
.c-val{font-weight:900;color:#B8862C}

/* ── Frase y pie ── */
.c-frase{background:#16202E;border-radius:16px;text-align:center;position:relative;flex-shrink:0}
.c-comilla{position:absolute;color:#D9A544;opacity:.35;line-height:1;font-family:Georgia,serif}
.c-frase p{color:#E7EAEF;margin:0;font-style:italic}
.c-frase p b{color:#D9A544;font-style:normal;font-weight:800}
.c-pie{text-align:center;letter-spacing:3px;text-transform:uppercase;color:#98A2B3;font-weight:700;flex-shrink:0}

/* ══════════ FORMATO WHATSAPP / HISTORIA (1080×1920) ══════════ */
.f-whatsapp .c-head{padding:40px 0 0}
.f-whatsapp .c-logo{width:180px;height:180px;border-width:6px}
.f-whatsapp .c-marca{font-size:39px;letter-spacing:6.5px;margin-top:16px}
.f-whatsapp .c-sede{font-size:19px;letter-spacing:3.5px;margin-top:5px}
.f-whatsapp .c-titulo{padding:26px 60px 2px}
.f-whatsapp .c-kicker{font-size:19px;letter-spacing:8px}
.f-whatsapp .c-titulo h2{font-size:57px;margin-top:12px}
.f-whatsapp .c-rango{margin-top:18px;font-size:20px;padding:10px 30px}
.f-whatsapp .c-sec{margin:0 76px}
.f-whatsapp .c-sec-head{padding-bottom:11px;margin-bottom:22px}
.f-whatsapp .c-sec-t{font-size:28px}
.f-whatsapp .c-sec-s,.f-whatsapp .c-sec-f{font-size:20px}
.f-whatsapp .c-podio{gap:34px}
.f-whatsapp .c-p{width:238px}
.f-whatsapp .c-avatar{width:122px;height:122px;margin-bottom:14px;box-shadow:0 0 0 5px #C7CDD6}
.f-whatsapp .c-p1 .c-avatar{width:154px;height:154px;box-shadow:0 0 0 6px #D9A544}
.f-whatsapp .c-avatar .ini{font-size:39px}
.f-whatsapp .c-p1 .c-avatar .ini{font-size:49px}
.f-whatsapp .c-pos{bottom:-6px;right:-6px;width:50px;height:50px;font-size:24px;border-width:4px}
.f-whatsapp .c-p1 .c-pos{width:58px;height:58px;font-size:28px}
.f-whatsapp .c-nom{font-size:24px;margin-bottom:4px}
.f-whatsapp .c-p1 .c-nom{font-size:27px}
.f-whatsapp .c-val{font-size:27px}
.f-whatsapp .c-p1 .c-val{font-size:33px}
.f-whatsapp .c-frase{margin:0 76px;padding:32px 52px;border-radius:22px}
.f-whatsapp .c-comilla{top:10px;left:32px;font-size:104px}
.f-whatsapp .c-frase p{font-size:27px;line-height:1.45}
.f-whatsapp .c-pie{margin-top:26px;font-size:18px;letter-spacing:4px}

/* ══════════ FORMATO CARTA (816×1056) ══════════ */
.f-carta .c-head{padding:22px 0 0}
.f-carta .c-logo{width:104px;height:104px}
.f-carta .c-marca{font-size:23px;letter-spacing:4.5px}
.f-carta .c-sede{font-size:12.5px}
.f-carta .c-titulo{padding:16px 60px 2px}
.f-carta .c-kicker{font-size:11px;letter-spacing:5px}
.f-carta .c-titulo h2{font-size:30px}
.f-carta .c-rango{margin-top:9px;font-size:12px;padding:6px 18px}
.f-carta .c-sec{margin:0 54px}
.f-carta .c-sec-head{padding-bottom:6px;margin-bottom:13px;margin-top:4px}
.f-carta .c-sec-t{font-size:14.5px}
.f-carta .c-sec-s,.f-carta .c-sec-f{font-size:11px}
.f-carta .c-podio{gap:22px}
.f-carta .c-p{width:158px}
.f-carta .c-avatar{width:66px;height:66px;margin-bottom:7px;box-shadow:0 0 0 3px #C7CDD6}
.f-carta .c-p1 .c-avatar{width:86px;height:86px;box-shadow:0 0 0 4px #D9A544}
.f-carta .c-avatar .ini{font-size:21px}
.f-carta .c-p1 .c-avatar .ini{font-size:26px}
.f-carta .c-pos{bottom:-3px;right:-3px;width:25px;height:25px;font-size:12px}
.f-carta .c-p1 .c-pos{width:29px;height:29px;font-size:14px}
.f-carta .c-nom{font-size:12.5px}
.f-carta .c-p1 .c-nom{font-size:14px}
.f-carta .c-val{font-size:13.5px}
.f-carta .c-p1 .c-val{font-size:17px}
.f-carta .c-frase{margin:0 54px;padding:19px 34px}
.f-carta .c-comilla{top:6px;left:22px;font-size:56px}
.f-carta .c-frase p{font-size:14.5px;line-height:1.55}
.f-carta .c-pie{margin-top:16px;font-size:11px}

/* ══════════ FORMATO HORIZONTAL (1920×1080) ══════════ */
.f-horizontal .c-head{padding:26px 0 0}
.f-horizontal .c-logo{width:124px;height:124px}
.f-horizontal .c-marca{font-size:30px;letter-spacing:5px}
.f-horizontal .c-sede{font-size:15px}
.f-horizontal .c-titulo{padding:14px 60px 2px}
.f-horizontal .c-kicker{font-size:13px}
.f-horizontal .c-titulo h2{font-size:44px}
.f-horizontal .c-rango{margin-top:12px;font-size:15px;padding:7px 22px}
/* Las tres secciones en columnas */
.f-horizontal .c-cuerpo{flex-direction:row;gap:40px;margin:26px 70px 0;align-items:stretch}
.f-horizontal .c-sec{flex:1;display:flex;flex-direction:column}
.f-horizontal .c-sec-head{padding-bottom:8px;margin-bottom:20px;flex-direction:column;align-items:center;gap:2px;text-align:center;justify-content:center}
.f-horizontal .c-sec-t{font-size:21px}
.f-horizontal .c-sec-s,.f-horizontal .c-sec-f{font-size:13px}
.f-horizontal .c-podio{gap:14px;flex:1;align-items:center}
.f-horizontal .c-cuerpo{align-items:stretch}
.f-horizontal .c-p{width:158px}
.f-horizontal .c-avatar{width:88px;height:88px;margin-bottom:10px;box-shadow:0 0 0 4px #C7CDD6}
.f-horizontal .c-p1 .c-avatar{width:112px;height:112px;box-shadow:0 0 0 5px #D9A544}
.f-horizontal .c-avatar .ini{font-size:29px}
.f-horizontal .c-p1 .c-avatar .ini{font-size:36px}
.f-horizontal .c-pos{bottom:-4px;right:-4px;width:33px;height:33px;font-size:16px}
.f-horizontal .c-p1 .c-pos{width:38px;height:38px;font-size:18px}
.f-horizontal .c-nom{font-size:16px;margin-bottom:2px}
.f-horizontal .c-p1 .c-nom{font-size:18px}
.f-horizontal .c-val{font-size:18px}
.f-horizontal .c-p1 .c-val{font-size:23px}
.f-horizontal .c-frase{margin:28px 70px 0;padding:24px 44px}
.f-horizontal .c-comilla{top:6px;left:26px;font-size:70px}
.f-horizontal .c-frase p{font-size:21px;line-height:1.45}
.f-horizontal .c-pie{margin-top:18px;font-size:13px}

/* Selector de formato (no sale en la imagen) */
.formato-bar{display:flex;gap:8px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
.formato-bar a{padding:8px 16px;border-radius:99px;border:1px solid var(--gris-200);
    background:#fff;text-decoration:none;color:var(--gris-600);font-size:12.5px;font-weight:700}
.formato-bar a.on{background:var(--gris-950);color:#fff;border-color:var(--gris-950)}
.formato-bar a small{display:block;font-size:10px;opacity:.7;font-weight:600}

/* Vista previa del cartel: se reduce para caber en pantalla, sin afectar la descarga */
.cartel-marco{overflow:hidden}
.cartel-zoom{transform-origin:top center;transition:transform .15s}
.cartel-nota{text-align:center;font-size:11.5px;color:var(--gris-600);margin:0 0 10px;font-style:italic}

/* ==========================================================
   Misiones — pendientes con conversación de seguimiento
   ========================================================== */
.mis-tabs{display:flex;gap:8px;margin:14px 0 18px;flex-wrap:wrap}
.mis-tab{display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:99px;
    border:1.5px solid var(--gris-200);background:#fff;text-decoration:none;
    color:var(--gris-600);font-size:12px;font-weight:800;letter-spacing:.5px}
.mis-tab:hover{border-color:var(--c);color:var(--c)}
.mis-tab-on{background:var(--c);border-color:var(--c);color:#fff}
.mis-tab-n{background:rgba(0,0,0,.12);border-radius:99px;padding:1px 8px;font-size:11px}
.mis-tab-on .mis-tab-n{background:rgba(255,255,255,.25)}

.mis-card{background:#fff;border:1px solid var(--gris-200);border-radius:14px;
    padding:16px 18px;margin-bottom:12px;box-shadow:var(--sombra);border-left:4px solid var(--gris-400)}
.mis-activa{border-left-color:#93500B}
.mis-realizada{border-left-color:#1C7A45;background:#FBFDFC}
.mis-perdida{border-left-color:#B42318;background:#FFFBFB}

.mis-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mis-info{flex:1;min-width:240px}
.mis-titulo{font-size:15px;font-weight:900;color:var(--gris-950);margin-bottom:3px}
.mis-realizada .mis-titulo{text-decoration:line-through;color:var(--gris-600)}
.mis-desc{font-size:12.5px;color:var(--gris-600);line-height:1.55;margin-bottom:6px}
.mis-meta{font-size:11px;color:var(--gris-400);font-weight:600}
.mis-fecha{font-weight:800}
.mis-sep{margin:0 5px}

.mis-acciones{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.mis-check{display:flex;align-items:center;gap:7px;background:var(--gris-100);
    border:1px solid var(--gris-200);border-radius:8px;padding:8px 14px;cursor:pointer;
    font-size:12.5px;font-weight:800;color:var(--gris-800)}
.mis-check input{width:16px;height:16px;cursor:pointer;accent-color:#1C7A45}
.mis-realizada .mis-check{background:#D3F1DF;border-color:#A9E0C2;color:#1C7A45}
.mis-mini{font-family:inherit;font-size:11px;font-weight:700;background:none;border:none;
    color:var(--gris-400);cursor:pointer;text-decoration:underline;padding:2px 0}
.mis-mini:hover{color:var(--gris-800)}
.mis-mini-borrar:hover{color:#B42318}

.mis-chat-toggle{width:100%;margin-top:12px;padding:8px;border:1px dashed var(--gris-200);
    border-radius:8px;background:var(--gris-50);cursor:pointer;font-family:inherit;
    font-size:11.5px;font-weight:700;color:var(--gris-600)}
.mis-chat-toggle:hover{background:var(--gris-100)}
.mis-chat{margin-top:12px;border-top:1px solid var(--gris-100);padding-top:12px}
.mis-msjs{max-height:280px;overflow-y:auto;padding-right:4px;margin-bottom:10px}
.mis-msj{display:flex;margin-bottom:9px}
.mis-msj-mio{justify-content:flex-end}
.mis-msj-burbuja{max-width:78%;background:var(--gris-100);border-radius:12px;padding:9px 13px}
.mis-msj-mio .mis-msj-burbuja{background:#EAF2FB}
.mis-msj-gerente{border-left:3px solid var(--dorado)}
.mis-msj-autor{font-size:11px;font-weight:800;color:var(--gris-800);margin-bottom:3px}
.mis-msj-fecha{font-weight:600;color:var(--gris-400);margin-left:6px}
.mis-msj-texto{font-size:12.5px;color:var(--gris-800);line-height:1.5}
.mis-chat-form{display:flex;gap:8px;align-items:flex-start}
.mis-chat-form textarea{flex:1;font-family:inherit;font-size:12.5px;border:1px solid var(--gris-200);
    border-radius:8px;padding:9px 11px;resize:vertical}

/* ==========================================================
   Calendario — Google Calendar incrustado
   ========================================================== */
.cal-barra{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cal-grupo{display:flex;gap:6px;flex-wrap:wrap}
.cal-chip{display:flex;align-items:center;gap:7px;padding:8px 16px;border-radius:99px;
    border:1px solid var(--gris-200);background:#fff;text-decoration:none;
    color:var(--gris-600);font-size:12.5px;font-weight:700}
.cal-chip:hover{border-color:var(--gris-400);color:var(--gris-950)}
.cal-chip-on{background:var(--gris-950);border-color:var(--gris-950);color:#fff}
.cal-punto{width:9px;height:9px;border-radius:50%;flex-shrink:0}

.cal-marco{background:#fff;border:1px solid var(--gris-200);border-radius:14px;
    overflow:hidden;box-shadow:var(--sombra)}
.cal-marco iframe{width:100%;height:720px;border:0;display:block}
.cal-nota{font-size:11.5px;color:var(--gris-400);text-align:center;margin-top:12px;font-style:italic}

@media(max-width:768px){
    .cal-marco iframe{height:560px}
    .cal-barra{justify-content:center}
}

/* Calendario — modo amplio y ayuda contextual */
.cal-marco.cal-amplio iframe{height:1100px}
.cal-chip-alto{border-style:dashed}
@media(max-width:768px){ .cal-marco.cal-amplio iframe{height:820px} }

/* Impresión / "Guardar como PDF" del navegador (Ctrl+P, o el share sheet del celular) sobre
   CUALQUIER página del CRM: el menú lateral y la barra superior móvil traen varios <a href>
   (logo -> /home.php, Dashboard/Ventas/etc., "Mi cuenta", "Salir"...) que, si no se ocultan,
   el navegador los convierte en links clickeables dentro del PDF impreso, en la posición
   donde se veían en pantalla — pasa incluso si el contenido de la página es solo una imagen,
   porque esto lo hace el propio motor de impresión del navegador, no nuestro código. Esto es
   justo lo que reportó Juan al compartir el PDF de una cotización imprimiendo la página
   completa (en vez de usar el botón "Generar PDF" de cotizador.php, que arma su propio PDF de
   una sola imagen y no tiene este problema). Se oculta todo el menú compartido al imprimir,
   en todas las páginas, para que ningún link quede clickeable en ningún PDF impreso del CRM.
*/
@media print {
    .sidebar, .mobile-topbar, .sidebar-overlay { display: none !important; }
    .app { display: block !important; }
    .contenido { padding: 0 !important; max-width: 100% !important; }
    .material-notif-boton, #modalMaterialNotif { display: none !important; }
}

/* ---------------------------------------------------------------
   Préstamo de Material
   --------------------------------------------------------------- */

.badge-mat-solicitada  { background: var(--gris-100); color: var(--gris-600); }
.badge-mat-rechazada   { background: var(--rojo); color: #fff; }
.badge-mat-aprobada    { background: var(--dorado); color: #fff; }
.badge-mat-en-prestamo { background: var(--teal); color: #fff; }
.badge-mat-devuelto    { background: var(--verde); color: #fff; }
.badge-mat-cancelada   { background: #4a5568; color: #fff; }

.badge-mat-buen-estado { background: var(--verde); color: #fff; }
.badge-mat-con-dano    { background: var(--rojo); color: #fff; }

.btn-dorado { background: var(--dorado); color: #fff; }
.btn-dorado:hover { background: var(--dorado-oscuro); }

.pill-confirmacion {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--gris-100);
    color: var(--gris-500);
    margin: 2px 3px 2px 0;
    white-space: nowrap;
}
.pill-confirmacion-ok { background: var(--teal-palido); color: var(--teal); }

/* ---------------------------------------------------------------
   CASAS y LIVING MADERAS (v49) — Modelos, Recorridos, Cotizador, Clusters
   --------------------------------------------------------------- */

.seccion-intro { color: var(--gris-600); font-size: 14px; margin: -10px 0 20px; }

/* Visor de brochure (Casas → Modelos): imágenes de cada página del PDF con
   navegación de flechas + tira de miniaturas, sin depender del visor de PDF
   nativo del navegador (varía mucho entre celular y escritorio). */
.visor-pdf { background: #0f1720; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); margin-bottom: 10px; }
.visor-pdf-imagen-wrap { display: flex; align-items: center; justify-content: center; background: #0f1720; min-height: 260px; position: relative; }
.visor-pdf-imagen-wrap img { max-width: 100%; max-height: 76vh; display: block; }
.visor-pdf-flecha { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.12); border: none; color: #fff; width: 42px; height: 42px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.visor-pdf-flecha:hover { background: rgba(255,255,255,0.28); }
.visor-pdf-flecha:disabled { opacity: 0.25; cursor: default; }
.visor-pdf-flecha-izq { left: 10px; }
.visor-pdf-flecha-der { right: 10px; }
.visor-pdf-barra { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px; background: #182231; color: #b8c2d4; font-size: 12.5px; font-weight: 600; }
.visor-pdf-miniaturas { display: flex; gap: 8px; overflow-x: auto; padding: 12px; background: #fff; border-top: 1px solid var(--gris-200); }
.visor-pdf-miniaturas img { width: 78px; height: 53px; object-fit: cover; border-radius: 6px; cursor: pointer; opacity: 0.5; border: 2px solid transparent; flex-shrink: 0; transition: opacity .15s, border-color .15s; }
.visor-pdf-miniaturas img:hover { opacity: 0.85; }
.visor-pdf-miniaturas img.activa { opacity: 1; border-color: var(--dorado); }

/* Cuadrícula de tarjetas — Recorridos virtuales, Clusters, Modelos Living Maderas */
.tarjetas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tarjeta-clic { display: block; background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; cursor: pointer; text-align: left; padding: 0; font: inherit; color: inherit; width: 100%; transition: transform .15s, box-shadow .15s; }
.tarjeta-clic:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(34,50,74,0.15); }
.tarjeta-clic-img { position: relative; aspect-ratio: 16/10; background: linear-gradient(135deg, var(--gris-950), var(--primario)) center/cover no-repeat; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tarjeta-clic-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-clic-play { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.94); display: flex; align-items: center; justify-content: center; font-size: 19px; color: var(--primario); }
.tarjeta-clic-nombre { padding: 13px 16px; font-weight: 700; font-size: 15px; color: var(--gris-950); }
.tarjeta-clic-sub { padding: 0 16px 13px; margin-top: -8px; font-size: 12.5px; color: var(--gris-600); }

/* Modal genérico de "visor" (recorrido Kuula, iframe grande) */
.modal-visor .modal-caja { max-width: 980px; padding: 0; overflow: hidden; position: relative; }
.modal-visor iframe { display: block; width: 100%; height: 68vh; border: 0; background: #0f1720; }
.modal-visor-encabezado { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--gris-950); color: #fff; font-weight: 700; }
.modal-visor-encabezado button { background: rgba(255,255,255,0.12); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 16px; cursor: pointer; }
.modal-visor-encabezado button:hover { background: rgba(255,255,255,0.25); }

/* Living Maderas → Clusters: Master Plan + ubicación de Google Maps lado a lado */
.cluster-detalle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.cluster-detalle-grid > div { display: flex; flex-direction: column; }
.cluster-detalle-etiqueta { padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris-500); background: var(--gris-50); border-bottom: 1px solid var(--gris-200); }
.cluster-detalle-grid img { width: 100%; height: 68vh; object-fit: contain; background: #fff; display: block; }
.cluster-detalle-grid iframe { width: 100%; height: 68vh; border: 0; display: block; }
@media (max-width: 820px) {
    .cluster-detalle-grid { grid-template-columns: 1fr; }
    .cluster-detalle-grid img, .cluster-detalle-grid iframe { height: 42vh; }
}

/* Placeholder de secciones "Otros" y "Cotizador" (Casas, fase pendiente) */
.placeholder-proximamente { background: #fff; border: 2px dashed var(--gris-200); border-radius: var(--radio); padding: 64px 24px; text-align: center; color: var(--gris-500); }
.placeholder-proximamente .icono { font-size: 36px; margin-bottom: 12px; }
.placeholder-proximamente h2 { color: var(--gris-800); margin: 0 0 8px; font-size: 18px; }
.placeholder-proximamente p { margin: 0; font-size: 13.5px; max-width: 420px; margin: 0 auto; }

/* Living Maderas → Cotizador: simulador externo incrustado */
.embed-simulador-wrap { background: #fff; border: 1px solid var(--gris-200); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.embed-simulador-wrap iframe { width: 100%; height: 76vh; border: 0; display: block; background: #fff; }
.embed-simulador-aviso { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--gris-50); border-top: 1px solid var(--gris-200); font-size: 13px; color: var(--gris-600); }

/* Notificación flotante persistente de Material: solo la ve el asesor, en
   cualquier página del sistema, mientras tenga algo sin confirmar o sin
   acusar recibo (aprobación/rechazo) — pedido explícito del cliente. */
.material-notif-boton {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--dorado);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(184, 134, 44, 0.4);
    cursor: pointer;
    animation: material-notif-pulso 2.2s ease-in-out infinite;
}
.material-notif-boton:hover { background: var(--dorado-oscuro); }
.material-notif-icono { font-size: 16px; }
.material-notif-contador {
    background: #fff;
    color: var(--dorado-oscuro);
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0 5px;
}
@keyframes material-notif-pulso {
    0%, 100% { box-shadow: 0 4px 14px rgba(184, 134, 44, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(184, 134, 44, 0.75); }
}
.material-notif-item {
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.material-notif-item p { margin: 0 0 10px; font-size: 14px; }
.material-notif-sub { font-size: 12.5px; color: var(--gris-600); margin: -6px 0 10px !important; }

@media (max-width: 640px) {
    .material-notif-boton { top: 64px; right: 12px; padding: 8px 12px; font-size: 12px; }
}

/* Living Maderas → Modelos: video descriptivo arriba de la galería (v55) */
.video-descriptivo { max-width: 900px; margin: 0 auto 22px; }
.video-descriptivo-marco { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radio); box-shadow: var(--sombra); background: #000; }
.video-descriptivo-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Living Maderas → Clusters: ampliar el Master Plan con zoom/arrastre (v55) */
.cluster-plano-clic { cursor: zoom-in; }
.modal-plano-zoom { z-index: 90; background: rgba(15, 23, 32, 0.97); padding: 0; }
.modal-plano-zoom.abierto { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.plano-zoom-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 18px; background: var(--gris-950); color: #fff; }
.plano-zoom-header > span { font-weight: 700; font-size: 14.5px; }
.plano-zoom-controles { display: flex; align-items: center; gap: 8px; }
.plano-zoom-controles button { background: rgba(255,255,255,0.14); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; font-size: 17px; line-height: 1; cursor: pointer; }
.plano-zoom-controles button:hover { background: rgba(255,255,255,0.28); }
.plano-zoom-controles .plano-zoom-reset { width: auto; border-radius: 16px; padding: 0 14px; font-size: 12px; font-weight: 700; }
#planoZoomPct { color: #fff; font-size: 12.5px; min-width: 42px; text-align: center; }
.plano-zoom-viewport { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; cursor: zoom-in; -webkit-overflow-scrolling: touch; }
.plano-zoom-viewport img { width: 100%; max-width: none; display: block; user-select: none; -webkit-user-drag: none; }
.plano-zoom-hint { text-align: center; color: rgba(255,255,255,0.62); font-size: 11.5px; margin: 0; padding: 8px 14px 14px; }
@media (max-width: 640px) {
    .plano-zoom-header { padding: 10px 12px; }
    .plano-zoom-hint { font-size: 11px; }
}