/* Estilos compartidos entre todos los módulos del CRM. Cargado globalmente
   via template/s_incluir.php — no replicar estos selectores en <style> inline. */

/* SweetAlert2 siempre encima de modales Bootstrap (modal: 1055, modal-backdrop: 1050).
   Sin esto, los Swal disparados desde adentro de un modal aparecen detrás. */
.swal2-container {
    z-index: 99999 !important;
}

a.miclaseA,
a.miclaseA:hover {
    color: #000;
}

.miclasebtn {
    padding: 5px 10px;
    margin-bottom: 0px;
}

.btn > i.miclaseI {
    margin-right: 0px;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

.separator {
    margin: 10px 0;
}

@media (min-width: 768px) {
    .modal-xl {
        width: 90%;
        max-width: 1200px;
    }
}

/* ─── Visualización en MAYÚSCULAS ───
   Aplica solo a la presentación. Los datos persistidos no se modifican.
   Los inputs se uppercasean al escribir vía CSS + JS (asegura submit en mayúsculas).
   Excepciones: emails, contraseñas y campos marcados con .no-uppercase. */

table.dataTable tbody td,
table.table tbody td,
.form-control,
select.form-control,
select.form-select,
.form-select,
select.form-control option,
select.form-select option,
.form-select option,
/* Select2: wrapper visible (cuando reemplaza al <select>) */
.select2-container .select2-selection,
.select2-container .select2-selection__rendered,
.select2-container .select2-selection__choice,
.select2-container .select2-search__field,
/* Select2: dropdown abierto (vive en <body>, no hereda del padre) */
.select2-dropdown .select2-results__option,
.select2-dropdown .select2-results__group,
.info-row .value,
.detalle-valor,
.dato-valor,
label.control-label,
.nav-tabs .nav-link,
.btn,
.modal-title,
.card-title,
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}

input[type="email"],
input[type="password"],
input.no-uppercase,
textarea.no-uppercase,
.no-uppercase,
.no-uppercase *,
/* Select2 con escape: si el <select> original tiene .no-uppercase, propagar */
.no-uppercase + .select2-container,
.no-uppercase + .select2-container * {
    text-transform: none !important;
}

input[type="email"]::placeholder,
input[type="password"]::placeholder {
    text-transform: none;
}

/* ─── Control de divergencia Referenciador (CRM vs ERP CONSEGSA) ─── */

.input-referenciador-coincide {
    border: 2px solid #28a745 !important;
    background-color: #eaf7ee !important;
    color: #155724 !important;
    font-weight: 600;
}

.input-referenciador-divergente {
    border: 2px solid #dc3545 !important;
    background-color: #fdecee !important;
    color: #842029 !important;
    font-weight: 600;
}

.referenciador-mensaje {
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
}

.referenciador-mensaje.coincide {
    color: #28a745;
}

.referenciador-mensaje.divergente {
    color: #dc3545;
}

.referenciador-mensaje .erp-valor {
    font-weight: 700;
}

/* ─── Indicador de campo requerido ──────────────────────────────────
   Estándar del sistema (alineado con Bootstrap text-danger):
     - Marca requerido:  <span class="text-danger">*</span>   (preferido, nuevo)
                         <span class="requerido_sign">*</span>   (legacy, equivalente)
     - Marca opcional:   <span class="text-muted">(Opcional)</span>
     - Footer del form:  <small class="text-muted"><span class="text-danger">*</span> Campos obligatorios</small>
   .requerido_sign queda como alias visual de text-danger para no tocar archivos viejos.
*/
.requerido_sign {
    color: #dc3545;
    font-weight: 700;
}

/* Feedback visual de validación: borde rojo cuando el campo es inválido.
   Aplica si:
   - se le agrega manualmente la clase .is-invalid (Bootstrap)
   - el navegador detecta :invalid (HTML5: required, type=email, pattern, etc.)
     y el usuario ya tipeó algo (no se muestra rojo en placeholder vacío inicial)
*/
.form-control.is-invalid,
.form-select.is-invalid,
.form-control:invalid:not(:placeholder-shown):not(:focus),
.form-select:invalid:not(:placeholder-shown):not(:focus) {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.10);
}

.invalid-feedback-inline {
    display: block;
    color: #dc3545;
    font-size: 12px;
    margin-top: 2px;
}

/* Select2: replicar el borde rojo en el wrapper visible cuando el <select>
   subyacente tiene .is-invalid. */
.select2-container--default .select2-selection.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.10);
}

/* ─── Wrappers de card / modal del CRM ──────────────────────────────
   Reemplazan los inline styles repetidos que antes vivían en cada vista.
   Cambiar el color top de la card o el bg del modal-header se hace UNA
   vez acá, no en 20 archivos. */

/* Card principal de listado / contenedor de contenido.
   Equivale al patrón anterior: .card.shadow-lg + style="border-top:3px solid #3c8dbc;". */
.sgc-card {
    border-top: 3px solid #3c8dbc;
}

/* Variante "filtros" — borde superior en azul claro (AdminLTE primary). */
.sgc-card-accent {
    border-top: 3px solid #04a9f5 !important;
}

/* Modal estándar — header gris claro con border-bottom. */
.sgc-modal-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

/* Modal body con padding mayor que el default de Bootstrap (16px → 24px). */
.sgc-modal-body {
    padding: 24px;
}

/* Modal footer — bg sutil para separar visualmente. */
.sgc-modal-footer {
    background: #f5f7f9;
}

/* Etiqueta de sección dentro de un modal — mayúscula pequeña + subrayado tenue. */
.sgc-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding-bottom: 6px;
}

/* AdminLTE legacy → BS5 bridges. Estos selectores no son ideales (la limpieza
   correcta es eliminar las clases legacy del HTML), pero mientras eso sucede
   le damos sentido visual en el nuevo wrapper .card-header. */

/* .box-tools.float-end: en AdminLTE flotaba a la derecha del .box-header.
   En un .card-header flexible (d-flex justify-content-between), margin-left:auto
   lo empuja al borde derecho — equivalente moderno de float:right. */
.card-header .box-tools.float-end {
    margin-left: auto;
}

/* .btn-box-tool: AdminLTE renderiza estos botones del header como íconos sin
   fondo (transparentes). Mantenerlo en BS5. */
.btn-box-tool {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #555;
    padding: 4px 8px;
}
.btn-box-tool:hover {
    color: #000;
}

/* ─── Estilo "dashboard" (denso, plano) ─────────────────────────────
   Compartido entre dash/dashboard_cierre.php y nps/dashboard.php.
   Optimizado para lectura/comparación de KPIs y rankings — distinto al
   .sgc-card de listados transaccionales. NO mezclar con .sgc-card. */

/* Contenedor genérico (sustituye al .panel BS3 legacy en los dashboards). */
.sgc-panel {
    background: #fff;
    border-radius: 6px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    margin-bottom: 16px;
    border: 1px solid #e8ecf0;
}

.sgc-panel-title {
    margin: 0 0 12px;
    font-size: 13px;
    color: #4a5568;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    border-bottom: 1px solid #e8ecf0;
    padding-bottom: 8px;
}

/* Grid de KPIs — el número de columnas (grid-template-columns) se setea
   en cada dashboard porque varía (cierre=4, nps=6). */
.sgc-kpi-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.sgc-kpi-card {
    background: #fff;
    border-radius: 6px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    border: 1px solid #e8ecf0;
    border-left: 4px solid #4a5568;
}

.sgc-kpi-label {
    font-size: 11px;
    color: #8a95a3;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
}

.sgc-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: #2d3748;
    line-height: 1.1;
    margin-top: 4px;
}

.sgc-kpi-sub {
    font-size: 11px;
    color: #8a95a3;
    margin-top: 4px;
}

/* Tabla compacta para rankings dentro de un .sgc-panel. */
.sgc-ranking-table {
    width: 100%;
    font-size: 14px;
}

.sgc-ranking-table th {
    font-size: 11px;
    color: #8a95a3;
    text-transform: uppercase;
    padding: 4px 8px;
    text-align: left;
}

.sgc-ranking-table td {
    padding: 7px 8px;
    border-top: 1px solid #e8ecf0;
}

.sgc-ranking-table tr:hover td {
    background: #f5f7f9;
}

/* Filtros del dashboard: fila de inputs con bg blanco para destacar
   sobre el .sgc-panel que los contiene. */
.sgc-filters-row .form-control {
    background: #fff;
}

/* Badge de impersonación en el header — diseño formal/sobrio. Sin amarillos
   cálidos: fondo blanco, accent dark a la izquierda, tipografía gris. */
.sgc-impersonacion-badge {
    background: #fff;
    border: 1px solid #d6dae0;
    border-left: 3px solid #37474f;
    color: #455a64;
    padding: 5px 10px 5px 12px;
    border-radius: 3px;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    text-transform: none;
}

.sgc-impersonacion-icon {
    color: #607d8b;
    font-size: 14px;
}

.sgc-impersonacion-text {
    color: #455a64;
    letter-spacing: 0.1px;
}

.sgc-impersonacion-text b {
    color: #263238;
    font-weight: 600;
}

.sgc-impersonacion-sep {
    color: #b0bec5;
    margin: 0 4px;
}

.sgc-impersonacion-btn {
    background: #fff;
    border: 1px solid #b0bec5;
    color: #37474f;
    font-size: 12px;
    padding: 3px 10px;
    font-weight: 500;
    line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
}

.sgc-impersonacion-btn:hover {
    background: #37474f;
    border-color: #37474f;
    color: #fff;
}

/* ─── Clases legacy SPC (lead/prospecto/etapas) ──────────────────────
   Antes vivían duplicadas en `spc/cssJC/lead.css` y en el `<style>` inline
   de `spc/prospecto.php`. Consolidadas acá en 2026-05-25 para evitar drift.
   Nombres muy específicos (`miMenu`, `miclaseEtapas*`, etc.) → no colisionan
   con clases nuevas; safe globalizar. */

/* Nav de pestañas del prospecto (#menuPrincipal vive en contenedor_pestanas_etapa2jc.php). */
#menuPrincipal .nav-link.active {
    background-color: #868686ff;
    color: #fff !important;
}

#menuPrincipal .nav-link {
    color: #333;
}

#menuPrincipal .nav-link:hover {
    background-color: #868686ff;
    color: #fff;
}

/* Tipografía/colores legacy */
.miMenu {
    font-size: 14px !important;
    color: #555555 !important;
}

.miPDF {
    margin-bottom: 15px;
}

.miH4 {
    font-size: 16px !important;
}

/* Overrides BS5: dropdown-item activo en azul claro del proyecto, inputs siempre bg blanco. */
.dropdown-item:active {
    background-color: #3ebfea !important;
}

.form-control {
    background-color: #fff;
}

.custom-select:focus,
.form-control:focus {
    background-color: #fff !important;
}

/* Footer del plan de trabajo — margen distinto según tamaño de sidebar. */
.miclaseFooterPlanTrabajo {
    margin-left: 264px;
}

.miclaseFooterPlanTrabajo2 {
    margin-left: 80px;
}

/* Botón "Aprobar etapa" — margen default desktop. */
.miclaseEtapasBtnAprobar {
    margin-top: 7px;
}

/* ── Responsive de la card de Etapas (móvil / iPad / iPad Pro) ── */

@media (max-width: 480px) and (min-width: 300px) {
    .miPDF {
        margin-bottom: 10px !important;
    }
    .miclaseEtapas {
        padding-left: 0px !important;
    }
    .miclaseEtapasDentro {
        text-align: center !important;
    }
    .miClearfix {
        text-align: -webkit-center;
    }
    .miclaseEtapasBtnAprobar {
        margin-top: 10px;
    }
    .miclaseFooterPlanTrabajo {
        margin-left: 0px;
    }
    .miclaseWhat {
        width: 80%;
    }
    .miclaseWhat2 {
        width: 20%;
    }
    .miclaseWhat3 {
        width: 30% !important;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .miPDF {
        margin-bottom: 10px !important;
    }
    .miclaseFooterPlanTrabajo {
        margin-left: 0px;
    }
    .miclaseWhat {
        width: 87%;
    }
    .miclaseWhat2 {
        width: 13%;
    }
    .miclaseWhat3 {
        width: 95% !important;
    }
    .miclaseEtapasDentro {
        text-align: center !important;
    }
    .miClearfix {
        text-align: -webkit-center;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .miclaseEtapasBtnAprobar {
        margin-top: 7px;
    }
    .miclaseFooterPlanTrabajo {
        margin-left: 0px;
    }
    .miclaseWhat {
        width: 87%;
    }
    .miclaseWhat2 {
        width: 13%;
    }
    .miclaseWhat3 {
        width: 63% !important;
    }
    .miclaseEtapasDentro {
        text-align: center !important;
    }
    .miClearfix {
        text-align: -webkit-center;
    }
}

/* ─── Modal WhatsApp (#modalWhatsapp + intl-tel-input) ──────────────
   Antes duplicado en `<style>` inline de spc/lead.php y spc/prospecto.php. */
#modalWhatsapp .iti {
    display: block !important;
    width: 100% !important;
}

#modalWhatsapp .iti input {
    width: 100% !important;
    padding-left: 95px !important;
}

/* ─── Etapas en modo solo-lectura ───────────────────────────────────
   Cuando un lead está cerrado/eliminado, contenedor_pestanas_etapa1_lead.php
   agrega la clase `etapas-readonly` al stepper. Esto:
   - bloquea interacción con inputs (visualmente grises + sin pointer events)
   - oculta los botones de guardar/avanzar
   - desactiva los archivos de upload
   El JS (etapa1_lead.js → guardarEtapa) además rechaza con Swal cualquier
   intento de submit usando window.PageData.leadCerrado. */
.etapas-readonly input,
.etapas-readonly select,
.etapas-readonly textarea {
    pointer-events: none;
    background-color: #f3f4f6 !important;
    color: #6b7280 !important;
    cursor: not-allowed;
}

/* Deshabilitar checkboxes y radios también */
.etapas-readonly input[type="checkbox"],
.etapas-readonly input[type="radio"] {
    pointer-events: none;
}

/* Ocultar TODOS los botones de acción dentro del stepper en modo solo-lectura,
   EXCEPTO los de cierre de modal y navegación entre tabs/pestañas.
   - data-bs-dismiss (cerrar modales) → permitido
   - data-bs-toggle="pill"/"tab" + data-bs-toggle="collapse" → permitidos
   - irAPestana(...) → navegación interna del stepper, permitido
   Cualquier otro botón se oculta para evitar mutaciones. */
.etapas-readonly button:not([data-bs-dismiss]):not([data-bs-toggle="pill"]):not([data-bs-toggle="tab"]):not([data-bs-toggle="collapse"]):not([onclick*="irAPestana"]):not([onclick*="mostrarCliente"]) {
    display: none !important;
}

/* Forzar cursor "candado" en cards completas del stepper */
.etapas-readonly .step-trigger {
    opacity: 0.85;
}
