/* ==============================================
ARCHIVO CENTRAL DE ESTILOS - CRM DIAMAND
==============================================
*/

:root {
    /* --- Colores de Clasificación de Clientes --- */
    --color-publico: #17935f;       /* Verde para Público General */
    --color-coordinador: #242f53;     /* Azul para Coordinadores */

    /* --- Colores de Marca y Acciones --- */
    --brand-red: #e11149;/* --- Colores de Botones Activos --- */
    --brand-green: #28a745;
    --brand-blue: #007bff;
    --brand-yellow: #ffc107;
    --brand-orange: #fd7e14;
    --brand-purple: #7d33e5;
    --brand-gray: #6c757d;
    --brand-whatsapp: #25D366;
/* --- Colores de Incentivos (NUEVO) --- */
    --incentivo-nacional: #FE4E4E;       /* Color para Viaje Nacional (Ej: Turquesa) */
    --incentivo-internacional: #854c9e;  /* Color para Viaje Internacional (Ej: Dorado) */

    /* --- Colores de Texto --- */
    --text-dark: #1a1a1a;
    --text-light: #5a5a5a;
    --header-text-color: #FFFFFF;

    /* --- Fondos y Bordes Generales --- */
    --subtle-bg: #f0f2f5;
    --subtle-border: #e0e2e5;
    --info-bar-bg: #d9cfff;
    --row-highlight: rgba(253, 238, 242, 0.7);
    --hover-highlight: #f3e8ff;
    --birthday-row-highlight: rgba(223, 245, 245, 0.7);
    --color-inactive-filter: #7f8c8d;

    /* --- Colores de Estado y Notificaciones --- */
    --status-success-bg: #d4edda;
    --status-success-text: #155724;
    --status-error-bg: #f8d7da;
    --status-error-text: #721c24;

    /* --- Colores Específicos de Cabeceras de Página --- */
    --header-agenda-bg: var(--brand-purple);
    --header-agregar-cliente-publico-bg: var(--color-publico);
    --header-agregar-cliente-coordinador-bg: var(--color-coordinador);
    --header-mis-cifras-bg: var(--brand-orange);
    --header-mis-clientes-bg: var(--brand-blue);
    --header-venta-detalle-principal-bg: #56a345;
    --header-venta-detalle-resumen-bg: #3979ff;
    --header-venta-detalle-seguimiento-bg: #6846c2;
    --header-venta-detalle-cuenta-bg: #ff0048;
    --header-venta-detalle-anotaciones-bg: #7C9AA6;
    --header-panel-pendientes-bg: var(--brand-purple); /* <-- AQUÍ ESTÁ EL CAMBIO */
    --header-panel-cumpleanos-bg: #3f9c9b;

    /* --- Fuente Principal --- */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}


/* ==============================================
   CLASES DE AYUDA PARA COLORES
============================================== */

/* Clases para fondos */
.bg-publico { background-color: var(--color-publico) !important; }
.bg-coordinador { background-color: var(--color-coordinador) !important; }

/* Clases para texto */
.text-publico { color: var(--color-publico) !important; }
.text-coordinador { color: var(--color-coordinador) !important; }

/* Estilos para el switch de clasificación de cliente */
.switch input:checked + .slider {
    background-color: var(--color-coordinador);
}
.switch input:not(:checked) + .slider {
    background-color: var(--color-publico);
}

/* ==========================================================
   ESTILOS DE COLOR ESPECÍFICOS (AÑADIDOS DESDE MIS_CLIENTES.HTML)
   ========================================================== */

/* Filtros de clasificación en la página "Mis Clientes" */
.btn-filter {
    background-color: var(--color-inactive-filter);
}
.btn-filter.publico.active {
    background-color: var(--color-publico);
}
.btn-filter.coordinador.active {
    background-color: var(--color-coordinador);
}

/* Estado del saldo en la tarjeta de cliente */
.value.saldo-pendiente {
    font-weight: 700;
    color: var(--brand-red);
}
.value.saldo-pagado {
    font-weight: 700;
    color: var(--color-publico);
}

/* ==========================================================
   ESTILOS DE COLOR ESPECÍFICOS (AÑADIDOS DESDE AGENDA.HTML)
   ========================================================== */

/* Encabezado del calendario */
.calendar-header {
    color: var(--header-text-color);
    background-color: var(--header-agenda-bg);
}
.calendar-nav-link {
    border: 2px solid var(--header-text-color);
    color: var(--header-text-color);
}
.calendar-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Celdas y elementos del calendario */
.calendar-table th {
    color: var(--text-light);
}
.calendar-table td.has-events:hover {
    background-color: var(--hover-highlight);
}
.calendar-table td.other-month {
    background-color: rgba(0, 0, 0, 0.02);
}
.today .day-number {
    background-color: var(--brand-red);
    color: white;
}

/* Puntos de eventos y barra de resumen */
.dot.red { background-color: var(--brand-red); }
.dot.blue { background-color: var(--brand-blue); }

.summary-bar {
    background-color: var(--info-bar-bg);
}

/* Modal de eventos del día */
.modal-header.header-agenda-modal {
    background-color: var(--header-agenda-bg);
    color: var(--header-text-color);
}

.modal-close-btn {
    color: var(--header-text-color);
}

.modal-event-item a {
    background-color: var(--brand-green);
    color: white;
}

/* ==========================================================
   ESTILOS DE COLOR ESPECÍFICOS (AÑADIDOS DESDE AGREGAR_CLIENTE.HTML)
   ========================================================== */
.form-section-title {
    color: var(--brand-red);
}

.btn-back.btn-form-cancel {
    background-color: var(--brand-red);
}
.btn-back.btn-form-cancel:hover {
    box-shadow: 0 6px 15px rgba(225, 23, 73, 0.3);
}

/* ==========================================================
   ESTILOS DE COLOR ESPECÍFICOS (AÑADIDOS DESDE CLIENTE_DETALLE.HTML)
   ========================================================== */

/* Cabeceras de tarjetas en la vista de detalle */
.card-header-bar.bg-top5 { background-color: var(--brand-orange); }
.card-header-bar.bg-history { background-color: var(--header-venta-detalle-principal-bg); }
.card-header-bar.bg-new-sale { background-color: var(--header-venta-detalle-resumen-bg); }

/* Botones de tipo de precio (Contado/Crédito) */
.price-btn.credito.active {
    background-color: var(--brand-orange);
    border-color: #ffc999;
}
.price-btn.contado.active {
    background-color: var(--brand-blue);
    border-color: #a3cfff;
}

/* Color del monto total según el tipo de precio */
.totals-grid .total-final-amount.contado-color { color: var(--brand-blue); }
.totals-grid .total-final-amount.credito-color { color: var(--brand-orange); }

/* Botones de acción del formulario de venta */
.btn-add-product { background-color: var(--brand-green); }
.btn-save-sale { background-color: var(--brand-blue); }

/* Estados de las ventas en el historial */
.sale-status.paid { color: var(--brand-green); }
.sale-status.pending { color: var(--brand-red); }

/* Botones en la lista del historial */
.btn-details { background-color: var(--brand-green); }
.btn-delete { background-color: var(--brand-red); }

/* Sugerencias del autocompletado */
.suggestion-item strong { color: var(--brand-red); }

/* ==========================================================
   ESTILOS DE COLOR ESPECÍFICOS (AÑADIDOS DESDE MIS_CIFRAS.HTML)
   ========================================================== */
/* Encabezado de la página */
.page-header.header-mis-cifras {
    background-color: var(--header-mis-cifras-bg);
}

/* Valor numérico en las tarjetas de estadísticas */
.stat-card .value {
    color: var(--brand-red);
}

/* ==========================================================
   ESTILOS DE COLOR ESPECÍFICOS (AÑADIDOS DESDE VENTA_DETALLE.HTML)
   ========================================================== */
/* Botones de navegación superior */
.btn-nav-secondary.btn-home-color { background-color: var(--brand-orange); }
.btn-nav-secondary.btn-agenda-color { background-color: var(--brand-purple); }
.btn-back.btn-venta-detalle { background-color: var(--brand-blue); }

/* Cabeceras de las tarjetas */
.card-header-bar.bg-venta-header { background-color: var(--header-venta-detalle-principal-bg); }
.card-header-bar.bg-resumen { background-color: var(--header-venta-detalle-resumen-bg); }
.card-header-bar.bg-seguimiento { background-color: var(--header-venta-detalle-seguimiento-bg); }
.card-header-bar.bg-estado-cuenta { background-color: var(--header-venta-detalle-cuenta-bg); }
.card-header-bar.bg-anotaciones { background-color: var(--header-venta-detalle-anotaciones-bg); }

/* Botones de acción principales */
.btn-action.btn-pdf { background-color: var(--brand-red); }
.btn-action.btn-whatsapp { background-color: var(--brand-whatsapp); }
.btn-action.btn-main { background-color: var(--brand-blue); }
.btn-action.btn-follow-up { background-color: var(--brand-orange); }
.btn-action.btn-reminder { background-color: var(--brand-purple); }

/* Resumen de totales y estados */
.totals-summary .grand-total { color: var(--brand-blue); }
.status-paid { color: var(--brand-green); font-weight: 700; font-size: 1.8em; }
.status-pending { color: var(--brand-red); font-weight: 700; font-size: 1.8em; }

/* Sub-secciones de pagos */
.sub-section-header {
    background-color: #eee;
}
.sub-section-header.pagos-realizados { background-color: #ffc2c2; }
.sub-section-header.realizar-pago { background-color: #c6e8c7; }

/* Contenido de anotaciones */
.anotaciones-content {
    background-color: rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.05);
}

/* ==========================================================
   ESTILOS DE COLOR ESPECÍFICOS (AÑADIDOS DESDE INDEX.HTML)
   ========================================================== */
.header h1 span { color: var(--brand-red); }
.header .btn-logout { background-color: var(--brand-red); color: white; }
.header .btn-logout:hover { box-shadow: 0 4px 10px rgba(225, 17, 73, 0.4); }
.campaign-info-bar { background-color: var(--subtle-bg); border: 1px solid var(--subtle-border); }
.campaign-progress-details .date-today { color: var(--text-dark); }
.campaign-progress-details .countdown { color: var(--text-dark); }
.progress-bar-container { background-color: var(--subtle-border); }
.progress-bar-fill { background-color: var(--brand-red); }
.progress-labels { color: var(--text-light); }
.campaign-number-details .label { color: var(--text-dark); }
.campaign-number-details .number { color: var(--brand-red); }
.nav-btn.mis-clientes { background-color: var(--brand-blue); }
.nav-btn.agregar-cliente { background-color: var(--brand-green); }
.nav-btn.mis-cifras { background-color: var(--brand-orange); }
.nav-btn.mi-agenda { background-color: var(--brand-purple); }
.card-header-bar.bg-pendientes { background-color: var(--header-panel-pendientes-bg); }
.card-header-bar.bg-cumpleanos { background-color: var(--header-panel-cumpleanos-bg); }
.dot.purple { background-color: var(--brand-purple); }
.summary-bar { background-color: var(--info-bar-bg); }
.birthday-item:hover { background-color: var(--birthday-row-highlight); }
.today-indicator { color: var(--brand-red); }
.btn-felicitar { background-color: var(--brand-green); color: white; }
.felicitado-status { color: #018442; }
.banner-nav button { background-color: rgba(0,0,0,0.5); color: white; }
.slide { background-color: #000; }
.modal-header {color: white;}
.modal-close-btn { color: white; }
.modal-event-item a { background-color: var(--brand-green); color: white; }

/* ==============================================
   ESTILOS PARA SELECTOR DE TIPO DE VENTA (COORDINADOR)
   ============================================== */
.sale-type-selector {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem; /* Reducido para acercarlo al título */
}

.sale-type-btn {
    flex-grow: 1; /* Crecen para ocupar el espacio en móvil */
    padding: 1rem;
    font-size: 1.1em;
    font-weight: 600;
    border: 2px solid var(--subtle-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f0f2f5;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* --- Colores de Botones Activos --- */
.sale-type-btn.active.is-regular {
    background-color: var(--color-coordinador);
    border-color: var(--color-coordinador);
    color: white;
    box-shadow: 0 5px 15px rgba(36, 47, 83, 0.2);
    transform: translateY(-2px);
}

.sale-type-btn.active.is-nacional {
    background-color: var(--incentivo-nacional);
    border-color: var(--incentivo-nacional);
    color: white;
    box-shadow: 0 5px 15px color-mix(in srgb, var(--incentivo-nacional) 30%, transparent);
    transform: translateY(-2px);
}

.sale-type-btn.active.is-internacional {
    background-color: var(--incentivo-internacional);
    border-color: var(--incentivo-internacional);
    color: white;
    box-shadow: 0 5px 15px color-mix(in srgb, var(--incentivo-internacional) 30%, transparent);
}

/* --- NUEVOS ESTILOS PARA LA BARRA DE TÍTULO --- */
.sale-title-container {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--subtle-border);
    padding-bottom: 2rem;
}

.sale-type-title-bar {
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: white;
    /* Transiciones para el difuminado elegante */
    opacity: 1;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

/* Clases de color para la barra de título */
.sale-type-title-bar.is-regular { background-color: var(--color-coordinador); }
.sale-type-title-bar.is-nacional { background-color: var(--incentivo-nacional); }
.sale-type-title-bar.is-internacional { background-color: var(--incentivo-internacional); }


/* --- Lógica para texto responsive --- */
.sale-type-btn .text-short {
    display: none; /* Oculto por defecto */
}

/* En pantallas grandes, los botones tienen un ancho base */
@media (min-width: 768px) {
    .sale-type-selector {
        justify-content: center;
    }
    .sale-type-btn {
        flex-grow: 0;
        min-width: 220px;
    }
}

/* En pantallas pequeñas, se ajusta el texto */
@media (max-width: 480px) {
    .sale-type-btn .text-full {
        display: none; /* Oculta el texto largo */
    }
    .sale-type-btn .text-short {
        display: inline; /* Muestra el texto corto */
    }
    .sale-type-btn {
        font-size: 1em; /* Fuente un poco más pequeña */
        padding: 0.8rem 0.5rem; /* Menos padding lateral */
    }
}

/* ==============================================
   ESTILOS UNIFICADOS PARA EL MÓDULO DE VENTA
   ============================================== */

/* --- INICIO: Nuevo diseño para botones Contado/Crédito --- */
.price-toggle {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.price-btn {
    flex-grow: 1;
    padding: 1rem;
    font-size: 1.1em;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Estilo Inactivo */
    background-color: #e9ecef;
    color: var(--text-light);
}

.price-btn.active {
    color: white;
    font-weight: 700;
    transform: translateY(-2px);
}

.price-btn.contado.active {
    background-color: var(--brand-blue);
    box-shadow: 0 5px 20px color-mix(in srgb, var(--brand-blue) 35%, transparent);
}

.price-btn.credito.active {
    background-color: var(--brand-orange);
    box-shadow: 0 5px 20px color-mix(in srgb, var(--brand-orange) 35%, transparent);
}
/* --- FIN: Nuevo diseño para botones --- */


/* --- Colores dinámicos para Contado/Crédito en el resto del formulario --- */
.totals-grid .total-final-amount.contado-color { color: var(--brand-blue); }
.totals-grid .total-final-amount.credito-color { color: var(--brand-orange); }

#sale-items-header.active.header-contado, .anotaciones-wrapper.anotaciones-contado {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}
#sale-items-list.list-contado { border-color: var(--brand-blue); }
.btn-save-sale.contado-style { background-color: var(--brand-blue); }
.btn-save-sale.contado-style:hover:not(:disabled) { box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-blue) 30%, transparent); }

#sale-items-header.active.header-credito, .anotaciones-wrapper.anotaciones-credito {
    color: var(--brand-orange);
    border-color: var(--brand-orange);
}
#sale-items-list.list-credito { border-color: var(--brand-orange); }
.btn-save-sale.credito-style { background-color: var(--brand-orange); }
.btn-save-sale.credito-style:hover:not(:disabled) { box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-orange) 30%, transparent); }

/* --- INICIO: Estilos DEFINITIVOS para PAGO HOY --- */
#payment-section {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
#payment-section.visible {
    max-height: 500px;
    opacity: 1;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}
.pago-hoy-wrapper {
    grid-column: 1 / -1; /* Ocupa todo el ancho del grid */
    margin-top: 1rem;    /* Aumenta el espacio superior para bajarlo */
    display: flex;
    justify-content: center; /* Centra el contenedor verde */
}
.pago-hoy-container {
    display: flex;
    align-items: center;
    border-radius: 12px;
    padding: 8px;
    background-color: #d4edda;
    width: 100%;
    max-width: 380px; 
}
.pago-hoy-container label {
    flex: 0 0 auto; /* La etiqueta no crece ni se encoge */
    padding: 0 1rem;
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
    color: var(--status-success-text);
}
.pago-hoy-container input {
    flex: 1 1 auto; /* El input crece y se encoge para llenar el espacio */
    width: 100%;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px;
    font-size: 1.3em;
    font-weight: 700;
    text-align: right;
}
/* --- FIN: Estilos DEFINITIVOS para PAGO HOY --- */


/* --- INICIO: Nuevo diseño para Anotaciones --- */
.anotaciones-wrapper {
    margin-top: 1.5rem;
    background: white;
    border: 2px solid #d1d5db;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.anotaciones-wrapper h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-transform: uppercase;
    transition: color 0.3s ease-in-out;
}
.anotaciones-wrapper textarea {
    width: 100%;
    min-height: 80px;
    border: none;
    background: transparent;
    padding: 0;
    font-family: var(--font-family);
    font-size: 1.05em;
    resize: vertical;
    color: var(--text-dark);
}
.anotaciones-wrapper textarea:focus {
    outline: none;
}

.anotaciones-wrapper.anotaciones-contado {
    border-color: var(--brand-blue);
}
.anotaciones-wrapper.anotaciones-contado h3 {
    color: var(--brand-blue);
}

.anotaciones-wrapper.anotaciones-credito {
    border-color: var(--brand-orange);
}
.anotaciones-wrapper.anotaciones-credito h3 {
    color: var(--brand-orange);
}
/* --- FIN: Nuevo diseño para Anotaciones --- */