/* ═══════════════════════════════════════════════════════════════════════════
 * PWA COMERCIAL GLORIAPETS - ESTILOS CSS COMPLETOS
 * Fusión de: styles_extracted.css + styles_inline_classes.css
 * Fecha: 2026-02-10
 * ═══════════════════════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #1a1a2e; min-height: 100vh; display: flex; flex-direction: column; align-items: center; }
.demo-panel { width: 100%; background: #1a1a2e; color: #fff; padding: 12px 16px; font-size: 12px; }
.demo-panel-title { font-weight: 600; margin-bottom: 8px; color: #F2C811; font-size: 14px; }
.demo-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.demo-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 11px; cursor: pointer; }
.demo-btn:hover { background: rgba(255,255,255,0.2); }
.demo-btn.active { background: #F2C811; color: #000; border-color: #F2C811; }
.phone-frame { width: 393px; height: 852px; background: #fff; border-radius: 47px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 12px #1a1a1a; margin: 20px auto; position: relative; flex-shrink: 0; }

/* Móviles reales: sin frame, pantalla completa */
@media (max-width: 500px) {
    /* Bloquear scroll a nivel de documento para evitar rubber-band en iOS
       y el arrastre de cabecera + pie cuando el toque empieza en un área
       que no tiene scroll propio. */
    html {
        height: 100%;
        overflow: hidden;
    }
    body {
        height: 100%;
        overflow: hidden;
        background: #fff;
    }

    /* phone-frame ocupa la pantalla completa.
       padding-top == zona Dynamic Island: queda con el fondo blanco del frame
       en lugar de que los headers coloreen esa área. box-sizing:border-box
       garantiza que la altura total siga siendo 100dvh. */
    .phone-frame {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        padding-top: env(safe-area-inset-top, 0px);
        box-sizing: border-box;
    }
    .phone-notch,
    .phone-home-indicator {
        display: none;
    }

    /* phone-content tampoco puede hacer scroll: el scroll ocurre
       en cada vista o tab-panel individualmente.
       height explícita con calc() en lugar de height:100% para evitar que
       iOS WebKit resuelva incorrectamente el porcentaje cuando el padre
       tiene padding con env() — problema documentado que hace que
       tabs-container y tab-panels arranquen en y=0 en vez de y=59px,
       metiendo el header amarillo dentro del Dynamic Island. */
    .phone-content {
        padding-top: 0 !important;
        overflow: hidden !important;
        height: calc(100svh - env(safe-area-inset-top, 0px)) !important;
    }

    /* Los headers sólo necesitan el padding visual (20 px);
       phone-frame ya gestiona la zona del DI. */
    .tab-panel > .header,
    .view > .header {
        padding-top: 20px;
    }
    /* Capa fija blanca sobre la zona del DI (z-index 100 > 20 del client-header)
       para que ningún header la tiña de color en ninguna pantalla. */
    .phone-frame::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-top, 0px);
        background: #fff;
        z-index: 100;
        pointer-events: none;
    }
    .client-header {
        border-radius: 0;
    }
    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 18px);
    }

    /* ── Vistas: mismo modelo que tab-panel ────────────────────────────────
       display:block + overflow-y:auto convierte la vista en el scroll
       container; position:sticky en el header funciona igual que en
       los tab-panels que ya funcionaban bien.
       !important es imprescindible: las reglas base (display:flex,
       overflow:hidden en .view.active y overflow-y:auto en .view>.content)
       aparecen después en el fichero y ganarían sin él. */
    .view.active {
        display: block !important;
        overflow-y: auto !important;
    }
    .view > .header {
        position: sticky;
        top: 0;
    }
    .view > .content {
        overflow: visible !important;
    }

    /* Mapa: sus reglas propias no usan !important, así que quedarían
       anuladas por las anteriores. Las restauramos explícitamente. */
    #view-mapa.active {
        display: flex !important;
        overflow: hidden !important;
    }

    /* Agenda: la vista mantiene display:flex (sus reglas base usan !important),
       pero el scroll falla porque #agendaLeftColumn es un bloque sin altura
       definida y rompe la cadena flex. Lo convertimos en flex-column para que
       #calendarSemana / #calendarAgendaList puedan usar flex:1 y overflow-y:auto.
       El padding-bottom del .content se mueve a cada lista scrollable. */
    #view-agenda .content {
        padding-bottom: 0 !important;
    }
    #agendaLeftColumn {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
    #view-agenda #calendarSemana,
    #view-agenda #calendarAgendaList,
    #view-agenda #calendarMes {
        padding-bottom: 72px; /* clearance sobre el bottom-nav */
    }
    #view-cliente .content {
        padding-bottom: 80px; /* clearance sobre el bottom-nav */
    }

    /* Evitar zoom automático de iOS al enfocar inputs (se dispara con font-size < 16px) */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}
.inc-label { font-size: 11px; font-weight: 600; color: #9ca3af; margin-right: 5px; text-transform: uppercase; letter-spacing: 0.03em; }
.phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 126px; height: 37px; background: #000; border-radius: 24px; z-index: 100; }
.phone-content { height: 100%; overflow-y: auto; padding-top: 54px; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent; container-type: inline-size; }

/* Scrollbar fina y elegante */
.phone-content::-webkit-scrollbar { width: 4px; height: 4px; }
.phone-content::-webkit-scrollbar-track { background: transparent; }
.phone-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }
.phone-content::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }
.phone-home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; background: #000; border-radius: 3px; z-index: 100; }

/* Login dentro del phone-frame */
.login-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: linear-gradient(135deg, #1a3a5c 0%, #0f2540 100%); 
    z-index: 50;
}
.login-container.hidden { display: none; }
.login-card { background: #fff; padding: 32px; border-radius: 16px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.35); max-width: 280px; }
.login-card h1 { margin: 16px 0 8px; font-size: 24px; color: #333; }
.login-card p { color: #666; margin-bottom: 24px; font-size: 14px; }
.login-logo { width: 80px; height: 80px; }
.login-logo-texto { display: block; width: 180px; margin: 12px auto 4px; }
.btn-login { width: 100%; padding: 14px 20px; background: #2563eb; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-login:hover { background: #1d4ed8; }

/* App ocupa todo el espacio disponible */
#app { height: 100%; display: flex; flex-direction: column; position: relative; }
#app.hidden { display: none; }
.header { background: linear-gradient(135deg, #F2C811 0%, #E8B708 100%); padding: 16px; padding-top: 20px; color: #000; position: relative; }
.header h1 { font-size: 20px; font-weight: 700; }
.header-subtitle { font-size: 13px; opacity: 0.8; }
.header-text-wrap { display: flex; flex-direction: column; min-width: 0; }
.header-user { font-size: 12px; opacity: 0.7; }
.date-selector { display: flex; align-items: center; gap: 8px; margin-top: 12px; background: rgba(0,0,0,0.1); padding: 8px 12px; border-radius: 10px; }
.date-arrow { width: 32px; height: 32px; background: rgba(255,255,255,0.3); border: none; border-radius: 8px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.date-display { flex: 1; text-align: center; }
.date-day { font-size: 16px; font-weight: 700; }
.date-full { font-size: 11px; opacity: 0.8; }
.date-today-btn { background: #000; color: #F2C811; border: none; padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; }
.bottom-nav { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e0e0e0; display: flex; padding: 6px 0 18px; z-index: 50; }
.nav-item { flex: 1; text-align: center; padding: 4px 2px; cursor: pointer; }
.nav-item.active { color: #F2C811; }
.nav-item.active .nav-icon { background: #FFF9E6; }
.nav-icon { font-size: 16px; width: 32px; height: 26px; margin: 0 auto 2px; display: flex; align-items: center; justify-content: center; border-radius: 13px; }
.nav-label { font-size: 8px; color: #666; }
.nav-item.active .nav-label { color: #F2C811; font-weight: 600; }
.content { padding: 16px; padding-bottom: 16px; }
.view { display: none; height: 100%; overflow: hidden; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }
.view::-webkit-scrollbar { width: 4px; }
.view::-webkit-scrollbar-track { background: transparent; }
.view::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.view::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
.view.active { display: flex; flex-direction: column; }

/* Header sticky en todas las vistas */
.view > .header {
    flex: 0 0 auto;
    z-index: 20;
}

/* Contenido scrollable en todas las vistas */
.view > .content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 80px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.view > .content::-webkit-scrollbar { width: 4px; }
.view > .content::-webkit-scrollbar-track { background: transparent; }
.view > .content::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }

/* Tabs deslizantes Retos/Ruta */
.tabs-container { display: none; flex-direction: column; height: 100%; overflow: hidden; }
.tabs-container.active { display: flex; }
.tabs-header { display: flex; background: #fff; border-bottom: 1px solid #e0e0e0; padding: 0 16px; flex: 0 0 auto; }
.tab-item { flex: 1; padding: 14px 0; text-align: center; font-size: 14px; font-weight: 600; color: #888; cursor: pointer; position: relative; transition: color 0.2s; }
.tab-item.active { color: #F2C811; }
.tab-item::after { content: ''; position: absolute; bottom: 0; left: 20%; right: 20%; height: 3px; background: #F2C811; border-radius: 3px 3px 0 0; transform: scaleX(0); transition: transform 0.2s; }
.tab-item.active::after { transform: scaleX(1); }
.tabs-content { flex: 1 1 auto; overflow: hidden; position: relative; min-height: 0; }
.tabs-slider { display: flex; height: 100%; transition: transform 0.3s ease; }
.tab-panel { min-width: 100%; height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }

/* Header sticky dentro de tab-panel */
.tab-panel > .header {
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Contenido dentro de tab-panel */
.tab-panel > .content {
    padding-bottom: 80px;
}
.tab-panel::-webkit-scrollbar { width: 4px; }
.tab-panel::-webkit-scrollbar-track { background: transparent; }
.tab-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }

/* Tarjeta resumen día en Retos */
.resumen-dia-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; padding: 14px; margin-top: 12px; color: #fff; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.resumen-dia-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); }
.resumen-dia-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.resumen-dia-titulo { font-size: 14px; font-weight: 600; }
.resumen-dia-fecha { font-size: 11px; opacity: 0.9; }
.resumen-dia-stats { display: flex; gap: 8px; justify-content: space-around; }
.resumen-dia-stat { text-align: center; flex: 1; }
.resumen-dia-stat-value { font-size: 17px; font-weight: 700; }
.resumen-dia-stat-label { font-size: 9px; opacity: 0.85; }
.resumen-dia-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.2); }
.resumen-dia-semaforos { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.resumen-dia-semaforos-fila { display: flex; align-items: center; gap: 8px; }
.resumen-dia-semaforos-label { font-size: 13px; width: 18px; }
.resumen-dia-ir { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.tab-selector { display: flex; background: #f0f0f0; border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.tab-btn { flex: 1; padding: 10px 8px; text-align: center; font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer; color: #666; border: none; background: transparent; }
.tab-btn.active { background: #fff; color: #333; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.kpi-row { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent; }
.kpi-row::-webkit-scrollbar { height: 3px; }
.kpi-row::-webkit-scrollbar-track { background: transparent; }
.kpi-row::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
.kpi-row::-webkit-scrollbar { height: 3px; }
.kpi-row::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.kpi-card { flex: 1; min-width: 75px; flex-shrink: 0; background: #fff; border-radius: 12px; padding: 10px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.kpi-value { font-size: 22px; font-weight: 700; color: #333; }
.kpi-label { font-size: 9px; color: #666; margin-top: 2px; }
.kpi-card.highlight { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.kpi-card.highlight .kpi-value, .kpi-card.highlight .kpi-label { color: #fff; }
.kpi-card.green .kpi-value { color: #22c55e; }
.kpi-card.yellow .kpi-value { color: #eab308; }
.kpi-card.red .kpi-value { color: #ef4444; }
.kpi-card.green { border-bottom: 3px solid #22c55e; }
.kpi-card.yellow { border-bottom: 3px solid #eab308; }
.kpi-card.red { border-bottom: 3px solid #ef4444; }

/* BLOQUE RESUMEN CARTERA CON OBJETIVOS */
.cartera-resumen {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.cartera-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.cartera-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
/* Contenedor de indicadores (rentabilidad + actividad) */
.cartera-indicadores {
    display: flex;
    gap: 4px;
}
.cartera-indicador {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 13px;
}
.cartera-indicador.green { background: #dcfce7; }
.cartera-indicador.yellow { background: #fef3c7; }
.cartera-indicador.red { background: #fee2e2; }

/* Legacy - mantener por compatibilidad */
.cartera-rentabilidad {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.cartera-rentabilidad.green { background: #dcfce7; color: #16a34a; }
.cartera-rentabilidad.yellow { background: #fef3c7; color: #d97706; }
.cartera-rentabilidad.red { background: #fee2e2; color: #dc2626; }
.cartera-kpis {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.cartera-kpis::-webkit-scrollbar { height: 4px; }
.cartera-kpis::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.cartera-kpi {
    text-align: center;
    padding: 10px 6px;
    border-radius: 10px;
    position: relative;
    min-width: 85px;
    flex-shrink: 0;
    scroll-snap-align: start;
}
.cartera-kpi.green { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border: 1px solid #86efac; }
.cartera-kpi.yellow { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #fcd34d; }
.cartera-kpi.red { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border: 1px solid #fca5a5; }
.cartera-kpi.gray { background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); border: 1px solid #d1d5db; }
.cartera-kpi-status {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
}
.cartera-kpi-value {
    font-size: 16px;
    font-weight: 700;
}
.cartera-kpi.green .cartera-kpi-value { color: #16a34a; }
.cartera-kpi.yellow .cartera-kpi-value { color: #d97706; }
.cartera-kpi.red .cartera-kpi-value { color: #dc2626; }
.cartera-kpi.gray .cartera-kpi-value { color: #9ca3af; }
.cartera-kpi-label {
    font-size: 9px;
    color: #666;
    margin-top: 2px;
}
.cartera-kpi-obj {
    font-size: 8px;
    color: #888;
    margin-top: 3px;
}

.semaforo-dual { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.semaforo-dual-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 12px; }
.semaforo-section { margin-bottom: 10px; }
.semaforo-section:last-child { margin-bottom: 0; }
.semaforo-section-label { font-size: 11px; color: #666; margin-bottom: 6px; }
.semaforo-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 4px; }
.semaforo-bar-green { background: #22c55e; }
.semaforo-bar-yellow { background: #eab308; }
.semaforo-bar-red { background: #ef4444; }
.semaforo-legend { display: flex; justify-content: space-between; font-size: 10px; color: #888; }
.semaforo-legend-item { display: flex; align-items: center; gap: 3px; }
.semaforo-dot { width: 6px; height: 6px; border-radius: 50%; }
.semaforo-dot.green { background: #22c55e; }
.semaforo-dot.yellow { background: #eab308; }
.semaforo-dot.red { background: #ef4444; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-title { font-size: 14px; font-weight: 600; color: #333; }
.btn-optimize { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; padding: 8px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; cursor: pointer; }
.visit-card { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid #e0e0e0; cursor: pointer; transition: all 0.2s; }
.visit-card:hover { transform: translateX(4px); }
.visit-card.completed { border-left-color: #22c55e; opacity: 0.7; }
.visit-card.en-curso { border-left-color: #3b82f6; background: #f0f7ff; }
.visit-card.requiere-nota { border-left-color: #f59e0b; background: #fffbeb; }
.visit-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.visit-order { width: 26px; height: 26px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #666; margin-right: 10px; }
.visit-card.completed .visit-order { background: #dcfce7; color: #16a34a; }
.visit-card.en-curso .visit-order { background: #3b82f6; color: #fff; }
.visit-card.requiere-nota .visit-order { background: #f59e0b; color: #fff; }
.visit-info { flex: 1; }
.visit-name { font-size: 14px; font-weight: 600; color: #333; }
.visit-address { font-size: 11px; color: #666; margin-top: 2px; }
.visit-time { text-align: right; }
.visit-hour { font-size: 13px; font-weight: 600; color: #333; }
.visit-status { font-size: 10px; color: #666; }
.visit-semaforos { display: flex; gap: 8px; margin-top: 8px; }
.semaforo-badge { display: flex; align-items: center; gap: 4px; font-size: 10px; padding: 4px 8px; border-radius: 6px; font-weight: 600; background: #f0f0f0; color: #555; }
.semaforo-badge .dot { width: 8px; height: 8px; border-radius: 50%; }
.semaforo-badge .dot.green { background: #22c55e; }
.semaforo-badge .dot.yellow { background: #eab308; }
.semaforo-badge .dot.red { background: #ef4444; }
.visit-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.badge { font-size: 9px; padding: 3px 6px; border-radius: 8px; font-weight: 600; }
.badge.blue { background: #dbeafe; color: #2563eb; }

/* Botones de estado de visita */
.visit-action-btn { padding: 8px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; border: none; cursor: pointer; margin-top: 8px; width: 100%; transition: all 0.2s; }
.visit-action-btn.iniciar { background: #3b82f6; color: #fff; }
.visit-action-btn.iniciar:hover { background: #2563eb; }
.visit-action-btn.terminar { background: #f59e0b; color: #fff; }
.visit-action-btn.terminar:hover { background: #d97706; }
.visit-action-btn.nota-requerida { background: #fff; color: #f59e0b; border: 2px solid #f59e0b; }
.visit-action-btn.nota-requerida:hover { background: #fffbeb; }

/* Modal nota obligatoria */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 200; }
.modal-overlay.show { display: flex; }
.modal-content { background: #fff; border-radius: 16px; width: 90%; max-width: 340px; max-height: 80vh; overflow: hidden; }
.modal-header { background: #f59e0b; color: #fff; padding: 16px; text-align: center; }
.modal-header h3 { font-size: 16px; margin-bottom: 4px; }
.modal-header p { font-size: 12px; opacity: 0.9; }
.modal-body { padding: 16px; }
.modal-textarea { width: 100%; height: 100px; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; font-size: 14px; resize: none; margin-bottom: 12px; }
.modal-textarea:focus { outline: none; border-color: #f59e0b; }
.modal-voice-btn { width: 100%; padding: 12px; background: #f0f0f0; border: 1px dashed #ccc; border-radius: 8px; font-size: 13px; color: #666; cursor: pointer; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.modal-voice-btn:hover { background: #e8e8e8; }
.modal-voice-btn.recording { background: #fee2e2; border-color: #ef4444; color: #ef4444; animation: pulse-recording 1s infinite; }
@keyframes pulse-recording { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.modal-actions { display: flex; gap: 8px; }
.modal-btn { flex: 1; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; }
.modal-btn.cancelar { background: #f0f0f0; color: #666; }
.modal-btn.guardar { background: #22c55e; color: #fff; }
.modal-btn.guardar:disabled { background: #ccc; cursor: not-allowed; }
.wa-plantilla-btn { padding: 6px 10px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 16px; font-size: 11px; cursor: pointer; transition: all 0.2s; }
.wa-plantilla-btn:hover { background: #e8f5e9; border-color: #25D366; }

/* Panel estado visita en ficha cliente */
.cliente-meta-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.panel-estado-visita { flex-shrink: 0; margin: 0; margin-left: auto; }
.cliente-actividad-bar { display: flex; align-items: center; justify-content: center; gap: 5px; background: #eff6ff; border-radius: 8px; padding: 8px 10px; font-size: 11px; color: #1e40af; flex-wrap: nowrap; width: 100%; margin: 0; box-sizing: border-box; cursor: pointer; }
.cliente-actividad-bar.open { border-radius: 8px 8px 0 0; }
.cliente-actividad-chevron { margin-left: auto; font-size: 12px; transition: transform 0.2s; flex-shrink: 0; }
.cliente-actividad-bar.open .cliente-actividad-chevron { transform: rotate(180deg); }
.cliente-actividad-detalle { display: flex; flex-direction: column; gap: 3px; align-items: center; background: #dbeafe; border-radius: 0 0 8px 8px; padding: 0 10px; font-size: 11px; color: #1e40af; width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.2s ease, padding 0.2s; box-sizing: border-box; margin: 0 0 6px; }
.cliente-actividad-detalle.open { max-height: 4000px; padding: 5px 10px; }
.cliente-actividad-detalle-fila { display: flex; align-items: center; justify-content: center; gap: 5px; }
.cliente-actividad-item { white-space: nowrap; }
/* ── Frente a sus pares (ficha, caja actividad) ── */
.sector-table { display: flex; flex-direction: column; gap: 5px; }
.sector-row   { display: flex; align-items: center; padding: 6px 8px; background: #f8fafc; border-radius: 7px; gap: 6px; }
.sector-lbl   { font-size: 10px; color: #64748b; width: 76px; flex-shrink: 0; }
.sector-vals  { flex: 1; display: flex; align-items: center; gap: 5px; }
.sector-cliente { font-size: 13px; font-weight: 700; min-width: 52px; text-align: right; }
.sector-arrow { font-size: 12px; font-weight: 800; width: 16px; text-align: center; flex-shrink: 0; }
.sector-peer  { font-size: 10px; color: #94a3b8; }
.sector-peer em { color: #cbd5e1; font-style: normal; font-size: 9px; }
.sector-cliente.up,   .sector-arrow.up   { color: #16a34a; }
.sector-cliente.down, .sector-arrow.down { color: #dc2626; }
.sector-cliente.eq { color: #9ca3af; }
.sector-arrow.eq   { color: #ca8a04; }
.peer-desc-row { font-size: 10px; color: #64748b; background: #eff6ff; border-radius: 6px; padding: 5px 8px; margin-bottom: 8px; }
.peer-desc-row strong { color: #1e40af; }
/* Chips de feedback del argumentario (formulario de fin de visita) */
.arg-fb-chip { padding: 6px 12px; border-radius: 16px; border: 1px solid #cbd5e1; background: #fff; color: #475569; font-size: 12px; font-weight: 600; cursor: pointer; user-select: none; }
.arg-fb-chip.sel { background: #1e40af; border-color: #1e40af; color: #fff; }
.cliente-actividad-sep { color: #ccc; }
.estado-visita-content { display: flex; flex-direction: column; gap: 8px; }
.estado-visita-content.hidden { display: none !important; }
.visita-en-curso-row { display: flex; align-items: center; gap: 10px; }
.btn-estado-visita { width: 100%; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; }
.btn-estado-visita.btn-compacto { width: auto; padding: 7px 16px; font-size: 13px; flex-shrink: 0; }
.btn-estado-visita.iniciar { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; }
.btn-estado-visita.iniciar:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59,130,246,0.4); }
.btn-estado-visita.terminar { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; }
.btn-estado-visita.terminar:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245,158,11,0.4); }
.btn-estado-visita.nota { background: #fff; color: #f59e0b; border: 2px solid #f59e0b; }
.btn-estado-visita.nota:hover { background: #fffbeb; }
.cronometro-inline { display: flex; align-items: center; justify-content: center; gap: 10px; background: #eff6ff; padding: 12px; border-radius: 10px; font-size: 14px; color: #1d4ed8; }
.cronometro-dot-anim { width: 10px; height: 10px; background: #3b82f6; border-radius: 50%; animation: pulse-dot 1s infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
.cronometro-tiempo-inline { font-weight: 700; font-family: monospace; font-size: 16px; }
.nota-requerida-aviso { display: flex; align-items: center; justify-content: center; gap: 8px; background: #fef3c7; padding: 12px; border-radius: 10px; font-size: 13px; color: #92400e; }
.visita-completada-info { display: flex; align-items: center; justify-content: space-between; background: #dcfce7; padding: 14px; border-radius: 10px; font-size: 14px; color: #166534; font-weight: 600; }
.visita-hora-fin { font-size: 12px; color: #15803d; margin-left: 8px; align-self: center; }

/* Banner visita en curso */
.banner-visita-curso { display: none; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); padding: 10px 16px; margin: -16px -16px 16px -16px; color: #fff; cursor: pointer; }
.banner-visita-curso.show { display: flex; align-items: center; justify-content: space-between; }
.banner-visita-info { display: flex; align-items: center; gap: 10px; }
.banner-visita-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: pulse-dot 1s infinite; }
.banner-visita-texto { font-size: 13px; font-weight: 600; }
.banner-visita-cliente { font-size: 11px; opacity: 0.9; }
.banner-visita-tiempo { font-family: monospace; font-size: 14px; font-weight: 700; background: rgba(255,255,255,0.2); padding: 4px 8px; border-radius: 6px; }

/* Tarjetas de visita en Ruta */
.visita-card { background: #fff; border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; gap: 8px; cursor: pointer; transition: transform 0.2s; }
.visita-card:hover { transform: translateY(-1px); }
.visita-card.proxima { border-left: 4px solid #3b82f6; }
.visita-orden { width: 24px; height: 24px; background: #f3f4f6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #6b7280; flex-shrink: 0; }
.visita-card.proxima .visita-orden { background: #3b82f6; color: #fff; }
.visita-info { flex: 1; min-width: 0; }
.visita-flechas { display: flex; flex-direction: column; gap: 2px; justify-content: center; flex-shrink: 0; }
.visita-flecha { background: none; border: 1px solid #e5e7eb; border-radius: 4px; width: 22px; height: 22px; font-size: 10px; color: #6b7280; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.visita-flecha:hover:not(:disabled) { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
.visita-flecha:disabled { opacity: 0.25; cursor: default; }
.visita-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 2px; }
.visita-cliente { font-size: 14px; font-weight: 600; color: #333; flex: 1; min-width: 0; }
.visita-hora { font-size: 13px; font-weight: 600; color: #333; }
.visita-direccion-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.visita-direccion { font-size: 11px; color: #666; flex: 1; }
.visita-estado-inline { font-size: 10px; color: #888; text-align: right; margin-left: 8px; white-space: nowrap; }
.visita-indicadores { display: flex; gap: 6px; margin-bottom: 4px; }
.indicador-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 10px; font-size: 10px; font-weight: 500; }
.indicador-dot { width: 5px; height: 5px; border-radius: 50%; }
.visita-kpis { display: flex; gap: 8px; font-size: 10px; color: #666; margin-bottom: 6px; }
.visita-kpi { background: #f8f9fa; padding: 2px 5px; border-radius: 4px; }
.btn-iniciar-visita { width: 100%; padding: 8px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-iniciar-visita:hover { opacity: 0.9; }
.empty-state { text-align: center; padding: 40px 20px; color: #888; }

/* Tareas de Planner en ficha cliente */
.tarea-cliente-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; background: #f8f9fa; border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s; }
.tarea-cliente-item:hover { background: #f0f0f0; }
.tarea-cliente-item.completada { opacity: 0.6; }
.tarea-cliente-item.completada .tarea-cliente-titulo { text-decoration: line-through; }
.tarea-cliente-check { width: 20px; height: 20px; border: 2px solid #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #22c55e; flex-shrink: 0; margin-top: 2px; }
.tarea-cliente-item.completada .tarea-cliente-check { background: #dcfce7; border-color: #22c55e; }
.tarea-cliente-info { flex: 1; min-width: 0; }
.tarea-cliente-titulo { font-size: 13px; font-weight: 500; color: #333; margin-bottom: 4px; }
.tarea-cliente-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; }
.tarea-fecha { color: #666; }
.tarea-fecha.vencida { color: #dc2626; font-weight: 600; }
.tarea-prioridad { padding: 2px 6px; border-radius: 4px; font-weight: 500; }
.tarea-prioridad.alta { background: #fee2e2; color: #dc2626; }
.tarea-prioridad.media { background: #fef3c7; color: #d97706; }
.tarea-prioridad.baja { background: #dcfce7; color: #16a34a; }

/* Oportunidades de venta cruzada */
.oportunidades-header { font-size: 12px; color: #666; margin-bottom: 10px; font-style: italic; }
.oportunidad-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border: 1px solid #bbf7d0; border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s; }
.oportunidad-item:hover { transform: translateX(4px); box-shadow: 0 2px 8px rgba(34,197,94,0.2); }
.oportunidad-acordeon { border: 1px solid #bbf7d0; border-radius: 10px; margin-bottom: 8px; overflow: hidden; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
.oportunidad-acordeon .accion-header:hover { background: rgba(34,197,94,0.08); }
.oportunidad-acordeon .accion-detalle { background: #f0fdf4; }
.oportunidad-acordeon .accion-titulo-header { color: #166534; }
.detail-card.detail-card-green { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 1px solid #bbf7d0; }
.detail-card.detail-card-yellow { background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%); border: 1px solid #fde047; }
.detail-card.detail-card-segm { background: linear-gradient(135deg, #eff6ff, #e0f2fe); border: 1px solid #bae6fd; box-shadow: none; }
#campañasWrapper .detail-card:last-child, #actividadWrapper .detail-card:last-child { margin-bottom: 0; }
.detail-card.detail-card-teal { background: linear-gradient(135deg, #f0fdfa 0%, #e0f7f4 100%); border: 1px solid #99f6e4; }
/* Novedades — acordeón de marcas y referencias */
.novedad-marca-acordeon { border: 1px solid #99f6e4; border-radius: 10px; margin-bottom: 8px; overflow: hidden; background: #fff; }
.novedad-marca-acordeon .accion-titulo-header { color: #0f766e; font-size: 12px; }
.novedad-marca-acordeon .accion-header:hover { background: rgba(20,184,166,0.07); }
.novedad-marca-acordeon .accion-detalle { background: #f0fdfa; padding: 10px; }
.novedad-marca-count { font-size: 11px; background: #ccfbf1; color: #0f766e; padding: 1px 7px; border-radius: 10px; margin-left: 6px; font-weight: 500; }
.novedad-ref-acordeon { border: 1px solid #ccfbf1; border-radius: 8px; margin-bottom: 6px; overflow: hidden; background: #fff; }
.novedad-ref-acordeon:last-child { margin-bottom: 0; }
.novedad-ref-acordeon .accion-header { padding: 8px 12px; }
.novedad-ref-acordeon .accion-titulo-header { color: #134e4a; font-size: 11px; }
.novedad-ref-acordeon .accion-header:hover { background: rgba(20,184,166,0.05); }
.novedad-ref-acordeon .accion-detalle { background: #e6fdf8; padding: 8px 12px 10px; }
.novedad-ref-lanz { font-size: 11px; color: #0f766e; white-space: nowrap; flex-shrink: 0; margin-right: 4px; }
.novedad-ref-fecha { font-size: 11px; color: #555; padding: 2px 0; }
.oportunidad-producto { font-weight: 600; color: #333; flex: 1; }
.oportunidad-pct { font-size: 12px; color: #16a34a; font-weight: 500; background: #dcfce7; padding: 4px 8px; border-radius: 12px; }

/* Tareas del cliente */
.tarea-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; background: #f8f9fa; border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.tarea-check { font-size: 16px; color: #9ca3af; cursor: pointer; }
.tarea-content { flex: 1; }
.tarea-titulo { font-size: 13px; font-weight: 500; color: #333; margin-bottom: 2px; }
.tarea-fecha { font-size: 11px; color: #6b7280; }

/* Visitas del cliente en ficha */
.visita-item-ficha { padding: 8px 10px; background: #f8fafc; border-left: 3px solid #93c5fd; border-radius: 0 8px 8px 0; margin-bottom: 6px; }
.visita-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.visita-item-fecha { font-size: 11px; font-weight: 600; color: #2563eb; }
.visita-item-pill { font-size: 10px; padding: 1px 7px; border-radius: 10px; font-weight: 500; }
.visita-item-tipo      { background: #f3f4f6; color: #6b7280; }
.visita-item-formato   { background: #f3e8ff; color: #7c3aed; }
.visita-item-objeto    { background: #dbeafe; color: #1d4ed8; }
.visita-item-resultado { background: #dcfce7; color: #15803d; }

/* Notas del cliente */
.nota-item { padding: 12px; background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 0 8px 8px 0; margin-bottom: 8px; }
.nota-fecha { font-size: 11px; color: #b45309; font-weight: 600; margin-bottom: 4px; }
.nota-texto { font-size: 13px; color: #333; line-height: 1.4; }

/* Emails mini en ficha cliente */
.email-item-mini { display: flex; align-items: center; gap: 12px; padding: 12px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; margin-bottom: 8px; cursor: pointer; transition: all 0.2s; }
.email-item-mini:hover { background: #e0f2fe; }
.email-icon { font-size: 20px; }
.email-content { flex: 1; }
.email-subject { font-weight: 500; color: #0369a1; font-size: 13px; }
.email-date { font-size: 11px; color: #6b7280; }

/* Pedidos mini en ficha cliente */
.pedido-item-mini { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 8px; }
.pedido-icon { font-size: 18px; }
.pedido-content { flex: 1; }
.pedido-numero { font-weight: 600; color: #333; font-size: 12px; }
.pedido-fecha { font-size: 10px; color: #6b7280; }
.pedido-total { font-weight: 700; color: #16a34a; font-size: 14px; }
.oportunidad-icon { font-size: 20px; width: 36px; height: 36px; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.oportunidad-info { flex: 1; min-width: 0; }
.oportunidad-producto { font-size: 13px; font-weight: 600; color: #166534; margin-bottom: 2px; }
.oportunidad-stats { font-size: 11px; color: #15803d; }
.oportunidad-action { width: 28px; height: 28px; background: #22c55e; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }

/* Alerta Competencia */
.alerta-competencia { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border: 1px solid #fca5a5; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.alerta-competencia-icon { font-size: 24px; }
.alerta-competencia-content { flex: 1; }
.alerta-competencia-titulo { font-size: 11px; font-weight: 600; color: #b91c1c; margin-bottom: 2px; }
.alerta-competencia-detalle { font-size: 12px; color: #dc2626; }
.alerta-competencia-action { background: #dc2626; color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; }

/* Histórico Condiciones */

/* Argumentario Dinámico */
.argumentario-sugerencias { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.argumentario-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 8px; font-size: 12px; }
.argumentario-item.pregunta { background: #eff6ff; color: #1e40af; }
.argumentario-item.tip { background: #f0fdf4; color: #166534; }
.argumentario-item.objecion { background: #fefce8; color: #854d0e; }
.argumentario-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.argumentario-texto { flex: 1; line-height: 1.4; }

/* Vista Catálogo */
.catalogo-cliente-bar { display: flex; justify-content: space-between; align-items: center; background: #f0f0f0; padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; }
.catalogo-dto { background: #3b82f6; color: #fff; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.badge-magento { background: #22c55e; color: #fff; padding: 4px 8px; border-radius: 12px; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.badge-no-magento { background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 12px; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.carrito-resumen { background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); border-radius: 12px; padding: 12px; margin-bottom: 12px; color: #fff; }
.carrito-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.carrito-items { font-size: 13px; opacity: 0.9; }
.carrito-total { font-size: 20px; font-weight: 700; }
.carrito-descuento { display: flex; justify-content: space-between; font-size: 11px; opacity: 0.8; margin-bottom: 10px; }
.carrito-ahorro { color: #86efac; }
.carrito-btn { width: 100%; background: #fff; color: #1e40af; border: none; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.catalogo-productos { display: flex; flex-direction: column; gap: 8px; }
.catalogo-producto { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 10px; position: relative; cursor: pointer; transition: all 0.2s; }
.catalogo-producto:hover { border-color: #3b82f6; }
.catalogo-producto.promocion { border-color: #f59e0b; background: #fffbeb; }
.catalogo-promo-badge { position: absolute; top: -6px; right: 8px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 8px; }
.catalogo-producto-img { width: 44px; height: 44px; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.catalogo-producto-info { flex: 1; min-width: 0; }
.catalogo-producto-nombre { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 2px; }
.catalogo-producto-marca { font-size: 11px; color: #888; }
.catalogo-producto-stock { font-size: 10px; margin-top: 2px; }
.catalogo-producto-stock.green { color: #16a34a; }
.catalogo-producto-stock.yellow { color: #ca8a04; }
.catalogo-producto-stock.red { color: #dc2626; }
.catalogo-producto-precios { text-align: right; }
.catalogo-pvp { font-size: 10px; color: #888; }
.catalogo-neto { font-size: 12px; color: #333; }
.catalogo-cantidad { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.catalogo-cantidad button { width: 24px; height: 24px; border: 1px solid #e0e0e0; background: #fff; border-radius: 4px; cursor: pointer; font-size: 14px; }
.catalogo-cantidad span { font-size: 13px; font-weight: 600; min-width: 20px; text-align: center; }

/* Botones Power BI */
.btn-powerbi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #f59e0b; border-radius: 10px; cursor: pointer; margin-bottom: 12px; transition: all 0.2s; }
.btn-powerbi:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
.btn-powerbi-small { padding: 8px 12px; margin-top: 10px; margin-bottom: 0; }
.btn-powerbi-icon { font-size: 18px; }
.btn-powerbi-text { flex: 1; font-size: 13px; font-weight: 600; color: #92400e; text-align: left; }
.btn-powerbi-badge { background: #f59e0b; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.btn-pbi-icon { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #f59e0b; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.btn-pbi-icon:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(245,158,11,0.4); }
.btn-pbi-icon-labeled { background: transparent; border: none; padding: 2px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: all 0.2s; }
.btn-pbi-icon-labeled:hover { transform: scale(1.1); }
.btn-pbi-icon-labeled span:first-child { font-size: 16px; line-height: 1; }
/* Logo SVG oficial Power BI (Microsoft) */
.pbi-logo {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='10' width='4' height='13' rx='1' fill='%23F2C811'/%3E%3Crect x='7' y='6' width='4' height='17' rx='1' fill='%23F2C811'/%3E%3Crect x='13' y='1' width='4' height='22' rx='1' fill='%23F2C811'/%3E%3Crect x='19' y='5' width='4' height='18' rx='1' fill='%23c09a00'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}
.btn-pbi-label { font-size: 8px; font-weight: 600; color: rgba(0,0,0,0.6); line-height: 1; }
.kpi-periodo-toggle { display: flex; align-items: center; gap: 5px; }
.kpi-periodo-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.9); }
.kpi-periodo-label-dark { font-size: 11px; font-weight: 600; color: #6b7280; }
.kpi-toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.kpi-toggle-switch input { opacity: 0; width: 0; height: 0; }
.kpi-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: rgba(255,255,255,0.3); border-radius: 20px; transition: 0.3s; }
.kpi-toggle-slider:before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: 0.3s; }
.kpi-toggle-switch input:checked + .kpi-toggle-slider { background: rgba(255,255,255,0.5); }
.kpi-toggle-switch input:checked + .kpi-toggle-slider:before { transform: translateX(16px); }
.kpi-toggle-slider-dark { position: absolute; cursor: pointer; inset: 0; background: #d1d5db; border-radius: 20px; transition: 0.3s; }
.kpi-toggle-slider-dark:before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: 0.3s; }
.kpi-toggle-switch input:checked + .kpi-toggle-slider-dark { background: #3b82f6; }
.kpi-toggle-switch input:checked + .kpi-toggle-slider-dark:before { transform: translateX(16px); }

/* Modal Magento */
.modal-magento { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 250; }
.modal-magento.show { display: flex; }
.modal-magento-content { background: #fff; border-radius: 16px; width: 90%; max-width: 360px; overflow: hidden; }
.modal-magento-header { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: #fff; padding: 16px; text-align: center; }
.modal-magento-header h3 { font-size: 16px; margin-bottom: 4px; }
.modal-magento-header p { font-size: 12px; opacity: 0.9; }
.modal-magento-body { padding: 16px; }
.magento-carrito-info { background: #f8f9fa; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.magento-info-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.magento-info-row:last-child { margin-bottom: 0; }
.magento-info-label { color: #666; }
.magento-info-value { font-weight: 600; color: #333; }
.magento-link-container { margin-bottom: 16px; }
.magento-link-container label { display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.magento-link-input { width: calc(100% - 56px); padding: 10px; border: 1px solid #e0e0e0; border-radius: 8px 0 0 8px; font-size: 12px; display: inline-block; }
.magento-link-copy { width: 48px; padding: 10px; background: #f0f0f0; border: 1px solid #e0e0e0; border-left: none; border-radius: 0 8px 8px 0; cursor: pointer; font-size: 12px; display: inline-block; text-align: center; }
.magento-link-copy:hover { background: #e8e8e8; }
.modal-magento-actions { display: flex; gap: 8px; }
.modal-magento-btn { flex: 1; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; }
.modal-magento-btn.primary { background: #22c55e; color: #fff; }
.modal-magento-btn.secondary { background: #f0f0f0; color: #666; }

.badge.gray { background: #f3f4f6; color: #6b7280; }
.client-card { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; }
.client-info { flex: 1; }
.client-name { font-size: 14px; font-weight: 600; color: #333; }
.client-segment { font-size: 11px; color: #666; }
.client-semaforos { display: flex; gap: 6px; margin-top: 6px; }
.client-semaforo { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 8px; background: #f8f8f8; }
.client-semaforo-icon { width: 12px; height: 12px; border-radius: 50%; margin-bottom: 2px; }
.client-semaforo-icon.green { background: #22c55e; }
.client-semaforo-icon.yellow { background: #eab308; }
.client-semaforo-icon.red { background: #ef4444; }
.client-semaforo-icon.gray { background: #9ca3af; }
.client-semaforo-value.sin-datos { color: #ef4444; font-weight: 600; }
.client-semaforo-label { font-size: 8px; color: #888; text-transform: uppercase; }
.client-semaforo-value { font-size: 11px; font-weight: 700; color: #333; }
.semaforo-type-selector { display: flex; gap: 8px; margin-bottom: 12px; }
.semaforo-type-selector { display: flex; background: #f0f0f0; border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.semaforo-type-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; text-align: center; font-size: 12px; font-weight: 600; border-radius: 8px; cursor: pointer; color: #666; border: none; background: transparent; }
.semaforo-type-btn .semaforo-type-icon { font-size: 14px; line-height: 1; }
.semaforo-type-btn .semaforo-type-label { line-height: 1; }
.semaforo-type-btn.active { background: #fff; color: #333; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.semaforo-type-icon { font-size: 20px; margin-bottom: 4px; }
.semaforo-type-label { font-size: 11px; font-weight: 600; color: #333; }
.filter-pills { display: flex; gap: 6px; margin-bottom: 12px; }
.filter-pill { padding: 6px 10px; border-radius: 16px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid #e0e0e0; background: #fff; color: #666; text-align: center; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.filter-pill-icon { font-size: 16px; line-height: 1.2; }
.filter-pill-label { white-space: nowrap; }
.filter-pill-count { font-size: 10px; font-weight: 400; opacity: 0.75; white-space: nowrap; }
.filter-pill.active { background: #333; color: #fff; border-color: #333; }

/* ════════════════════════════════════════════════════════════════════════════
   TARJETAS DE VISITA CON HORARIO (Ruta del día desde Planner)
   ════════════════════════════════════════════════════════════════════════════ */
.visita-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.visita-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.visita-card.visita-completada {
    background: #f9fafb;
}

.visita-card.visita-completada .visita-cliente-nombre {
    text-decoration: line-through;
    color: #9ca3af;
}

.visita-orden {
    flex-shrink: 0;
}

.visita-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #f3f4f6;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #666;
}

.visita-horario {
    flex-shrink: 0;
    width: 50px;
    text-align: center;
}

.visita-hora-inicio {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.visita-hora-fin {
    font-size: 10px;
    color: #999;
}

.visita-horas-reales {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.visita-hora-inicio-real {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}
.visita-hora-fin-real {
    font-size: 11px;
    color: #059669;
    font-weight: 600;
}

.visita-cliente-info {
    flex: 1;
    min-width: 0;
}

.visita-cliente-nombre {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visita-cliente-meta {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

.visita-direccion {
    font-size: 10px;
    color: #888;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visita-semaforos {
    flex-shrink: 0;
}

.visita-semaforo-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.visita-semaforo-dot.green { background: #22c55e; }
.visita-semaforo-dot.yellow { background: #eab308; }
.visita-semaforo-dot.red { background: #ef4444; }
.visita-semaforo-dot.gray { background: #9ca3af; }

/* Filtros sticky de Mi Cartera */
.cartera-filtros-sticky {
    position: sticky;
    top: -16px;
    background: #fff;
    margin: 0 -16px;
    padding: 16px 16px 4px 16px;
    z-index: 10;
}
.map-container { height: 280px; background: linear-gradient(135deg, #e8f4ea 0%, #d4e8d8 100%); border-radius: 12px; margin-bottom: 16px; position: relative; }
.map-route { position: absolute; top: 40px; left: 20px; width: 280px; height: 200px; }
.map-marker { position: absolute; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.map-marker span { transform: rotate(45deg); }
.map-marker.current { background: #3b82f6; top: 150px; left: 15px; }
.map-marker.m1 { background: #22c55e; top: 35px; left: 55px; }
.map-marker.m2 { background: #22c55e; top: 75px; left: 120px; }
.map-marker.m3 { background: #22c55e; top: 50px; left: 180px; }
.map-marker.m4 { background: #eab308; top: 100px; left: 230px; }
.map-marker.m5 { background: #eab308; top: 25px; left: 250px; }
.map-label { position: absolute; top: 100%; left: 50%; transform: rotate(45deg) translateX(-50%); background: rgba(255,255,255,0.85); color: #555; font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 4px; white-space: nowrap; margin-top: 4px; z-index: 10; }
.route-info { background: #fff; border-radius: 12px; padding: 12px; }
.route-stats { display: flex; justify-content: space-around; text-align: center; }
.route-stat-value { font-size: 18px; font-weight: 700; color: #333; }
.route-stat-label { font-size: 10px; color: #666; }
.client-header { background: linear-gradient(135deg, #F2C811 0%, #E8B708 100%); margin: 0; padding: 12px 16px 14px; color: #000; position: sticky; top: 0; z-index: 20; border-radius: 12px 12px 0 0; }
.back-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; opacity: 0.8; margin-bottom: 4px; cursor: pointer; }
.detail-client-name { font-size: 16px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-client-segment { font-size: 12px; opacity: 0.8; margin-top: 2px; }
.detail-client-address { font-size: 11px; opacity: 0.7; margin-top: 1px; line-height: 1.3; }
.detail-semaforos { display: flex; gap: 8px; margin-top: 8px; }
.detail-semaforo { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 16px; font-size: 11px; font-weight: 600; }
.detail-semaforo.green { background: #16a34a; color: #fff; }
.detail-semaforo.yellow { background: #facc15; color: #000; }
.detail-semaforo.red { background: #dc2626; color: #fff; }
.detail-semaforo.gray { background: #6b7280; color: #fff; }
.metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.metric-box { background: #f8f9fa; border-radius: 10px; padding: 10px; text-align: center; position: relative; }
.metric-box.green { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border: 1px solid #86efac; }
.metric-box.yellow { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border: 1px solid #fcd34d; }
.metric-box.red { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border: 1px solid #fca5a5; }
.metric-status { position: absolute; top: 4px; right: 6px; font-size: 10px; }
.metric-value { font-size: 18px; font-weight: 700; color: #333; }
.metric-box.green .metric-value { color: #16a34a; }
.metric-box.yellow .metric-value { color: #d97706; }
.metric-box.red .metric-value { color: #dc2626; }
.metric-label { font-size: 9px; color: #666; margin-top: 2px; }
.metric-obj { font-size: 8px; color: #888; margin-top: 3px; }
.action-grid { display: flex; overflow-x: auto; gap: 6px; margin-bottom: 14px; padding-bottom: 4px; scrollbar-width: none; }
.action-grid::-webkit-scrollbar { display: none; }
.action-btn { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 10px 4px; text-align: center; cursor: pointer; flex: 0 0 60px; min-width: 60px; }
.action-btn:hover { background: #f5f5f5; border-color: #F2C811; }
.action-btn-icon { font-size: 18px; margin-bottom: 2px; }
.action-btn-label { font-size: 8px; color: #666; }
.detail-card { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.detail-title { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 8px; }
.detail-title-collapsible { font-size: 12px; font-weight: 600; color: #333; display: flex; justify-content: space-between; align-items: center; cursor: pointer; margin-bottom: 0; user-select: none; }
.detail-title-collapsible:hover { opacity: 0.75; }
.detail-collapse-chevron { font-size: 11px; color: #999; transition: transform 0.2s; }
.detail-collapse-chevron.open { transform: rotate(90deg); }
.detail-count-badge { font-size: 10px; font-weight: 600; background: #e5e7eb; color: #6b7280; padding: 1px 6px; border-radius: 10px; margin-left: 4px; }
.abandoned-item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 12px; }
.abandoned-item:last-child { border-bottom: none; }
.abandoned-impact { color: #ef4444; font-weight: 600; }

.btn-inicio-visita { width: 100%; padding: 14px; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); border: none; border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); }
.btn-inicio-visita.active { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }
.cronometro { background: #1a1a2e; border-radius: 12px; padding: 16px; margin-bottom: 14px; text-align: center; color: #fff; }
.cronometro-label { font-size: 11px; opacity: 0.7; margin-bottom: 4px; }
.cronometro-tiempo { font-size: 36px; font-weight: 700; font-family: 'Courier New', monospace; letter-spacing: 2px; }
.cronometro-estado { font-size: 11px; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.cronometro-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: blink 1s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.btn-fin-visita { width: 100%; padding: 14px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border: none; border-radius: 12px; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
.note-form { background: linear-gradient(135deg, #fff9e6 0%, #fff 100%); border: 2px solid #F2C811; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.form-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 12px; }
.form-group { margin-bottom: 12px; }
.form-label { font-size: 11px; font-weight: 600; color: #555; margin-bottom: 4px; display: block; }
.form-input, .form-textarea, .form-select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; font-family: inherit; }
.form-textarea { min-height: 120px; resize: vertical; }
.voice-container { position: relative; }
.voice-container .form-textarea { padding-right: 48px; }
.voice-btn { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border-radius: 50%; border: none; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; font-size: 16px; cursor: pointer; }
.voice-btn.recording { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.toggle-row:last-child { border-bottom: none; }
.toggle-label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.toggle-icon { font-size: 16px; }
.toggle-switch { width: 40px; height: 22px; background: #ddd; border-radius: 11px; position: relative; cursor: pointer; }
.toggle-switch.active { background: #22c55e; }
.toggle-switch::after { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: left 0.2s; }
.toggle-switch.active::after { left: 20px; }
.save-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, #F2C811 0%, #E8B708 100%); border: none; border-radius: 10px; font-size: 14px; font-weight: 600; color: #000; cursor: pointer; }
.task-card { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; gap: 10px; }
.task-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.task-icon.planner { background: #dcfce7; }
.task-icon.outlook { background: #dbeafe; }
.task-content { flex: 1; }
.task-title { font-size: 13px; font-weight: 600; color: #333; }
.task-client { font-size: 11px; color: #666; margin-top: 2px; }
.task-date { font-size: 10px; color: #999; margin-top: 2px; }
.task-action { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #e0e0e0; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; }
.toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(50px); background: #333; color: #fff; padding: 10px 20px; border-radius: 10px; font-size: 13px; opacity: 0; transition: all 0.3s; z-index: 1000; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.success { background: #16a34a; }
.note-item { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.note-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.note-date { font-size: 11px; color: #666; }
.note-contact { font-size: 11px; font-weight: 600; color: #333; }
.note-content { font-size: 12px; color: #444; }
.note-badges { display: flex; gap: 4px; margin-top: 4px; }
.note-badge { font-size: 9px; padding: 2px 6px; border-radius: 4px; }
.note-badge.voice { background: #f0f0f0; color: #666; }
.note-badge.time { background: #dbeafe; color: #2563eb; }

/* Estilos Email */
.email-item { display: flex; gap: 12px; padding: 12px; background: #fff; border-radius: 10px; margin-bottom: 8px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.email-item:hover { background: #f8f9fa; }
.email-item.unread { background: #eff6ff; border-left: 3px solid #3b82f6; }
.email-item.unread .email-sender, .email-item.unread .email-subject { font-weight: 700; }
.email-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.email-content { flex: 1; min-width: 0; }
.email-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.email-sender { font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-time { font-size: 11px; color: #888; flex-shrink: 0; margin-left: 8px; }
.email-subject { font-size: 13px; color: #333; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-preview { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Emails en ficha cliente */
.client-emails { margin-top: 12px; }
.client-email-item { display: flex; gap: 10px; padding: 10px; background: #f8f9fa; border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.client-email-item:hover { background: #f0f0f0; }
.client-email-icon { font-size: 16px; }
.client-email-info { flex: 1; min-width: 0; }
.client-email-subject { font-size: 12px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-email-date { font-size: 10px; color: #888; }

/* Estilos Pedidos */
.pedido-card { background: #fff; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; cursor: pointer; }
.pedido-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.pedido-header { display: flex; align-items: center; padding: 14px; gap: 12px; }
.pedido-cliente { display: flex; align-items: center; gap: 10px; flex: 1; }
.pedido-avatar { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }
.pedido-nombre { font-size: 14px; font-weight: 600; color: #333; }
.pedido-hora { font-size: 11px; color: #888; }
.pedido-importe { font-size: 18px; font-weight: 700; color: #22c55e; }
.pedido-chevron { font-size: 20px; color: #ccc; transition: transform 0.2s; }
.pedido-chevron.open { transform: rotate(90deg); }
.pedido-detalle { background: #f8f9fa; padding: 12px 14px; border-top: 1px solid #e0e0e0; }
.pedido-linea { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #e8e8e8; font-size: 13px; }
.pedido-linea:last-of-type { border-bottom: none; }
.pedido-producto { flex: 1; color: #333; }
.pedido-qty { color: #666; margin: 0 12px; min-width: 35px; text-align: center; }
.pedido-precio { font-weight: 600; color: #333; min-width: 65px; text-align: right; }
.pedido-total { display: flex; justify-content: space-between; padding: 12px 0 8px; margin-top: 8px; border-top: 2px solid #22c55e; font-weight: 700; font-size: 14px; color: #22c55e; }
.pedido-acciones { display: flex; gap: 8px; margin-top: 12px; }
.pedido-acciones button { flex: 1; padding: 10px; border: 1px solid #e0e0e0; background: #fff; border-radius: 8px; font-size: 12px; cursor: pointer; }
.pedido-acciones button:hover { background: #f0f0f0; }

/* Pedidos del cliente */
.client-pedidos { margin-top: 8px; }
.client-pedido-item { background: #f8f9fa; border-radius: 8px; margin-bottom: 8px; overflow: hidden; cursor: pointer; }
.client-pedido-item:hover { background: #f0f0f0; }
.client-pedido-header { display: flex; align-items: center; padding: 10px 12px; gap: 10px; }
.client-pedido-info { flex: 1; }
.client-pedido-fecha { font-size: 12px; font-weight: 600; color: #333; }
.client-pedido-lineas { font-size: 10px; color: #888; }
.client-pedido-importe { font-size: 14px; font-weight: 700; color: #22c55e; }
.client-pedido-chevron { font-size: 16px; color: #ccc; transition: transform 0.2s; }
.client-pedido-chevron.open { transform: rotate(90deg); }
.client-pedido-detalle { background: #fff; padding: 10px 12px; border-top: 1px solid #e0e0e0; }
.cp-linea { display: flex; justify-content: space-between; padding: 6px 0; font-size: 11px; border-bottom: 1px solid #f0f0f0; }
.cp-linea:last-of-type { border-bottom: none; }
.cp-linea span:first-child { flex: 1; color: #555; }
.cp-linea span:nth-child(2) { color: #888; min-width: 30px; text-align: center; }
.cp-linea span:last-child { font-weight: 600; color: #333; min-width: 45px; text-align: right; }
.cp-actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e0e0e0; }
.cp-actions button { width: 100%; padding: 8px; background: #f0f9ff; border: 1px solid #3b82f6; color: #3b82f6; border-radius: 6px; font-size: 12px; cursor: pointer; }

/* Asistente de voz */
.asistente-escuchando { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 24px; position: relative; }
.pulse-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); animation: pulse-anim 1.5s ease-out infinite; }
@keyframes pulse-anim { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.comando-voz-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 8px 12px; border-radius: 20px; font-size: 11px; cursor: pointer; }
.comando-voz-btn:hover { background: rgba(255,255,255,0.25); }
.dialogo-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.dialogo-avatar { font-size: 16px; }
.dialogo-texto { color: #fff; line-height: 1.4; }
.dialogo-item.usuario .dialogo-texto { color: #a5f3fc; }

/* Microsoft Copilot */
.copilot-fab { position: absolute; bottom: 85px; right: 16px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #7B68EE 0%, #9D4EDD 100%); border: none; box-shadow: 0 4px 15px rgba(123,104,238,0.4); cursor: pointer; z-index: 60; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s; }
.copilot-fab:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(123,104,238,0.5); }
.copilot-fab:active { transform: scale(0.95); }
.copilot-fab svg { width: 28px; height: 28px; }
.copilot-fab.listening { animation: copilot-pulse 1.5s ease-in-out infinite; }
@keyframes copilot-pulse { 0%, 100% { box-shadow: 0 4px 15px rgba(123,104,238,0.4); } 50% { box-shadow: 0 4px 25px rgba(123,104,238,0.7), 0 0 0 10px rgba(123,104,238,0.1); } }

/* ═══════════════════════════════════════════════════════════════════════════
   COPILOT MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.copilot-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(0,0,0,0.5); 
    z-index: 199; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s, visibility 0.3s; 
    backdrop-filter: blur(3px); 
    -webkit-backdrop-filter: blur(3px); 
}
.copilot-overlay.open { 
    opacity: 1; 
    visibility: visible; 
}

.copilot-panel { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) scale(0.9); 
    background: #fff; 
    border-radius: 20px; 
    box-shadow: 0 10px 50px rgba(0,0,0,0.3); 
    z-index: 200; 
    opacity: 0; 
    visibility: hidden; 
    transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s; 
    width: calc(100% - 32px); 
    max-width: 380px; 
    height: 500px; 
    max-height: 75vh; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}
.copilot-panel.open { 
    transform: translate(-50%, -50%) scale(1); 
    opacity: 1; 
    visibility: visible; 
}
.copilot-panel.expanded { 
    width: 100%; 
    max-width: 100%; 
    height: 100%; 
    max-height: 100%; 
    border-radius: 0; 
    top: 0; 
    left: 0; 
    right: 0;
    bottom: 0;
    transform: none;
}

.copilot-panel.expanded .copilot-header {
    border-radius: 0;
}

.copilot-panel.expanded .copilot-input {
    border-radius: 0;
}

.copilot-header { 
    background: linear-gradient(135deg, #7B68EE 0%, #9D4EDD 100%); 
    padding: 14px 16px; 
    border-radius: 20px 20px 0 0; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    flex-shrink: 0;
}
.copilot-logo { 
    width: 36px; 
    height: 36px; 
    background: rgba(255,255,255,0.2); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0;
}
.copilot-logo svg { 
    width: 22px; 
    height: 22px; 
}
.copilot-title { 
    flex: 1; 
    color: #fff; 
}
.copilot-title-main { 
    font-size: 15px; 
    font-weight: 600; 
}
.copilot-title-sub { 
    font-size: 10px; 
    opacity: 0.8; 
}
.copilot-close { 
    width: 32px; 
    height: 32px; 
    background: rgba(255,255,255,0.2); 
    border: none; 
    border-radius: 50%; 
    color: #fff; 
    font-size: 18px; 
    cursor: pointer; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.copilot-close:active {
    background: rgba(255,255,255,0.3);
}
.copilot-tts-btn.tts-activo {
    background: rgba(255,255,255,0.45);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}

.copilot-chat { 
    flex: 1; 
    overflow-y: auto; 
    padding: 14px; 
    background: #f8f9fa; 
    min-height: 0;
}
.copilot-msg { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 12px; 
    align-items: flex-start;
}
.copilot-msg.user { 
    flex-direction: row-reverse; 
}
.copilot-msg-avatar { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 14px; 
    flex-shrink: 0; 
}
.copilot-msg.bot .copilot-msg-avatar { 
    background: linear-gradient(135deg, #7B68EE 0%, #9D4EDD 100%); 
}
.copilot-msg.user .copilot-msg-avatar { 
    background: #e0e0e0; 
}
.copilot-msg-bubble { 
    max-width: 80%; 
    padding: 10px 14px; 
    border-radius: 16px; 
    font-size: 13px; 
    line-height: 1.5; 
}
.copilot-msg.bot .copilot-msg-bubble { 
    background: #fff; 
    color: #333; 
    border-bottom-left-radius: 4px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); 
}
.copilot-msg.user .copilot-msg-bubble { 
    background: #7B68EE; 
    color: #fff; 
    border-bottom-right-radius: 4px; 
}

.copilot-suggestions { 
    padding: 12px 16px; 
    background: #fff; 
    border-top: 1px solid #eee; 
    flex-shrink: 0; 
}
.copilot-suggestions-title { 
    font-size: 9px; 
    color: #999; 
    margin-bottom: 8px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}
.copilot-suggestion-chips { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px; 
}
.copilot-chip { 
    background: #f5f5f5; 
    border: 1px solid #e8e8e8; 
    padding: 6px 10px; 
    border-radius: 16px; 
    font-size: 11px; 
    color: #555; 
    cursor: pointer; 
    transition: all 0.2s; 
    white-space: nowrap; 
}
.copilot-chip:active { 
    background: #ede8ff; 
    border-color: #7B68EE; 
    color: #7B68EE; 
}

.copilot-input { 
    display: flex; 
    gap: 10px; 
    padding: 12px 16px; 
    background: #fff; 
    border-top: 1px solid #e0e0e0; 
    border-radius: 0 0 20px 20px; 
    flex-shrink: 0;
}
.copilot-input input { 
    flex: 1; 
    border: 1px solid #e0e0e0; 
    border-radius: 24px; 
    padding: 10px 16px; 
    font-size: 14px; 
    outline: none; 
}
.copilot-input input:focus { 
    border-color: #7B68EE; 
}
.copilot-mic { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: linear-gradient(135deg, #7B68EE 0%, #9D4EDD 100%); 
    border: none; 
    color: #fff; 
    font-size: 16px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
}
.copilot-mic.recording { 
    animation: copilot-pulse 1s ease-in-out infinite; 
}

@keyframes copilot-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 0 15px rgba(123, 104, 238, 0.5); }
}

.copilot-action-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 12px; margin-top: 8px; }
.copilot-action-title { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.copilot-action-desc { font-size: 11px; color: #666; margin-bottom: 10px; }
.copilot-action-btn { background: #7B68EE; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-size: 12px; cursor: pointer; }

/* Vista Mi Cartera */
.cartera-cliente { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border-radius: 12px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); cursor: pointer; transition: all 0.2s; }
.cartera-cliente:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.12); transform: translateY(-1px); }
.cartera-cliente-avatar { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.cartera-cliente-info { flex: 1; min-width: 0; }
.cartera-cliente-nombre { font-size: 14px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartera-cliente-detalle { font-size: 11px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartera-cliente-kpis { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cartera-cliente-kpis .semaforos-row { display: flex; flex-direction: row; gap: 4px; }
.cartera-cliente-semaforo { width: 12px; height: 12px; border-radius: 50%; }
.cartera-cliente-semaforo.green { background: #22c55e; }
.cartera-cliente-semaforo.yellow { background: #eab308; }
.cartera-cliente-semaforo.red { background: #ef4444; }
.cartera-cliente-semaforo.gray { background: #9ca3af; }
.cartera-cliente-dias { font-size: 11px; color: #666; font-weight: 600; display: flex; align-items: center; gap: 3px; }

/* Pill "Ver todas" */
.pill-ver-todas {
    background: #eff6ff;
    color: #3b82f6;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 4px;
}

/* Panel Objetivos Personales */
.objetivos-panel { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 1px solid #93c5fd; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.objetivos-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.objetivos-title { font-size: 13px; font-weight: 700; color: #1e40af; }
.objetivos-dias { font-size: 11px; color: #3b82f6; background: #fff; padding: 3px 8px; border-radius: 10px; }
.objetivo-item { margin-bottom: 10px; }
.objetivo-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.objetivo-label { font-size: 12px; color: #1e40af; font-weight: 600; }
.objetivo-valores { font-size: 12px; color: #333; }
.objetivo-de { color: #666; font-weight: 400; }
.objetivo-barra { height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; }
.objetivo-progreso { height: 100%; background: #22c55e; border-radius: 3px; transition: width 0.5s; }
.objetivo-progreso.yellow { background: #eab308; }
.objetivo-progreso.red { background: #ef4444; }
.objetivo-progreso.green-bright { background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%); }
.objetivo-mensaje { font-size: 10px; margin-top: 3px; }
.objetivo-mensaje.green { color: #16a34a; }
.objetivo-mensaje.green-bright { color: #059669; font-weight: 600; }
.objetivo-mensaje.yellow { color: #ca8a04; }
.objetivo-mensaje.red { color: #dc2626; }
.objetivo-bonus { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); padding: 8px 10px; border-radius: 8px; font-size: 11px; color: #92400e; margin-top: 10px; }
@keyframes celebracion-bounce { 0%, 100% { transform: scale(1) rotate(-5deg); } 50% { transform: scale(1.3) rotate(5deg); } }
#bonusComisionesCelebracion { display: inline-block; font-size: 28px; animation: celebracion-bounce 0.8s ease-in-out infinite; margin-left: 6px; vertical-align: middle; }

/* Gamificación - Rachas y Logros */
.gamificacion-panel { display: flex; gap: 8px; margin-top: 10px; }
.racha-card { flex: 1; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-radius: 10px; padding: 10px; text-align: center; }
.racha-icono { font-size: 24px; margin-bottom: 4px; }
.racha-numero { font-size: 20px; font-weight: 800; color: #92400e; }
.racha-texto { font-size: 10px; color: #a16207; }
.logros-card { flex: 1.5; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-radius: 10px; padding: 10px; }
.logros-titulo { font-size: 11px; font-weight: 600; color: #166534; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.logro-item { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #15803d; margin-bottom: 4px; }
.logro-item:last-child { margin-bottom: 0; }
.logro-badge { background: #22c55e; color: #fff; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; }
.logro-nuevo { animation: pulse-logro 1s ease-in-out infinite; }
@keyframes pulse-logro { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* Vista Pedidos del Mes */
.pedido-mes-item { background: #fff; border-radius: 10px; margin-bottom: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); cursor: pointer; }
.pedido-mes-header { display: flex; align-items: center; padding: 12px; gap: 8px; }
.pedido-mes-fecha { font-size: 11px; color: #888; min-width: 70px; }
.pedido-mes-cliente { flex: 1; font-size: 13px; font-weight: 600; color: #333; }
.pedido-mes-importe { font-size: 14px; font-weight: 700; color: #16a34a; }
.pedido-mes-chevron { font-size: 16px; color: #ccc; transition: transform 0.2s; margin-left: 4px; }
.pedido-mes-chevron.open { transform: rotate(90deg); }
.pedido-mes-detalle { background: #f8f9fa; padding: 10px 12px; border-top: 1px solid #e0e0e0; }
.pm-linea { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; border-bottom: 1px solid #f0f0f0; }
.pm-linea:last-child { border-bottom: none; }
.pm-linea span:first-child { flex: 1; color: #555; }
.pm-linea span:nth-child(2) { color: #888; min-width: 35px; text-align: center; }
.pm-linea span:last-child { font-weight: 600; color: #333; min-width: 50px; text-align: right; }
    

/* ========== BLOQUE SEPARADOR ========== */


@keyframes pulse-voice {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(255,255,255,0); }
}
/* ═══════════════════════════════════════════════════════════════════════════
 * CLASES UTILITARIAS (reemplazo de estilos inline)
 * ═══════════════════════════════════════════════════════════════════════════ */

   ============================================================ */
.hidden { display: none; }
.visible { display: block; }
.flex-visible { display: flex; }

/* ============================================================
   2. UTILIDADES DE LAYOUT - FLEXBOX
   ============================================================ */
.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-between-start { display: flex; justify-content: space-between; align-items: flex-start; }
.flex-between-start-alt { display: flex; justify-content: space-between; align-items: start; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }

.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }

.flex-gap-6-center { display: flex; gap: 6px; align-items: center; }
.flex-gap-8 { display: flex; gap: 8px; }
.flex-gap-8-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.flex-gap-10 { display: flex; gap: 10px; }
.flex-gap-12 { display: flex; gap: 12px; }

/* ============================================================
   3. UTILIDADES DE ESPACIADO
   ============================================================ */
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mt-2 { margin-top: 2px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.ml-8 { margin-left: 8px; }
.mr-8 { margin-right: 8px; }

.p-0 { padding: 0; }
.p-8 { padding: 8px; }
.p-10 { padding: 10px; }
.p-12 { padding: 12px; }
.p-14 { padding: 14px; }
.p-16 { padding: 16px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }

.content-no-padding { padding: 0; padding-bottom: 70px; }
.content-no-top-padding { padding-top: 0; }
.content-bottom-80 { padding-bottom: 80px; }
.content-bottom-90 { padding-bottom: 90px; }

/* ============================================================
   4. UTILIDADES DE TEXTO
   ============================================================ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.font-9 { font-size: 9px; }
.font-10 { font-size: 10px; }
.font-11 { font-size: 11px; }
.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; }
.font-22 { font-size: 22px; }
.font-24 { font-size: 24px; }
.font-32 { font-size: 32px; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.line-through { text-decoration: line-through; }
.uppercase { text-transform: uppercase; }
.letter-spacing-05 { letter-spacing: 0.5px; }
.line-height-16 { line-height: 1.6; }
.line-height-15 { line-height: 1.5; }
.whitespace-nowrap { white-space: nowrap; }
.overflow-hidden { overflow: hidden; }

/* Combinaciones comunes de texto */
.text-label { font-size: 12px; color: #666; }
.text-label-sm { font-size: 11px; color: #888; }
.text-label-xs { font-size: 10px; color: #666; }
.text-label-tiny { font-size: 9px; color: #666; margin-top: 2px; }
.text-meta { font-size: 12px; color: #999; }
.text-muted { color: #666; font-size: 9px; }
.text-primary { font-size: 14px; font-weight: 600; color: #333; }
.text-primary-sm { font-size: 12px; font-weight: 600; color: #333; }
.text-title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 10px; }
.text-title-section { font-size: 12px; font-weight: 600; color: #666; margin-bottom: 8px; }
.text-value { font-weight: 600; font-size: 14px; color: #333; }
.text-value-lg { font-size: 16px; font-weight: 700; }
.text-disabled { font-size: 14px; font-weight: 600; color: #999; }
.text-ccc { font-size: 12px; color: #ccc; }
.text-small-detail { font-size: 10px; opacity: 0.8; }
.text-small-muted { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #666; }

/* ============================================================
   5. COLORES DE TEXTO
   ============================================================ */
.color-333 { color: #333; }
.color-666 { color: #666; }
.color-888 { color: #888; }
.color-999 { color: #999; }
.color-ccc { color: #ccc; }
.color-fff { color: #fff; }
.color-blue { color: #3b82f6; }
.color-green { color: #16a34a; }
.color-green-dark { color: #166534; }
.color-yellow-dark { color: #a16207; }
.color-red-dark { color: #991b1b; }
.color-yellow { color: #b8860b; }
.color-yellow-dark { color: #a16207; }
.color-yellow-darker { color: #92400e; }
.color-red { color: #dc2626; }
.color-red-light { color: #ef4444; }
.color-purple { color: #7c3aed; }

/* ============================================================
   6. FONDOS
   ============================================================ */
.bg-transparent { background: transparent; }
.bg-white { background: #fff; }
.bg-gray-50 { background: #f8f9fa; }
.bg-gray-100 { background: #f3f4f6; }
.bg-gray-light { background: #fafafa; }
.bg-gray-200 { background: #f0f0f0; }

.bg-green-light { background: #dcfce7; }
.bg-green-50 { background: #f0fdf4; }
.bg-blue-light { background: #dbeafe; }
.bg-blue { background: #3b82f6; }
.bg-yellow-light { background: #fef3c7; }
.bg-yellow-50 { background: #FFF9E6; }
.bg-yellow-lighter { background: #FFFDF5; }
.bg-red-light { background: #fee2e2; }
.bg-red-50 { background: #fef2f2; }
.bg-pink-light { background: #fce7f3; }
.bg-purple-light { background: #f3e8ff; }

/* Gradientes */
.bg-gradient-blue { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.bg-gradient-blue-dark { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.bg-gradient-green { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.bg-gradient-green-light { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
.bg-gradient-yellow { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.bg-gradient-red { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); }
.bg-gradient-gray { background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%); }
.bg-gradient-purple { background: linear-gradient(135deg, #7B68EE 0%, #9D4EDD 100%); }
.bg-gradient-purple-light { background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); }
.bg-gradient-whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); }
.bg-gradient-progress { background: linear-gradient(90deg, #22c55e, #16a34a); }

/* ============================================================
   7. BORDES Y RADIOS
   ============================================================ */
.rounded-4 { border-radius: 4px; }
.rounded-6 { border-radius: 6px; }
.rounded-8 { border-radius: 8px; }
.rounded-10 { border-radius: 10px; }
.rounded-12 { border-radius: 12px; }
.rounded-16 { border-radius: 16px; }
.rounded-20 { border-radius: 20px; }
.rounded-24 { border-radius: 24px; }
.rounded-full { border-radius: 50%; }

.border-none { border: none; }
.border-gray { border: 1px solid #e0e0e0; }
.border-gray-light { border: 1px solid #ddd; }
.border-gray-lighter { border: 1px solid #f0f0f0; }
.border-blue { border: 2px solid #3b82f6; }
.border-green { border: 1px solid #86efac; }
.border-bottom-gray { border-bottom: 1px solid #e0e0e0; }
.border-bottom-gray-light { border-bottom: 1px solid #f0f0f0; }

/* Bordes laterales para eventos calendario */
.border-left-yellow { border-left: 3px solid #eab308; }
.border-left-green { border-left: 3px solid #22c55e; }
.border-left-red { border-left: 3px solid #ef4444; }
.border-left-gray { border-left: 3px solid #9ca3af; }
.border-left-purple { border-left: 3px solid #a855f7; }
.border-left-blue { border-left: 3px solid #3b82f6; }

/* ============================================================
   8. SOMBRAS
   ============================================================ */
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.shadow-md { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.shadow-lg { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.shadow-xl { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.shadow-blue { box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
.shadow-voice { box-shadow: 0 10px 40px rgba(0,0,0,0.3); }

/* ============================================================
   9. CURSOR
   ============================================================ */
.cursor-pointer { cursor: pointer; }

/* ============================================================
   10. DIMENSIONES
   ============================================================ */
.w-full { width: 100%; }
.w-32 { width: 32px; }
.w-36 { width: 36px; }
.w-44 { width: 44px; }
.w-48 { width: 48px; }
.w-60 { width: 60px; }
.h-32 { height: 32px; }
.h-36 { height: 36px; }
.h-44 { height: 44px; }
.h-48 { height: 48px; }
.h-60 { height: 48px; }
.h-full { height: 100%; }
.min-h-350 { min-height: 350px; }
.max-h-150 { max-height: 150px; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.flex-shrink-0 { flex-shrink: 0; }

/* ============================================================
   11. OPACIDAD
   ============================================================ */
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

/* ============================================================
   12. Z-INDEX
   ============================================================ */
.z-1 { z-index: 1; }
.z-1000 { z-index: 1000; }

/* ============================================================
   13. POSICIONAMIENTO
   ============================================================ */
.position-fixed { position: fixed; }
.position-absolute { position: absolute; }
.position-relative { position: relative; }
.center-absolute { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.bottom-52 { bottom: 52px; }
.left-0 { left: 0; }
.right-0 { right: 0; }

/* ============================================================
   14. INDICADORES DE SEMÁFORO
   ============================================================ */
.semaforo-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.semaforo-dot-green { background: #22c55e; }
.semaforo-dot-yellow { background: #eab308; }
.semaforo-dot-red { background: #ef4444; }

.semaforo-indicator {
    text-align: center;
}
.semaforo-indicator .semaforo-dot {
    margin: 0 auto;
}
.semaforo-indicator-label {
    font-size: 9px;
    color: #666;
    margin-top: 2px;
}

/* ============================================================
   15. BADGES Y PILLS
   ============================================================ */
.badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}
.badge-green { background: #dcfce7; color: #16a34a; }
.badge-yellow { background: #fef3c7; color: #a16207; }
.badge-red { background: #fee2e2; color: #dc2626; }
.badge-blue { background: #dbeafe; color: #2563eb; }
.badge-gray { background: #f3f4f6; color: #6b7280; }

.pill {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.pill-yellow { background: #fef3c7; color: #a16207; }
.pill-green { background: #dcfce7; color: #16a34a; }
.pill-red { background: #fee2e2; color: #dc2626; }
.pill-blue { background: #dbeafe; color: #2563eb; }
.pill-orange { background: #ffedd5; color: #c2410c; }

.status-pill {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.status-en-progreso { background: #fef3c7; color: #a16207; }
.status-completado { background: #dcfce7; color: #16a34a; }
.status-pendiente { background: #fee2e2; color: #dc2626; }
.status-vencido { background: #fee2e2; color: #dc2626; }
.status-alta { background: #fee2e2; color: #dc2626; }
.status-media { background: #fef3c7; color: #a16207; }

/* ============================================================
   16. BOTONES
   ============================================================ */
.btn {
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.btn-primary {
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
}

.btn-primary-lg {
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary {
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}

.btn-secondary-lg {
    background: #f3f4f6;
    color: #333;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-success {
    background: #22c55e;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-whatsapp {
    background: #25D366;
}

.btn-outline {
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

.btn-pill {
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.btn-icon-circle {
    background: rgba(255,255,255,0.2);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}

.btn-icon-circle-lg {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7B68EE 0%, #9D4EDD 100%);
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

.btn-nav-full {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}

.btn-outlook {
    background: #0078d4;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    cursor: pointer;
}

.btn-date-arrow {
    background: #fff;
    border: 1px solid #ddd;
}

.btn-date-today {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 6px;
}

.btn-carrito-secondary {
    background: #f0f0f0;
    color: #333;
}

.btn-icon-transparent {
    background: none;
    border: none;
    cursor: pointer;
}

/* ============================================================
   17. INPUTS
   ============================================================ */
.input-search {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
}

.search-wrap {
    position: relative;
    display: block;
}
.search-wrap input {
    padding-right: 28px !important;
}
.search-clear-btn {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 15px;
    line-height: 1;
    padding: 2px 4px;
    display: none;
}
.search-clear-btn.visible { display: block; }
.search-clear-btn:hover   { color: #374151; }

.input-chat {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    font-size: 14px;
    outline: none;
}

.select-basic {
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 12px;
}

.textarea-wa {
    height: 80px;
}

/* ============================================================
   18. TARJETAS Y CONTENEDORES
   ============================================================ */
.card-white {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.card-white-lg {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.card-stats {
    flex: 1;
    background: #f0fdf4;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.card-stats-value {
    font-size: 22px;
    font-weight: 700;
    color: #16a34a;
}

.card-stats-label {
    font-size: 10px;
    color: #166534;
}

.card-campaign {
    background: #fef3c7;
    padding: 8px;
    border-radius: 8px;
}

.card-campaign-title {
    font-weight: 600;
    color: #92400e;
    font-size: 13px;
}

.card-campaign-date {
    font-size: 11px;
    color: #a16207;
}

.card-cliente-vinculado {
    background: #fef2f2;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.card-acciones-rapidas {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 14px;
}

.card-progress {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.card-email-body {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.card-chat-message {
    background: #f0f0f0;
    padding: 12px;
    border-radius: 12px;
    font-size: 13px;
}

.card-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7B68EE 0%, #9D4EDD 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

/* ============================================================
   19. CALENDARIO - CELDAS DE TABLA
   ============================================================ */
.calendar-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    table-layout: fixed;
}


/* ═══════════════════════════════════════════════════════════════════════
   NUEVO: Header de días FIJO (fuera de la tabla)
   ═══════════════════════════════════════════════════════════════════════ */
#calendarSemana {
    display: block;
    height: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.calendar-header-fixed {
    display: flex;
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    z-index: 10;
}

.calendar-header-time-spacer {
    flex: 0 0 28px;
    min-width: 28px;
}

.calendar-header-day {
    flex: 1;
    padding: 8px 4px;
    text-align: center;
    background: #fff;
    min-width: 0;
}

.calendar-header-day.calendar-header-today {
    background: #FFF9E6;
}

.calendar-header-day.calendar-header-weekend {
    background: #fafafa;
    flex: 0.625; /* 10% vs 16% = 0.625 */
}

.calendar-body-scroll {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.calendar-header-row {
    border-bottom: 1px solid #e0e0e0;
}

/* Header sticky para el calendario semanal */
.calendar-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.calendar-table thead tr {
    background: #fff;
}

.calendar-table thead th {
    background: #fff;
}

.calendar-header-cell {
    padding: 8px 4px;
    text-align: center;
    background: #fff;
}

.calendar-header-cell-time {
    width: 40px;
    max-width: 40px;
    min-width: 40px;
    padding: 8px 2px;
    background: #fff;
    overflow: hidden;
    position: sticky;
    left: 0;
    z-index: 11;
}

/* Header de hoy resaltado */
.calendar-header-today {
    padding: 8px 4px;
    text-align: center;
    background: #FFF9E6 !important;
}

.calendar-day-label {
    font-size: 10px;
    color: #666;
}

.calendar-day-number {
    font-size: 14px;
    font-weight: 600;
    color: #999;
}

.calendar-day-number-today {
    font-size: 14px;
    font-weight: 700;
    color: #F2C811;
}

.calendar-day-weekend {
    font-size: 14px;
    font-weight: 600;
    color: #ccc;
}

.calendar-today-highlight {
    background: #FFF9E6;
    border-radius: 8px;
}

.calendar-time-cell {
    width: 40px;
    max-width: 40px;
    min-width: 40px;
    padding: 4px 4px 4px 0;
    text-align: right;
    font-size: 10px;
    color: #999;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
}

.calendar-cell {
    height: 48px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    position: relative;
    vertical-align: top;
    padding: 2px;
}

.calendar-cell-event {
    height: 48px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    padding: 2px;
    position: relative;
    vertical-align: top;
}

.calendar-cell-today {
    height: 48px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    background: #FFF9E6 !important;
    position: relative;
    vertical-align: top;
    padding: 2px;
}

.calendar-cell-today-event {
    height: 48px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    background: #FFF9E6;
    padding: 2px;
    position: relative;
    vertical-align: top;
}

.calendar-cell-weekend {
    height: 48px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    background: #fafafa;
    position: relative;
    vertical-align: top;
    padding: 2px;
}

.calendar-cell-weekend-event {
    height: 48px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    background: #fafafa;
    padding: 2px;
    position: relative;
    vertical-align: top;
}

.calendar-cell-last {
    height: 48px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    position: relative;
    vertical-align: top;
    padding: 2px;
}

.calendar-cell-empty-right {
    height: 48px;
    border-right: 1px solid #f0f0f0;
}

/* ============================================================
   20. EVENTOS DEL CALENDARIO
   ============================================================ */
.calendar-event {
    display: block;
    margin: 1px 0;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 9px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.calendar-event:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.calendar-event-yellow {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 3px solid #eab308;
}

.calendar-event-red {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-left: 3px solid #ef4444;
}

.calendar-event-green {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-left: 3px solid #22c55e;
}

.calendar-event-blue {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-left: 3px solid #3b82f6;
}

.calendar-event-gray {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    border-left: 3px solid #9ca3af;
    opacity: 0.7;
}

.calendar-event-purple {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border-left: 3px solid #a855f7;
}

.calendar-event-title {
    font-weight: 600;
}

.calendar-event-title-yellow { color: #a16207; }
.calendar-event-title-red { color: #dc2626; }
.calendar-event-title-green { color: #16a34a; }
.calendar-event-title-blue { color: #2563eb; }
.calendar-event-title-gray { color: #6b7280; text-decoration: line-through; }
.calendar-event-title-purple { color: #7c3aed; }

.calendar-event-meta {
    color: #666;
    font-size: 9px;
}

/* ============================================================
   21. VISTA MAPA - ELEMENTOS ESPECÍFICOS
   ============================================================ */
.map-container {
    width: 100%;
    height: 280px;
    z-index: 1;
}

.map-controls {
    padding: 12px 16px;
}

.map-route-info {
    margin: 0 16px;
}

.visit-list-container {
    padding: 0 16px;
    margin-top: 14px;
}

/* Visit order badges */
.visit-order-completed {
    background: #22c55e;
    color: #fff;
}

.visit-order-current {
    background: #3b82f6;
    color: #fff;
}

.visit-order-pending {
    background: #f59e0b;
    color: #fff;
}

.visit-card-current {
    border: 2px solid #3b82f6;
}

.action-btn-nav {
    padding: 8px 10px;
}

.action-btn-nav-active {
    padding: 8px 10px;
    background: #3b82f6;
    color: #fff;
}

/* ============================================================
   22. CARTERA DE CLIENTES
   ============================================================ */
.cartera-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.cartera-avatar-tienda { background: #dcfce7; }
.cartera-avatar-veterinaria { background: #dbeafe; }
.cartera-avatar-peluqueria { background: #fce7f3; }

/* ============================================================
   23. TAREAS PANEL
   ============================================================ */
.task-calendar-cell {
    padding: 6px;
    min-height: 70px;
    border: 1px solid #f0f0f0;
    text-align: left;
    vertical-align: top;
}

.task-calendar-cell-weekend {
    padding: 6px;
    min-height: 70px;
    border: 1px solid #f0f0f0;
    background: #fafafa;
    text-align: left;
    vertical-align: top;
}

.task-header {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #666;
}

.task-event {
    font-size: 12px;
    color: #333;
}

.task-event-vencida {
    margin-top: 2px;
    padding: 2px 4px;
    background: #fee2e2;
    border-radius: 3px;
    font-size: 9px;
    color: #dc2626;
    white-space: nowrap;
    overflow: hidden;
}

/* ============================================================
   24. EMAIL VIEW
   ============================================================ */
.email-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.email-body-text {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

/* ============================================================
   25. ASISTENTE DE VOZ
   ============================================================ */
.voice-assistant-bar {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.voice-assistant-close {
    background: rgba(255,255,255,0.2);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}

.voice-assistant-status {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.voice-assistant-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

.voice-assistant-dialog {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 12px;
    max-height: 150px;
    overflow-y: auto;
}

.voice-indicator {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(123,104,238,0.95);
    padding: 24px 32px;
    border-radius: 16px;
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.voice-indicator-circle {
    width: 60px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-voice 1.5s ease-in-out infinite;
}

.voice-indicator-text {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.voice-indicator-hint {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
}

/* ============================================================
   26. RESPUESTA DICTADA
   ============================================================ */
.dictated-response-panel {
    display: none;
    background: #f0fdf4;
    padding: 16px;
    border-bottom: 1px solid #bbf7d0;
}

.dictated-response-label {
    font-size: 12px;
    font-weight: 600;
    color: #166534;
    margin-bottom: 8px;
}

.dictated-response-text {
    background: #fff;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    color: #333;
    line-height: 1.5;
}

/* ============================================================
   27. GRABACIÓN
   ============================================================ */
.recording-indicator {
    display: none;
    background: #fee2e2;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    text-align: center;
}

.recording-icon {
    font-size: 24px;
    animation: pulse-recording 1s infinite;
}

.recording-text {
    font-size: 12px;
    color: #ef4444;
    margin-top: 4px;
}

/* ============================================================
   28. HEADER VARIANTS
   ============================================================ */
.header-catalog {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.header-pedidos-mes {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.header-copilot {
    background: linear-gradient(135deg, #7B68EE 0%, #9D4EDD 100%);
}

.header-back-btn {
    color: #fff;
    opacity: 0.9;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 4px;
}

.header-back-btn-dark {
    color: #000;
    opacity: 0.7;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 4px;
}

.header-title-white {
    color: #fff;
    margin: 0;
    font-size: 18px;
}

.header-subtitle-white {
    color: rgba(255,255,255,0.9);
}

.header-subtitle-light {
    color: rgba(255,255,255,0.8);
    font-size: 11px;
}

/* ============================================================
   29. COPILOT (Vista expandida - usados en view-copilot)
   ============================================================ */
#view-copilot .copilot-suggestions {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#view-copilot .copilot-chat {
    background: #fff;
    border-radius: 12px;
    min-height: 350px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.copilot-ul {
    margin: 10px 0 0 16px;
    padding: 0;
    font-size: 12px;
    color: #555;
    line-height: 1.6;
}

.copilot-input-container {
    position: absolute;
    bottom: 52px;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
}

/* ============================================================
   30. NAV COPILOT ICON
   ============================================================ */
.nav-icon-copilot {
    background: linear-gradient(135deg, #7B68EE 0%, #9D4EDD 100%);
    color: #fff;
    font-size: 14px;
}

/* ============================================================
   31. MODALES
   ============================================================ */
.modal-narrow {
    max-width: 360px;
}

.modal-nota-grabada {
    display: none;
    background: #f0fdf4;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    font-size: 12px;
}

.modal-nota-grabada-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   32. PROGRESS BAR
   ============================================================ */
.progress-bar-container {
    background: #e5e7eb;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.progress-bar-fill {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    height: 100%;
    border-radius: 4px;
}

/* ============================================================
   33. MISC
   ============================================================ */
.link-blue {
    font-size: 12px;
    color: #3b82f6;
}

.link-green {
    color: #16a34a;
    cursor: pointer;
}

.icon-emoji {
    font-size: 18px;
    color: #999;
}

.icon-emoji-lg {
    font-size: 20px;
}

.scroll-x {
    overflow-x: auto;
    padding-bottom: 4px;
}

.cartera-margin-0-16 {
    margin: 0 16px;
}

.neto-highlight {
    color: #16a34a;
}

/* ============================================================
   34. ANIMATION - PULSE VOICE
   ============================================================ */
@keyframes pulse-voice {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(255,255,255,0); }
}

@keyframes pulse-recording {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================================
   35. CHECKBOXES
   ============================================================ */
.checkbox-unchecked {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid #d1d5db;
    background: #fff;
}

.checkbox-checked {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}

/* ============================================================
   36. TASK BADGES (para calendario de tareas)
   ============================================================ */
.task-badge {
    margin-top: 2px;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
}

.task-badge-green {
    background: #dcfce7;
    color: #16a34a;
}

.task-badge-yellow {
    background: #fef3c7;
    color: #a16207;
}

.task-badge-purple {
    background: #f3e8ff;
    color: #7c3aed;
}

.task-badge-blue {
    background: #dbeafe;
    color: #1d4ed8;
}

/* ============================================================
   37. LEGEND DOTS (leyenda del mapa/calendario)
   ============================================================ */
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.legend-dot-green { background: #22c55e; }
.legend-dot-yellow { background: #eab308; }
.legend-dot-red { background: #ef4444; }
.legend-dot-blue { background: #3b82f6; }
.legend-dot-purple { background: #a855f7; }

.legend-dot-round {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot-primary { background: #F2C811; }

/* ============================================================
   38. CARDS ADICIONALES
   ============================================================ */
.card-note {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-left: 4px solid #22c55e;
    cursor: pointer;
}

.card-note-lg {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-left: 4px solid #22c55e;
    cursor: pointer;
}

.card-plantilla-gray {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
}

.card-plantilla-green {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #f0fdf4;
    border-radius: 8px;
}

.tag-code {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

/* ============================================================
   39. CLIENTE AVATAR LARGE
   ============================================================ */
.cliente-avatar-lg {
    width: 40px;
    height: 40px;
    background: #ef4444;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* ============================================================
   40. FAB BUTTON
   ============================================================ */
.fab-button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.fab-container {
    position: fixed;
    bottom: 90px;
    right: 30px;
}

/* ============================================================
   41. WHATSAPP PLANTILLA PILLS
   ============================================================ */
.wa-plantilla-pill {
    padding: 6px 10px;
    background: #f3f4f6;
    border-radius: 16px;
    font-size: 11px;
    cursor: pointer;
}

/* ============================================================
   42. TAB HEADER CONTROLS
   ============================================================ */
.tab-header-container {
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

.tab-header-controls {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

/* ============================================================
   43. CALENDAR HEADER TODAY
   ============================================================ */
.calendar-header-today {
    padding: 8px 4px;
    text-align: center;
    background: #FFF9E6;
    border-radius: 8px;
}

/* ============================================================
   44. VOICE ASSISTANT COMMANDS
   ============================================================ */
.voice-command-link {
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    font-size: 12px;
}

/* ============================================================
   45. TASK CALENDAR TODAY CELL
   ============================================================ */
.task-calendar-cell-today {
    padding: 6px;
    min-height: 70px;
    border: 1px solid #f0f0f0;
    background: #FFF9E6;
    cursor: pointer;
    vertical-align: top;
}

.task-calendar-cell-today:hover {
    background: #FFF3CC;
}

/* Visitas en vista mes */
.mes-visitas-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.mes-visita-item {
    font-size: 9px;
    padding: 2px 4px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.mes-visita-item:hover {
    transform: scale(1.02);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.mes-visita-item.evento-dot-rojo {
    background: #fee2e2;
    color: #dc2626;
    border-left: 2px solid #ef4444;
}

.mes-visita-item.evento-dot-amarillo {
    background: #fef3c7;
    color: #a16207;
    border-left: 2px solid #eab308;
}

.mes-visita-item.evento-dot-verde {
    background: #dcfce7;
    color: #16a34a;
    border-left: 2px solid #22c55e;
}

.mes-visita-item.evento-dot-azul {
    background: #dbeafe;
    color: #2563eb;
    border-left: 2px solid #3b82f6;
}

.mes-visita-mas {
    font-size: 8px;
    color: #666;
    text-align: center;
}

.dia-hoy-circulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #3b82f6;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 50%;
}

/* Celdas del mes clickeables */
.task-calendar-cell {
    cursor: pointer;
    text-align: left;
    background: #fff;
    vertical-align: top;
}

.task-calendar-cell-weekend {
    cursor: pointer;
    text-align: left;
    vertical-align: top;
}

.task-calendar-cell:hover {
    background: #f0f0f0;
}

.task-calendar-cell-weekend:hover {
    background: #f5f5f5;
}

/* ============================================================
   46. BOTTOM CONTROLS
   ============================================================ */
.bottom-controls {
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ============================================================
   47. MISC ADDITIONS
   ============================================================ */
.text-center-p8 {
    text-align: center;
    padding: 8px;
}

.info-box {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
}

.calendar-month-title {
    font-weight: 600;
    font-size: 15px;
}

.calendar-week-label {
    font-size: 11px;
    color: #666;
}

.mt-8-flex-gap-6 {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

/* ============================================================
   48. CALENDAR EVENTS - COLORES ADICIONALES
   ============================================================ */
.calendar-event-red {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-left: 3px solid #ef4444;
}

.calendar-event-purple {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border-left: 3px solid #a855f7;
}

.calendar-event-green {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-left: 3px solid #22c55e;
}

.calendar-event-title-red { color: #dc2626; }
.calendar-event-title-purple { color: #7c3aed; }
.calendar-event-title-green { color: #16a34a; }

/* ============================================================
   49. CARDS NOTAS CON BORDES DE COLORES
   ============================================================ */
.card-note-purple {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-left: 4px solid #a855f7;
    cursor: pointer;
}

.card-note-blue {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-left: 4px solid #3b82f6;
    cursor: pointer;
}

.card-note-red {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-left: 4px solid #ef4444;
    cursor: pointer;
}

/* ============================================================
   50. STATUS PILLS ADICIONALES
   ============================================================ */
.status-pill-yellow {
    background: #fef3c7;
    color: #a16207;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-pill-red {
    background: #fee2e2;
    color: #dc2626;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-red {
    background: #fee2e2;
    color: #dc2626;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

.badge-purple {
    background: #f3e8ff;
    color: #7c3aed;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

.badge-blue {
    background: #dbeafe;
    color: #1d4ed8;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

/* ============================================================
   51. HEADERS ESPECIALES ADICIONALES
   ============================================================ */
.header-purple-gradient {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    padding: 16px;
    padding-top: 20px;
    position: relative;
}

.header-blue-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    padding: 16px;
    padding-top: 20px;
    position: relative;
}

.header-voice-assistant {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* ============================================================
   52. CARD GAMIFICATION
   ============================================================ */
.card-gamification {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    color: #fff;
}

/* ============================================================
   53. VOICE ASSISTANT ELEMENTS
   ============================================================ */
.voice-assistant-dialog-box {
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    padding: 12px;
    max-height: 150px;
    overflow-y: auto;
}

.voice-btn-pill {
    background: rgba(255,255,255,0.2);
    border: none;
    padding: 8px 12px;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.voice-btn-expand {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    margin-right: 8px;
}

/* ============================================================
   54. GRID LAYOUTS
   ============================================================ */
.grid-7-cols {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #fff !important;
}

.grid-7-cols-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #fff !important;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 0;
}

.grid-4-cols-voice {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.2);
    text-align: center;
}

/* ============================================================
   55. FLEX BETWEEN VARIANTS
   ============================================================ */
.flex-between-mb-4 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.flex-between-mb-12 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.flex-between-mb-8 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.flex-between-mt-6 {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

/* ============================================================
   56. FLEX COL VARIANTS
   ============================================================ */
.flex-col-gap-8 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================================
   57. FLEX GAP VARIANTS
   ============================================================ */
.flex-gap-10-mt-16 {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.flex-gap-10-mt-12 {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.flex-gap-10-mb-16 {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.flex-gap-10-mb-12 {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.flex-wrap-gap-6 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.flex-gap-8-scroll {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
}

/* ============================================================
   58. INPUT VARIANTS
   ============================================================ */
.input-text {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
}

/* ============================================================
   59. BUTTONS VARIANTS
   ============================================================ */
.btn-success-lg {
    flex: 1;
    background: #22c55e;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-purple {
    background: #a855f7;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

.btn-icon-blue {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #3b82f6;
}

/* ============================================================
   60. CONTENT VARIANTS
   ============================================================ */
.content-gray-bottom-80 {
    background: #f8f9fa;
    padding-bottom: 80px;
}

/* ============================================================
   61. CLIENTE CARD VINCULADO URGENTE
   ============================================================ */
.card-cliente-urgente {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #fef2f2;
    border-radius: 10px;
    cursor: pointer;
}

/* ============================================================
   62. MISC TEXT VARIANTS
   ============================================================ */
.text-label-888 {
    font-size: 12px;
    color: #888;
}

.text-label-mb-8 {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.text-label-mb-12 {
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.text-11-mb-6 {
    font-size: 11px;
    color: #888;
    margin-bottom: 6px;
}

.text-white-80 {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
}

.text-voice-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

.text-13-blue {
    font-size: 13px;
    color: #1d4ed8;
}

.text-13-666-lh {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.text-12-blue-cursor {
    font-size: 12px;
    color: #3b82f6;
    cursor: pointer;
}

.text-title-flex {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.text-title-mb-10 {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin-bottom: 10px;
}

.text-title-green {
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
}

.text-12-bold-333 {
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.text-12-bold-primary {
    font-size: 12px;
    font-weight: 700;
    color: #F2C811;
}

.text-10-yellow {
    font-size: 10px;
    color: #b8860b;
}

/* ============================================================
   63. FONT WEIGHTS AND COLORS COMBINATIONS
   ============================================================ */
.text-bold-red {
    font-weight: 600;
    color: #dc2626;
}

.text-bold-purple {
    font-weight: 600;
    color: #7c3aed;
}

.text-bold-green {
    font-weight: 600;
    color: #16a34a;
}

.text-bold-purple-lg {
    font-size: 14px;
    font-weight: 600;
    color: #a855f7;
}

.text-14-bold-primary {
    font-size: 14px;
    font-weight: 700;
    color: #F2C811;
}

.text-14-bold-white {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.text-16-bold-white {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.text-18-bold-white {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.text-28-bold {
    font-size: 28px;
    font-weight: 700;
}

/* ============================================================
   64. SPECIAL ELEMENTS
   ============================================================ */
.flex-1-center {
    flex: 1;
    text-align: center;
}

.cursor-dark {
    color: #000;
    cursor: pointer;
}

.cursor-gradient-green {
    cursor: pointer;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.cursor-gradient-yellow {
    cursor: pointer;
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
}

.cursor-gradient-red {
    cursor: pointer;
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
}

.btn-purple-bg {
    background: #8b5cf6;
}

.btn-blue-bg {
    background: #3b82f6;
}

.alert-blue-box {
    display: none;
    background: #eff6ff;
    border: 1px solid #3b82f6;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.panel-hidden {
    display: none;
    padding: 16px;
}

.back-btn-hidden {
    display: none;
    color: #000;
    opacity: 0.7;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 4px;
}

/* ============================================================
   65. CELL VARIANTS
   ============================================================ */
.calendar-cell-weekend-nolast {
    height: 48px;
    border-right: 1px solid #f0f0f0;
    background: #fafafa;
}

.calendar-cell-today-nolast {
    height: 48px;
    border-right: 1px solid #f0f0f0;
    background: #FFF9E6;
}

.calendar-cell-end-row {
    height: 48px;
    background: #fafafa;
}

.calendar-time-cell-nobottom {
    padding: 4px;
    text-align: right;
    font-size: 10px;
    color: #999;
    border-right: 1px solid #e0e0e0;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
}

/* ============================================================
   66. VOICE INDICATOR CONTAINER
   ============================================================ */
/* Píldora de escucha activa — pequeña, no intrusiva */
.voice-indicator-pill {
    display: none;
    position: absolute;
    bottom: 64px;   /* justo encima del input */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(103, 76, 211, 0.92);
    border-radius: 20px;
    padding: 6px 14px 6px 10px;
    z-index: 250;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    max-width: 80%;
    pointer-events: none;
}

.voice-indicator-pill.active {
    display: flex;
}

.voice-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a78bfa;
    flex-shrink: 0;
    animation: pill-pulse 1.4s ease-in-out infinite;
}

.voice-pill-dot.listening {
    background: #f87171;  /* rojo mientras procesa comando */
}

.voice-pill-text {
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

@keyframes pill-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.3); }
}

/* Indicador pequeño de escucha activa en la barra de navegación */
.nav-voice-indicator {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid white;
    animation: nav-voice-pulse 2s ease-in-out infinite;
}

@keyframes nav-voice-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================================
   67. SMALL META TEXT
   ============================================================ */
.text-10-888 {
    font-size: 10px;
    color: #888;
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
    max-width: 90%;
    text-align: center;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast-notification.toast-info {
    background: #3b82f6;
}

.toast-notification.toast-success {
    background: #22c55e;
}

.toast-notification.toast-error {
    background: #ef4444;
}

.toast-notification.toast-warning {
    background: #eab308;
    color: #333;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DETALLE DE TAREA
═══════════════════════════════════════════════════════════════════════════ */

.tarea-item {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.tarea-item:hover {
    background: #f0f0f0;
}

.tarea-item:active {
    background: #e8e8e8;
}

.tarea-check {
    font-size: 16px;
    margin-right: 10px;
    color: #666;
}

.tarea-content {
    flex: 1;
}

.tarea-titulo {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.tarea-fecha {
    font-size: 11px;
    color: #888;
}

.tarea-arrow {
    color: #ccc;
    font-size: 14px;
    margin-left: 6px;
}

/* Detalle de tarea */
.tarea-detalle-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.tarea-check-grande {
    font-size: 32px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
}

.tarea-check-grande.completada {
    color: #22c55e;
}

.tarea-titulo-grande {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    flex: 1;
}

.tarea-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tarea-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tarea-meta-icon {
    font-size: 16px;
}

.tarea-meta-label {
    color: #666;
    font-size: 14px;
    min-width: 100px;
}

.tarea-meta-value {
    color: #333;
    font-weight: 500;
}

.tarea-descripcion {
    color: #444;
    line-height: 1.6;
    white-space: pre-wrap;
}

.cliente-mini-card {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.cliente-mini-card:hover {
    background: #f0f0f0;
}

.cliente-mini-nombre {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.cliente-mini-direccion {
    font-size: 13px;
    color: #666;
}

.tarea-acciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.btn-completar-tarea {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: #22c55e;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-completar-tarea:hover {
    background: #16a34a;
}

.btn-abrir-planner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: white;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-abrir-planner:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DETALLE DE EMAIL
═══════════════════════════════════════════════════════════════════════════ */

.email-item-mini {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.email-item-mini:hover {
    background: #f0f0f0;
}

.email-item-mini:active {
    background: #e8e8e8;
}

.email-icon {
    font-size: 20px;
    margin-right: 12px;
}

.email-content {
    flex: 1;
}

.email-subject {
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
}

.email-date {
    font-size: 12px;
    color: #888;
}

.email-arrow {
    color: #ccc;
    font-size: 18px;
    margin-left: 8px;
}

/* Detalle de email */
.email-detalle-asunto {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
}

.email-detalle-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.email-detalle-from {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.email-from-label,
.email-to-label {
    font-size: 12px;
    color: #888;
}

.email-from-value,
.email-to-value {
    color: #333;
    font-weight: 500;
}

.email-detalle-fecha {
    font-size: 12px;
    color: #888;
}

.email-detalle-to {
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.email-detalle-body {
    color: #444;
    line-height: 1.7;
    white-space: pre-wrap;
    padding: 16px 0;
}

.adjunto-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.2s;
}

.adjunto-item:hover {
    background: #f0f0f0;
}

.adjunto-icon {
    font-size: 20px;
}

.adjunto-nombre {
    flex: 1;
    font-weight: 500;
    color: #333;
}

.adjunto-tamano {
    font-size: 12px;
    color: #888;
}

.email-acciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.btn-responder-email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-responder-email:hover {
    background: #2563eb;
}

.btn-abrir-outlook {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    background: white;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-abrir-outlook:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

/* Badge suma total de pedidos */
.pedidos-total-badge {
    font-size: 14px;
    font-weight: 700;
    color: #16a34a;
    background: #dcfce7;
    padding: 4px 12px;
    border-radius: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACORDEÓN DE PEDIDOS
═══════════════════════════════════════════════════════════════════════════ */

/* Acordeón de grupo de pedidos */
.pedidos-grupo-acordeon {
    margin-bottom: 4px;
}

.pedidos-grupo-acordeon:first-child .pedidos-grupo-header {
    margin-top: 0;
}

.pedidos-grupo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    letter-spacing: 0.3px;
    padding: 10px 8px;
    margin-top: 8px;
    background: #f3f4f6;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pedidos-grupo-header:hover {
    background: #e5e7eb;
}

.pedidos-grupo-header.no-toggle {
    cursor: default;
    background: transparent;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0;
    margin-top: 12px;
}

.pedidos-grupo-header.no-toggle:hover {
    background: transparent;
}

.pedidos-grupo-header .grupo-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pedidos-grupo-header .grupo-arrow {
    font-size: 10px;
    color: #9ca3af;
    transition: transform 0.2s ease;
}

.pedidos-grupo-acordeon.open .grupo-arrow {
    transform: rotate(90deg);
}

.pedidos-grupo-header .grupo-nombre {
    color: #374151;
}

.pedidos-grupo-header .grupo-count {
    color: #9ca3af;
    font-weight: 500;
}

.pedidos-grupo-header .grupo-total {
    color: #16a34a;
    font-weight: 700;
}

/* Contenido del grupo (pedidos) */
.pedidos-grupo-contenido {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.pedidos-grupo-acordeon.open .pedidos-grupo-contenido {
    max-height: 5000px; /* Suficiente para muchos pedidos */
    padding-top: 8px;
}

.pedido-acordeon {
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.pedido-acordeon.open {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pedido-header-acordeon {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.pedido-header-acordeon:hover {
    background: rgba(0,0,0,0.03);
}

.pedido-acordeon.open .pedido-header-acordeon {
    border-bottom: 1px solid #eee;
}

.pedido-icon {
    font-size: 16px;
    margin-right: 10px;
}

.pedido-content {
    flex: 1;
}

.pedido-numero {
    font-weight: 600;
    color: #333;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pedido-badge-hoy {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pedido-badge-devol {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pedido-acordeon.pedido-hoy {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
}

.pedido-acordeon.pedido-devolucion {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
}

.pedido-acordeon.pedido-hoy.open {
    background: #fff;
    border-color: #f59e0b;
}

.pedido-fecha {
    font-size: 10px;
    color: #888;
    margin-top: 1px;
}

.pedido-total {
    font-weight: 700;
    color: #22c55e;
    font-size: 14px;
    margin-right: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.pedido-arrow {
    color: #999;
    font-size: 12px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* Detalle del pedido (acordeón) */
.pedido-detalle {
    display: none;
}

.pedido-detalle.open {
    display: block;
}

.pedido-lineas {
    padding: 12px;
}

.pedido-linea {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

.pedido-linea:last-child {
    border-bottom: none;
}

.linea-producto {
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.linea-cantidad {
    color: #666;
    text-align: right;
    min-width: 45px;
}

.linea-precio {
    color: #888;
    text-align: right;
    min-width: 55px;
}

.linea-subtotal {
    color: #333;
    font-weight: 600;
    text-align: right;
    min-width: 60px;
}

.pedido-resumen {
    background: #f8f9fa;
    padding: 12px;
    border-top: 1px solid #eee;
}

.resumen-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 4px;
}

.resumen-label {
    color: #666;
}

.resumen-value {
    font-weight: 500;
    color: #333;
}

.resumen-item.resumen-total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #ddd;
    font-size: 15px;
}

.resumen-item.resumen-total .resumen-label {
    font-weight: 600;
    color: #333;
}

.resumen-item.resumen-total .resumen-value {
    font-weight: 700;
    color: #22c55e;
}

.pedido-estado {
    padding: 0 12px 12px;
    text-align: right;
}

.estado-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.estado-badge.entregado {
    background: #dcfce7;
    color: #16a34a;
}

.estado-badge.enviado {
    background: #dbeafe;
    color: #2563eb;
}

.estado-badge.pendiente {
    background: #fef3c7;
    color: #d97706;
}

.estado-badge.cancelado {
    background: #fee2e2;
    color: #dc2626;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LISTAS PAGINADAS - VER TODOS
═══════════════════════════════════════════════════════════════════════════ */

.lista-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    color: #333;
}

.lista-contador {
    font-weight: 400;
    color: #888;
    font-size: 14px;
}

.lista-items {
    padding: 8px 16px;
}

.lista-item {
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid #f0f0f0;
    transition: all 0.2s;
}

.lista-item:hover {
    border-color: #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Notas en lista */
.nota-item-lista {
    cursor: default;
}

.nota-fecha-lista {
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}

.nota-texto-lista {
    color: #333;
    line-height: 1.5;
}

/* Emails en lista */
.email-item-lista {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.email-item-lista.no-leido {
    background: #eff6ff;
    border-color: #dbeafe;
}

.email-item-lista.no-leido .email-asunto-lista {
    font-weight: 700;
}

.email-icon-lista {
    font-size: 20px;
    margin-right: 12px;
}

.email-content-lista {
    flex: 1;
    min-width: 0;
}

.email-asunto-lista {
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-de-lista {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
}

.email-fecha-lista {
    font-size: 12px;
    color: #888;
    margin-left: 12px;
    white-space: nowrap;
}

.email-arrow-lista {
    color: #ccc;
    font-size: 18px;
    margin-left: 8px;
}

/* Pedidos en lista */
.pedido-item-lista {
    display: flex;
    align-items: center;
    cursor: default;
}

.pedido-icon-lista {
    font-size: 20px;
    margin-right: 12px;
}

.pedido-content-lista {
    flex: 1;
}

.pedido-numero-lista {
    font-weight: 600;
    color: #333;
}

.pedido-fecha-lista {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.pedido-info-lista {
    text-align: right;
    margin-right: 12px;
}

.pedido-lineas-lista {
    font-size: 12px;
    color: #888;
}

.pedido-total-lista {
    font-weight: 700;
    color: #22c55e;
    font-size: 15px;
}

.pedido-estado-lista {
    min-width: 75px;
    text-align: center;
}

.estado-badge-mini {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.estado-badge-mini.entregado {
    background: #dcfce7;
    color: #16a34a;
}

.estado-badge-mini.enviado {
    background: #dbeafe;
    color: #2563eb;
}

.estado-badge-mini.pendiente {
    background: #fef3c7;
    color: #d97706;
}

/* Botón cargar más */
.lista-cargar-mas {
    padding: 16px;
    text-align: center;
}

.btn-cargar-mas {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 12px 24px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cargar-mas:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.btn-cargar-mas:active {
    background: #e8e8e8;
}

.lista-fin {
    padding: 20px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

/* Acordeones en lista de pedidos */
#pedidosTodasContainer .pedido-acordeon {
    margin-bottom: 8px;
}

#pedidosTodasContainer .pedido-header-acordeon {
    padding: 12px;
}

#pedidosTodasContainer .pedido-lineas {
    padding: 8px 12px;
}

#pedidosTodasContainer .pedido-linea {
    font-size: 12px;
    padding: 6px 0;
}

#pedidosTodasContainer .linea-producto {
    font-size: 12px;
}

#pedidosTodasContainer .pedido-resumen {
    padding: 10px 12px;
}

#pedidosTodasContainer .resumen-item {
    font-size: 12px;
}

#pedidosTodasContainer .resumen-item.resumen-total {
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANTALLA EMAIL - LISTA PRINCIPAL
═══════════════════════════════════════════════════════════════════════════ */

.email-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid #f0f0f0;
    border-left: 4px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.email-card:hover {
    background: #fafafa;
}

.email-card.sin-leer {
    background: #fff;
}

.email-card.sin-leer .email-remitente,
.email-card.sin-leer .email-asunto {
    font-weight: 700;
}

.email-card.borde-azul {
    border-left-color: #3b82f6;
}

.email-card.borde-amarillo {
    border-left-color: #eab308;
}

.email-card.borde-rojo {
    border-left-color: #ef4444;
}

.email-card.borde-verde {
    border-left-color: #22c55e;
}

.email-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
}

.email-content-main {
    flex: 1;
    min-width: 0;
}

.email-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.email-remitente {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75%;
}

.email-hora {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}

.email-asunto {
    font-size: 13px;
    color: #333;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-preview {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fix espacio vacío en email detail */
#view-email-detail .header-blue-gradient {
    flex: 0 0 auto;
}

/* ============================================================
   FIX: Agenda con header sticky y contenido scrollable
   ============================================================ */
#view-agenda {
    height: 100% !important;
    background: #fff !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

#view-agenda.active {
    display: flex !important;
    flex-direction: column !important;
}

#view-agenda .header {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 20;
}

#view-agenda .content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    background: #fff;
    overflow: hidden !important;
}

/* Tabs y controles sticky */
#view-agenda .tab-header-container,
#view-agenda .tab-header-controls {
    flex: 0 0 auto;
    background: #fff;
    z-index: 10;
}

/* Tareas y Todo en móvil: ocultos en tableta (usan panel derecho propio) */
html.es-tableta .mobile-only-tab { display: none !important; }
html.es-tableta .mobile-agenda-extra { display: none !important; }

/* Contenedores Tareas/Todo en móvil: ocupan toda el área disponible */
.mobile-agenda-extra {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

/* Área scrollable del calendario */
#view-agenda #calendarSemana,
#view-agenda #calendarAgendaList {
    background: #fff;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#view-agenda #calendarMes {
    background: #fff;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Los padres no pueden bloquear el scroll-x del mes */
#view-agenda.view,
#view-agenda .tabs-container,
#view-agenda .tabs-content {
    overflow-x: visible;
}

#view-agenda #calendarAgendaList {
    padding-bottom: 8px;
}

#calendarSemanaBody {
    flex: 1 1 auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
    min-height: 0 !important;
}

#calendarSemanaBody::-webkit-scrollbar { width: 4px; height: 4px; }
#calendarSemanaBody::-webkit-scrollbar-track { background: transparent; }
#calendarSemanaBody::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }

#view-agenda .bottom-controls {
    flex: 0 0 auto;
    margin-top: 0;
    margin-bottom: 0;
    background: #f0fdf4;
    border-radius: 0;
}

/* ============================================================
   MODAL NUEVA CITA
   ============================================================ */
.modal-cita {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-cita-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 16px 16px 0 0;
}

.modal-cita-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.modal-close-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    color: #fff;
}

.modal-cita-body {
    padding: 20px;
}

.modal-cita-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
    border-radius: 0 0 16px 16px;
}

.modal-cita-footer button {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================
   MODAL POWER BI
   ============================================================ */
.modal-pbi {
    background: #fff;
    border-radius: 16px;
    width: 95%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-pbi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: linear-gradient(135deg, #F2C811 0%, #E8B708 100%);
    border-radius: 16px 16px 0 0;
}

.modal-pbi-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.modal-pbi-body {
    padding: 0;
}

.pbi-container {
    width: 100%;
    min-height: 350px;
    background: #f8f9fa;
}

.pbi-container iframe {
    width: 100%;
    height: 400px;
    border: none;
}

.pbi-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
}

.pbi-placeholder-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.pbi-placeholder-title {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.pbi-placeholder-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.pbi-mock-chart {
    width: 100%;
    max-width: 300px;
    height: 120px;
    margin-bottom: 20px;
}

.pbi-placeholder-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.pbi-placeholder-value {
    font-size: 32px;
    font-weight: 700;
    color: #22c55e;
}

.pbi-placeholder-label {
    font-size: 13px;
    color: #6b7280;
}

.pbi-placeholder-note {
    font-size: 11px;
    color: #9ca3af;
    padding: 10px 15px;
    background: #f3f4f6;
    border-radius: 8px;
    max-width: 280px;
}

.modal-pbi-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background: #f8f9fa;
    border-radius: 0 0 16px 16px;
}

.modal-pbi-footer button {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.form-row-2 > * {
    min-width: 0;
}
.form-row-2 .form-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input-readonly {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: #f3f4f6;
    color: #374151;
    font-weight: 500;
    box-sizing: border-box;
}

.form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    min-height: 120px;
    box-sizing: border-box;
}

/* ============================================================
   VISTA LISTA AGENDA
   ============================================================ */
.agenda-list {
    padding: 16px;
}

.agenda-fecha-header {
    padding: 8px 0 6px;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 6px;
}

.agenda-fecha-header.hoy {
    border-bottom-color: #3b82f6;
}

.agenda-fecha-label {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    display: block;
}

.agenda-fecha-header.hoy .agenda-fecha-label {
    color: #3b82f6;
}

.agenda-fecha-completa {
    font-size: 11px;
    color: #888;
}

.agenda-cita-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 6px;
    border-left: 4px solid #ccc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.agenda-cita-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.agenda-cita-item.cita-rojo { border-left-color: #ef4444; background: #fef2f2; }
.agenda-cita-item.cita-amarillo { border-left-color: #eab308; background: #fefce8; }
.agenda-cita-item.cita-verde { border-left-color: #22c55e; background: #f0fdf4; }
.agenda-cita-item.cita-azul { border-left-color: #3b82f6; background: #eff6ff; }
.agenda-cita-item.cita-morado { border-left-color: #a855f7; background: #faf5ff; }
.agenda-cita-item.cita-gris { border-left-color: #9ca3af; background: #f9fafb; }

.agenda-cita-hora {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    min-width: 44px;
}
.agenda-cita-duracion-hora {
    font-size: 9px;
    font-weight: 400;
    color: #9ca3af;
    margin-top: 1px;
}
.agenda-cita-ubicacion {
    font-size: 10px;
    color: #888;
    margin-top: 1px;
}

.agenda-cita-info {
    flex: 1;
}

.agenda-cita-titulo {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 1px;
}

.agenda-cita-duracion {
    font-size: 11px;
    color: #888;
}

.agenda-cita-arrow {
    font-size: 18px;
    color: #ccc;
}
.completar-tarea-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #22c55e;
    background: none;
    color: #22c55e;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    transition: background 0.15s, color 0.15s;
}
.completar-tarea-btn:hover {
    background: #22c55e;
    color: #fff;
}

/* ============================================================
   CALENDARIO VISTA MES
   ============================================================ */
.calendar-mes-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.calendar-mes-table th {
    padding: 10px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    border-bottom: 1px solid #e0e0e0;
}

.calendar-mes-table th.weekend {
    color: #999;
}

.calendar-mes-cell {
    text-align: center;
    padding: 12px 4px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

.calendar-mes-cell:hover {
    background: #f0f0f0;
}

.calendar-mes-cell.empty {
    cursor: default;
}

.calendar-mes-cell.empty:hover {
    background: transparent;
}

.calendar-mes-cell.weekend {
    color: #999;
    background: #fafafa;
}

.calendar-mes-cell.today {
    background: #3b82f6;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
}

.calendar-mes-cell.today:hover {
    background: #2563eb;
}

/* Fix calendario mes */
#calendarMes {
    background: #fff;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Grid único: cabeceras + celdas en la misma cuadrícula */
.mes-grid {
    display: grid;
    display: grid;
    grid-template-columns: repeat(5, 1fr) repeat(2, 28px);
    width: calc(100% + 56px);
    width: 100%;
    background: #fff;
}

.mes-header {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    padding: 6px 0;
    border-bottom: 1px solid #e0e0e0;
}

.mes-header-weekend {
    color: #aaa;
}

.mes-cell {
    min-width: 0;
    overflow: hidden;
    padding: 4px;
    min-height: 70px;
    border: 1px solid #f0f0f0;
    text-align: left;
    vertical-align: top;
    cursor: pointer;
    background: #fff;
}

.mes-cell:hover {
    background: #f0f0f0;
}

.mes-cell-weekend {
    background: #fafafa;
}

.mes-cell-weekend:hover {
    background: #f5f5f5;
}

.mes-cell-other {
    background: #fafafa;
    cursor: default;
}

.mes-cell-today {
    background: #fffbea;
}

.mes-cell-today:hover {
    background: #fef9c3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANTALLA MAPA - ESTILOS COMPLETOS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Contenedor del botón navegar */
.mapa-navegar-container {
    padding: 12px 16px;
}

/* Barra de estadísticas de ruta */
.route-stats-bar {
    display: flex;
    justify-content: space-around;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.route-stats-bar .route-stat {
    text-align: center;
    flex: 1;
}

.route-stats-bar .route-stat-value {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.route-stats-bar .route-stat-vuelta {
    font-size: 10px;
    font-weight: 500;
    color: #888;
    min-height: 14px;
}

.route-stats-bar .route-stat-label {
    font-size: 10px;
    color: #888;
    margin-top: 1px;
}

/* Lista de paradas */
.paradas-lista {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: calc(100vh - 520px);
}

/* Tarjeta de parada individual: ver bloque #view-mapa más abajo */

/* Indicador de semáforo y botón navegar */
.parada-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.parada-semaforo {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.parada-semaforo.verde { background: #22c55e; }
.parada-semaforo.amarillo { background: #eab308; }
.parada-semaforo.rojo { background: #ef4444; }
.parada-semaforo.gris { background: #9ca3af; }

.parada-btn-nav {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff3e0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

.parada-btn-nav:active {
    background: #ffe0b2;
}

/* Borde izquierdo según semáforo */
.parada-card.semaforo-verde {
    border-left: 4px solid #22c55e;
}

.parada-card.semaforo-amarillo {
    border-left: 4px solid #eab308;
}

.parada-card.semaforo-rojo {
    border-left: 4px solid #ef4444;
}

.parada-card.semaforo-gris {
    border-left: 4px solid #9ca3af;
}

/* Ajuste del mapa en esta pantalla */
/* Vista mapa: layout fijo con scroll solo en paradas */
#view-mapa.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#view-mapa.active .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

#view-mapa .map-container {
    height: 26vh;
    min-height: 160px;
    flex-shrink: 0;
    border-radius: 0;
    margin-bottom: 0;
}

.mapa-navegar-container {
    flex-shrink: 0;
    padding: 8px 16px;
}

.route-stats-bar {
    flex-shrink: 0;
}

/* Lista de paradas: ocupa el espacio restante y hace scroll */
.paradas-lista {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Tarjeta de parada: todo en una línea */
.parada-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.15s;
}
.parada-card.completada { opacity: 0.45; }
.parada-card.completada .parada-cliente { text-decoration: line-through; color: #9ca3af; }

.parada-numero {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.parada-cliente {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parada-detalles {
    font-size: 10px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0;
}

/* Info: nombre + detalles en una sola línea separados por · */
.parada-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 4px;
    overflow: hidden;
}

.parada-info .parada-detalles::before {
    content: '· ';
    color: #ccc;
}

/* Marcador personalizado sin fondo */
.custom-marker,
.custom-pin-marker,
.current-position,
.current-position-container {
    background: transparent !important;
    border: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARCADORES PIN CON STICK
   ═══════════════════════════════════════════════════════════════════════════ */

.map-pin-container {
    position: relative;
    width: 32px;
    height: 44px;
}

.map-pin {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    z-index: 2;
}

.map-pin-content {
    color: white;
    font-weight: 700;
    font-size: 12px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

.map-pin-stick {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 16px;
    border-radius: 0 0 2px 2px;
    z-index: 1;
}

.map-pin-shadow {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 4px;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
    filter: blur(1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARCADOR DE POSICIÓN ACTUAL (Punto azul pulsante)
   ═══════════════════════════════════════════════════════════════════════════ */

.current-location-marker {
    position: relative;
    width: 24px;
    height: 24px;
}

.current-location-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: #3b82f6;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 2;
}

.current-location-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: rgba(59, 130, 246, 0.3);
    border-radius: 50%;
    animation: location-pulse 2s ease-out infinite;
}

@keyframes location-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POPUP PERSONALIZADO
   ═══════════════════════════════════════════════════════════════════════════ */


.map-popup {
    padding: 12px 14px;
    min-width: 180px;
}

.map-popup strong {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.map-popup-direccion {
    font-size: 11px;
    color: #666;
    margin-bottom: 4px;
}

.map-popup-info {
    font-size: 11px;
    color: #888;
    margin-bottom: 10px;
}

.map-popup-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.map-popup-btn:active {
    transform: scale(0.98);
}

.map-popup-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.map-popup-btn.primary {
    flex: 1;
}

.map-popup-btn.secondary {
    width: 36px;
    padding: 8px;
    background: #f3f4f6;
    color: #374151;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TARJETA DE PARADA SELECCIONADA
   ═══════════════════════════════════════════════════════════════════════════ */

.parada-card.selected {
    background: #f0f7ff;
    border: 2px solid #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.parada-card.selected .parada-cliente {
    color: #2563eb;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANEL DE NAVEGACIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

.panel-navegacion {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    padding: 16px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 100;
}

.panel-navegacion.visible {
    transform: translateY(0);
    opacity: 1;
}

/* Posición relativa al contenedor del mapa */
#view-mapa .content {
    position: relative;
}

.mapa-navegar-container {
    position: relative;
}

.mapa-navegar-container .panel-navegacion {
    position: absolute;
    bottom: 100%;
    margin-bottom: 8px;
    left: 16px;
    right: 16px;
    border-radius: 12px;
}

.nav-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.nav-panel-destino {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-panel-icon {
    font-size: 24px;
}

.nav-panel-info {
    flex: 1;
}

.nav-panel-cliente {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.nav-panel-stats {
    font-size: 13px;
    color: #3b82f6;
    font-weight: 500;
    margin-top: 2px;
}

.nav-panel-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-panel-close:active {
    background: #e5e7eb;
}

.nav-panel-actions {
    display: flex;
    gap: 10px;
}

.nav-btn-iniciar {
    flex: 2;
    padding: 12px 16px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.nav-btn-iniciar:active {
    transform: scale(0.98);
}

.nav-btn-externo {
    flex: 1;
    padding: 12px 14px;
    background: #f3f4f6;
    color: #374151;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.nav-btn-externo:active {
    background: #e5e7eb;
}

/* Botón Navegar en estado "en ruta" */
.btn-nav-full.en-ruta {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RUTA EN EL MAPA (línea punteada)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Los estilos de la polyline se aplican vía JavaScript */
/* Aquí solo ajustes adicionales si son necesarios */

/* ═══════════════════════════════════════════════════════════════════════════
   SPINNERS Y ESTADOS DE CARGA
   ═══════════════════════════════════════════════════════════════════════════ */

.spinner-small {
    width: 14px;
    height: 14px;
    border: 2px solid #e5e7eb;
    border-top-color: #f2c811;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-pedidos,
.loading-lineas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: #6b7280;
    font-size: 12px;
}

.no-pedidos,
.no-lineas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    color: #9ca3af;
    font-size: 12px;
}

.no-pedidos-icon {
    font-size: 20px;
    opacity: 0.5;
}

.error-pedidos,
.error-lineas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    color: #ef4444;
    font-size: 12px;
    background: #fef2f2;
    border-radius: 6px;
}

.error-icon {
    font-size: 14px;
}

/* Ajustes para líneas de pedido desde Openbravo */
.pedido-linea {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    border-bottom: 1px solid #f3f4f6;
    gap: 4px;
}

.pedido-linea:last-child {
    border-bottom: none;
}

.linea-producto {
    flex: 1;
    font-size: 11px;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.linea-cantidad {
    font-size: 10px;
    color: #6b7280;
    min-width: 28px;
    text-align: right;
}

.linea-subtotal {
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    min-width: 50px;
    text-align: right;
}

.pedido-resumen {
    padding: 6px 12px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
}

.resumen-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    font-size: 10px;
    color: #6b7280;
}

.resumen-item.resumen-total {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #d1d5db;
    font-size: 11px;
    font-weight: 600;
    color: #111827;
}

.resumen-label {
    color: #6b7280;
}

.resumen-value {
    font-weight: 600;
}

/* Popup detalle línea de pedido */
.linea-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.linea-popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.linea-popup {
    background: white;
    border-radius: 12px;
    width: 85%;
    max-width: 320px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.2s;
}

.linea-popup-overlay.visible .linea-popup {
    transform: scale(1);
}

.linea-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
}

.linea-popup-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.linea-popup-close {
    background: none;
    border: none;
    font-size: 16px;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
}

.linea-popup-content {
    padding: 16px 14px;
}

.linea-popup-ref {
    font-size: 14px;
    color: #111827;
    line-height: 1.4;
    margin-bottom: 12px;
    word-break: break-word;
}

.linea-popup-info {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}

.linea-popup-uds {
    font-size: 13px;
    color: #6b7280;
}

.linea-popup-importe {
    font-size: 14px;
    font-weight: 600;
    color: #059669;
}

/* Hacer líneas clickables */
.pedido-linea {
    cursor: pointer;
}

.pedido-linea:active {
    background: #f9fafb;
}

/* ── Bottom sheet navegación ─────────────────────────────── */
.nav-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    display: flex; align-items: flex-end;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
}
.nav-sheet-overlay.show {
    opacity: 1; pointer-events: all;
}
.nav-sheet {
    background: #fff;
    border-radius: 20px 20px 0 0;
    width: 100%; padding: 12px 16px 32px;
    transform: translateY(100%);
    transition: transform 0.25s ease;
}
.nav-sheet-overlay.show .nav-sheet {
    transform: translateY(0);
}
.nav-sheet-handle {
    width: 40px; height: 4px;
    background: #ddd; border-radius: 2px;
    margin: 0 auto 16px;
}
.nav-sheet-title {
    font-size: 13px; color: #888;
    text-align: center; margin-bottom: 12px;
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; padding: 0 8px;
}
.nav-sheet-btn {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 14px 12px;
    background: none; border: none;
    border-radius: 12px; cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.nav-sheet-btn:active { background: #f3f4f6; }
.nav-sheet-icon { font-size: 26px; flex-shrink: 0; }
.nav-sheet-btn-label { font-size: 15px; font-weight: 600; color: #111; }
.nav-sheet-btn-sub { font-size: 12px; color: #888; margin-top: 2px; }
.nav-sheet-cancel {
    width: 100%; margin-top: 8px; padding: 14px;
    background: #f3f4f6; border: none; border-radius: 12px;
    font-size: 15px; font-weight: 600; color: #666;
    cursor: pointer;
}
.nav-sheet-cancel:active { background: #e5e7eb; }

/* ── Toggle Mapa / Nav. guiada en cabecera ───────────────── */
.nav-mode-toggle {
    display: flex;
    background: rgba(0,0,0,0.12);
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}
.nav-mode-btn {
    background: none;
    border: none;
    border-radius: 16px;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
}
.nav-mode-btn.active {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Botones de acción deshabilitados ────────────────────── */
.action-btn.disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
.action-btn.disabled:hover {
    background: #fff;
    border-color: #e0e0e0;
}
.action-btn.coming-soon {
    opacity: 0.55;
    cursor: pointer;
}

/* ── Pedidos de hoy (panel Retos) ───────────────────────────────────────── */
.pedidos-hoy-header { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: #333; padding: 0 2px 6px; }
.pedidos-hoy-total { font-size: 12px; font-weight: 600; color: #888; }
/* pedido-hoy uses existing .pedido-acordeon / .pedido-header-acordeon classes */

/* ── Pedidos de hoy (clases autónomas ph-*) ───────────────────────────────── */
.ph-item { background: #fff; border-radius: 10px; margin-bottom: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.ph-cabecera { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; }
.ph-icon { font-size: 16px; flex-shrink: 0; }
.ph-info { flex: 1; min-width: 0; }
.ph-nombre { font-size: 12px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-meta { font-size: 10px; color: #888; }
.ph-importe { font-size: 13px; font-weight: 700; color: #22c55e; flex-shrink: 0; white-space: nowrap; }
.ph-arrow { font-size: 11px; color: #aaa; flex-shrink: 0; }
.ph-detalle { display: none; background: #f8f9fa; border-top: 1px solid #eee; padding: 8px 12px; }
.ph-linea { display: grid; grid-template-columns: 1fr 2.5em 6em; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px solid #f0f0f0; font-size: 9px; }
.ph-linea:last-child { border-bottom: none; }
.ph-linea-ref { color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ph-linea-uds { color: #888; text-align: right; font-family: 'Courier New', monospace; }
.ph-linea-imp { font-weight: 600; color: #22c55e; text-align: right; font-family: 'Courier New', monospace; white-space: nowrap; overflow: hidden; }

/* ── Selector de métricas modal PBI ─────────────────────────────────────── */
.pbi-selector-btn {
    padding: 5px 10px;
    font-size: 11px;
    border: 1.5px solid #ddd;
    border-radius: 20px;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.pbi-selector-btn:hover { border-color: #4f6ef7; color: #4f6ef7; }
.pbi-selector-btn.active { background: #4f6ef7; border-color: #4f6ef7; color: #fff; font-weight: 600; }


/* ── Módulo de rutas — secciones y tarjetas ─────────────────────────────── */
.ruta-seccion-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    padding: 12px 16px 4px;
}
.ruta-seccion-completadas { color: #9ca3af; margin-top: 8px; }

.visita-card-completada {
    opacity: 0.55;
    background: #f3f4f6 !important;
}
.visita-card-completada .visita-cliente { color: #9ca3af; }
.visita-card-activa { border-left: 3px solid #2563eb; }

.visita-orden-completada {
    background: #d1fae5;
    color: #065f46;
    font-size: 13px;
}
.visita-orden-activa {
    background: #2563eb;
    color: #fff;
}

.visita-hora-fin { font-size: 12px; color: #059669; font-weight: 600; }

.visita-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Alertas de ruta ─────────────────────────────────────────────────────── */
.ruta-alertas { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.ruta-alerta {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 500;
}
.ruta-alerta-retraso  { background: #fef3c7; color: #92400e; }
.ruta-alerta-reciente { background: #e0f2fe; color: #0369a1; }

/* ── Badge visita en curso ───────────────────────────────────────────────── */
.ruta-badge-encurso {
    font-size: 11px;
    color: #2563eb;
    font-weight: 600;
    margin-bottom: 2px;
}

/* ── Botones de reordenación ─────────────────────────────────────────────── */
.ruta-orden-btns {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-left: 6px;
}
.ruta-orden-btn {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    width: 22px;
    height: 18px;
    font-size: 9px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ruta-orden-btn.disabled { opacity: 0.25; cursor: default; }
.ruta-orden-btn:not(.disabled):active { background: #f3f4f6; }

/* ── Estado vacío de ruta ────────────────────────────────────────────────── */
.ruta-empty {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
}
.ruta-empty .empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

/* ── Badge visita en curso (inyectado en .header activo) ── */
#visitaBadge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.15);
    border-radius: 20px;
    padding: 5px 10px 5px 7px;
    cursor: pointer;
    max-width: 130px;
    transition: background 0.3s;
    animation: vbPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
#visitaBadge:active { opacity: 0.8; }
.vb-dot {
    width: 8px; height: 8px;
    background: #ef4444;
    border-radius: 50%;
    flex-shrink: 0;
    animation: vbBlink 1s step-start infinite;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.3);
}
.vb-info { display: flex; flex-direction: column; min-width: 0; }
.vb-name { font-size: 10px; font-weight: 700; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.vb-timer { font-size: 11px; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; }
@keyframes vbPulse {
    0%,100% { background: rgba(0,0,0,0.15); }
    50%      { background: rgba(239,68,68,0.18); }
}
@keyframes vbBlink {
    0%,100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ── Notas de oportunidad ── */
.alerta-oportunidad {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
}
.alerta-oportunidad-meta {
    font-size: 11px;
    color: #16a34a;
    font-weight: 600;
    margin-bottom: 2px;
}
.alerta-oportunidad-texto {
    font-size: 13px;
    color: #15803d;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANNER MENSAJE MARKETING (60 Mensajes)
   ═══════════════════════════════════════════════════════════════════════════ */
.banner-mensaje-marketing {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fbbf24;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 10px 0;
}
.banner-mensaje-icono {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.banner-mensaje-texto {
    font-size: 13px;
    color: #92400e;
    line-height: 1.5;
    flex: 1;
}
.banner-mensaje-btn {
    flex-shrink: 0;
    background: #f59e0b;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCIONES COMERCIALES — acordeón (ficha cliente)
   ═══════════════════════════════════════════════════════════════════════════ */
.accion-acordeon {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    background: #fff;
}
.accion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.accion-header:hover { background: rgba(0,0,0,0.03); }
.accion-acordeon.open .accion-header { border-bottom: 1px solid #e5e7eb; }
.accion-prio { font-size: 16px; flex-shrink: 0; }
.accion-titulo-header {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #111;
}
.accion-arrow {
    color: #999;
    font-size: 12px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
.accion-detalle {
    display: none;
    padding: 12px 14px;
    background: #f9fafb;
}
.accion-detalle.open { display: block; }
.accion-titulo { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 3px; }
.accion-desc {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    white-space: pre-wrap;
    margin-bottom: 8px;
}
.accion-fecha { font-size: 11px; color: #9ca3af; margin-top: 6px; }
.accion-adjunto {
    display: inline-block;
    margin: 4px 0;
    font-size: 12px;
    color: #2563eb;
    text-decoration: none;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 5px;
    padding: 3px 8px;
    cursor: pointer;
    font-family: inherit;
}
.accion-adjunto:hover { background: #dbeafe; }
.modal-adjunto-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 700px;
    height: 100%;
    max-height: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    margin: auto;
}
#modalAdjuntoVisor.show {
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
}
.modal-adjunto-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #1e40af, #2563eb);
    flex-shrink: 0;
}
.modal-adjunto-nombre {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 8px;
}
.modal-adjunto-body {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    min-height: 200px;
}
.tarea-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.btn-doc-tarea {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    max-width: 220px;
    text-overflow: ellipsis;
}
.btn-doc-tarea:hover { background: #dbeafe; }

/* ═══════════════════════════════════════════════════════════════════════════
   MENSAJE MARKETING — nota de la tarea (texto encima del PDF)
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes marketing-border-blink {
    0%, 100% { border-color: #f59e0b; }
    50%       { border-color: transparent; }
}
.marketing-nota {
    font-size: 14px;
    font-weight: 700;
    color: #1a3fbf;
    text-align: center;
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0 0 12px;
    background: #fffbeb;
    border: 2px solid #f59e0b;
    border-radius: 8px;
    padding: 10px 14px;
    animation: marketing-border-blink 2.4s ease-in-out infinite;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PILLS DE ORDENACIÓN — Mi Cartera
   ═══════════════════════════════════════════════════════════════════════════ */
.orden-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    white-space: nowrap;
    flex-shrink: 0;
}
.orden-pill.active {
    background: #333;
    color: #fff;
    border-color: #333;
}
.orden-pill-icono {
    font-size: 10px;
    line-height: 1;
}

/* Campañas activas en ficha cliente */
#campañasActivasContainer,
#campañasContainer,
#novedadesContainer,
#accionesClienteContainer {
    margin-top: 8px;
}
.campaña-item {
    font-size: 13px;
    color: #374151;
    padding: 6px 8px;
    border-bottom: 1px solid #f3f4f6;
    line-height: 1.4;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.campaña-item:first-child { border-radius: 6px 6px 0 0; }
.campaña-item:last-child  { border-radius: 0 0 6px 6px; }
.campaña-item:last-child {
    border-bottom: none;
}
.campaña-item-2lines {
    align-items: flex-start;
}
.campaña-main {
    flex: 1;
    min-width: 0;
}
.campaña-detalle {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}
.campaña-fechas {
    font-size: 10px;
    color: #9ca3af;
    white-space: nowrap;
    margin-left: 8px;
}
.campaña-item-con-detalle {
    flex-direction: column;
    align-items: stretch;
}
.campaña-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
.campaña-L1-header {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.campaña-L2-header {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #374151;
    padding: 2px 0;
}
.campaña-L2-header[onclick] {
    cursor: pointer;
}
.campaña-chevron {
    font-size: 10px;
    color: #6b7280;
    user-select: none;
    flex-shrink: 0;
}
.campaña-chevron-dot {
    font-size: 10px;
    color: #d1d5db;
    user-select: none;
    flex-shrink: 0;
}
.campaña-nivel2 {
    display: none;
    padding-left: 8px;
    margin-top: 4px;
}
.campaña-nivel2.open {
    display: block;
}
.campaña-nivel3 {
    display: none;
    padding-left: 12px;
    margin-top: 2px;
    margin-bottom: 4px;
}
.campaña-nivel3.open {
    display: block;
}
.campaña-ref {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 0;
}
.campaña-subentradas {
    margin-top: 4px;
    width: 100%;
}
.campaña-subentrada {
    padding: 2px 0;
}
.campaña-subentrada + .campaña-subentrada {
    border-top: 1px solid #f3f4f6;
    padding-top: 4px;
    margin-top: 2px;
}
.campaña-subentrada-header {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * TABLETA — html.es-tableta
 * Todo lo específico de tableta va aquí, condicionado a esa clase.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Fondo centrado */
html.es-tableta body {
    background: #1e293b;
    justify-content: center;
}

/* Layout horizontal: sidebar + contenido */
html.es-tableta .phone-frame {
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

/* Ocultar elementos exclusivos de móvil */
html.es-tableta .bottom-nav     { display: none; }

/* Eliminar el padding-bottom reservado para el bottom-nav móvil */
html.es-tableta .tab-panel > .content,
html.es-tableta .view > .content,
html.es-tableta .content-bottom-80,
html.es-tableta .content-bottom-90 { padding-bottom: 0; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#tabletSidebar { display: none; }

html.es-tableta #tabletSidebar {
    display: flex;
    flex-direction: column;
    width: 200px;
    min-width: 200px;
    background: #14142a;
    color: #fff;
    height: 100%;
    overflow-y: auto;
}

html.es-tableta .tsb-header {
    padding: 20px 16px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
html.es-tableta .tsb-logo {
    font-size: 16px;
    font-weight: 700;
    color: #F2C811;
    margin-bottom: 4px;
    text-align: left;
}
html.es-tableta .tsb-subtitle {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    text-align: left;
}
html.es-tableta .tsb-username {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-top: 14px;
    text-align: left;
}

html.es-tableta .modal-content {
    max-width: 560px;
    max-height: 88vh;
}
html.es-tableta .modal-pbi {
    max-width: 760px;
    max-height: 92vh;
}
html.es-tableta .modal-magento-content {
    max-width: 600px;
}

html.es-tableta .tsb-nav {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
}
html.es-tableta .tsb-section {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    padding: 12px 16px 4px;
    text-transform: uppercase;
}
html.es-tableta .tsb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 15px;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    border-radius: 8px;
    margin: 1px 8px;
    transition: background 0.15s;
}
html.es-tableta .tsb-item:hover {
    background: rgba(255,255,255,0.07);
    color: #fff;
}
html.es-tableta .tsb-item.active {
    background: rgba(242,200,17,0.15);
    color: #F2C811;
    font-weight: 600;
}
html.es-tableta .tsb-badge {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}
html.es-tableta .tsb-badge:empty { display: none; }

html.es-tableta .tsb-section-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 0.15s;
}
html.es-tableta .tsb-section-toggle:hover { color: rgba(255,255,255,0.65); }
html.es-tableta .tsb-toggle-arrow {
    font-size: 14px;
    transition: transform 0.2s;
    color: rgba(255,255,255,0.4);
}
html.es-tableta .tsb-toggle-arrow.open { transform: rotate(90deg); }
html.es-tableta .tsb-submenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}
html.es-tableta .tsb-submenu.open { max-height: 600px; }
html.es-tableta .tsb-subitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 28px;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    border-radius: 6px;
    margin: 1px 8px;
    transition: background 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.es-tableta .tsb-subitem:hover { background: rgba(255,255,255,0.07); color: #fff; }
html.es-tableta .tsb-subitem-loading {
    padding: 8px 16px 8px 28px;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    font-style: italic;
}

/* ── Visor de documentación ───────────────────────────────────────── */
#visorDocPanel { display: none; }

.visor-doc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background .12s;
    font-size: 11px;
    color: #334155;
    min-height: 36px;
}
.visor-doc-item:hover  { background: #f0f7ff; }
.visor-doc-item.activo { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
.visor-doc-folder      { font-weight: 500; color: #1e3a5f; }
.visor-doc-icon        { font-size: 13px; flex-shrink: 0; }
.visor-doc-nombre      { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-doc-size        { font-size: 11px; color: #94a3b8; flex-shrink: 0; }

/* ── Visor de documentación: adaptación móvil ─────────────────────────────── */

/* Móvil: lista ocupa todo el ancho; preview oculto por defecto */
html:not(.es-tableta) #visorDocPreview { display: none; }
html:not(.es-tableta) #visorDocLista   { width: 100% !important; max-width: 100% !important; border-right: none !important; }

/* Móvil: modo preview activo → lista oculta, preview a pantalla completa */
html:not(.es-tableta) #visorDocPanel.visor-preview-activo #visorDocLista   { display: none; }
html:not(.es-tableta) #visorDocPanel.visor-preview-activo #visorDocPreview { display: block !important; flex: 1; }
html:not(.es-tableta) #visorDocPanel.visor-preview-activo #visorDocBackBtn { display: flex !important; align-items: center; }
/* Móvil: escalar el iframe para reducir el tamaño aparente del contenido y evitar scroll horizontal */
html:not(.es-tableta) #visorDocIframe {
    transform-origin: top left;
    transform: scale(0.82);
    width:  calc(100% / 0.82);
    height: calc(100% / 0.82);
}

/* ── FAB ayuda/docs (solo móvil) ──────────────────────────────────────────── */
/* Botón ❓ de ayuda en cabeceras — solo móvil */
.header-help-btn {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 20px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    flex-shrink: 0;
    align-self: center;
    -webkit-tap-highlight-color: transparent;
}
html.es-tableta .header-help-btn { display: none; }

/* Mini menú ayuda (dos opciones: Docs + Manual) */
.help-action-popup {
    position: absolute;
    top: 60px;
    right: 12px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    overflow: hidden;
    min-width: 200px;
    z-index: 1;
}
.help-action-popup button {
    display: block;
    width: 100%;
    padding: 15px 18px;
    background: none;
    border: none;
    text-align: left;
    font-size: 14px;
    cursor: pointer;
    color: #1e293b;
}
.help-action-popup button:active { background: #f1f5f9; }
.help-action-popup button + button { border-top: 1px solid #e2e8f0; }
html.es-tableta #helpActionMenu { display: none !important; }
html.es-tableta #ayudaPanel { left: 200px !important; } /* sidebar width — no cubrir el sidebar en tableta */
/* Móvil: los paneles no cubren la barra de navegación inferior */
html:not(.es-tableta) #visorDocPanel,
html:not(.es-tableta) #ayudaPanel { bottom: 72px !important; }
/* Móvil: barra inferior del visor — ambos botones visibles */
html:not(.es-tableta) #visorBtnVolver { display: block !important; }

html.es-tableta .tsb-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
html.es-tableta .tsb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F2C811;
    color: #000;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
html.es-tableta .tsb-footer-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
html.es-tableta .tsb-footer-meta {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
}

/* El contenido ocupa el espacio restante */
html.es-tableta .phone-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative; /* contexto para visorDocPanel (inset:0 no cubre el sidebar) */
}

/* ── Mis Retos — layout dos columnas ────────────────────────────────────── */
html.es-tableta #panel-retos > .content {
    display: grid;
    grid-template-columns: 3fr 5fr;
    column-gap: 16px;
    row-gap: 8px;
    padding: 16px;
    padding-bottom: 16px;
    background: #f0f7ff;
    min-height: 100%;
    align-items: start;
}

/* Columna izquierda — wrapper flex: evita que el grid distribuya altura del col derecho */
.retos-col1 { display: contents; } /* pass-through en móvil */
html.es-tableta .retos-col1 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: start;
}
html.es-tableta #panel-retos .objetivos-panel  { margin: 0; }
html.es-tableta #panel-retos .resumen-dia-card { margin: 0; }
html.es-tableta #panel-retos #pedidosHoyPanel  { margin: 0; }

/* Columna derecha — wrapper flex para Mi Cartera + Semáforo embebido */
.tablet-col2 { display: contents; } /* pass-through en móvil: hijos participan en el flujo */
html.es-tableta .tablet-col2 {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    align-self: start;
    gap: 12px;
    overflow-y: auto;
    min-height: 0;
}
html.es-tableta #panel-retos .cartera-resumen { margin: 0; }

/* Cabecera columna derecha: oculta en móvil */
.tablet-col2-header { display: none; }
html.es-tableta .tablet-col2-header { display: flex; margin-bottom: 0; min-height: 22px; }
html.es-tableta #panel-retos .titulo-icono { display: none; }

/* Panel semáforo embebido: oculto en móvil, visible en tableta */
#tabletSemaforoPanel { display: none; }
html.es-tableta #tabletSemaforoPanel {
    display: flex;
    flex-direction: column;
    background: #f0f7ff;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
/* Botones flotantes sobre fondo gris en el semáforo embebido */
html.es-tableta #tabletSemaforoPanel .tab-selector,
html.es-tableta #tabletSemaforoPanel .semaforo-type-selector {
    background: transparent;
    padding: 0;
    border-radius: 0;
    gap: 8px;
}
html.es-tableta #tabletSemaforoPanel .tab-btn,
html.es-tableta #tabletSemaforoPanel .semaforo-type-btn {
    background: #f0f7ff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}
html.es-tableta #tabletSemaforoPanel .semaforo-type-label {
    font-size: 13px;
    font-weight: 600;
}
html.es-tableta #tabletSemaforoPanel .semaforo-type-icon {
    font-size: 13px;
    line-height: 1;
}
html.es-tableta #tabletSemaforoPanel .tab-btn.active,
html.es-tableta #tabletSemaforoPanel .semaforo-type-btn.active {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.13);
    color: #111;
    font-weight: 600;
}
html.es-tableta #tabletSemaforoPanel #tsSemaforoList {
    overflow-y: auto;
    background: #f0f7ff;
    padding: 6px 10px 10px;
}

/* ── Cabecera Mis Retos en tableta ───────────────────────────────────────── */
html.es-tableta #panel-retos > .header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    color: #111;
    padding: 8px 20px;
    display: grid;
    grid-template-columns: 3fr 5fr;
    column-gap: 16px;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 20;
}
/* Badge visita en curso: posición absoluta para no romper la grid del header */
html.es-tableta #panel-retos > .header #visitaBadge {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: rgba(37,99,235,0.12);
}
/* Título y fecha en una sola fila, en flex horizontal */
html.es-tableta #panel-retos > .header > div:first-child {
    grid-column: 1;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
html.es-tableta #panel-retos > .header h1 { font-size: 16px; color: #111; white-space: nowrap; }
html.es-tableta #panel-retos > .header .header-subtitle,
html.es-tableta #panel-retos > .header .header-user { display: none; }
html.es-tableta #panel-retos > .header #debugDateTime {
    font-family: inherit;
    font-size: 12px;
    color: #9ca3af;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}
html.es-tableta #panel-retos > .header #debugDateTime.badge-visible {
    visibility: hidden;
}

/* Botones PBI más grandes en tableta */
html.es-tableta .btn-pbi-icon-labeled span:first-child { font-size: 22px; }
html.es-tableta .pbi-logo { width: 24px; height: 24px; }
html.es-tableta .btn-pbi-label { font-size: 11px; color: rgba(0,0,0,0.6); }

/* ── Objetivos: panel limpio ─────────────────────────────────────────────── */
html.es-tableta #panel-retos .objetivos-panel {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 12px;
    padding: 12px;
}
html.es-tableta #panel-retos .objetivos-header {
    margin-bottom: 10px;
}
html.es-tableta #panel-retos .tablet-col2-header {
    display: none;
}
html.es-tableta #panel-retos .objetivos-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: normal;
    color: #1e3a5f;
    text-transform: none;
}
html.es-tableta #panel-retos .objetivos-dias {
    font-size: 11px;
    background: rgba(255,255,255,0.6);
    color: #1e40af;
}

/* ── Objetivo items: sobre fondo azul, sin tarjeta blanca ────────────────── */
html.es-tableta #panel-retos .objetivo-item {
    background: transparent;
    border-radius: 0;
    padding: 10px 0;
    margin-bottom: 0;
    box-shadow: none;
    border-bottom: 1px solid rgba(147,197,253,0.4);
}
html.es-tableta #panel-retos .objetivo-item:last-of-type {
    border-bottom: none;
}
/* Layout vertical dentro del item */
html.es-tableta #panel-retos .objetivo-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 6px;
}
html.es-tableta #panel-retos .objetivo-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: #1e40af;
}
html.es-tableta #panel-retos .objetivo-valores {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    line-height: 1.1;
}
/* Metadata "de X € objetivo Y%" en línea propia, más pequeño */
html.es-tableta #panel-retos .obj-meta-tablet {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #6b7280;
    margin-top: 2px;
}
html.es-tableta #panel-retos .obj-meta-tablet strong { color: #6b7280; font-weight: 600; }
html.es-tableta #panel-retos .objetivo-de { font-size: 13px; font-weight: 400; color: #9ca3af; }
html.es-tableta #panel-retos .objetivo-barra { margin-top: 6px; height: 4px; }
html.es-tableta #panel-retos .objetivo-mensaje { margin-top: 6px; font-size: 11px; }

/* ── Comisiones: tarjeta morada ──────────────────────────────────────────── */
html.es-tableta #panel-retos .objetivo-bonus {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-radius: 10px;
    padding: 14px;
    font-size: 12px;
    margin-top: 8px;
    align-items: center;
    flex-direction: row;
    gap: 8px;
}

/* ── Gamificación: fichas ─────────────────────────────────────────────────── */
html.es-tableta #panel-retos .gamificacion-panel { margin-top: 8px; }
html.es-tableta #panel-retos .racha-card,
html.es-tableta #panel-retos .logros-card {
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

/* ── Escalado tipográfico global para tableta ────────────────────────────── */
/* +2px sobre los tamaños móvil en los elementos de contenido más visibles   */
html.es-tableta .phone-content { font-size: 15px; }

html.es-tableta #panel-retos .objetivo-label       { font-size: 14px; }
html.es-tableta #panel-retos .objetivo-valores     { font-size: 14px; }
html.es-tableta #panel-retos .obj-meta-tablet      { font-size: 12px; }
html.es-tableta #panel-retos .objetivo-mensaje     { font-size: 12px; }
html.es-tableta #panel-retos .objetivos-dias       { font-size: 12px; }
html.es-tableta #panel-retos .objetivos-title      { font-size: 15px; font-weight: 700; color: #1e40af; }
html.es-tableta #panel-retos .objetivo-bonus       { font-size: 14px; }
html.es-tableta #panel-retos .racha-numero         { font-size: 28px; }
html.es-tableta #panel-retos .racha-texto          { font-size: 13px; }
html.es-tableta #panel-retos .logros-titulo        { font-size: 14px; }
html.es-tableta #panel-retos .logro-item           { font-size: 13px; }

html.es-tableta .cartera-title                     { font-size: 15px; }
html.es-tableta .cartera-kpi-value                 { font-size: 20px; }
html.es-tableta .cartera-kpi-label                 { font-size: 12px; }
html.es-tableta .cartera-kpi-obj                   { font-size: 12px; }

html.es-tableta .resumen-dia-titulo                { font-size: 15px; }
html.es-tableta .resumen-dia-stat-value            { font-size: 22px; }
html.es-tableta .resumen-dia-stat-label            { font-size: 12px; }
html.es-tableta .resumen-dia-fecha                 { font-size: 13px; }

/* Contenedor 4:3 sin biseles de móvil.
   width y height se calculan independientemente para garantizar que el
   contenedor siempre cabe en el viewport y mantiene exactamente 4:3:
   - 1280×800:  width=1067, height=800  → 1067/800  = 4/3 ✓
   - 1920×1080: width=1440, height=1080 → 1440/1080 = 4/3 ✓
   - 1024×768:  width=1024, height=768  → 1024/768  = 4/3 ✓ */
html.es-tableta .phone-frame {
    width: min(100vw, calc(100vh * 4 / 3));
    height: min(100vh, calc(100vw * 3 / 4));
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    flex-shrink: 0;
}

html.es-tableta .phone-notch,
html.es-tableta .phone-home-indicator {
    display: none;
}

/* ── Mi Ruta — layout tableta ────────────────────────────────────────────── */

/* Cabecera: mismo grid 3fr/5fr — título+fecha quedan en la columna izquierda */
html.es-tableta #panel-ruta > .header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    color: #111;
    padding: 8px 16px;
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: 16px;
    align-items: center;
}
html.es-tableta #panel-ruta > .header > div:first-child {
    grid-column: 1; grid-row: 1; justify-self: start; align-self: center;
}
html.es-tableta #panel-ruta > .header .date-selector {
    grid-column: 1; grid-row: 1; justify-self: end; align-self: center; margin: 0;
}
html.es-tableta #panel-ruta > .header h1 { font-size: 16px; color: #111; margin: 0; }
html.es-tableta #panel-ruta > .header .header-user { display: none; }

/* El tab-panel no scrollea: el scroll queda dentro de la columna izquierda */
html.es-tableta #panel-ruta {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Contenido: grid 3fr/5fr que llena el espacio restante sin desbordarse */
html.es-tableta #panel-ruta > .content {
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: 16px;
    padding: 16px;
    background: #f0f7ff;
    flex: 1;
    overflow: hidden;
    align-items: stretch;   /* ambas columnas se estiran a la altura total */
    align-content: stretch;
}

/* Columna izquierda: transparente en móvil, scrollable en tableta */
#rutaColIzquierda { display: contents; }
html.es-tableta #rutaColIzquierda {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Panel mapa: columna derecha, llena su celda sin scroll propio */
html.es-tableta #panel-ruta > .content > #tabletMapaPanel {
    grid-column: 2;
}

/* ── Stats de ruta en cabecera de Mi Ruta (tableta, columna derecha) ───── */
#tabletMapaStats { display: none; }
html.es-tableta #tabletMapaStats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    grid-column: 2;
    grid-row: 1;
    gap: 16px;
    padding: 0 8px;
}
html.es-tableta .ts-route-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
html.es-tableta .ts-route-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
}
html.es-tableta .ts-route-stat-vuelta {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}
html.es-tableta .ts-route-stat-label {
    font-size: 10px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
html.es-tableta #tabletMapaStats .kpi-periodo-label { color: #555; }

/* ── Panel mapa embebido en Mi Ruta (tableta) ──────────────────────────── */
#tabletMapaPanel { display: none; }
html.es-tableta #tabletMapaPanel {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* ── Overlay cliente seleccionado (desliza desde abajo del mapa) ────────── */
#tabletClienteOverlay { display: none; }
html.es-tableta #tabletClienteOverlay {
    display: block;
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    padding: 14px 16px 16px;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    z-index: 10;
}
html.es-tableta #tabletClienteOverlay.visible { transform: translateY(0); }
.tco-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tco-info { flex: 1; min-width: 0; }
.tco-nombre { font-size: 14px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tco-tipo { font-size: 12px; color: #6b7280; margin-top: 1px; }
.tco-btn-ficha { font-size: 12px; font-weight: 600; color: #2563eb; background: none; border: 1.5px solid #2563eb; border-radius: 6px; padding: 5px 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.tco-close { font-size: 16px; color: #9ca3af; background: none; border: none; cursor: pointer; flex-shrink: 0; padding: 2px 6px; line-height: 1; }
.tco-kpis { display: flex; gap: 8px; flex-wrap: wrap; }
.tco-kpi { display: flex; flex-direction: column; align-items: center; background: #f8fafc; border-radius: 8px; padding: 6px 14px; }
.tco-kpi-value { font-size: 14px; font-weight: 700; color: #111; white-space: nowrap; }
.tco-kpi-label { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
html.es-tableta #tabletMapContainer {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    touch-action: none;
}
html.es-tableta #tabletMapContainer .map-container {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}
/* Ocultar entrada Mapa en sidebar tableta (el mapa vive en Mi Ruta) */
html.es-tableta #tsbMapa { display: none; }

/* ── Mi Cartera — layout tableta ────────────────────────────────────────── */

/* Necesario para que view-cliente pueda posicionarse absolutamente */
html.es-tableta .phone-content { position: relative; }

/* Header: blanco como el resto de vistas tableta */
html.es-tableta #view-cartera.active > .header {
    background: #fff;
    color: #111;
    border-bottom: 1px solid #e5e7eb;
}
html.es-tableta #view-cartera.active > .header h1 {
    font-size: 16px;
    color: #111;
    margin: 0;
}
html.es-tableta #view-cartera.active > .header .header-back-btn-dark { display: none; }

/* Content: columna izquierda scrolleable */
html.es-tableta #view-cartera.active > .content {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    background: #f0f7ff;
    padding: 12px;
}

/* Modo split: cartera ocupa el 37.5% izquierdo (3fr de 8fr) */
html.es-tableta #view-cartera.active.cartera-split {
    width: 37.5%;
    border-right: 1px solid #e5e7eb;
}

/* Panel de cliente: posición absoluta en el 62.5% derecho */
/* :has() garantiza que desaparece automáticamente al salir de cartera */
html.es-tableta .phone-content:has(#view-cartera.active) #view-cliente.tablet-cartera-panel {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    left: 37.5%;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 5;
    overflow: hidden;
    border-left: 1px solid #e5e7eb;
}
/* Sub-vistas del cliente (emails, notas) como panel derecho en tablet cartera */
html.es-tableta .phone-content:has(#view-cartera.active) #view-emails-todos.tablet-cartera-panel,
html.es-tableta .phone-content:has(#view-cartera.active) #view-notas-todas.tablet-cartera-panel {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    left: 37.5%;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 6;
    overflow: hidden;
    border-left: 1px solid #e5e7eb;
}

/* El ::before ya no hace falta: .client-header (dorado) actúa como cabecera del panel derecho */

/* Panel vacío: solo visible cuando view-cartera está activa */
html.es-tableta .phone-content:not(:has(#view-cartera.active)) #tabletCarteraEmpty {
    display: none !important;
}

/* Panel vacío derecho (estado inicial, antes de seleccionar cliente) */
#tabletCarteraEmpty {
    display: none;
    position: absolute;
    left: 37.5%;
    top: 0; right: 0; bottom: 0;
    background: #f9fafb;
    z-index: 4;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #9ca3af;
    font-size: 14px;
}
#tabletCarteraEmpty p { margin: 0; }

/* Tarjeta seleccionada en la lista */
.cartera-cliente.tablet-selected {
    background: #eff6ff !important;
    border-left: 3px solid #4f46e5;
}

/* El sticky de filtros hereda el gris del contenedor en tableta */
html.es-tableta #view-cartera .cartera-filtros-sticky {
    background: #f0f7ff;
}

/* Panel derecho Mi Cartera: fondo gris desde arriba, .content scrollea */
html.es-tableta #view-cliente.tablet-cartera-panel {
    background: #f0f7ff !important;
}
html.es-tableta #view-cliente.tablet-cartera-panel > .content {
    background: #f0f7ff;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-top: 0;
}

/* Cabecera dorada: pastilla redondeada con margen, pegada arriba del panel */
html.es-tableta #view-cliente.tablet-cartera-panel > .client-header {
    flex-shrink: 0;
    position: relative;
    top: auto;
    margin: 0 12px 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

/* ── Agenda/Calendario — layout tableta ─────────────────────────────────── */

/* Content: fila con dos columnas */
html.es-tableta #view-agenda.active > .content {
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden;
    padding: 0;
}

/* Columna izquierda: calendario */
html.es-tableta #agendaLeftColumn {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #e5e7eb;
    min-height: 0;
}

/* Cabeceras y leyenda: tamaño fijo */
html.es-tableta #view-agenda.active #agendaLeftColumn .tab-header-container,
html.es-tableta #view-agenda.active #agendaLeftColumn .tab-header-controls,
html.es-tableta #view-agenda.active #agendaLeftColumn .bottom-controls {
    flex-shrink: 0;
}

/* Vistas del calendario: scrollables */
html.es-tableta #view-agenda.active #calendarSemana,
html.es-tableta #view-agenda.active #calendarMes {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

/* Tabla semana: ancho 100% del contenedor (override del cálculo JS con píxeles) */
html.es-tableta #view-agenda.active .calendar-table {
    width: 100% !important;
}
/* Columnas: porcentajes para que el reparto sea correcto sin depender de clientWidth */
html.es-tableta #view-agenda.active #calendarSemana colgroup col:nth-child(1) { width: 7% !important; }
html.es-tableta #view-agenda.active #calendarSemana colgroup col:nth-child(2),
html.es-tableta #view-agenda.active #calendarSemana colgroup col:nth-child(3),
html.es-tableta #view-agenda.active #calendarSemana colgroup col:nth-child(4),
html.es-tableta #view-agenda.active #calendarSemana colgroup col:nth-child(5),
html.es-tableta #view-agenda.active #calendarSemana colgroup col:nth-child(6) { width: 16% !important; }
html.es-tableta #view-agenda.active #calendarSemana colgroup col:nth-child(7),
html.es-tableta #view-agenda.active #calendarSemana colgroup col:nth-child(8) { width: 5.5% !important; }

/* Lista agenda (mobile): siempre oculta en tableta */
html.es-tableta #view-agenda.active #calendarAgendaList { display: none !important; }

/* Pestaña "Agenda" del selector izquierdo: oculta en tableta */
html.es-tableta #view-agenda.active #tabAgendaList { display: none; }

/* Panel derecho: oculto por defecto */
#tabletAgendaRightPanel { display: none; }

html.es-tableta #view-agenda.active #tabletAgendaRightPanel {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Pestañas del panel derecho */
html.es-tableta #view-agenda.active .tablet-agenda-right-tabs {
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}

/* Contenidos scrollables del panel derecho */
.tablet-agenda-right-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: 16px;
}

/* Encabezado de fecha del panel derecho: misma altura que la fila de navegación izquierda */
html.es-tableta #view-agenda.active .tablet-agenda-right-content .agenda-fecha-header {
    padding: 13px 16px 12px;
    margin-bottom: 0;
}

/* ── Email — layout tableta ─────────────────────────────────────────────── */

html.es-tableta #view-email.active {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

html.es-tableta #view-email.active > .header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    color: #111;
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    padding: 0 20px;
}

html.es-tableta #view-email.active > .header h1 {
    font-size: 15px;
    color: #111;
    margin: 0;
    font-weight: 600;
}

html.es-tableta #view-email.active > .header .header-subtitle { display: none; }
html.es-tableta #view-email.active > .header .back-btn { display: none; }

/* Sufijo "· Bandeja de entrada" en el h1 — sólo tableta */
.tablet-email-bandeja-suffix { display: none; }
html.es-tableta .tablet-email-bandeja-suffix {
    display: inline;
    font-weight: 400;
    color: #6b7280;
    font-size: 14px;
}

/* Zona derecha del header: fecha + botón Nuevo email */
.tablet-email-header-right { display: none; }
html.es-tableta .tablet-email-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.tablet-email-header-date {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
}

.tablet-btn-nuevo-email { display: none; }
html.es-tableta .tablet-btn-nuevo-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    padding: 7px 14px;
}

/* FAB oculto en tableta */
html.es-tableta #view-email.active .fab-container { display: none; }

/* Contenido: grid 3fr / 5fr sin padding */
html.es-tableta #view-email.active > .content {
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: 0;
    overflow: hidden;
    flex: 1;
    padding: 0;
}

/* Columna izquierda: lista scrolleable */
#emailListColumn { display: contents; }
html.es-tableta #emailListColumn {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
    border-right: 1px solid #e5e7eb;
    padding: 12px 0 12px 0;
    gap: 0;
}

html.es-tableta #emailListColumn #clienteFilterBanner { margin: 0 12px 8px; flex-shrink: 0; }
html.es-tableta #emailListColumn #emailFilters { padding: 0 12px; margin-bottom: 4px; flex-shrink: 0; }
html.es-tableta #emailListColumn #emailList { flex: 1; overflow-y: auto; min-height: 0; }

/* Cabecera de sección (Outlook · N sin leer) en columna izquierda */
.tablet-email-section-header { display: none; }
html.es-tableta .tablet-email-section-header {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    padding: 4px 12px 6px;
    flex-shrink: 0;
}
html.es-tableta .tablet-email-section-header:empty { display: none; }

/* Columna derecha: panel de detalle */
#tabletEmailDetailPanel { display: none; }
html.es-tableta #tabletEmailDetailPanel {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #fafafa;
    min-height: 0;
}

/* Estado vacío */
.tablet-email-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #9ca3af;
    font-size: 14px;
}
.tablet-email-empty-icon { font-size: 48px; opacity: 0.3; }

/* Inner del detalle */
.tablet-email-detail-inner {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tablet-email-subject {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 14px;
    line-height: 1.3;
}

.tablet-email-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
}
.tablet-email-meta-row { font-size: 13px; color: #374151; }
.tablet-meta-label { font-weight: 600; color: #6b7280; margin-right: 4px; }

.tablet-email-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.tablet-email-actions-secondary {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.tablet-email-body {
    font-size: 14px;
    color: #374151;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}
.tablet-email-body p { margin: 0 0 8px; }

/* Cabecera del compositor inline */
.tablet-composer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}
.tablet-composer-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
}
.tablet-composer-mic-btn {
    font-size: 12px;
    padding: 4px 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s, border-color 0.15s;
}
.tablet-composer-mic-btn:hover { background: #f3f4f6; }
.tablet-composer-mic-btn.grabando {
    background: #fee2e2;
    border-color: #ef4444;
    color: #dc2626;
}

/* Email card seleccionado en lista */
.email-card.email-selected,
.email-card.email-selected:hover {
    background: #eff6ff;
    border-left-color: #4f46e5;
}