/* AGS Tickets CSS — v1.0
   Paleta institucional + UI base */
:root{
  --bg:#0b0c10;
  --panel:#111319;
  --card:#151823;
  --line:#232637;
  --text:#e5e7eb;
  --muted:#9aa3b2;
  --primary:#2563eb;   /* azul AGS */
  --accent:#f97316;    /* naranja AGS */
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --chip:#1d2230;
  --chip-border:#2b3042;
  --hover:#1b2030;
  --shadow:0 10px 20px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
}

*{box-sizing:border-box}
html,body{background:#0a0c12;color:var(--text);font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";}
a{color:var(--primary);text-decoration:none}

body{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(37,99,235,.18), transparent 55%),
    radial-gradient(900px 520px at 90% 10%, rgba(249,115,22,.12), transparent 55%),
    radial-gradient(900px 520px at 70% 110%, rgba(34,197,94,.10), transparent 55%),
    linear-gradient(180deg, #0a0c12 0%, #070910 100%);
}
a:hover{opacity:.9}
.hidden{display:none !important}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
.text-xs{font-size:12px}
.text-sm{font-size:13px}
.text-muted{color:var(--muted)}
.font-semibold{font-weight:600}
.max-w-7xl{max-width:1200px}
.px-3{padding-left:12px;padding-right:12px}
.py-2{padding-top:8px;padding-bottom:8px}
.mt-1{margin-top:6px}
.space-y-2>*+*{margin-top:8px}
.flex{display:flex}
.items-center{align-items:center}
.gap-1{gap:4px}
.gap-2{gap:8px}
.pointer{cursor:pointer}

/* Topbar */
.topbar{position:sticky;top:0;background:linear-gradient(180deg, rgba(10,12,18,.9), rgba(10,12,18,.8));backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--line);z-index:40}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--chip-border);background:var(--chip);border-radius:999px;color:var(--text);transition:all .18s ease}
.chip{position:relative}
.chip:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.chip--on{
  border-color:rgba(37,99,235,.45);
  background:linear-gradient(180deg, rgba(37,99,235,.22), rgba(37,99,235,.08));
}
label.chip input{position:absolute;opacity:0;pointer-events:none}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}

/* Inputs */
.input, .select, .textarea{
  width:100%;background:#10131b;border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:8px 10px;outline:none;transition:border .18s ease, box-shadow .18s ease;
}
.input:focus, .select:focus, .textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.25)}

/* Tabs */
.view-tabs{display:flex;gap:6px}
.tab{
  padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  color:var(--text);cursor:pointer;transition:all .18s ease;
}
.tab:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.tab.is-active{background:linear-gradient(180deg, rgba(37,99,235,.15), rgba(37,99,235,.05));border-color:#2a3d7a}

/* KPI bar */
.kpi-bar{display:grid;grid-template-columns:repeat(6, minmax(0,1fr));gap:12px;margin:12px 0}
.kpi-top{display:flex;align-items:center;gap:10px}
.kpi-icon{
  width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.kpi-meta .label{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.02em}
.kpi-meta .hint{font-size:11px;color:rgba(154,163,178,.85)}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;text-align:left;transition:transform .18s ease, box-shadow .18s ease}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kpi{cursor:pointer}
.kpi.is-active{border-color:rgba(249,115,22,.45);box-shadow:0 0 0 1px rgba(249,115,22,.2), var(--shadow)}
.kpi:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(249,115,22,.3), var(--shadow)}
.kpi .value{font-size:22px;font-weight:800}
.kpi .value.warn{color:var(--accent)}
.kpi:before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.kpi{position:relative;overflow:hidden}
.kpi:after{
  content:"";position:absolute;left:-20%;top:-35%;width:220px;height:220px;border-radius:999px;filter:blur(22px);opacity:.28;
  background:radial-gradient(circle, rgba(37,99,235,.45) 0%, transparent 60%);
}
.kpi--open:after{background:radial-gradient(circle, rgba(37,99,235,.55) 0%, transparent 60%)}
.kpi--progress:after{background:radial-gradient(circle, rgba(16,185,129,.45) 0%, transparent 60%)}
.kpi--overdue:after{background:radial-gradient(circle, rgba(239,68,68,.48) 0%, transparent 60%)}
.kpi--today:after{background:radial-gradient(circle, rgba(245,158,11,.50) 0%, transparent 60%)}
.kpi--unassigned:after{background:radial-gradient(circle, rgba(148,163,184,.45) 0%, transparent 60%)}
.kpi--sla:after{background:radial-gradient(circle, rgba(34,197,94,.48) 0%, transparent 60%)}
.kpi .kpi-top, .kpi .value{position:relative;z-index:1}

/* Table */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{
  position:sticky;top:0;background:linear-gradient(180deg, rgba(21,24,35,.95), rgba(21,24,35,.85));
  backdrop-filter:saturate(120%) blur(6px);
  z-index:1;text-align:left;font-weight:700;font-size:12px;color:var(--muted);
  border-bottom:1px solid var(--line);padding:10px 12px;
}
.table tbody td{padding:12px;border-bottom:1px solid var(--line);}
.table tbody tr{transition:background .15s ease, transform .12s ease}
.table tbody tr:hover{background:var(--hover)}
.table tbody tr:active{transform:scale(.998)}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid transparent}
.badge-priority--alta{background:rgba(239,68,68,.12);color:#ff8b8b;border-color:rgba(239,68,68,.25)}
.badge-priority--media{background:rgba(245,158,11,.12);color:#ffc266;border-color:rgba(245,158,11,.25)}
.badge-priority--baja{background:rgba(34,197,94,.12);color:#7de3a5;border-color:rgba(34,197,94,.25)}

.badge-status--abierto{background:rgba(37,99,235,.12);color:#9db6ff;border-color:rgba(37,99,235,.25)}
.badge-status--enprogreso{background:rgba(16,185,129,.12);color:#7de3c3;border-color:rgba(16,185,129,.25)}
.badge-status--enespera{background:rgba(245,158,11,.12);color:#ffd28a;border-color:rgba(245,158,11,.25)}
.badge-status--resuelto{background:rgba(99,102,241,.12);color:#c3c5ff;border-color:rgba(99,102,241,.25)}

/* SLA pill */
.sla{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;border:1px dashed var(--line);font-size:11px}
.sla--good{background:rgba(34,197,94,.1);color:#7de3a5;border-color:rgba(34,197,94,.25)}
.sla--warn{background:rgba(245,158,11,.1);color:#ffc266;border-color:rgba(245,158,11,.25)}
.sla--overdue{background:rgba(239,68,68,.1);color:#ff9fa4;border-color:rgba(239,68,68,.25)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn--primary{background:linear-gradient(180deg, rgba(37,99,235,.18), rgba(37,99,235,.06));border-color:#2a3d7a}
.btn--accent{background:linear-gradient(180deg, rgba(249,115,22,.20), rgba(249,115,22,.08));border-color:#6b3b12}
.btn--warning{background:linear-gradient(180deg, rgba(245,158,11,.18), rgba(245,158,11,.06));border-color:#5f4106}
.btn--success{background:linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.06));border-color:#0c4c3b}
.btn--danger{background:linear-gradient(180deg, rgba(239,68,68,.18), rgba(239,68,68,.06));border-color:#5f1b1b}
.btn--neutral{background:linear-gradient(180deg, rgba(148,163,184,.18), rgba(148,163,184,.06));border-color:#3c4454}
.btn--ghost{background:transparent;border-color:transparent}

/* Drawer */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
.drawer{
  position:fixed;inset:0 0 0 auto;width:420px;background:var(--card);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .25s ease;z-index:50;box-shadow:var(--shadow)
}
.drawer__header{border-bottom:1px solid var(--line);background:var(--panel)}
.drawer:not(.hidden){transform:translateX(0)}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:60}
.modal__panel{width:min(760px,92vw);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.modal__panel--ticket{width:min(1100px,96vw);max-height:92vh;overflow:auto}
.ticket-modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ticket-field{min-width:0}
.ticket-field--full{grid-column:1 / -1}
.ticket-autocomplete{position:relative}
.ticket-search-results{
  position:absolute;left:0;right:0;top:100%;margin-top:4px;z-index:6;background:#0d111a;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);max-height:280px;overflow:auto
}
.ticket-search-item{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:background .15s ease}
.ticket-search-item:last-child{border-bottom:none}
.ticket-search-item:hover{background:var(--hover)}
.ticket-search-title{font-weight:700}
.ticket-search-sub{font-size:12px;color:var(--muted);margin-top:2px}
.ticket-mini-meta{font-size:12px;color:var(--muted)}
.ticket-parent-chip{
  display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:12px;border:1px solid rgba(37,99,235,.25);
  background:rgba(37,99,235,.08);color:#b9cbff;font-weight:700
}
.ticket-status-chip{
  display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(148,163,184,.08);color:var(--muted);font-weight:700
}
.ticket-status-chip[data-status="en_tiempo"]{background:rgba(34,197,94,.1);color:#7de3a5;border-color:rgba(34,197,94,.25)}
.ticket-status-chip[data-status="atrasado"]{background:rgba(239,68,68,.1);color:#ff9fa4;border-color:rgba(239,68,68,.25)}
.ticket-status-chip[data-status="sin_promesa"]{background:rgba(148,163,184,.08);color:#cbd5e1;border-color:rgba(148,163,184,.2)}
.ticket-responsables{display:flex;flex-direction:column;gap:12px}
.ticket-responsable{
  padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)
}
.ticket-responsable-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ticket-responsable-grid > [data-role="catalog-wrap"].hidden{display:none}
.ticket-responsable-flags{display:flex;gap:8px;flex-wrap:wrap}
.ticket-responsable-flags .chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);font-size:12px;color:var(--muted)
}
.ticket-responsable-flags input{accent-color:var(--accent)}
.ticket-responsable-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ticket-link-btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);font-size:12px;text-decoration:none
}
.ticket-link-btn.is-disabled{opacity:.45;pointer-events:none}
.ticket-check-row{
  display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.02);cursor:pointer
}
.ticket-check-row input{
  margin-top:2px;accent-color:var(--accent);width:16px;height:16px;flex:0 0 auto
}
.ticket-check-row strong{display:block;font-size:14px}
.ticket-check-row small{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.45}
.ticket-attachments{display:flex;flex-direction:column;gap:8px}
.ticket-attachment-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.02)
}
.ticket-attachment-meta{font-size:12px;color:var(--muted)}
.ticket-extra-box{
  padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)
}
.ticket-extra-title{font-weight:700}
.ticket-flotilla-units{display:flex;flex-direction:column;gap:10px}
.ticket-flotilla-unit{
  padding:12px;border:1px solid rgba(37,99,235,.18);border-radius:14px;background:rgba(37,99,235,.04)
}
.ticket-flotilla-unit-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ticket-flotilla-unit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.ticket-flotilla-unit-empty{
  padding:12px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:12px
}
.ticket-drawer-copy{white-space:pre-wrap;font-size:13px;line-height:1.55}
.ticket-drawer-card{
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)
}
.ticket-drawer-card--admin{
  border-color:rgba(249,115,22,.28);
  background:rgba(249,115,22,.08);
}
.ticket-drawer-card--public{
  border-color:rgba(37,99,235,.22);
  background:rgba(37,99,235,.06);
}
.ticket-drawer-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ticket-thread-form{display:flex;flex-direction:column;gap:10px}
.ticket-thread-form textarea{min-height:108px;resize:vertical}
.ticket-thread-form-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ticket-thread-file{max-width:100%}
.ticket-thread-hint{font-size:12px;color:var(--muted)}
.ticket-thread-send[disabled]{opacity:.6;pointer-events:none}
.ticket-stage-box{
  padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)
}
.ticket-stage-grid{display:grid;grid-template-columns:180px minmax(0,1fr);gap:10px}
.ticket-stage-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px}
.ticket-stage-note{font-size:12px;color:var(--muted)}
.ticket-stage-send[disabled]{opacity:.6;pointer-events:none}
.ticket-bitacora-item{
  padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)
}
.ticket-bitacora-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ticket-bitacora-title{font-weight:700}
.ticket-bitacora-changes{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.ticket-bitacora-change{
  padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);font-size:12px;color:var(--muted)
}
.ticket-bitacora-change strong{color:var(--text)}
.ticket-cell-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ticket-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.ticket-action-btn{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease
}
.ticket-action-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.ticket-action-btn--view{border-color:rgba(37,99,235,.35);color:#b8ccff}
.ticket-action-btn--edit{border-color:rgba(245,158,11,.35);color:#ffd38d}
.ticket-action-btn--delete{border-color:rgba(239,68,68,.35);color:#ffb0b0}
.chip--subticket{
  background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.28);color:#afc7ff
}
.chip--internal{
  background:rgba(148,163,184,.1);border-color:rgba(148,163,184,.25);color:#d8dee9
}
.ticket-template-checklist{display:flex;flex-direction:column;gap:8px}
.ticket-template-item strong{display:flex;align-items:center;gap:8px}
.ticket-template-doc-links{display:flex;flex-direction:column;gap:8px}
.ticket-template-doc-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.02)
}
.ticket-template-doc-link-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ticket-template-upload{max-width:360px}
.ticket-templates-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px}
.ticket-templates-sidebar,
.ticket-templates-editor{
  min-width:0;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)
}
.ticket-templates-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}
.ticket-template-row{
  width:100%;text-align:left;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease
}
.ticket-template-row:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.ticket-template-row.is-active{border-color:rgba(249,115,22,.42);box-shadow:0 0 0 1px rgba(249,115,22,.2)}
.ticket-template-row__name{font-weight:700}
.ticket-template-row__meta{margin-top:4px;font-size:12px;color:var(--muted)}
.ticket-template-docs{display:flex;flex-direction:column;gap:10px}
.ticket-template-doc{
  padding:12px;border:1px dashed var(--line);border-radius:14px;background:rgba(255,255,255,.02)
}
.ticket-template-doc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ticket-template-doc-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* Kanban */
.kanban-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px}
.kanban-col{background:linear-gradient(180deg, rgba(17,19,25,.95), rgba(17,19,25,.82));border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:10px;box-shadow:var(--shadow);min-height:220px}
.kanban-col-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 10px 6px;border-bottom:1px solid rgba(255,255,255,.06)}
.kanban-col-title{font-weight:900}
.kanban-col-body{padding:10px 6px;display:flex;flex-direction:column;gap:10px}
.kanban-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;transition:transform .18s ease, box-shadow .18s ease}
.kanban-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

@media (max-width: 1120px){
  .kpi-bar{grid-template-columns:repeat(3, minmax(0,1fr))}
  .kanban-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ticket-templates-layout{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .kpi-bar{grid-template-columns:repeat(2, minmax(0,1fr))}
  .kanban-grid{grid-template-columns:1fr}
  .ticket-modal-grid{grid-template-columns:1fr}
  .ticket-responsable-grid{grid-template-columns:1fr}
  .ticket-stage-grid{grid-template-columns:1fr}
  .ticket-flotilla-unit-grid{grid-template-columns:1fr}
  .ticket-template-doc-grid{grid-template-columns:1fr}
}