/* =====================================================================
   app.css  ·  Capa de estilo sobre Bootstrap 5
   Estetica: SaaS de soporte, refinada. Tinta + indigo, Plus Jakarta Sans.
   ===================================================================== */

:root {
    --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    --ink:        #0e1626;   /* sidebar / titulos */
    --ink-soft:   #1b273f;
    --primary:    #4f46e5;   /* indigo */
    --primary-600:#4338ca;
    --primary-050:#eef0fe;
    --accent:     #0ea5e9;

    --bg:       #f4f5f8;
    --surface:  #ffffff;
    --border:   #e5e8ef;
    --muted:    #6a7388;
    --text:     #1f2638;

    --radius:   14px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow:    0 8px 28px -12px rgba(16, 24, 40, .22);

    --bs-primary-rgb: 79, 70, 229;
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font-ui);
    background: var(--bg);
    color: var(--text);
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6, .fw-display { font-weight: 700; color: var(--ink); }

a { color: var(--primary); }
a:hover { color: var(--primary-600); }

/* ---- Botones ---- */
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-600);
    --bs-btn-hover-border-color: var(--primary-600);
    --bs-btn-active-bg: var(--primary-600);
    --bs-btn-focus-shadow-rgb: 79, 70, 229;
    font-weight: 600;
}
.btn { border-radius: 10px; }

/* ---- Marca ---- */
.brand {
    display: flex; align-items: center; gap: .6rem;
    font-weight: 800; letter-spacing: -0.03em; color: #fff;
    font-size: 1.18rem;
}
.brand .brand-mark {
    width: 34px; height: 34px; border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--primary), var(--accent));
    color: #fff; font-size: .95rem;
}

/* =====================================================================
   AUTH (login)
   ===================================================================== */
.auth-wrap {
    min-height: 100vh; display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: var(--bg);
}
.auth-aside {
    background:
        radial-gradient(1200px 600px at 10% 10%, rgba(14,165,233,.25), transparent 55%),
        radial-gradient(900px 500px at 90% 90%, rgba(79,70,229,.35), transparent 50%),
        var(--ink);
    color: #fff; padding: 3rem; position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
}
.auth-aside h1 { color: #fff; font-size: 2.1rem; line-height: 1.15; max-width: 16ch; }
.auth-aside p  { color: rgba(255,255,255,.72); max-width: 38ch; }
.auth-aside .dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 22px 22px; pointer-events: none;
}
.auth-panel { display: grid; place-items: center; padding: 2rem; }
.auth-card {
    width: 100%; max-width: 392px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 2.2rem;
}
.auth-card .form-control {
    border-radius: 10px; padding: .68rem .85rem;
    border-color: var(--border);
}
.auth-card .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(79,70,229,.15);
}
.form-label { font-weight: 600; font-size: .85rem; color: var(--ink-soft); }

@media (max-width: 860px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
}

/* =====================================================================
   APP SHELL (panel admin)
   ===================================================================== */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 256px; background: var(--ink); color: #cdd3e0;
    flex-shrink: 0; display: flex; flex-direction: column;
}
/* En PC (lg+) Bootstrap fuerza .offcanvas-lg a fondo transparente; lo revertimos. */
@media (min-width: 992px) {
    .sidebar.offcanvas-lg {
        background: linear-gradient(180deg, #16213b 0%, var(--ink) 55%) !important;
        position: sticky; top: 0; height: 100vh;
        border-right: 1px solid rgba(255,255,255,.06);
    }
}
.sidebar .sidebar-head {
    padding: 1.25rem 1.3rem; border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: .4rem;
}
.sidebar .nav-section {
    padding: .85rem 1.45rem .4rem;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
    color: rgba(255,255,255,.4); font-weight: 700;
}
.sidebar .nav-link {
    color: #c2c9d8; border-radius: 10px; margin: .14rem .7rem;
    padding: .6rem .8rem; font-weight: 500; font-size: .92rem;
    display: flex; align-items: center; gap: .7rem;
    transition: background .15s, color .15s, box-shadow .15s;
}
.sidebar .nav-link i { width: 18px; text-align: center; opacity: .85; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar .nav-link.active {
    background: linear-gradient(90deg, var(--primary), #6366f1);
    color: #fff;
    box-shadow: inset 3px 0 0 #fff, 0 8px 20px -10px rgba(79,70,229,.9);
}
.sidebar .nav-link.active i { opacity: 1; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    background: rgba(255,255,255,.82); backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--border);
    padding: .7rem 1.4rem; display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 30;
}
.topbar .page-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.app-content { padding: 1.6rem; flex: 1; }

/* ---- Tarjetas de metrica ---- */
.metric-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.15rem 1.25rem;
    box-shadow: var(--shadow-sm); height: 100%;
}
.metric-card .metric-label {
    color: var(--muted); font-size: .8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}
.metric-card .metric-value { font-size: 2rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.metric-card .metric-icon {
    width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
    background: var(--primary-050); color: var(--primary); font-size: 1.05rem;
}

.card-soft {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-soft .card-header {
    background: transparent; border-bottom: 1px solid var(--border);
    font-weight: 700; color: var(--ink); padding: 1rem 1.25rem;
}

/* ---- Badges de estado / prioridad ---- */
.badge-estado { font-weight: 600; padding: .35em .6em; border-radius: 7px; }
.e-nuevo        { background:#e0e7ff; color:#3730a3; }
.e-asignado     { background:#dbeafe; color:#1e40af; }
.e-en_proceso   { background:#fef3c7; color:#92400e; }
.e-espera_cliente{ background:#fae8ff; color:#86198f; }
.e-resuelto     { background:#dcfce7; color:#166534; }
.e-cerrado      { background:#e5e7eb; color:#374151; }
.e-cancelado    { background:#fee2e2; color:#991b1b; }

.table > :not(caption) > * > * { padding: .8rem 1rem; }
.table thead th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }

/* ---- Portal (cliente) ---- */
.portal-nav {
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.portal-nav .navbar-brand { color: var(--ink); font-weight: 800; letter-spacing:-.02em; }
.portal-wrap { max-width: 1080px; }

@media (max-width: 991.98px) {
    .sidebar { width: 270px; }
}

/* =====================================================================
   PRIORIDADES, SLA y detalle de ticket
   ===================================================================== */
.prio {
    font-weight: 600; font-size: .78rem; padding: .3em .62em; border-radius: 7px;
    display: inline-flex; align-items: center; gap: .4em; line-height: 1;
}
.prio .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.prio-baja    { background: #eef2f7; color: #51607a; }
.prio-media   { background: #e0e7ff; color: #4338ca; }
.prio-alta    { background: #ffedd5; color: #b45309; }
.prio-urgente { background: #fee2e2; color: #b91c1c; }

.sla { font-weight: 600; font-size: .72rem; padding: .25em .55em; border-radius: 6px; display: inline-flex; align-items: center; gap: .35em; }
.sla-prox { background: #fef3c7; color: #92400e; }
.sla-venc { background: #fee2e2; color: #991b1b; }
.sla-ok   { background: #dcfce7; color: #166534; }

/* Hilo de mensajes del ticket */
.msg { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.msg + .msg { margin-top: .75rem; }
.msg .msg-head { padding: .6rem .9rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.msg .msg-body { padding: .8rem .9rem; white-space: pre-wrap; }
.msg.is-agente   { border-left: 3px solid var(--primary); }
.msg.is-cliente  { border-left: 3px solid #94a3b8; }
.msg.is-interno  { border-left: 3px solid #f59e0b; background: #fffbeb; }
.msg .who { font-weight: 600; color: var(--ink); }
.msg .nota-interna { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #b45309; }

.ticket-meta div { display: flex; justify-content: space-between; padding: .28rem 0; font-size: .88rem; }
.ticket-meta .k { color: var(--muted); }
.attach-chip { text-decoration: none; }

/* Encabezado de ticket */
.ticket-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.ticket-head .folio { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); font-size: .9rem; }