:root{
  --bg:#F5F1F0; --surface:#FFFFFF; --surface-2:#EDE6E5; --surface-3:#E1D7D6;
  --border:#D9CDCB; --text:#241C1B; --text-muted:#6B5C59; --text-faint:#9C8B88;
  --accent:#2C5CA0; --accent-strong:#1E4478; --accent-soft:#DEE8F5; --accent-contrast:#FFFFFF;
  --success:#1E7A46; --success-soft:#DFF3E6;
  --warning:#A9700F; --warning-soft:#FBEBD2;
  --danger:#C4302B; --danger-soft:#FBE0DE;
  --focus:#2C5CA0;
  --shadow:0 1px 2px rgba(30,20,18,.06), 0 4px 14px rgba(30,20,18,.05);
  --font-display:"Space Grotesk", "Segoe UI", sans-serif;
  --font-body:"IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17110F; --surface:#221A18; --surface-2:#2B2120; --surface-3:#362B29;
    --border:#3D302E; --text:#F1E8E6; --text-muted:#B29D99; --text-faint:#7A6663;
    --accent:#6FA0E0; --accent-strong:#9BC0EE; --accent-soft:#1E3454; --accent-contrast:#0A1626;
    --success:#4CBE79; --success-soft:#123321;
    --warning:#E0A73C; --warning-soft:#3A2C10;
    --danger:#E5645C; --danger-soft:#3D1917;
    --focus:#6FA0E0;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#17110F; --surface:#221A18; --surface-2:#2B2120; --surface-3:#362B29;
  --border:#3D302E; --text:#F1E8E6; --text-muted:#B29D99; --text-faint:#7A6663;
  --accent:#6FA0E0; --accent-strong:#9BC0EE; --accent-soft:#1E3454; --accent-contrast:#0A1626;
  --success:#4CBE79; --success-soft:#123321;
  --warning:#E0A73C; --warning-soft:#3A2C10;
  --danger:#E5645C; --danger-soft:#3D1917;
  --focus:#6FA0E0;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  color-scheme: dark;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0;}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
button, input, select, textarea{font-family:inherit; font-size:inherit; color:inherit;}
button{cursor:pointer;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

.app-bar{
  position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--border);
  padding:12px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; margin-right:auto;}
.brand-logo{height:38px; width:auto; flex-shrink:0; display:block;}
.brand-text h1{font-size:16px; line-height:1.2;}
.brand-text p{margin:1px 0 0; font-size:11.5px; color:var(--text-muted); letter-spacing:.02em;}

.segmented{display:flex; background:var(--surface-2); border-radius:10px; padding:3px; gap:2px;}
.segmented button{
  border:none; background:transparent; padding:8px 14px; border-radius:8px; font-weight:600;
  font-size:13.5px; color:var(--text-muted); white-space:nowrap;
}
.segmented button.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow);}

.badge-count{
  display:inline-flex; align-items:center; gap:6px; background:var(--warning-soft); color:var(--warning);
  border-radius:999px; padding:6px 12px; font-weight:600; font-size:12.5px; white-space:nowrap;
}
.badge-count .dot{width:6px;height:6px;border-radius:50%;background:var(--warning);}

main{max-width:1080px; margin:0 auto; padding:20px 16px 64px;}

/* ---- shared components ---- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);}
.section-title{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:600; margin:0 0 10px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:18px;}
.field label{font-size:13px; font-weight:600; color:var(--text);}
.field .hint{font-size:12px; color:var(--text-muted); margin-top:-2px;}
.input, .select, textarea.input{
  width:100%; border:1px solid var(--border); background:var(--bg); color:var(--text);
  border-radius:10px; padding:12px 13px; font-size:15px; transition:border-color .12s;
}
.input:focus, .select:focus, textarea.input:focus{border-color:var(--accent);}
textarea.input{resize:vertical; min-height:90px; font-family:inherit;}

.pill-group{display:flex; flex-wrap:wrap; gap:8px;}
.pill-btn{
  border:1.5px solid var(--border); background:var(--surface); border-radius:10px; padding:12px 14px;
  font-weight:600; font-size:14px; color:var(--text); flex:1 1 auto; min-width:90px; text-align:center;
}
.pill-btn.small{padding:8px 12px; font-size:13px; flex:0 0 auto; min-width:0;}
.pill-btn[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong);}
.pill-btn[data-action="pick-empresa"][data-value="FTS"][aria-pressed="true"]{border-color:var(--danger); background:var(--danger-soft); color:var(--danger);}
.pill-btn[data-action="pick-empresa"][data-value="RSKTS"][aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong);}

.prio-btn{border:1.5px solid var(--border); background:var(--surface); border-radius:12px; padding:12px; text-align:left; flex:1 1 150px;}
.prio-btn .p-label{display:block; font-weight:700; font-size:14.5px;}
.prio-btn .p-sla{display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px;}
.prio-btn[data-prioridad="critica"][aria-pressed="true"]{border-color:var(--danger); background:var(--danger-soft);}
.prio-btn[data-prioridad="critica"][aria-pressed="true"] .p-label{color:var(--danger);}
.prio-btn[data-prioridad="alta"][aria-pressed="true"]{border-color:var(--warning); background:var(--warning-soft);}
.prio-btn[data-prioridad="alta"][aria-pressed="true"] .p-label{color:var(--warning);}
.prio-btn[data-prioridad="media"][aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft);}
.prio-btn[data-prioridad="media"][aria-pressed="true"] .p-label{color:var(--accent-strong);}
.prio-btn[data-prioridad="baja"][aria-pressed="true"]{border-color:var(--success); background:var(--success-soft);}
.prio-btn[data-prioridad="baja"][aria-pressed="true"] .p-label{color:var(--success);}

.btn-primary{
  width:100%; background:var(--accent); color:var(--accent-contrast); border:none; border-radius:12px;
  padding:15px; font-weight:700; font-size:15.5px; letter-spacing:.01em;
}
.btn-primary:disabled{opacity:.5; cursor:not-allowed;}
.btn-secondary{background:var(--surface-2); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 16px; font-weight:600; font-size:13.5px;}
.btn-ghost{background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:10px; padding:9px 14px; font-weight:600; font-size:13px;}
.btn-danger-ghost{background:transparent; border:1px solid var(--danger); color:var(--danger); border-radius:10px; padding:9px 14px; font-weight:600; font-size:13px;}

.pill{display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:4px 10px; font-size:11.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap;}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-empresa{background:var(--surface-3); color:var(--text);}
.pill-empresa[data-empresa="FTS"]{background:var(--danger-soft); color:var(--danger);}
.pill-empresa[data-empresa="RSKTS"]{background:var(--accent-soft); color:var(--accent-strong);}
.pill-critica{background:var(--danger-soft); color:var(--danger);}
.pill-alta{background:var(--warning-soft); color:var(--warning);}
.pill-media{background:var(--accent-soft); color:var(--accent-strong);}
.pill-baja{background:var(--success-soft); color:var(--success);}
.pill-abierto{background:var(--warning-soft); color:var(--warning);}
.pill-en_proceso{background:var(--accent-soft); color:var(--accent-strong);}
.pill-espera_refaccion{background:var(--surface-3); color:var(--text-muted);}
.pill-resuelto{background:var(--success-soft); color:var(--success);}
.pill-cerrado{background:var(--surface-2); color:var(--text-faint); border:1px solid var(--border);}
.pill-cancelado{background:var(--surface-2); color:var(--text-faint); text-decoration:line-through;}
.pill-ok{background:var(--success-soft); color:var(--success);}
.pill-warn{background:var(--warning-soft); color:var(--warning);}
.pill-bad{background:var(--danger-soft); color:var(--danger);}

/* ---- reportar view ---- */
.report-wrap{max-width:560px; margin:0 auto;}
.report-card{padding:22px 20px;}
.report-head{margin-bottom:20px;}
.report-head h2{font-size:20px;}
.report-head p{margin:6px 0 0; color:var(--text-muted); font-size:13.5px;}

.confirm{text-align:center; padding:38px 20px;}
.check{width:56px;height:56px;border-radius:50%;background:var(--success-soft);color:var(--success);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.check svg{width:28px;height:28px;}
.icon-inline{width:12px;height:12px;vertical-align:-1px;display:inline-block;}
.confirm .folio{font-family:var(--font-mono); font-size:26px; font-weight:600; margin:10px 0 2px;}
.confirm p{color:var(--text-muted); font-size:13.5px; margin:4px 0;}
.confirm .sla-note{display:inline-block; margin-top:14px; background:var(--accent-soft); color:var(--accent-strong); padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600;}
.confirm .actions{display:flex; gap:10px; justify-content:center; margin-top:22px; flex-wrap:wrap;}

/* ---- panel view ---- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px;}
.kpi-card{padding:14px 16px;}
.kpi-card .kpi-label{font-size:11.5px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em;}
.kpi-card .kpi-value{font-family:var(--font-mono); font-size:26px; font-weight:600; margin-top:6px; line-height:1;}
.kpi-card .kpi-sub{font-size:12px; color:var(--text-muted); margin-top:6px;}
.kpi-card.warn .kpi-value{color:var(--warning);}
.kpi-card.bad .kpi-value{color:var(--danger);}
.kpi-card.ok .kpi-value{color:var(--success);}

.mini-panels{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; margin-bottom:18px;}
.mini-panel{padding:14px 16px;}
.mini-row{display:flex; align-items:center; gap:8px; font-size:13px; padding:5px 0;}
.mini-row .mini-label{flex:1; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mini-row .mini-bar-track{flex:1.4; height:6px; background:var(--surface-2); border-radius:4px; overflow:hidden;}
.mini-row .mini-bar-fill{height:100%; background:var(--accent); border-radius:4px;}
.mini-row .mini-count{font-family:var(--font-mono); color:var(--text-muted); font-size:12px; width:22px; text-align:right;}

.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; align-items:center;}
.filters select, .filters input{border:1px solid var(--border); background:var(--surface); border-radius:9px; padding:8px 10px; font-size:13px;}
.filters input[type="search"]{flex:1 1 180px; min-width:140px;}

.ticket-list{display:flex; flex-direction:column; gap:10px;}
.ticket-card{padding:0; overflow:hidden;}
.ticket-head{display:flex; align-items:flex-start; gap:12px; padding:14px 16px; cursor:pointer;}
.ticket-stripe{width:4px; align-self:stretch; border-radius:4px; flex-shrink:0;}
.stripe-critica{background:var(--danger);} .stripe-alta{background:var(--warning);} .stripe-media{background:var(--accent);} .stripe-baja{background:var(--success);}
.ticket-main{flex:1; min-width:0;}
.ticket-top-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px;}
.ticket-folio{font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--text-muted);}
.ticket-title{font-weight:600; font-size:14.5px; margin:2px 0 4px;}
.ticket-meta{font-size:12.5px; color:var(--text-muted); display:flex; gap:10px; flex-wrap:wrap;}
.ticket-sla{flex-shrink:0; text-align:right; font-size:11.5px;}

.ticket-detail{border-top:1px solid var(--border); padding:16px; background:var(--bg);}
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
@media (max-width:520px){ .detail-grid{grid-template-columns:1fr;} }
.detail-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:600; margin-bottom:3px;}
.detail-value{font-size:13.5px;}
.bitacora{border-top:1px dashed var(--border); margin-top:14px; padding-top:12px;}
.bitacora-item{font-size:12.5px; padding:6px 0; border-bottom:1px solid var(--border); display:flex; gap:8px;}
.bitacora-item:last-child{border-bottom:none;}
.bitacora-item .b-ts{color:var(--text-faint); font-family:var(--font-mono); font-size:11px; flex-shrink:0; padding-top:1px;}
.action-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.resolve-form{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px; margin-top:12px;}
.note-row{display:flex; gap:8px; margin-top:12px;}
.note-row input{flex:1;}

.empty-state{text-align:center; padding:52px 20px; color:var(--text-muted);}
.empty-state svg{width:40px; height:40px; color:var(--text-faint); margin-bottom:12px;}
.empty-state p{margin:4px 0; font-size:13.5px;}

.settings-toggle{background:none; border:none; color:var(--accent); font-weight:600; font-size:13px; padding:10px 2px; display:flex; align-items:center; gap:6px;}
.settings-body{padding:14px 16px 16px;}
.sla-row{display:grid; grid-template-columns:100px 1fr 1fr; gap:10px; align-items:center; padding:7px 0; font-size:13px;}
.sla-row input{width:100%; border:1px solid var(--border); background:var(--bg); border-radius:8px; padding:6px 8px; font-size:13px;}
.sla-row-head{font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em;}

.toast{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:11px 18px; border-radius:10px; font-size:13.5px; font-weight:500; box-shadow:var(--shadow); z-index:50; max-width:90vw;}
.saving-flag{position:fixed; top:10px; right:14px; font-size:11px; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); padding:4px 10px; border-radius:999px; z-index:50;}

@media (max-width:600px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .detail-grid{grid-template-columns:1fr;}
}