/* =========================================================
   TESLA-INSPIRED UI THEME FOR MESA DE AYUDA OTI
   Archivo: tesla_oti_theme.css
   Uso:
   <link rel="stylesheet" href="css/tesla_oti_theme.css">
   ========================================================= */

:root{
    --tesla-bg:#f4f6f8;
    --tesla-surface:#ffffff;
    --tesla-surface-soft:#f8fafc;
    --tesla-dark:#0f172a;
    --tesla-muted:#64748b;
    --tesla-line:#e2e8f0;
    --tesla-blue:#013766;
    --tesla-blue-2:#0a4980;
    --tesla-green:#16a34a;
    --tesla-yellow:#f59e0b;
    --tesla-red:#dc2626;
    --tesla-purple:#7c3aed;
    --tesla-cyan:#2563eb;
    --tesla-radius:22px;
    --tesla-shadow:0 18px 45px rgba(15,23,42,.08);
    --tesla-shadow-hover:0 22px 60px rgba(15,23,42,.14);
}

body{
    background:
        radial-gradient(circle at top left, rgba(1,55,102,.10), transparent 32%),
        linear-gradient(135deg,#f8fafc,#eef2f7);
    font-family:Inter, "Segoe UI", Arial, sans-serif;
    color:var(--tesla-dark);
    letter-spacing:-.01em;
}

.container,.card-oti,.sheet,.panel,.login-box{
    background:rgba(255,255,255,.94) !important;
    backdrop-filter:blur(18px);
    border:1px solid rgba(226,232,240,.9) !important;
    border-radius:var(--tesla-radius) !important;
    box-shadow:var(--tesla-shadow) !important;
}

h1,h2,h3{
    letter-spacing:-.04em;
    color:var(--tesla-blue) !important;
}

.subtitle,.text-muted,p{
    color:var(--tesla-muted);
}

.header,.oti-clean-header{
    background:linear-gradient(180deg,#ffffff,#f8fafc);
    border:1px solid var(--tesla-line);
    border-radius:24px;
    padding:18px 22px;
    box-shadow:0 12px 30px rgba(15,23,42,.06);
}

.btn,.btn-action,button,.btn-modal-primary,.btn-detalle-ticket,.btn-evidencia,.btn-ver-evidencias{
    border:none !important;
    border-radius:999px !important;
    font-weight:800 !important;
    letter-spacing:-.02em;
    transition:all .22s ease !important;
    box-shadow:0 8px 20px rgba(15,23,42,.08);
}

.btn:hover,.btn-action:hover,button:hover,.btn-modal-primary:hover,.btn-detalle-ticket:hover,.btn-evidencia:hover,.btn-ver-evidencias:hover{
    transform:translateY(-2px);
    box-shadow:var(--tesla-shadow-hover);
}

.btn,.btn-action,.btn-modal-primary{
    background:linear-gradient(135deg,var(--tesla-blue),var(--tesla-blue-2)) !important;
    color:white !important;
}

.btn.green,.btn-success,.btn-evidencia.btn-abrir{
    background:linear-gradient(135deg,#16a34a,#22c55e) !important;
    color:white !important;
}

.btn.red,.btn-danger{
    background:linear-gradient(135deg,#b91c1c,#ef4444) !important;
    color:white !important;
}

.btn.gray,.btn-secondary,.btn-modal-secondary{
    background:#e2e8f0 !important;
    color:#0f172a !important;
}

input,select,textarea{
    border:1px solid #dbe3ee !important;
    background:#f8fafc !important;
    border-radius:16px !important;
    padding:12px 14px !important;
    color:#0f172a !important;
    transition:all .18s ease;
}

input:focus,select:focus,textarea:focus{
    outline:none !important;
    border-color:var(--tesla-blue) !important;
    background:#fff !important;
    box-shadow:0 0 0 4px rgba(1,55,102,.10) !important;
}

label{
    color:#334155 !important;
    font-weight:800 !important;
}

.cards,.kpi-grid{
    gap:16px !important;
}

.card,.kpi,.meta-card,.info,.info-box{
    background:linear-gradient(180deg,#ffffff,#f8fafc) !important;
    border:1px solid var(--tesla-line) !important;
    border-radius:20px !important;
    box-shadow:0 12px 28px rgba(15,23,42,.06) !important;
    transition:all .2s ease;
}

.card:hover,.kpi:hover,.info-box:hover{
    transform:translateY(-2px);
    box-shadow:var(--tesla-shadow-hover) !important;
}

.card span,.kpi span,.meta-card span,.info span{
    color:var(--tesla-muted) !important;
    font-weight:700;
    text-transform:uppercase;
    font-size:11px !important;
    letter-spacing:.04em;
}

.card strong,.kpi strong,.meta-card strong,.info strong{
    color:#0f172a !important;
    font-size:22px;
}

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

thead th{
    background:#0f172a !important;
    color:#fff !important;
    border:none !important;
    padding:14px 12px !important;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

thead th:first-child{border-radius:14px 0 0 14px;}
thead th:last-child{border-radius:0 14px 14px 0;}

tbody tr{
    background:#ffffff !important;
    box-shadow:0 6px 18px rgba(15,23,42,.05);
    transition:all .18s ease;
}

tbody tr:hover{
    transform:scale(1.003);
    box-shadow:0 12px 30px rgba(15,23,42,.10);
}

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

tbody td:first-child{
    border-left:1px solid #eef2f7 !important;
    border-radius:14px 0 0 14px;
}

tbody td:last-child{
    border-right:1px solid #eef2f7 !important;
    border-radius:0 14px 14px 0;
}

.estado,.badge,.prioridad,.servicio-tag{
    border-radius:999px !important;
    padding:7px 12px !important;
    font-weight:900 !important;
    font-size:12px !important;
    letter-spacing:-.01em;
}

.estado.nuevo,.badge.bg-secondary{background:#e2e8f0 !important;color:#334155 !important;}
.estado.validado{background:#ede9fe !important;color:#6d28d9 !important;}
.estado.asignado{background:#ffedd5 !important;color:#c2410c !important;}
.estado.proceso{background:#dbeafe !important;color:#1d4ed8 !important;}
.estado.atendido{background:#dcfce7 !important;color:#166534 !important;}
.estado.cerrado{background:#111827 !important;color:#ffffff !important;}
.estado.rechazado{background:#fee2e2 !important;color:#b91c1c !important;}

.prioridad.alta{background:#fee2e2 !important;color:#b91c1c !important;}
.prioridad.media{background:#fef3c7 !important;color:#92400e !important;}
.prioridad.baja{background:#dcfce7 !important;color:#166534 !important;}

.modal-atencion,.modal-historial-overlay{
    background:rgba(15,23,42,.48) !important;
    backdrop-filter:blur(10px);
}

.modal-atencion-contenido,.modal-asignacion-card,.modal-historial-card{
    border-radius:28px !important;
    border:1px solid rgba(226,232,240,.9) !important;
    box-shadow:0 30px 90px rgba(15,23,42,.28) !important;
}

.notificaciones-box{
    background:linear-gradient(180deg,#fff,#f8fafc) !important;
    border:1px solid var(--tesla-line) !important;
    border-radius:22px !important;
    box-shadow:0 14px 35px rgba(15,23,42,.07);
}

.notificacion-item{
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    border-left:5px solid var(--tesla-blue) !important;
    border-radius:16px !important;
    margin:10px 0;
    box-shadow:0 8px 20px rgba(15,23,42,.05);
}

.timeline-visual,.progress-oti{
    background:#ffffff !important;
    border:1px solid #e5e7eb !important;
    border-radius:22px !important;
    box-shadow:0 12px 30px rgba(15,23,42,.06);
}

.timeline-dot,.progress-dot{
    box-shadow:0 10px 25px rgba(15,23,42,.18) !important;
}

.timeline-dot.validado{background:var(--tesla-purple) !important;}
.timeline-dot.asignado{background:var(--tesla-yellow) !important;}
.timeline-dot.proceso{background:var(--tesla-cyan) !important;}
.timeline-dot.atendido{background:var(--tesla-green) !important;}
.timeline-dot.cerrado{background:var(--tesla-dark) !important;}
.timeline-dot.rechazado{background:var(--tesla-red) !important;}

.evidencia-card,.evidence-card{
    background:linear-gradient(180deg,#fff,#f8fafc) !important;
    border:1px solid var(--tesla-line) !important;
    border-radius:22px !important;
    box-shadow:0 12px 30px rgba(15,23,42,.06) !important;
}

.evidencia-preview img,.mini-evidence-preview{
    border-radius:18px !important;
    border:1px solid #e5e7eb !important;
    background:#fff !important;
}

.login-box{
    max-width:420px;
}

.login-box input{height:48px;}
.login-box button{height:50px;}

*::-webkit-scrollbar{
    height:10px;
    width:10px;
}

*::-webkit-scrollbar-track{
    background:#e2e8f0;
    border-radius:20px;
}

*::-webkit-scrollbar-thumb{
    background:#94a3b8;
    border-radius:20px;
}

*::-webkit-scrollbar-thumb:hover{
    background:#64748b;
}

@media(max-width:768px){
    body{padding:10px !important;}
    .container,.card-oti,.sheet{border-radius:18px !important;padding:18px !important;}
    h1{font-size:26px !important;}
    .header,.oti-clean-header{flex-direction:column;align-items:flex-start !important;}
    table{font-size:12px !important;}
}