/* =========================================================
   MESA DE AYUDA OTI - ESTILO DASHBOARD PREMIUM
   Inspirado en diseño limpio tipo software moderno/Tesla.
   Archivo: mesa_oti_premium.css
   Uso:
   <link rel="stylesheet" href="css/mesa_oti_premium.css">
   IMPORTANTE: colocarlo DESPUÉS del CSS principal.
   ========================================================= */

:root{
    --oti-blue:#013766;
    --oti-blue-2:#00539b;
    --oti-text:#0f172a;
    --oti-muted:#64748b;
    --oti-border:#e6edf5;
    --oti-bg:#f3f6fa;
    --oti-card:#ffffff;

    --kpi-nuevo:#1d7ff2;
    --kpi-validado:#22c55e;
    --kpi-asignado:#f59e0b;
    --kpi-proceso:#1d7ff2;
    --kpi-atendido:#8b5cf6;
    --kpi-cerrado:#22c55e;
    --kpi-rechazado:#ef4444;
    --kpi-tiempo:#64748b;

    --shadow-soft:0 12px 34px rgba(15,23,42,.07);
    --shadow-card:0 18px 42px rgba(15,23,42,.08);
}

/* ===== BASE GENERAL ===== */

body{
    background:
        radial-gradient(circle at top center, rgba(255,255,255,.95), transparent 28%),
        linear-gradient(180deg,#f8fafc 0%,#eef3f8 100%) !important;
    font-family:Inter, "Segoe UI", Arial, sans-serif !important;
    color:var(--oti-text) !important;
}

.container{
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(226,232,240,.95) !important;
    border-radius:24px !important;
    box-shadow:0 22px 70px rgba(15,23,42,.10) !important;
    padding:24px !important;
}

/* ===== BARRA SUPERIOR ===== */

.session-bar,
.navbar,
.topbar{
    background:rgba(255,255,255,.96) !important;
    border:1px solid var(--oti-border) !important;
    border-radius:14px !important;
    box-shadow:0 10px 28px rgba(15,23,42,.04) !important;
}

.session-bar a,
.navbar a,
.topbar a{
    color:var(--oti-blue) !important;
    font-weight:800 !important;
    text-decoration:none !important;
}

/* ===== ENCABEZADO PRINCIPAL ===== */

.top{
    min-height:120px !important;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;
    border:1px solid var(--oti-border) !important;
    border-radius:22px !important;
    box-shadow:0 18px 46px rgba(15,23,42,.06) !important;
    padding:24px 30px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:24px !important;
}

.top h1{
    color:var(--oti-blue) !important;
    font-size:32px !important;
    font-weight:900 !important;
    letter-spacing:-.045em !important;
    margin:0 !important;
}

.top .subtitle{
    color:var(--oti-muted) !important;
    margin-top:8px !important;
    font-size:14px !important;
}

.badge{
    background:linear-gradient(135deg,#22c55e,#16a34a) !important;
    color:#fff !important;
    border-radius:18px !important;
    padding:12px 18px !important;
    font-weight:900 !important;
    box-shadow:0 14px 26px rgba(34,197,94,.25) !important;
}

/* ===== CONTROL RÁPIDO TAMAÑO KPI =====
   Para regular el tamaño de las tarjetas:
   - Alto: .dashboard .card -> min-height
   - Espacio interno: .dashboard .card -> padding
   - Icono: .dashboard .card::before -> width/height/font-size
   - Número: .dashboard .card strong -> font-size
   - Subtexto: .dashboard .card span::after -> margin-top/font-size
========================================================= */

/* ===== KPI CARDS ===== */

.dashboard{
    display:grid !important;
    grid-template-columns:repeat(8,minmax(145px,1fr)) !important;
    gap:18px !important;
    margin:28px 0 26px !important;
}

.dashboard .card{
    position:relative !important;
    min-height:92px !important;
    padding:16px 14px 14px 72px !important;
    border-radius:20px !important;
    border:1px solid var(--oti-border) !important;
    background:#fff !important;
    box-shadow:var(--shadow-card) !important;
    overflow:hidden !important;
    transition:all .24s ease !important;
}

.dashboard .card:hover{
    transform:translateY(-4px) !important;
    box-shadow:0 26px 65px rgba(15,23,42,.13) !important;
}

.dashboard .card::before{
    content:"";
    position:absolute !important;
    left:18px !important;
    top:22px !important;
    width:42px !important;
    height:42px !important;
    border-radius:15px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:22px !important;
    font-weight:900 !important;
    line-height:1 !important;
}

.dashboard .card::after{
    content:"";
    position:absolute !important;
    left:18px !important;
    right:54px !important;
    bottom:0 !important;
    height:5px !important;
    border-radius:999px 999px 0 0 !important;
    background:var(--kpi-nuevo) !important;
}

.dashboard .card span{
    display:block !important;
    color:#414141 !important;
    font-size:12px !important;
    font-weight:900 !important;
    letter-spacing:.075em !important;
    text-transform:uppercase !important;
    margin:0 0 9px !important;
    white-space:nowrap !important;
}

.dashboard .card strong{
    display:block !important;
    color:#0f172a !important;
    font-size:24px !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:-.055em !important;
    white-space:nowrap !important;
}

/* Subtexto bajo número, generado por CSS */
.dashboard .card span::after{
    display:block;
    margin-top:28px;
    font-size:10px;
    text-transform:none;
    letter-spacing:0;
    font-weight:700;
    color:#64748b;
}

/* Nuevo */
.dashboard .card.nuevo{
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
}
.dashboard .card.nuevo::before{
    content:"▣";
    color:var(--kpi-nuevo);
    background:#eaf3ff;
}
.dashboard .card.nuevo::after{
    background:var(--kpi-nuevo) !important;
}
.dashboard .card.nuevo span::after{
    content:"Sin validar";
}

/* Validado */
.dashboard .card.validado{
    background:linear-gradient(180deg,#ffffff 0%,#f7fff9 100%) !important;
}
.dashboard .card.validado::before{
    content:"✓";
    color:var(--kpi-validado);
    background:#dcfce7;
}
.dashboard .card.validado::after{
    background:var(--kpi-validado) !important;
}
.dashboard .card.validado strong{
    color:#0f172a !important;
}
.dashboard .card.validado span::after{
    content:"Validados";
}

/* Asignado */
.dashboard .card.asignado{
    background:linear-gradient(180deg,#ffffff 0%,#fff8ed 100%) !important;
}
.dashboard .card.asignado::before{
    content:"♙";
    color:var(--kpi-asignado);
    background:#fff1d6;
}
.dashboard .card.asignado::after{
    background:var(--kpi-asignado) !important;
}
.dashboard .card.asignado span::after{
    content:"En asignación";
}

/* Proceso */
.dashboard .card.proceso{
    background:linear-gradient(180deg,#ffffff 0%,#f2f8ff 100%) !important;
}
.dashboard .card.proceso::before{
    content:"◌";
    color:var(--kpi-proceso);
    background:#eaf3ff;
}
.dashboard .card.proceso::after{
    background:var(--kpi-proceso) !important;
}
.dashboard .card.proceso span::after{
    content:"En atención";
}

/* Atendido */
.dashboard .card.atendidos{
    background:linear-gradient(180deg,#ffffff 0%,#fbf7ff 100%) !important;
}
.dashboard .card.atendidos::before{
    content:"◯";
    color:var(--kpi-atendido);
    background:#f1e7ff;
}
.dashboard .card.atendidos::after{
    background:var(--kpi-atendido) !important;
}
.dashboard .card.atendidos span::after{
    content:"Solucionados";
}

/* Cerrado */
.dashboard .card.cerrado{
    background:linear-gradient(180deg,#ffffff 0%,#f6fff8 100%) !important;
}
.dashboard .card.cerrado::before{
    content:"⌾";
    color:var(--kpi-cerrado);
    background:#dcfce7;
}
.dashboard .card.cerrado::after{
    background:var(--kpi-cerrado) !important;
}
.dashboard .card.cerrado span::after{
    content:"Completados";
}

/* Rechazado */
.dashboard .card.rechazados{
    background:linear-gradient(180deg,#ffffff 0%,#fff5f5 100%) !important;
}
.dashboard .card.rechazados::before{
    content:"×";
    color:var(--kpi-rechazado);
    background:#fee2e2;
}
.dashboard .card.rechazados::after{
    background:var(--kpi-rechazado) !important;
}
.dashboard .card.rechazados strong{
    color:#991b1b !important;
}
.dashboard .card.rechazados span::after{
    content:"No procedentes";
}

/* Tiempo promedio */
.dashboard .card.promedio{
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
    min-width:160px !important;
}
.dashboard .card.promedio::before{
    content:"◷";
    color:var(--kpi-tiempo);
    background:#f1f5f9;
}
.dashboard .card.promedio::after{
    background:var(--kpi-tiempo) !important;
}
.dashboard .card.promedio strong{
    color:#0f172a !important;
    font-size:22px !important;
    white-space:nowrap !important;
}
.dashboard .card.promedio span::after{
    content:"Tiempo de atención";
}

/* ===== FILTROS ===== */

.filters{
    display:grid !important;
    grid-template-columns:1.8fr 1fr 1fr 1fr .8fr auto !important;
    gap:14px !important;
    margin-bottom:20px !important;
    align-items:center !important;
}

.filters input,
.filters select{
    height:42px !important;
    border-radius:15px !important;
    background:#fbfdff !important;
    border:1px solid var(--oti-border) !important;
    box-shadow:0 8px 22px rgba(15,23,42,.035) !important;
    font-size:13px !important;
}

.filters button,
.filters a,
.filters .btn{
    height:42px !important;
    border-radius:16px !important;
    font-weight:900 !important;
}

/* ===== BOTONES ===== */

button,
.btn,
a.btn,
.export-btn{
    border-radius:13px !important;
    font-weight:900 !important;
    transition:all .22s ease !important;
}

button:hover,
.btn:hover,
a.btn:hover,
.export-btn:hover{
    transform:translateY(-2px) !important;
}

/* ===== TABLA ===== */

.table-wrap,
.table-container,
.table-responsive{
    border-radius:18px !important;
    overflow:auto !important;
    border:1px solid var(--oti-border) !important;
    box-shadow:0 18px 48px rgba(15,23,42,.07) !important;
    background:#fff !important;
}

table{
    border-collapse:separate !important;
    border-spacing:0 !important;
}

thead th{
    background:#004683 !important;
    color:#fff !important;
    padding:14px 14px !important;
    font-size:11px !important;
    text-transform:uppercase !important;
    letter-spacing:.045em !important;
    border:none !important;
}

tbody td{
    padding:14px !important;
    border-bottom:1px solid #eef2f7 !important;
    background:#fff !important;
    font-size:13px !important;
}

tbody tr{
    transition:background .18s ease, transform .18s ease !important;
}

tbody tr:hover td{
    background:#f8fbff !important;
}

/* Etiquetas */
.servicio-tag,
.estado,
.prioridad,
.badge-estado,
.badge-prioridad{
    border-radius:999px !important;
    font-weight:900 !important;
    padding:7px 12px !important;
}

/* Scroll */
*::-webkit-scrollbar{
    width:10px;
    height:10px;
}
*::-webkit-scrollbar-track{
    background:#e2e8f0;
    border-radius:999px;
}
*::-webkit-scrollbar-thumb{
    background:#94a3b8;
    border-radius:999px;
}
*::-webkit-scrollbar-thumb:hover{
    background:#64748b;
}

/* ===== RESPONSIVE ===== */

@media(max-width:1600px){
    .dashboard{
        grid-template-columns:repeat(4,minmax(180px,1fr)) !important;
    }
}

@media(max-width:1000px){
    .filters{
        grid-template-columns:1fr 1fr !important;
    }

    .top{
        flex-direction:column !important;
        text-align:center !important;
    }
}

@media(max-width:700px){
    .dashboard{
        grid-template-columns:repeat(2,minmax(150px,1fr)) !important;
    }

    .dashboard .card{
        padding-left:76px !important;
    }
}

@media(max-width:480px){
    .dashboard,
    .filters{
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   RESPONSIVE FINAL KPI OTI - MACBOOK / LAPTOP / TABLET
   - MacBook Pro 14" Retina / laptops 1400-1800px: 8 KPI en una fila compacta.
   - Laptop/tablet menor a 1399px: 4 + 4.
   - Tablet vertical: 2 columnas.
   - Celular: 1 columna.
   IMPORTANTE: este bloque debe quedar al FINAL del archivo.
   ========================================================= */

/* Base segura para KPI */
html body .container .dashboard,
html body .container .dashboard.kpi-dashboard-oti{
    box-sizing:border-box !important;
}

/* MacBook Pro 14" y laptops similares: 8 KPI en una fila */
@media screen and (min-width:1400px) and (max-width:1800px){

    html body .container .dashboard,
    html body .container .dashboard.kpi-dashboard-oti{
        display:grid !important;
        grid-template-columns:repeat(8, minmax(0, 1fr)) !important;
        gap:10px !important;
        width:100% !important;
        max-width:100% !important;
        margin:24px 0 28px 0 !important;
        padding:0 !important;
        overflow:visible !important;
        transform:none !important;
    }

    html body .container .dashboard > .card,
    html body .container .dashboard.kpi-dashboard-oti > .card{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        height:92px !important;
        min-height:92px !important;
        max-height:92px !important;

        padding:12px 8px 12px 48px !important;
        border-radius:16px !important;

        box-sizing:border-box !important;
        overflow:hidden !important;
        position:relative !important;
    }

    html body .container .dashboard > .card::before,
    html body .container .dashboard.kpi-dashboard-oti > .card::before{
        left:12px !important;
        top:18px !important;
        width:28px !important;
        height:28px !important;
        min-width:28px !important;
        min-height:28px !important;
        border-radius:10px !important;
        font-size:13px !important;
        line-height:1 !important;
    }

    html body .container .dashboard > .card::after,
    html body .container .dashboard.kpi-dashboard-oti > .card::after{
        left:12px !important;
        right:12px !important;
        height:3px !important;
    }

    html body .container .dashboard > .card span,
    html body .container .dashboard.kpi-dashboard-oti > .card span{
        font-size:9px !important;
        letter-spacing:.055em !important;
        line-height:1.05 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:clip !important;
    }

    html body .container .dashboard > .card span::after,
    html body .container .dashboard.kpi-dashboard-oti > .card span::after{
        margin-top:22px !important;
        font-size:6.8px !important;
        line-height:1.05 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:clip !important;
    }

    html body .container .dashboard > .card strong,
    html body .container .dashboard.kpi-dashboard-oti > .card strong{
        font-size:17px !important;
        line-height:1 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:clip !important;
    }

    html body .container .dashboard > .card.promedio strong,
    html body .container .dashboard.kpi-dashboard-oti > .card.promedio strong{
        font-size:14px !important;
        letter-spacing:-.045em !important;
        white-space:nowrap !important;
    }
}

/* Laptops angostas / tablets horizontales: 4 + 4 */
@media screen and (min-width:901px) and (max-width:1399px){

    html body .container .dashboard,
    html body .container .dashboard.kpi-dashboard-oti{
        display:grid !important;
        grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
        gap:14px !important;
        width:100% !important;
        max-width:100% !important;
        margin:24px 0 28px 0 !important;
        padding:0 !important;
        overflow:visible !important;
        transform:none !important;
    }

    html body .container .dashboard > .card,
    html body .container .dashboard.kpi-dashboard-oti > .card{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        height:102px !important;
        min-height:102px !important;
        max-height:102px !important;
        padding:15px 12px 14px 58px !important;
        border-radius:18px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    html body .container .dashboard > .card::before,
    html body .container .dashboard.kpi-dashboard-oti > .card::before{
        left:14px !important;
        top:22px !important;
        width:34px !important;
        height:34px !important;
        border-radius:12px !important;
        font-size:15px !important;
    }

    html body .container .dashboard > .card strong,
    html body .container .dashboard.kpi-dashboard-oti > .card strong{
        font-size:24px !important;
    }

    html body .container .dashboard > .card.promedio strong,
    html body .container .dashboard.kpi-dashboard-oti > .card.promedio strong{
        font-size:21px !important;
    }
}

/* Tablets verticales */
@media screen and (min-width:641px) and (max-width:900px){

    html body .container .dashboard,
    html body .container .dashboard.kpi-dashboard-oti{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px !important;
    }

    html body .container .dashboard > .card,
    html body .container .dashboard.kpi-dashboard-oti > .card{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        height:100px !important;
        min-height:100px !important;
    }
}

/* Celulares */
@media screen and (max-width:640px){

    html body .container .dashboard,
    html body .container .dashboard.kpi-dashboard-oti{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    html body .container .dashboard > .card,
    html body .container .dashboard.kpi-dashboard-oti > .card{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        height:auto !important;
        min-height:96px !important;
    }
}