:root{
--primary:#A70C38;--primary-dark:#8F0A30;--bg:#f4f7fb;--card:#fff;--text:#172033;
--muted:#6f7b8f;--border:#e5eaf1;--shadow:0 12px 30px rgba(20,37,63,.08);
--radius:18px;--nav-height:74px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}
.app-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);backdrop-filter:blur(12px)}
.app-brand{font-size:1.06rem;font-weight:800;letter-spacing:.02em}.app-subtitle{margin-top:2px;color:var(--muted);font-size:.78rem}
.app-main{width:min(100%,760px);margin:0 auto;padding:18px}
.welcome-card,.page-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.welcome-card{padding:24px;background:radial-gradient(circle at top right,rgba(167,12,56,.10),transparent 38%),#fff}
.welcome-card h1,.page-card h1{margin:4px 0 8px;font-size:clamp(1.5rem,5vw,2rem)}
.welcome-card p{margin:0;color:var(--muted);line-height:1.5}.welcome-eyebrow{display:inline-block;color:var(--primary);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.section-block{margin-top:24px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-heading h2{margin:0;font-size:1rem}
.module-grid{display:grid;gap:12px}.module-card{display:grid;grid-template-columns:52px 1fr 24px;align-items:center;gap:14px;padding:16px;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 7px 18px rgba(20,37,63,.045)}
.module-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#F8EEF2;font-size:1.6rem}.module-content h3{margin:0 0 4px;font-size:1rem}.module-content p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.35}.module-arrow{color:#a0a9b8;font-size:1.9rem}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);min-height:var(--nav-height);padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.97);border-top:1px solid var(--border);backdrop-filter:blur(12px)}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;color:#7b8798}.bottom-nav-item>span{font-size:1.25rem}.bottom-nav-item small{font-size:.7rem;font-weight:700}.bottom-nav-item.active{color:var(--primary)}
.header-back{width:40px;height:40px;border-radius:12px;background:#f4f5f7;display:grid;place-items:center;font-size:1.65rem;color:#354052}.header-ticket-title{flex:1;min-width:0;margin:0 10px}.logout-link{font-size:.75rem;font-weight:700;color:var(--primary)}
.mobile-search{margin-bottom:14px}.search-line{display:grid;grid-template-columns:1fr auto;gap:8px}.search-line input{min-width:0;height:44px;border:1px solid var(--border);border-radius:13px;background:#fff;padding:0 14px}.search-line button{border:0;border-radius:13px;padding:0 16px;background:var(--primary);color:#fff;font-weight:700}
.filter-chips{display:flex;gap:7px;overflow-x:auto;padding:10px 1px 2px;scrollbar-width:none}.filter-chips::-webkit-scrollbar{display:none}.filter-chips a{white-space:nowrap;border:1px solid var(--border);background:#fff;color:#6c7788;border-radius:999px;padding:7px 10px;font-size:.7rem;font-weight:700}.filter-chips a.active{background:#f8eef2;color:var(--primary);border-color:#e8c7d2}
.ticket-list{display:grid;gap:11px}.ticket-mobile-card{display:block;background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 15px;box-shadow:0 5px 16px rgba(20,37,63,.035)}.ticket-card-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.ticket-card-row.top>div{display:flex;align-items:center;gap:8px}.ticket-number{font-size:.78rem;font-weight:800}.ticket-date{font-size:.68rem;color:#9aa3af}.ticket-mobile-card h2{margin:11px 0 6px;font-size:.92rem}.ticket-incident{margin:0;color:#566171;font-size:.82rem;line-height:1.45;display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.ticket-card-row.meta{justify-content:flex-start;flex-wrap:wrap;margin-top:10px;color:#8993a1;font-size:.69rem}.ticket-card-row.meta span+span:before{content:"•";margin-right:8px}.ticket-card-row.footer{margin-top:11px;padding-top:10px;border-top:1px solid #f0f2f5}.ticket-type{background:#f2f4f7;border-radius:999px;padding:4px 7px;color:#687486;font-size:.63rem;font-weight:700}.comment-count{margin-left:auto;color:#798495;font-size:.7rem}.open-arrow{font-size:1.5rem;color:#a3acb8}
.status-badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:999px;padding:5px 8px;font-size:.61rem;font-weight:800}.status-badge.nuevo{background:#e9f8ef;color:#198754}.status-badge.proceso{background:#fff5df;color:#a96d00}.status-badge.pendiente{background:#ffebed;color:#c93746}.status-badge.reasignar{background:#edf1ff;color:#5268d6}.status-badge.cerrado{background:#eef1f4;color:#64707f}.status-badge.finalizado{background:#e8f5fb;color:#1683ad}.status-badge.otro{background:#f1f2f4;color:#667180}
.mobile-empty{padding:42px 18px;text-align:center;background:#fff;border:1px solid var(--border);border-radius:16px;color:var(--muted)}.mobile-empty div{font-size:2.5rem;margin-bottom:8px}.mobile-empty strong,.mobile-empty span{display:block}.mobile-empty strong{color:var(--text);margin-bottom:5px}
.mobile-pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:18px 0 8px;font-size:.76rem}.mobile-pagination a:last-child{text-align:right}.mobile-pagination a{color:var(--primary);font-weight:700}
.detail-hero{background:#fff;border:1px solid var(--border);border-radius:17px;padding:18px;box-shadow:var(--shadow)}.detail-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--primary)}.detail-hero h1{font-size:1rem;line-height:1.5;margin:7px 0 16px}.detail-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:14px;border-top:1px solid #eef1f4}.detail-meta-grid span,.detail-meta-grid strong{display:block}.detail-meta-grid span{font-size:.62rem;color:#9aa3af;text-transform:uppercase;font-weight:700;margin-bottom:3px}.detail-meta-grid strong{font-size:.75rem;color:#465163}
.detail-tabs{display:grid;grid-template-columns:1fr 1fr;margin:16px 0 12px;background:#e9edf2;border-radius:12px;padding:4px}.detail-tab{height:38px;border:0;background:transparent;border-radius:9px;color:#7a8595;font-weight:750;font-size:.78rem}.detail-tab.active{background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(30,45,70,.08)}.detail-tab-panel{display:none}.detail-tab-panel.active{display:block}.timeline{display:grid;gap:10px}.timeline-item{background:#fff;border:1px solid var(--border);border-radius:15px;padding:14px}.timeline-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.timeline-head strong{font-size:.78rem}.timeline-date{margin-top:4px;color:#9aa3af;font-size:.65rem}.timeline-item p{margin:10px 0 0;font-size:.79rem;color:#4f5b6c;line-height:1.5}.photo-link{display:inline-flex;margin-top:10px;background:#f2f5f8;border-radius:9px;padding:7px 9px;color:#59677a;font-size:.69rem;font-weight:700}
.mobile-form{background:#fff;border:1px solid var(--border);border-radius:16px;padding:15px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-field{display:block}.form-field.full{grid-column:1/-1}.form-field>span{display:block;margin-bottom:6px;color:#667284;font-size:.68rem;font-weight:750}.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid #dfe4ea;border-radius:11px;background:#fbfcfd;color:#263246;padding:10px 11px}.form-field input,.form-field select{min-height:43px}.camera-field{padding:12px;background:#f8fafc;border-radius:12px}.camera-field small{display:block;margin-top:6px;color:#919baa;font-size:.65rem}.primary-action{width:100%;min-height:48px;margin-top:15px;border:0;border-radius:12px;background:linear-gradient(135deg,#A70C38,#C41149);color:#fff;font-weight:800}
.app-alert{margin-bottom:12px;padding:11px 13px;border-radius:11px;font-size:.77rem;font-weight:650}.app-alert.success{background:#eaf8ef;color:#247b47;border:1px solid #ccebd7}.app-alert.error{background:#fff0f1;color:#a62f3c;border:1px solid #f2cdd1}
.empty-state{padding:42px 16px;text-align:center}.empty-icon{font-size:3rem}.empty-state p{color:var(--muted);line-height:1.55}
.login-body{padding:0;background:linear-gradient(145deg,#171C27,#2B2330);display:grid;place-items:center}.login-app-shell{width:min(92%,460px);padding:28px 0}.login-brand{display:flex;align-items:center;gap:12px;color:#fff;margin-bottom:18px}.login-mark{width:48px;height:48px;background:#fff;color:var(--primary);border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:1.4rem}.login-brand h1{margin:0;font-size:1.2rem}.login-brand p{margin:3px 0 0;color:rgba(255,255,255,.65);font-size:.75rem}.login-app-card{background:#fff;border-radius:20px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.25)}.login-app-card h2{margin:6px 0 5px}.login-description{margin:0 0 18px;color:var(--muted);font-size:.85rem;line-height:1.45}.login-form{padding:0;border:0}
@media(max-width:520px){.form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}.detail-meta-grid{grid-template-columns:1fr 1fr}}


/* =========================================================
   PWA TÉCNICOS · TICKETS POR ASIGNACIÓN Y ZONA
   ========================================================= */
.tech-ticket-tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-bottom:14px;
}
.tech-ticket-tabs a{
    min-width:0;
    padding:12px 7px;
    text-align:center;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    color:#7a8595;
}
.tech-ticket-tabs a strong{
    display:block;
    font-size:1.28rem;
    line-height:1;
    color:#303d50;
}
.tech-ticket-tabs a span{
    display:block;
    margin-top:6px;
    font-size:.66rem;
    font-weight:750;
}
.tech-ticket-tabs a.active{
    border-color:#dfb5c3;
    background:#fbf2f5;
    color:var(--primary);
    box-shadow:0 0 0 2px rgba(167,12,56,.05);
}
.tech-ticket-tabs a.active strong{color:var(--primary)}

.ticket-list-caption{
    margin:4px 2px 11px;
}
.ticket-list-caption strong,
.ticket-list-caption span{
    display:block;
}
.ticket-list-caption strong{
    font-size:.8rem;
    color:#344155;
}
.ticket-list-caption span{
    margin-top:2px;
    font-size:.68rem;
    color:#929ba8;
}

.available-ticket{
    border-left:3px solid #35a86a;
}
.zone-pill{
    display:inline-flex;
    margin:0 0 8px;
    padding:4px 8px;
    border-radius:999px;
    background:#eef7f1;
    color:#318255;
    font-size:.63rem;
    font-weight:800;
}
.available-label{
    color:#318255;
    font-size:.66rem;
    font-weight:800;
}

.take-ticket-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
    padding:16px;
    background:#fff;
    border:1px solid #cfe8d8;
    border-radius:17px;
    box-shadow:0 8px 22px rgba(42,119,75,.06);
}
.take-ticket-card h2{
    margin:5px 0 4px;
    font-size:.95rem;
}
.take-ticket-card p{
    margin:0;
    color:#7b8796;
    font-size:.72rem;
    line-height:1.45;
}
.take-ticket-card form{
    flex:0 0 auto;
}
.take-ticket-button{
    min-height:44px;
    border:0;
    border-radius:12px;
    padding:0 15px;
    background:#2f9a5f;
    color:#fff;
    font-weight:800;
    font-size:.74rem;
    box-shadow:0 8px 18px rgba(47,154,95,.18);
}
.detail-tabs.one-tab{
    grid-template-columns:1fr;
}

@media(max-width:520px){
    .take-ticket-card{
        align-items:stretch;
        flex-direction:column;
    }
    .take-ticket-button{
        width:100%;
    }
}

/* =========================================================
   SISELSE PWA · MODO OSCURO
   Tema: claro | oscuro | automático
   ========================================================= */
:root{
    color-scheme:light;
    --surface:#fff;
    --surface-soft:#f8fafc;
    --surface-muted:#f2f4f7;
    --text-soft:#566171;
    --text-faint:#8993a1;
}

html[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0f141d;
    --card:#1a202b;
    --text:#f4f6fa;
    --muted:#aab3c2;
    --border:#303846;
    --shadow:0 12px 30px rgba(0,0,0,.24);
    --surface:#1a202b;
    --surface-soft:#202733;
    --surface-muted:#252d39;
    --text-soft:#c7cfda;
    --text-faint:#929dad;
}

html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="dark"] .app-header{background:rgba(20,26,36,.96)}
html[data-theme="dark"] .welcome-card{background:radial-gradient(circle at top right,rgba(181,8,54,.18),transparent 38%),var(--card)}
html[data-theme="dark"] .welcome-card,
html[data-theme="dark"] .page-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .ticket-mobile-card,
html[data-theme="dark"] .mobile-empty,
html[data-theme="dark"] .detail-hero,
html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .mobile-form,
html[data-theme="dark"] .take-ticket-card,
html[data-theme="dark"] .tech-ticket-tabs a{background:var(--card);border-color:var(--border)}
html[data-theme="dark"] .bottom-nav{background:rgba(20,26,36,.97);border-color:var(--border)}
html[data-theme="dark"] .bottom-nav-item{color:#929dad}
html[data-theme="dark"] .header-back{background:var(--surface-muted);color:#d4dae3}
html[data-theme="dark"] .module-icon{background:#34212a}
html[data-theme="dark"] .module-arrow,
html[data-theme="dark"] .open-arrow{color:#7f8a9b}
html[data-theme="dark"] .search-line input,
html[data-theme="dark"] .filter-chips a{background:var(--card);border-color:var(--border);color:var(--text-soft)}
html[data-theme="dark"] .search-line input::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#7f8998}
html[data-theme="dark"] .filter-chips a.active,
html[data-theme="dark"] .tech-ticket-tabs a.active{background:#34212a;border-color:#704052;color:#e75a83}
html[data-theme="dark"] .tech-ticket-tabs a strong,
html[data-theme="dark"] .ticket-list-caption strong,
html[data-theme="dark"] .mobile-empty strong{color:var(--text)}
html[data-theme="dark"] .ticket-incident,
html[data-theme="dark"] .timeline-item p,
html[data-theme="dark"] .detail-meta-grid strong{color:var(--text-soft)}
html[data-theme="dark"] .ticket-date,
html[data-theme="dark"] .ticket-card-row.meta,
html[data-theme="dark"] .comment-count,
html[data-theme="dark"] .timeline-date,
html[data-theme="dark"] .detail-meta-grid span,
html[data-theme="dark"] .ticket-list-caption span{color:var(--text-faint)}
html[data-theme="dark"] .ticket-card-row.footer,
html[data-theme="dark"] .detail-meta-grid{border-color:var(--border)}
html[data-theme="dark"] .ticket-type,
html[data-theme="dark"] .photo-link{background:var(--surface-muted);color:#bac3d0}
html[data-theme="dark"] .detail-tabs{background:#252d39}
html[data-theme="dark"] .detail-tab{color:#9aa5b5}
html[data-theme="dark"] .detail-tab.active{background:#353e4c;color:#f05b85;box-shadow:none}
html[data-theme="dark"] .form-field>span{color:#aeb8c6}
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .form-field textarea{background:#202733;border-color:#3a4351;color:#f4f6fa}
html[data-theme="dark"] .camera-field{background:#202733}
html[data-theme="dark"] .camera-field small{color:#929dad}
html[data-theme="dark"] .login-app-card{background:var(--card)}
html[data-theme="dark"] .take-ticket-card p{color:var(--muted)}
html[data-theme="dark"] .zone-pill{background:#193128;color:#69c58f}

/* Control de apariencia compartido */
.theme-menu{position:relative;flex:0 0 auto}
.theme-toggle{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);cursor:pointer;padding:0;font-size:16px;line-height:1}
.theme-popover{position:absolute;top:42px;right:0;z-index:100;width:154px;padding:6px;border:1px solid var(--border);border-radius:13px;background:var(--card);box-shadow:0 14px 35px rgba(18,28,45,.18);display:none}
.theme-menu.open .theme-popover{display:grid;gap:2px}
.theme-option{width:100%;min-height:36px;border:0;border-radius:9px;background:transparent;color:var(--text);padding:0 10px;text-align:left;font-size:11px;font-weight:700;cursor:pointer}
.theme-option:hover,.theme-option.active{background:var(--surface-muted);color:var(--primary)}
html[data-theme="dark"] .theme-popover{box-shadow:0 16px 38px rgba(0,0,0,.42)}