/* ==========================================================
   SealBot UI v2
   Sealcode Argentina
   ========================================================== */


/* ==========================================================
   VARIABLES
   ========================================================== */

:root{

    --primary:#f57c00;
    --primary-hover:#ff9800;

    --background:#111315;

    --surface:#1b1d21;

    --surface-hover:#242830;

    --surface-light:#2b3038;

    --border:#30343c;

    --text:#ffffff;

    --text-secondary:#9ca3af;

    --success:#2ecc71;

    --warning:#ff9800;

    --danger:#ef5350;

    --radius:18px;

    --radius-small:12px;

    --header-height:64px;

    --bottom-height:74px;

    --transition:.18s;

    --shadow:

        0 10px 25px rgba(0,0,0,.28);

}


/* ==========================================================
   RESET
   ========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    font-family:

        Inter,

        "Segoe UI",

        sans-serif;

    -webkit-tap-highlight-color:transparent;

}

body{

    background:var(--background);

    color:var(--text);

    overflow-x:hidden;

    padding-top:var(--header-height);

    padding-bottom:

        calc(

            var(--bottom-height)

            +

            env(safe-area-inset-bottom)

        );

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    font-family:inherit;

    cursor:pointer;

}

input,
textarea{

    font-family:inherit;

}

img{

    display:block;

}

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#333;

    border-radius:999px;

}


/* ==========================================================
   LAYOUT
   ========================================================== */

.content{

    width:100%;

    max-width:960px;

    margin:auto;

    padding:18px;

}

.page{

    width:100%;

}


/* ==========================================================
   TOPBAR
   ========================================================== */

.topbar{

    position:fixed;

    top:0;

    left:0;

    right:0;

    height:var(--header-height);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 18px;

    background:rgba(27,29,33,.92);

    backdrop-filter:blur(16px);

    border-bottom:

        1px solid var(--border);

    z-index:1000;

}

.brand{

    font-size:28px;

    font-weight:700;

    color:var(--primary);

    letter-spacing:-1px;

}

.top-actions{

    display:flex;

    align-items:center;

    gap:10px;

}

.icon-button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:none;

    color:var(--text-secondary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    transition:var(--transition);

}

.icon-button:hover{

    background:var(--surface-hover);

    color:white;

}

.notif-wrapper{

    position:relative;

}

.notif-badge{

    position:absolute;

    top:2px;

    right:2px;

    min-width:16px;

    height:16px;

    padding:0 4px;

    border-radius:8px;

    background:var(--primary);

    color:white;

    font-size:10px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

}

.notif-panel{

    position:absolute;

    top:52px;

    right:0;

    width:320px;

    max-height:420px;

    overflow-y:auto;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-small);

    box-shadow:var(--shadow);

    z-index:1500;

}

.notif-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 16px;

    border-bottom:1px solid var(--border);

    font-weight:600;

}

.notif-mark-all{

    border:none;

    background:none;

    color:var(--primary);

    font-size:12px;

    cursor:pointer;

}

.notif-empty{

    padding:24px 16px;

    text-align:center;

    color:var(--text-secondary);

    font-size:14px;

}

.notif-item{

    padding:12px 16px;

    border-bottom:1px solid var(--border);

    cursor:pointer;

    transition:var(--transition);

}

.notif-item:last-child{

    border-bottom:none;

}

.notif-item:hover{

    background:var(--surface-hover);

}

.notif-unread{

    background:rgba(245,124,0,.08);

}

.notif-title{

    font-weight:600;

    font-size:14px;

    margin-bottom:2px;

}

.notif-body{

    font-size:13px;

    color:var(--text-secondary);

    margin-bottom:4px;

}

.notif-time{

    font-size:11px;

    color:var(--text-secondary);

}

.avatar{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:black;

    font-weight:bold;

}


/* ==========================================================
   BOTTOM NAV
   ========================================================== */

.bottomnav{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:var(--bottom-height);

    background:rgba(27,29,33,.96);

    backdrop-filter:blur(16px);

    border-top:

        1px solid var(--border);

    display:flex;

    justify-content:space-evenly;

    align-items:center;

    z-index:1000;

}

.nav-button{

    width:52px;

    height:52px;

    border:none;

    border-radius:18px;

    background:none;

    color:var(--text-secondary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    transition:var(--transition);

}

.nav-button:hover{

    background:var(--surface-hover);

    color:white;

}

.nav-button.active{

    color:var(--primary);

    background:

        rgba(245,124,0,.14);

}
/* ==========================================================
   PAGE HEADER
   ========================================================== */

.page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:26px;

}

.page-header h1{

    font-size:34px;

    font-weight:700;

    letter-spacing:-1px;

}

.page-header p{

    margin-top:5px;

    color:var(--text-secondary);

    font-size:15px;

}


/* ==========================================================
   BUTTONS
   ========================================================== */

.btn{

    height:44px;

    padding:0 18px;

    border:none;

    border-radius:14px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:black;

}

.btn-primary:hover{

    background:var(--primary-hover);

}

.btn-primary:active{

    transform:scale(.97);

}

.btn:disabled{

    opacity:.5;

    cursor:not-allowed;

}

.btn-danger{

    background:var(--danger);

    color:white;

}

.btn-danger:hover{

    filter:brightness(1.08);

}

.btn-ghost{

    background:transparent;

    border:1px solid var(--border);

    color:white;

}

.btn-ghost:hover{

    background:var(--surface-hover);

}


/* ==========================================================
   INPUTS
   ========================================================== */

input,
textarea,
select{

    background:var(--surface);

    color:white;

    border:1px solid var(--border);

    border-radius:14px;

    outline:none;

    transition:var(--transition);

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:

        0 0 0 3px rgba(245,124,0,.18);

}

textarea{

    resize:none;

}


/* ==========================================================
   SPINNER
   ========================================================== */

.loading{

    min-height:60vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:18px;

}

.spinner{

    width:46px;

    height:46px;

    border-radius:50%;

    border:4px solid #333;

    border-top-color:var(--primary);

    animation:seal-spin .8s linear infinite;

}

@keyframes seal-spin{

    to{

        transform:rotate(360deg);

    }

}


/* ==========================================================
   EMPTY STATE
   ========================================================== */

.empty-state{

    min-height:60vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#7b7b7b;

}

.empty-state i{

    font-size:74px;

    margin-bottom:20px;

    opacity:.45;

}

.empty-state h2{

    color:white;

    margin-bottom:10px;

}

.empty-state p{

    max-width:420px;

    line-height:1.5;

}


/* ==========================================================
   TOAST
   ========================================================== */

.toast{

    position:fixed;

    left:50%;

    bottom:95px;

    transform:translateX(-50%);

    padding:14px 22px;

    background:#222;

    border-radius:999px;

    color:white;

    box-shadow:var(--shadow);

    opacity:0;

    transition:.25s;

    z-index:3000;

}

.toast.show{

    opacity:1;

}


/* ==========================================================
   SEARCH BAR
   ========================================================== */

.search-bar{

    display:flex;

    align-items:center;

    gap:10px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-small);

    padding:12px 16px;

    margin-bottom:20px;

}

.search-bar i{

    color:var(--text-secondary);

    font-size:16px;

}

.search-bar input{

    flex:1;

    background:transparent;

    border:none;

    outline:none;

    color:var(--text);

    font-size:15px;

    font-family:inherit;

}

.search-bar input::placeholder{

    color:var(--text-secondary);

}


/* ==========================================================
   TICKET CARD
   ========================================================== */

.ticket-card{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:14px;

    padding:16px;

    border-radius:20px;

    background:var(--surface);

    border:1px solid var(--border);

    transition:var(--transition);

}

.ticket-card:hover{

    background:var(--surface-hover);

    transform:translateY(-2px);

}

.ticket-card.taking{

    opacity:.55;

    pointer-events:none;

}

.ticket-icon{

    width:54px;

    height:54px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:16px;

    background:rgba(245,124,0,.12);

    color:var(--primary);

    font-size:24px;

}

.ticket-body{

    flex:1;

    min-width:0;

}

.ticket-title{

    font-size:19px;

    font-weight:700;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.ticket-phone{

    margin-top:4px;

    color:var(--text-secondary);

    font-size:14px;

}

.ticket-meta{

    margin-top:4px;

    color:var(--text-secondary);

    font-size:13px;

    display:flex;

    align-items:center;

    gap:8px;

}

.priority-tag{

    font-weight:700;

    font-size:11px;

    text-transform:uppercase;

}

.ticket-divider{

    display:flex;

    justify-content:center;

    margin:16px 0 8px;

}

.ticket-divider span{

    background:var(--surface);

    border:1px solid var(--border);

    color:var(--text-secondary);

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    padding:4px 12px;

    border-radius:999px;

}

.ticket-footer{

    margin-top:8px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    font-size:13px;

}

.ticket-arrow{

    color:#777;

    font-size:20px;

}

.status-chip{

    flex-shrink:0;

    padding:5px 12px;

    border-radius:999px;

    background:rgba(245,124,0,.14);

    color:var(--primary);

    font-size:12px;

    font-weight:700;

}
/* ==========================================================
   TICKET
   ========================================================== */

.ticket-page{

    display:flex;

    flex-direction:column;

    height:

        calc(

            100vh

            -

            var(--header-height)

            -

            var(--bottom-height)

            -

            36px

        );

}

.ticket-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding-bottom:12px;

    margin-bottom:12px;

    border-bottom:

        1px solid var(--border);

}

.ticket-header h2{

    font-size:28px;

    font-weight:700;

    margin-bottom:6px;

}

.ticket-header p{

    color:var(--text-secondary);

    font-size:14px;

}


/* ==========================================================
   CHAT
   ========================================================== */

.messages{

    flex:1;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    gap:6px;

    padding-right:4px;

    padding-bottom:16px;

}


/* ==========================================================
   ROW
   ========================================================== */

.message-row{

    display:flex;

    width:100%;

}

.message-row.client{

    justify-content:flex-start;

}

.message-row.mine{

    justify-content:flex-end;

}


/* ==========================================================
   BUBBLE
   ========================================================== */

.message-bubble{

    max-width:78%;

    padding:8px 12px;

    border-radius:18px;

    background:#24313b;

    box-shadow:

        0 2px 8px rgba(0,0,0,.20);

    animation:

        bubbleShow

        .18s ease;

}

.message-row.mine

.message-bubble{

    background:#1d4d3d;

}

@keyframes bubbleShow{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* ==========================================================
   USER
   ========================================================== */

.message-user{

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    opacity:.75;

    margin-bottom:3px;

}


/* ==========================================================
   TEXT
   ========================================================== */

.message-text{

    font-size:15px;

    line-height:1.45;

    white-space:pre-wrap;

    word-break:break-word;

}


/* ==========================================================
   DATE
   ========================================================== */

.message-date{

    margin-top:4px;

    text-align:right;

    font-size:11px;

    opacity:.70;

}


/* ==========================================================
   IMAGES
   ========================================================== */

.message-image{

    display:block;

    max-width:260px;

    max-height:320px;

    width:auto;

    height:auto;

    object-fit:contain;

    border-radius:12px;

    background:black;

}


/* ==========================================================
   VIDEO
   ========================================================== */

.message-video{

    display:block;

    max-width:260px;

    max-height:320px;

    border-radius:12px;

    background:black;

}


/* ==========================================================
   AUDIO
   ========================================================== */

.message-audio{

    width:260px;

    max-width:100%;

}


/* ==========================================================
   FILE
   ========================================================== */

.message-file{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px;

    border-radius:14px;

    background:

        rgba(255,255,255,.08);

    transition:.18s;

}

.message-file:hover{

    background:

        rgba(255,255,255,.12);

}

.message-file i{

    font-size:24px;

    color:var(--primary);

}

.message-file span{

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

}


/* ==========================================================
   PDF
   ========================================================== */

.message-file[href$=".pdf"] i{

    color:#ef5350;

}


/* ==========================================================
   WORD
   ========================================================== */

.message-file[href$=".doc"] i,

.message-file[href$=".docx"] i{

    color:#2196f3;

}


/* ==========================================================
   EXCEL
   ========================================================== */

.message-file[href$=".xls"] i,

.message-file[href$=".xlsx"] i{

    color:#43a047;

}
/* ==========================================================
   COMPOSER
   ========================================================== */

.composer{

    position:sticky;

    bottom:0;

    background:var(--background);

    padding-top:12px;

    border-top:1px solid var(--border);

    z-index:20;

}

.composer form{

    display:flex;

    align-items:flex-end;

    gap:10px;

}

.attach-button{

    width:46px;

    height:46px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--surface);

    border:1px solid var(--border);

    color:var(--text-secondary);

    transition:.18s;

    cursor:pointer;

}

.attach-button:hover{

    background:var(--surface-hover);

    color:var(--primary);

}

.attach-button:active{

    transform:scale(.95);

}

#file{

    display:none;

}

#message{

    flex:1;

    min-height:46px;

    max-height:120px;

    padding:12px 16px;

    border-radius:22px;

    border:1px solid var(--border);

    background:var(--surface);

    color:white;

    font-size:15px;

    line-height:1.4;

    resize:none;

    overflow-y:auto;

}

#message::placeholder{

    color:var(--text-secondary);

}

#message:focus{

    border-color:var(--primary);

}

.send-button{

    width:46px;

    height:46px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:black;

    font-size:18px;

    transition:.18s;

}

.send-button:hover{

    background:var(--primary-hover);

}

.send-button:active{

    transform:scale(.95);

}

.send-button:disabled{

    opacity:.5;

    cursor:not-allowed;

}


/* ==========================================================
   PREVIEW
   ========================================================== */

.file-preview{

    margin-bottom:10px;

    padding:10px 14px;

    border-radius:14px;

    background:var(--surface);

    border:1px solid var(--border);

    display:flex;

    align-items:center;

    gap:12px;

}

.preview-image-box{

    position:relative;

    display:inline-flex;

}

.preview-image{

    display:block;

    max-width:120px;

    max-height:120px;

    border-radius:12px;

    object-fit:cover;

}

.preview-file{

    display:flex;

    align-items:center;

    gap:12px;

    flex:1;

    min-width:0;

}

.preview-file i{

    flex-shrink:0;

    color:var(--primary);

    font-size:24px;

}

.preview-info{

    flex:1;

    min-width:0;

}

.preview-name{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:var(--text);

    font-size:14px;

}

.preview-size{

    margin-top:2px;

    color:var(--text-secondary);

    font-size:12px;

}

.preview-remove{

    width:28px;

    height:28px;

    flex-shrink:0;

    border:1px solid var(--border);

    border-radius:50%;

    background:var(--surface);

    color:var(--danger);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

}

.preview-remove:hover{

    background:rgba(239,83,80,.15);

}

.preview-image-box .preview-remove{

    position:absolute;

    top:-8px;

    right:-8px;

}


/* ==========================================================
   STATUS COLORS
   ========================================================== */

.status-chip[data-status="ABIERTO"]{

    background:rgba(52,152,219,.16);

    color:#42a5f5;

}

.status-chip[data-status="EN_PROCESO"]{

    background:rgba(255,193,7,.16);

    color:#ffca28;

}

.status-chip[data-status="ESPERANDO_CLIENTE"]{

    background:rgba(46,204,113,.15);

    color:#66bb6a;

}

.status-chip[data-status="CERRADO"]{

    background:rgba(120,120,120,.16);

    color:#9e9e9e;

}


/* ==========================================================
   PRIORIDAD
   ========================================================== */

.priority-normal{

    color:#66bb6a;

}

.priority-high{

    color:#ffca28;

}

.priority-urgent{

    color:#ef5350;

}


/* ==========================================================
   LINKS
   ========================================================== */

.message-text a{

    color:#64b5f6;

    text-decoration:underline;

}

.message-text a:hover{

    color:#90caf9;

}
/* ==========================================================
   LOGIN
   ========================================================== */

.login-page{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}

.login-card{

    width:100%;

    max-width:380px;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:24px;

    padding:34px;

    box-shadow:var(--shadow);

}

.login-card h1{

    color:var(--primary);

    font-size:34px;

    margin-bottom:8px;

}

.login-card p{

    color:var(--text-secondary);

    margin-bottom:28px;

    line-height:1.5;

}

.login-card input{

    width:100%;

    height:48px;

    padding:0 16px;

    margin-bottom:14px;

}

.login-card button{

    width:100%;

    height:48px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:black;

    font-weight:700;

    transition:.18s;

}

.login-card button:hover{

    background:var(--primary-hover);

}

.login-card button:active{

    transform:scale(.98);

}


/* ==========================================================
   PROFILE MENU
   ========================================================== */

.profile-menu{

    position:fixed;

    right:14px;

    top:74px;

    width:260px;

    display:none;

    overflow:hidden;

    border-radius:20px;

    background:var(--surface);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    z-index:2500;

}

.profile-menu.show{

    display:block;

    animation:menuShow .18s;

}

.profile-user{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    border-bottom:

        1px solid var(--border);

}

.profile-avatar{

    width:54px;

    height:54px;

    border-radius:50%;

    background:var(--primary);

    color:black;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

    font-size:20px;

}

.profile-name{

    font-size:16px;

    font-weight:700;

}

.profile-role{

    margin-top:3px;

    font-size:13px;

    color:var(--text-secondary);

}

.profile-menu a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 18px;

}

.profile-menu a:hover{

    background:var(--surface-hover);

}


/* ==========================================================
   PROFILE PAGE
   ========================================================== */

.profile-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:6px;

    padding:36px 20px;

    margin-bottom:20px;

    border-radius:20px;

    background:var(--surface);

    border:1px solid var(--border);

}

.profile-avatar-lg{

    width:84px;

    height:84px;

    border-radius:50%;

    background:var(--primary);

    color:black;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

    font-size:32px;

    margin-bottom:10px;

}

.profile-card .profile-name{

    font-size:20px;

    font-weight:700;

}

.profile-username{

    color:var(--text-secondary);

    font-size:14px;

    margin-bottom:8px;

}

.profile-stats{

    display:flex;

    gap:14px;

    margin-bottom:20px;

}

.stat-box{

    flex:1;

    padding:18px;

    border-radius:16px;

    background:var(--surface);

    border:1px solid var(--border);

    text-align:center;

}

.stat-value{

    font-size:28px;

    font-weight:700;

}

.stat-label{

    margin-top:4px;

    color:var(--text-secondary);

    font-size:13px;

}

.profile-logout{

    width:100%;

}


/* ==========================================================
   HOVER EFFECTS
   ========================================================== */

.ticket-card,

.icon-button,

.attach-button,

.send-button,

.nav-button,

.btn{

    transition:

        background .18s,

        color .18s,

        transform .18s,

        box-shadow .18s;

}

.ticket-card:hover{

    box-shadow:

        0 8px 24px rgba(0,0,0,.20);

}


/* ==========================================================
   CARD COMPACT MODE
   ========================================================== */

.ticket-card{

    padding:14px;

}

.ticket-icon{

    width:48px;

    height:48px;

    font-size:22px;

}

.ticket-title{

    font-size:17px;

}

.ticket-phone{

    font-size:13px;

}

.ticket-footer{

    margin-top:6px;

    font-size:12px;

}


/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes menuShow{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.fade-in{

    animation:fadeIn .25s;

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

@media (max-width:1100px){

    .content{

        max-width:100%;

        padding:18px;

    }

}

@media (max-width:900px){

    .content{

        padding:16px;

    }

    .page-header{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .page-header h1{

        font-size:30px;

    }

    .ticket-header{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .ticket-header h2{

        font-size:24px;

    }

    .status-chip{

        align-self:flex-start;

    }

    .message-bubble{

        max-width:86%;

    }

}

@media (max-width:700px){

    body{

        padding-top:60px;

        padding-bottom:78px;

    }

    .topbar{

        height:60px;

        padding:0 14px;

    }

    .brand{

        font-size:24px;

    }

    .content{

        padding:12px;

    }

    .page-header{

        margin-bottom:18px;

    }

    .page-header h1{

        font-size:26px;

    }

    .ticket-card{

        padding:12px;

        gap:12px;

        border-radius:16px;

    }

    .ticket-icon{

        width:44px;

        height:44px;

        font-size:20px;

        border-radius:14px;

    }

    .ticket-title{

        font-size:16px;

    }

    .ticket-phone{

        font-size:13px;

    }

    .ticket-footer{

        font-size:11px;

    }

    .ticket-page{

        height:

            calc(

                100vh

                - 60px

                - 78px

                - 24px

            );

    }

    .messages{

        gap:8px;

    }

    .message-row{

        margin-bottom:2px;

    }

    .message-bubble{

        max-width:92%;

        padding:10px 12px;

        border-radius:16px;

    }

    .message-text{

        font-size:14px;

    }

    .message-user{

        font-size:10px;

    }

    .message-date{

        font-size:10px;

    }

    .message-image,

    .message-video{

        max-width:220px;

        max-height:240px;

    }

    .message-audio{

        width:220px;

    }

    .composer{

        padding-top:8px;

    }

    .composer form{

        gap:8px;

    }

    .attach-button,

    .send-button{

        width:42px;

        height:42px;

    }

    #message{

        min-height:42px;

        max-height:90px;

        font-size:15px;

        padding:10px 14px;

    }

}

@media (max-width:420px){

    .content{

        padding:10px;

    }

    .notif-panel{

        position:fixed;

        top:60px;

        left:10px;

        right:10px;

        width:auto;

    }

    .ticket-header h2{

        font-size:21px;

    }

    .ticket-title{

        font-size:15px;

    }

    .ticket-phone{

        font-size:12px;

    }

    .status-chip{

        font-size:11px;

        padding:4px 10px;

    }

    .message-bubble{

        max-width:95%;

    }

    .message-image,

    .message-video{

        max-width:190px;

        max-height:210px;

    }

    .message-audio{

        width:190px;

    }

    .attach-button,

    .send-button{

        width:40px;

        height:40px;

    }

    #message{

        min-height:40px;

        font-size:14px;

    }

}


/* ==========================================================
   MOBILE IMPROVEMENTS
   ========================================================== */

@supports(padding:max(0px)){

    body{

        padding-bottom:

            max(

                78px,

                env(safe-area-inset-bottom)

            );

    }

}

.messages{

    scroll-behavior:smooth;

}

.messages img{

    user-select:none;

    -webkit-user-drag:none;

}

.message-file{

    cursor:pointer;

}

.message-file:hover{

    transform:translateY(-1px);

}
/* ==========================================================
   BADGES
   ========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:5px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.badge-primary{

    background:rgba(245,124,0,.14);

    color:var(--primary);

}

.badge-success{

    background:rgba(46,204,113,.15);

    color:var(--success);

}

.badge-warning{

    background:rgba(255,193,7,.15);

    color:#ffca28;

}

.badge-danger{

    background:rgba(239,83,80,.15);

    color:var(--danger);

}


/* ==========================================================
   DIVIDERS
   ========================================================== */

.divider{

    height:1px;

    background:var(--border);

    margin:18px 0;

}


/* ==========================================================
   TABLES
   ========================================================== */

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    text-align:left;

    padding:14px;

    color:var(--text-secondary);

    border-bottom:1px solid var(--border);

}

.table td{

    padding:14px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.table tr:hover{

    background:rgba(255,255,255,.03);

}


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

.card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:20px;

    padding:18px;

    box-shadow:var(--shadow);

}

.card-title{

    font-size:20px;

    font-weight:700;

    margin-bottom:12px;

}

.card-subtitle{

    color:var(--text-secondary);

    font-size:14px;

    margin-bottom:18px;

}


/* ==========================================================
   LISTS
   ========================================================== */

.list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.list-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.list-item:last-child{

    border-bottom:none;

}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

.messages::-webkit-scrollbar{

    width:8px;

}

.messages::-webkit-scrollbar-thumb{

    background:#444;

    border-radius:999px;

}

.messages::-webkit-scrollbar-thumb:hover{

    background:#555;

}


/* ==========================================================
   SELECTION
   ========================================================== */

::selection{

    background:rgba(245,124,0,.35);

    color:white;

}


/* ==========================================================
   LINKS
   ========================================================== */

a{

    transition:.18s;

}

a:hover{

    color:white;

}


/* ==========================================================
   UTILITIES
   ========================================================== */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-muted{

    color:var(--text-secondary);

}

.mt-1{

    margin-top:6px;

}

.mt-2{

    margin-top:12px;

}

.mt-3{

    margin-top:18px;

}

.mb-1{

    margin-bottom:6px;

}

.mb-2{

    margin-bottom:12px;

}

.mb-3{

    margin-bottom:18px;

}

.w-100{

    width:100%;

}

.hidden{

    display:none!important;

}

.flex{

    display:flex;

}

.flex-column{

    flex-direction:column;

}

.align-center{

    align-items:center;

}

.justify-between{

    justify-content:space-between;

}

.gap-1{

    gap:8px;

}

.gap-2{

    gap:12px;

}

.gap-3{

    gap:18px;

}


/* ==========================================================
   DISABLED
   ========================================================== */

.disabled{

    opacity:.55;

    pointer-events:none;

}


/* ==========================================================
   FOCUS
   ========================================================== */

button:focus-visible,

input:focus-visible,

textarea:focus-visible,

a:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:2px;

}
/* ==========================================================
   FINAL FIXES
   ========================================================== */

img{

    max-width:100%;

}

video{

    max-width:100%;

}

audio{

    max-width:100%;

}

button{

    user-select:none;

}

input,
textarea{

    appearance:none;

    -webkit-appearance:none;

}

textarea{

    overflow-wrap:break-word;

}

.ticket-card{

    overflow:hidden;

}

.ticket-body{

    min-width:0;

}

.ticket-footer span{

    white-space:nowrap;

}

.message-bubble{

    overflow:hidden;

}

.message-text{

    overflow-wrap:anywhere;

}

.message-file{

    min-width:0;

}

.message-file span{

    flex:1;

    min-width:0;

}

.message-image,

.message-video{

    cursor:pointer;

}

.message-image:hover,

.message-video:hover{

    filter:brightness(1.05);

}

.send-button i,

.attach-button i{

    pointer-events:none;

}


/* ==========================================================
   LOGIN SMALL DEVICES
   ========================================================== */

@media(max-width:480px){

    .login-card{

        padding:24px;

        border-radius:18px;

    }

    .login-card h1{

        font-size:28px;

    }

}


/* ==========================================================
   LANDSCAPE PHONE
   ========================================================== */

@media(max-height:520px){

    body{

        padding-top:56px;

    }

    .topbar{

        height:56px;

    }

    .ticket-page{

        height:

            calc(

                100vh

                - 56px

                - var(--bottom-height)

                - 24px

            );

    }

}


/* ==========================================================
   PRINT
   ========================================================== */

@media print{

    .topbar,

    .bottomnav,

    .composer,

    .toast{

        display:none!important;

    }

    body{

        background:white;

        color:black;

        padding:0;

    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

[hidden]{

    display:none!important;

}

button:disabled{

    opacity:.55;

    cursor:not-allowed;

}

input::placeholder,

textarea::placeholder{

    color:var(--text-secondary);

}


/* ==========================================================
   TRANSITIONS
   ========================================================== */

.ticket-card,

.message-bubble,

.attach-button,

.send-button,

.icon-button,

.nav-button,

.status-chip,

.message-file{

    transition:

        background .18s,

        color .18s,

        border-color .18s,

        transform .18s,

        box-shadow .18s,

        opacity .18s;

}


/* ==========================================================
   CHAT POLISH
   ========================================================== */

.messages{

    padding-bottom:20px;

}

.message-row:last-child{

    margin-bottom:4px;

}

.message-bubble{

    border:

        1px solid

        rgba(255,255,255,.05);

}

.message-row.mine .message-bubble{

    border-color:

        rgba(46,204,113,.18);

}

.message-row.client .message-bubble{

    border-color:

        rgba(255,255,255,.06);

}


/* ==========================================================
   TICKET POLISH
   ========================================================== */

.ticket-header{

    flex-wrap:wrap;

}

.ticket-card:active{

    transform:scale(.99);

}

.status-chip{

    white-space:nowrap;

}
/* ==========================================================
   MEDIA VIEWER
   ========================================================== */

.media-viewer{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.94);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    animation:fadeIn .15s;

}

.media-viewer.hidden{

    display:none;

}

.media-viewer img{

    max-width:95vw;

    max-height:95vh;

    border-radius:12px;

    box-shadow:

        0 0 40px rgba(0,0,0,.45);

}

.media-viewer video{

    max-width:95vw;

    max-height:95vh;

    border-radius:12px;

    box-shadow:

        0 0 40px rgba(0,0,0,.45);

}

.media-close{

    position:absolute;

    top:18px;

    right:22px;

    width:46px;

    height:46px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    color:white;

    cursor:pointer;

    transition:.18s;

}

.media-close:hover{

    background:rgba(255,255,255,.20);

}

.media-viewer img,

.media-viewer video{

    cursor:default;

}


/* ==========================================================
   TICKET HEADER ACTIONS / CERRAR TICKET
   ========================================================== */

.ticket-header-actions{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:8px;

}

.btn-close-ticket{

    height:36px;

    padding:0 14px;

    font-size:13px;

}


/* ==========================================================
   CLOSE MODAL
   ========================================================== */

.close-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    padding:20px;

}

.close-modal.hidden{

    display:none;

}

.close-modal-box{

    position:relative;

    width:100%;

    max-width:420px;

    max-height:85vh;

    overflow-y:auto;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:20px;

    padding:24px;

}

.close-modal-box h3{

    margin-bottom:8px;

}

.close-modal-box p{

    color:var(--text-secondary);

    font-size:14px;

    margin-bottom:16px;

}

.close-modal-cancel{

    position:absolute;

    top:14px;

    right:14px;

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:var(--surface-hover);

    color:var(--text-secondary);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

}

.close-modal-actions{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.close-modal-hint{

    color:var(--text-secondary);

    font-size:13px;

    padding:10px 0;

}

.close-modal-link{

    background:none;

    border:none;

    color:var(--primary);

    font-size:13px;

    padding:10px 0;

    cursor:pointer;

    text-align:left;

}

.close-modal-newclient{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:10px;

}

.close-modal-newclient input{

    height:44px;

    padding:0 14px;

    border-radius:12px;

    border:1px solid var(--border);

    background:var(--background);

    color:white;

    font-size:14px;

}

.persat-results{

    max-height:220px;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:12px;

}

.persat-result{

    text-align:left;

    padding:10px 14px;

    border-radius:12px;

    border:1px solid var(--border);

    background:var(--background);

    color:white;

    cursor:pointer;

}

.persat-result:hover{

    background:var(--surface-hover);

}

.persat-result-name{

    font-weight:600;

    font-size:14px;

}

.persat-result-uid{

    color:var(--text-secondary);

    font-size:12px;

    margin-top:2px;

}

.close-selected{

    font-size:13px;

    color:var(--text-secondary);

    margin-bottom:14px;

}


/* ==========================================================
   VISITAS PENDIENTES
   ========================================================== */

.visita-card{

    display:block;

    margin-bottom:14px;

    padding:16px;

    border-radius:20px;

    background:var(--surface);

    border:1px solid var(--border);

    transition:var(--transition);

}

.visita-card:hover{

    background:var(--surface-hover);

}

.visita-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

}

.visita-card-title{

    font-size:17px;

    font-weight:700;

}

.visita-card-meta{

    margin-top:6px;

    color:var(--text-secondary);

    font-size:13px;

}

.visita-card-desc{

    margin-top:8px;

    font-size:14px;

}

.visita-ok,
.visita-error{

    margin-top:12px;

    padding:10px 12px;

    border-radius:12px;

    font-size:13px;

    display:flex;

    align-items:center;

    gap:8px;

}

.visita-ok{

    background:rgba(46,204,113,.14);

    color:#66bb6a;

}

.visita-error{

    background:rgba(239,83,80,.14);

    color:#ef5350;

}

.profile-visitas-link{

    width:100%;

    margin-top:16px;

}


/* ==========================================================
   ADMIN
   ========================================================== */

.admin-section{

    margin-bottom:28px;

}

.admin-section h3{

    margin-bottom:14px;

}

.admin-section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

}

.stat-grid{

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:12px;

    margin-bottom:18px;

}

.admin-stat-lists{

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    gap:14px;

}

.admin-stat-block{

    padding:14px 16px;

    border-radius:16px;

    background:var(--surface);

    border:1px solid var(--border);

}

.admin-stat-block h4{

    font-size:13px;

    color:var(--text-secondary);

    margin-bottom:10px;

}

.admin-stat-row{

    display:flex;

    justify-content:space-between;

    padding:4px 0;

    font-size:14px;

}

.usuario-row{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 14px;

    margin-bottom:10px;

    border-radius:16px;

    background:var(--surface);

    border:1px solid var(--border);

}

.usuario-info{

    flex:1;

    min-width:0;

}

.usuario-nombre{

    font-weight:600;

    font-size:15px;

}

.usuario-username{

    color:var(--text-secondary);

    font-size:13px;

}

.usuario-row select{

    height:38px;

    padding:0 10px;

    border-radius:10px;

    border:1px solid var(--border);

    background:var(--background);

    color:white;

    font-size:13px;

}

.usuario-toggle{

    height:38px;

    padding:0 12px;

    font-size:12px;

}

.usuario-reset{

    width:38px;

    height:38px;

    padding:0;

}

#adminModalBody input,
#adminModalBody select{

    width:100%;

    height:44px;

    padding:0 14px;

    margin-bottom:10px;

    border-radius:12px;

    border:1px solid var(--border);

    background:var(--background);

    color:white;

    font-size:14px;

}

/* ==========================================================
   END
   ========================================================== */