/* ============================================
   TEYDISA - NAVY + GOLD PREMIUM
   Sistema de Gestión de Incidencias
============================================ */
:root {
  --navy:   #0a1628;
  --navy2:  #0f2044;
  --navy3:  #162a52;
  --gold:   #c9a84c;
  --gold2:  #f0cc6a;
  --text:   #e2e8f4;
  --muted:  #8899b8;
  --muted2: #5a6e8c;
  --border: rgba(201,168,76,.18);
  --border2:rgba(255,255,255,.08);
  --glass:  rgba(255,255,255,.04);
  --success:#4ade80;
  --success-bg:rgba(74,222,128,.12);
  --success-border:rgba(74,222,128,.25);
  --warning:#fbbf24;
  --warning-bg:rgba(251,191,36,.12);
  --warning-border:rgba(251,191,36,.25);
  --danger: #f87171;
  --danger-bg:rgba(248,113,113,.12);
  --danger-border:rgba(248,113,113,.25);
  --info:   #93c5fd;
  --info-bg:rgba(147,197,253,.12);
  --info-border:rgba(147,197,253,.25);
  --shadow: 0 20px 60px rgba(0,0,0,.4);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --transition: 150ms cubic-bezier(.4,0,.2,1);
  /* compat con páginas viejas */
  --bg:#0a1628;
  --bg-page:#0a1628;
  --bg-elevated:rgba(255,255,255,.04);
  --bg-overlay:rgba(255,255,255,.04);
  --card:rgba(255,255,255,.04);
  --text-primary:#e2e8f4;
  --text-secondary:#8899b8;
  --text-muted:#5a6e8c;
  --text-on-dark:#e2e8f4;
  --text-on-primary:#0a1628;
  --border-light:rgba(255,255,255,.08);
  --border-medium:rgba(255,255,255,.12);
  --border-strong:rgba(201,168,76,.25);
  --sidebar-bg:linear-gradient(180deg,#0f2044 0%,#0a1628 100%);
  --sidebar-hover:rgba(201,168,76,.08);
  --sidebar-active:linear-gradient(90deg,rgba(201,168,76,.15),rgba(201,168,76,.05));
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; -webkit-font-smoothing:antialiased; }
body {
  height:100%; margin:0;
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:14px; line-height:1.5;
  color:var(--text);
  background:
    radial-gradient(ellipse 70% 40% at 20% -10%,rgba(201,168,76,.07) 0%,transparent 60%),
    radial-gradient(ellipse 50% 30% at 80% 110%,rgba(13,62,151,.15) 0%,transparent 60%),
    var(--navy);
}
a { color:inherit; text-decoration:none; }

/* ── LAYOUT ── */
.app {
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:100vh;
}
@media(max-width:1024px){ .app{ grid-template-columns:1fr; } }

/* ── SIDEBAR ── */
.sidebar {
  position:sticky; top:0; height:100vh;
  background:linear-gradient(180deg,#0f2044 0%,#0a1628 100%);
  border-right:1px solid var(--border);
  padding:20px 14px;
  display:flex; flex-direction:column; gap:20px;
  overflow-y:auto;
  box-shadow:4px 0 24px rgba(0,0,0,.3);
  position:relative;
}
.sidebar::after {
  content:''; position:absolute; top:0; right:0; width:1px; height:100%;
  background:linear-gradient(180deg,transparent,rgba(201,168,76,.4),transparent);
  pointer-events:none;
}

/* ── AUTOCOMPLETADO OF ── */
.autocomplete-dropdown{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  max-height:200px;
  overflow-y:auto;
  background:#1a2f50;
  border:1px solid rgba(201,168,76,.3);
  border-radius:6px;
  z-index:1000;
  display:none;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.autocomplete-dropdown.show{display:block}
.autocomplete-item{
  padding:8px 12px;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:12px;
  transition:background .15s;
}
.autocomplete-item:hover{background:rgba(201,168,76,.2)}
.autocomplete-item strong{color:#f0cc6a}

/* Info OF */
.of-info-box{
  margin-top:8px;
  padding:8px;
  background:rgba(76,175,132,.15);
  border-left:3px solid #4caf84;
  border-radius:4px;
  font-size:11px;
  display:none;
}

/* Campos Código más grandes */
#i_codigo{min-width:250px;font-size:13px}
#i_descripcionCod,#i_descod{
  min-height:80px;
  font-size:12px;
  line-height:1.5;
  resize:vertical;
}
textarea#i_descripcionCod,textarea#i_descod{min-height:100px}

/* ── BRAND ── */
.brand {
  display:flex; align-items:center; gap:12px;
  padding:8px 8px 16px;
  border-bottom:1px solid var(--border);
}
.brand .logo {
  width:44px; height:44px; border-radius:10px;
  background:#fff;
  border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  padding:4px;
}
.brand .logo img { width:100%; height:100%; object-fit:contain; display:block; }
.brand .meta { min-width:0; flex:1; }
.brand .meta .t { font-size:14px; font-weight:800; color:#fff; margin:0; line-height:1.2; letter-spacing:-.01em; }
.brand .meta .s { font-size:11px; color:var(--muted); margin:3px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── NAV ── */
.nav { display:flex; flex-direction:column; gap:3px; }
.nav a {
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:10px;
  color:var(--muted); font-size:13px; font-weight:600;
  transition:all var(--transition);
  border:1px solid transparent;
  border-left:2px solid transparent;
}
.nav a:hover {
  background:rgba(201,168,76,.06);
  color:var(--text);
}
.nav a.active {
  background:linear-gradient(90deg,rgba(201,168,76,.12),rgba(201,168,76,.04));
  color:var(--gold2);
  border-color:rgba(201,168,76,.15);
  border-left-color:var(--gold);
}
.nav a .ic { width:20px; text-align:center; font-size:15px; flex-shrink:0; }
.nav a .tx { flex:1; min-width:0; }

/* ── SIDEBAR FOOTER ── */
.sidebar-footer {
  margin-top:auto; padding-top:14px;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:10px;
}
.sidebar-footer > div:first-child { color:var(--muted2); font-size:11px; line-height:1.5; }
.sidebar-footer .mut { color:var(--muted2); }

/* ── MAIN ── */
.main { padding:28px; min-height:100vh; }
@media(max-width:768px){ .main{ padding:16px; } }

/* ── CARD ── */
.card {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-xl);
  box-shadow:0 4px 24px rgba(0,0,0,.2);
  overflow:hidden;
  transition:all var(--transition);
}
.card:hover { box-shadow:0 8px 32px rgba(0,0,0,.3); }

/* ── TOPBAR ── */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:18px 22px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(to bottom,rgba(255,255,255,.03),transparent);
  flex-wrap:wrap;
}
.h1 {
  font-size:22px; font-weight:800; letter-spacing:-.02em;
  margin:0; color:#fff; line-height:1.2;
}
.p { margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }

/* ── BOTONES ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border:1px solid transparent;
  border-radius:var(--radius-md); font-size:13px; font-weight:700;
  letter-spacing:-.01em; cursor:pointer;
  transition:all var(--transition); white-space:nowrap;
  text-decoration:none; line-height:1.2;
  font-family:inherit;
}
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none!important; }

.btn-primary {
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#0a1628;
  box-shadow:0 2px 8px rgba(201,168,76,.25);
}
.btn-primary:hover:not(:disabled) {
  filter:brightness(1.08);
  box-shadow:0 4px 14px rgba(201,168,76,.35);
  transform:translateY(-1px);
}
.btn-light {
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-color:rgba(255,255,255,.1);
}
.btn-light:hover:not(:disabled) {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
}
.btn-danger {
  background:var(--danger-bg);
  color:var(--danger);
  border-color:var(--danger-border);
}
.btn-danger:hover:not(:disabled) {
  background:rgba(248,113,113,.18);
  transform:translateY(-1px);
}
.btn-small { padding:6px 11px; font-size:12px; border-radius:var(--radius-sm); }

/* ── IFRAME ── */
.frame {
  width:100%; height:calc(100vh - 130px);
  border:0; border-radius:0 0 var(--radius-xl) var(--radius-xl);
  background:var(--navy);
}

/* ── GRID ── */
.grid { display:grid; gap:14px; }
.grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.grid.cols-4 { grid-template-columns:repeat(4,1fr); }
@media(max-width:1200px){ .grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr; } }

/* ── KPIs ── */
.kpi {
  padding:18px; border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);
  transition:all var(--transition);
}
.kpi:hover { border-color:rgba(201,168,76,.2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
.kpi .k { color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.kpi .v { font-size:30px; font-weight:900; letter-spacing:-.02em; color:#fff; line-height:1.1; margin-bottom:4px; }
.kpi .s { color:var(--muted); font-size:11px; line-height:1.4; }

/* ── INPUTS ── */
input, select, textarea {
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  color:var(--text)!important;
  border-radius:var(--radius-md);
  font-family:inherit;
}
input:focus, select:focus, textarea:focus {
  border-color:rgba(201,168,76,.45)!important;
  box-shadow:0 0 0 3px rgba(201,168,76,.07)!important;
  outline:none!important;
}
input::placeholder, textarea::placeholder { color:var(--muted)!important; }
select option { background:#0f2044; color:var(--text); }

/* ── TABLA GLOBAL ── */
table { width:100%; border-collapse:collapse; }
thead th {
  background:linear-gradient(180deg,#162a52,rgba(15,32,68,.98))!important;
  color:var(--gold)!important; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  padding:10px 12px; text-align:left; white-space:nowrap;
  position:sticky; top:0; z-index:2;
  border-bottom:1px solid rgba(201,168,76,.2)!important;
  border-right:1px solid rgba(255,255,255,.04)!important;
}
thead th:last-child { border-right:none!important; }
tbody tr { border-bottom:1px solid rgba(255,255,255,.05)!important; transition:background var(--transition); }
tbody tr:nth-child(even) { background:rgba(255,255,255,.02)!important; }
tbody tr:hover { background:rgba(201,168,76,.04)!important; }
tbody td {
  padding:9px 12px; font-size:12px;
  color:var(--text)!important; vertical-align:middle;
  border-right:1px solid rgba(255,255,255,.03)!important;
  background:transparent!important;
}
tbody td:last-child { border-right:none!important; }

/* ── UTILIDADES ── */
.title { font-size:20px; font-weight:800; color:#fff; margin-bottom:8px; }
.subtitle { font-size:13px; color:var(--muted); line-height:1.5; }
.muted { color:var(--muted); }
.mut { color:var(--muted2); }
.pill {
  display:inline-flex; align-items:center; padding:5px 11px;
  border:1px solid rgba(255,255,255,.1); border-radius:999px;
  background:rgba(255,255,255,.04); color:var(--muted);
  font-size:11px; font-weight:600; white-space:nowrap;
}

/* ── BANNER ── */
.banner {
  background:var(--danger-bg); border:1px solid var(--danger-border);
  color:var(--danger); border-radius:var(--radius-md);
  padding:8px 12px; font-size:12px; margin-bottom:10px;
}

/* ── ESTADOS INCIDENCIAS ── */
.estado-pendiente  { background:var(--warning-bg)!important; color:var(--warning)!important; border-color:var(--warning-border)!important; }
.estado-abierta    { background:var(--info-bg)!important; color:var(--info)!important; border-color:var(--info-border)!important; }
.estado-en-curso   { background:rgba(251,146,60,.12)!important; color:#fb923c!important; border-color:rgba(251,146,60,.25)!important; }
.estado-solucionado{ background:var(--success-bg)!important; color:var(--success)!important; border-color:var(--success-border)!important; }
.estado-cerrada    { background:rgba(148,163,184,.1)!important; color:#94a3b8!important; border-color:rgba(148,163,184,.2)!important; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:rgba(201,168,76,.4); }

/* ── ANIMACIÓN ── */
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation:fadeIn 200ms ease-out; }

/* ── RESPONSIVE SIDEBAR ── */
@media(max-width:1024px){
  .sidebar { position:relative; height:auto; border-right:0; border-bottom:1px solid var(--border); }
}

/* ── CONTENEDORES TABLA ── */
.table-wrap, .table-container {
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius-lg);
  overflow:auto;
  background:rgba(10,22,40,.4);
}