/* ============================================================
   UNIWEB · Hoja de estilos principal
   Interfaz tipo Gmail/Outlook · claro + oscuro · responsiva
   ============================================================ */
:root{
    --brand:#6c63ff; --brand-dark:#564fd1; --brand-soft:#eef0ff;
    --bg:#f6f8fc; --surface:#ffffff; --surface-2:#f1f4f9;
    --text:#1e293b; --text-soft:#64748b; --border:#e2e8f0;
    --sidebar:#ffffff; --topbar:#ffffff;
    --green:#22c55e; --red:#ef4444; --amber:#f59e0b; --blue:#3b82f6;
    --shadow:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);
    --shadow-lg:0 12px 40px rgba(15,23,42,.14);
    --radius:14px; --radius-sm:10px;
    --sidebar-w:248px;
}
[data-theme="dark"]{
    --bg:#0f172a; --surface:#1e293b; --surface-2:#273449;
    --text:#e2e8f0; --text-soft:#94a3b8; --border:#334155;
    --sidebar:#161f33; --topbar:#1e293b; --brand-soft:#272a4d;
    --shadow:0 1px 3px rgba(0,0,0,.4); --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;
    -webkit-font-smoothing:antialiased;transition:background .2s,color .2s;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}

/* ── Layout general ───────────────────────────────────────*/
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:60px 1fr;
     grid-template-areas:"sidebar topbar" "sidebar main";height:100vh;overflow:hidden}

/* ── Sidebar ──────────────────────────────────────────────*/
.sidebar{grid-area:sidebar;background:var(--sidebar);border-right:1px solid var(--border);
         display:flex;flex-direction:column;overflow-y:auto;z-index:30}
.brand{display:flex;align-items:center;gap:10px;padding:18px 20px;font-weight:800;font-size:18px}
.brand .logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
             background:linear-gradient(135deg,var(--brand),#a855f7);color:#fff;font-size:18px}
.compose{margin:6px 16px 14px;padding:12px 18px;border:0;border-radius:24px;background:var(--brand);
         color:#fff;font-weight:600;font-size:14px;display:flex;align-items:center;gap:10px;
         box-shadow:0 4px 14px rgba(108,99,255,.4);transition:.15s}
.compose:hover{background:var(--brand-dark);transform:translateY(-1px)}
.nav{padding:4px 10px;display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft);
           padding:14px 14px 6px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:13px;padding:9px 14px;border-radius:10px;
          color:var(--text-soft);font-weight:500;position:relative;transition:.12s}
.nav-item i{width:18px;text-align:center;font-size:15px}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--brand-soft);color:var(--brand);font-weight:600}
.nav-item .badge{margin-left:auto;background:var(--surface-2);color:var(--text-soft);
                 font-size:11px;padding:1px 8px;border-radius:10px;font-weight:600}
.nav-item.active .badge{background:var(--brand);color:#fff}

/* ── Topbar ───────────────────────────────────────────────*/
.topbar{grid-area:topbar;background:var(--topbar);border-bottom:1px solid var(--border);
        display:flex;align-items:center;gap:16px;padding:0 22px;z-index:20}
.menu-toggle{display:none;background:none;border:0;font-size:20px;color:var(--text)}
.search{flex:1;max-width:560px;position:relative}
.search input{width:100%;padding:10px 16px 10px 42px;border:1px solid transparent;
              background:var(--surface-2);border-radius:24px;color:var(--text);font-size:14px;outline:none}
.search input:focus{border-color:var(--brand);background:var(--surface)}
.search i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-soft)}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.icon-btn{width:40px;height:40px;border-radius:50%;border:0;background:none;color:var(--text-soft);
          display:grid;place-items:center;font-size:16px;position:relative;transition:.12s}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn .dot{position:absolute;top:8px;right:9px;min-width:16px;height:16px;padding:0 4px;
               background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:9px;
               display:grid;place-items:center;border:2px solid var(--topbar)}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#a855f7);
        color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}

/* Dropdowns */
.dropdown{position:relative}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);
               border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);
               min-width:300px;max-width:360px;opacity:0;visibility:hidden;transform:translateY(-6px);
               transition:.15s;z-index:50;overflow:hidden}
.dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-head{padding:14px 16px;font-weight:700;border-bottom:1px solid var(--border);
               display:flex;justify-content:space-between;align-items:center}
.dropdown-head a{font-size:12px;color:var(--brand);font-weight:600}
.notif-list{max-height:380px;overflow-y:auto}
.notif{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);transition:.1s}
.notif:hover{background:var(--surface-2)}
.notif.unread{background:var(--brand-soft)}
.notif .ico{width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
            display:grid;place-items:center;flex-shrink:0}
.notif .t{font-weight:600;font-size:13px}
.notif .m{font-size:12px;color:var(--text-soft)}
.notif .time{font-size:11px;color:var(--text-soft);margin-top:2px}
.profile-menu a{display:flex;align-items:center;gap:12px;padding:11px 16px}
.profile-menu a:hover{background:var(--surface-2)}

/* ── Main ─────────────────────────────────────────────────*/
.main{grid-area:main;overflow-y:auto;padding:24px}
.page-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:22px;font-weight:700}
.page-head .count{color:var(--text-soft);font-size:14px}
.spacer{flex:1}

/* ── Botones ──────────────────────────────────────────────*/
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--border);
     background:var(--surface);color:var(--text);border-radius:var(--radius-sm);font-weight:600;
     font-size:13px;transition:.12s}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-success{background:var(--green);border-color:var(--green);color:#fff}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.btn-sm{padding:6px 12px;font-size:12px}

/* ── Cards / métricas ─────────────────────────────────────*/
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
      padding:18px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:18px;margin-bottom:14px}
.stat .num{font-size:28px;font-weight:800;line-height:1}
.stat .lbl{color:var(--text-soft);font-size:13px;margin-top:6px}
.grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-bottom:24px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
       box-shadow:var(--shadow);overflow:hidden}
.panel-head{padding:16px 20px;border-bottom:1px solid var(--border);font-weight:700;
            display:flex;justify-content:space-between;align-items:center}
.panel-body{padding:20px}

/* ── Lista de tickets (bandeja) ───────────────────────────*/
.inbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
       box-shadow:var(--shadow);overflow:hidden}
.inbox-toolbar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.inbox-toolbar select{padding:7px 12px;border:1px solid var(--border);border-radius:8px;
                      background:var(--surface);color:var(--text);font-size:13px}
.t-row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--border);
       transition:.1s;cursor:pointer}
.t-row:hover{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--brand)}
.t-row:last-child{border-bottom:0}
.t-star{color:var(--text-soft);background:none;border:0;font-size:15px}
.t-star.on{color:var(--amber)}
.t-from{width:170px;flex-shrink:0;display:flex;align-items:center;gap:10px;min-width:0}
.t-from .avatar{width:32px;height:32px;font-size:12px}
.t-from .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.t-main{flex:1;min-width:0}
.t-main .subj{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-main .prev{color:var(--text-soft);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.t-time{color:var(--text-soft);font-size:12px;width:80px;text-align:right;flex-shrink:0}
.t-consec{font-family:ui-monospace,monospace;font-size:11px;color:var(--text-soft)}

/* ── Chips / badges ───────────────────────────────────────*/
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;
      font-size:11.5px;font-weight:600;white-space:nowrap}
.chip-dot{width:7px;height:7px;border-radius:50%}

/* ── Vista de ticket (conversación tipo email) ────────────*/
.ticket-view{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.thread{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
        box-shadow:var(--shadow);overflow:hidden}
.thread-head{padding:20px 24px;border-bottom:1px solid var(--border)}
.thread-head h2{font-size:19px;margin-bottom:8px}
.msg{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;gap:14px}
.msg:last-child{border-bottom:0}
.msg.internal{background:#fffbeb}
[data-theme="dark"] .msg.internal{background:#3a2f15}
.msg .avatar{width:40px;height:40px;flex-shrink:0}
.msg-body{flex:1;min-width:0}
.msg-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.msg-head .who{font-weight:700}
.msg-head .when{color:var(--text-soft);font-size:12px;margin-left:auto}
.msg-text{white-space:pre-wrap;word-wrap:break-word;line-height:1.65}
.reply-box{padding:18px 24px}
.reply-box textarea{width:100%;min-height:110px;padding:14px;border:1px solid var(--border);
                    border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);
                    font-family:inherit;font-size:14px;resize:vertical;outline:none}
.reply-box textarea:focus{border-color:var(--brand);background:var(--surface)}
.reply-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.side-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
           box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.side-card h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-soft);margin-bottom:14px}
.side-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13px;
          border-bottom:1px solid var(--border)}
.side-row:last-child{border-bottom:0}
.side-row .k{color:var(--text-soft)}
.attach{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);
        border-radius:8px;margin-bottom:8px;font-size:13px}
.attach i{color:var(--brand)}

/* ── Formularios ──────────────────────────────────────────*/
.form-card{max-width:760px;background:var(--surface);border:1px solid var(--border);
           border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;margin-bottom:7px;font-size:13px}
.field input,.field select,.field textarea{
    width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);
    background:var(--surface-2);color:var(--text);font-family:inherit;font-size:14px;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);background:var(--surface)}
.field textarea{min-height:150px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dropzone{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:24px;text-align:center;
          color:var(--text-soft);cursor:pointer;transition:.15s}
.dropzone:hover,.dropzone.over{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}

/* ── Alertas ──────────────────────────────────────────────*/
.alert{padding:13px 18px;border-radius:var(--radius-sm);margin-bottom:18px;font-weight:500;
       display:flex;align-items:center;gap:10px}
.alert-ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

/* ── Login ────────────────────────────────────────────────*/
.auth-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.auth-hero{background:linear-gradient(135deg,var(--brand),#a855f7);color:#fff;
           display:flex;flex-direction:column;justify-content:center;padding:60px}
.auth-hero h1{font-size:40px;font-weight:800;margin-bottom:16px;line-height:1.1}
.auth-hero p{font-size:17px;opacity:.92;max-width:420px;line-height:1.6}
.auth-hero ul{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:14px}
.auth-hero li{display:flex;align-items:center;gap:12px;font-size:15px;opacity:.95}
.auth-hero li i{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);
                display:grid;place-items:center}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--surface)}
.auth-box{width:100%;max-width:380px}
.auth-box .logo-row{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;margin-bottom:6px}
.auth-box .sub{color:var(--text-soft);margin-bottom:28px}
.demo-creds{margin-top:22px;padding:14px;background:var(--surface-2);border-radius:var(--radius-sm);
            font-size:12.5px;color:var(--text-soft);line-height:1.8}
.demo-creds code{background:var(--surface);padding:1px 6px;border-radius:5px;color:var(--brand);cursor:pointer}

/* ── Estado vacío ─────────────────────────────────────────*/
.empty{text-align:center;padding:70px 20px;color:var(--text-soft)}
.empty i{font-size:48px;opacity:.4;margin-bottom:16px}
.empty h3{color:var(--text);margin-bottom:6px}

/* ── Pestañas ─────────────────────────────────────────────*/
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tab{padding:11px 18px;color:var(--text-soft);font-weight:600;font-size:14px;
     border-bottom:2px solid transparent;margin-bottom:-1px;transition:.12s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}

/* ── Tablas ───────────────────────────────────────────────*/
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table th{text-align:left;padding:13px 18px;color:var(--text-soft);font-size:12px;
          text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);font-weight:700}
.table td{padding:13px 18px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tbody tr:hover{background:var(--surface-2)}
.table tbody tr:last-child td{border-bottom:0}

/* ── Modales (native dialog) ──────────────────────────────*/
dialog.dlg{border:0;border-radius:var(--radius);padding:28px;max-width:560px;width:92%;
           background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg)}
dialog.dlg::backdrop{background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}
dialog.dlg h3{font-size:18px}

/* ── Kanban ───────────────────────────────────────────────*/
.kanban{display:flex;gap:16px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
.kcol{flex:0 0 290px;background:var(--surface-2);border-radius:var(--radius);display:flex;flex-direction:column;max-height:calc(100vh - 170px)}
.kcol-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-weight:700;font-size:14px}
.kcol-head .badge{background:var(--surface);color:var(--text-soft);padding:1px 9px;border-radius:10px;font-size:12px}
.kcol-body{padding:0 10px 10px;overflow-y:auto;flex:1;min-height:60px;transition:.12s}
.kcol-body.over{background:var(--brand-soft);border-radius:10px}
.kcard{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 13px;
       margin-bottom:10px;box-shadow:var(--shadow);cursor:grab}
.kcard.dragging{opacity:.5;transform:rotate(2deg)}
.kcard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.kcard-title{display:block;font-weight:600;font-size:13.5px;line-height:1.4;margin-bottom:10px}
.kcard-title:hover{color:var(--brand)}
.kcard-foot{display:flex;align-items:center;gap:6px}

/* ── Chat interno ─────────────────────────────────────────*/
.chat-wrap{display:grid;grid-template-columns:300px 1fr;gap:0;background:var(--surface);
           border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
           overflow:hidden;height:calc(100vh - 160px)}
.chat-contacts{border-right:1px solid var(--border);overflow-y:auto}
.chat-contact{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:.1s}
.chat-contact:hover{background:var(--surface-2)}
.chat-contact.active{background:var(--brand-soft)}
.chat-main{display:flex;flex-direction:column;min-width:0}
.chat-header{padding:16px 20px;border-bottom:1px solid var(--border);font-weight:600;display:flex;align-items:center;gap:10px}
.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.bubble{max-width:70%;align-self:flex-start}
.bubble.mine{align-self:flex-end}
.bubble-body{padding:10px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);
             white-space:pre-wrap;word-wrap:break-word}
.bubble.mine .bubble-body{background:var(--brand);color:#fff;border-color:var(--brand)}
.bubble-time{font-size:11px;color:var(--text-soft);margin-top:3px;padding:0 6px}
.bubble.mine .bubble-time{text-align:right}
.chat-input{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--border)}
.chat-input input{flex:1;padding:11px 16px;border:1px solid var(--border);border-radius:24px;
                  background:var(--surface-2);color:var(--text);outline:none}
.chat-input input:focus{border-color:var(--brand);background:var(--surface)}

/* ── Impresión (reportes a PDF) ───────────────────────────*/
@media print{
    .sidebar,.topbar,.page-head .btn,form.panel{display:none!important}
    .app{display:block;height:auto}
    .main{overflow:visible;padding:0}
    .panel,.stat{box-shadow:none;border:1px solid #ddd}
    body{background:#fff}
}

/* ── Responsivo ───────────────────────────────────────────*/
@media (max-width:1024px){
    .grid-2{grid-template-columns:1fr}
    .ticket-view{grid-template-columns:1fr}
}
@media (max-width:768px){
    .app{grid-template-columns:1fr}
    .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
             transform:translateX(-100%);transition:transform .25s;box-shadow:var(--shadow-lg)}
    .app.nav-open .sidebar{transform:translateX(0)}
    .menu-toggle{display:grid;place-items:center}
    .t-from{width:auto}.t-from .name{display:none}
    .t-time{display:none}
    .auth-wrap{grid-template-columns:1fr}
    .auth-hero{display:none}
    .row{grid-template-columns:1fr}
    .sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:25;display:none}
    .app.nav-open .sidebar-backdrop{display:block}
}