/* Estilo ATREUS: limpio, profesional y accesible */
:root{
  --atreus:#0c2a5f;
  --bg:#071427;
  --fg:#f3f7fb;
  --muted:#a7b3c0;
  --card:#0c1e36;
  --accent:#2ea44f;
  --accent-2:#1f6feb;
  --danger:#d73a49;
  --warning:#d29922;
  --chip:#17324f;
  --border:#1e3550;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
  background:linear-gradient(180deg,#071427 0%,#0c1f3d 100%);
  color:var(--fg);
}

.topbar{
  position:sticky; top:0; z-index:10;
  background:var(--atreus);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:.55rem .9rem;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:.7rem}
.brand .logo{width:40px; height:40px; object-fit:contain; border-radius:.3rem; background:rgba(255,255,255,.06)}
.titles h1{font-size:1.05rem; margin:0; font-weight:700; letter-spacing:.2px}
.subtitle{font-size:.85rem; color:#dbe7ff}

.toolbar{display:flex; align-items:center; gap:.6rem}
.mode-label{font-size:.9rem; color:#e6f0ff; opacity:.9}

.container{padding:1rem; max-width:1200px; margin:0 auto}

.tabs{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem}
.tab{
  background:var(--chip); color:var(--fg); border:1px solid var(--border);
  padding:.45rem .75rem; border-radius:.6rem; cursor:pointer;
}
.tab.active{outline:2px solid var(--accent-2)}

.tabpanel{display:none}
.tabpanel.active{display:block}

.filters{display:grid; grid-template-columns: repeat(8, 1fr); gap:.6rem; background:var(--card); padding:.8rem; border:1px solid var(--border); border-radius:.6rem}
.filters .field{display:flex; flex-direction:column; gap:.25rem}
.filters .actions{align-self:end; display:flex; gap:.5rem}

.form .grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:.8rem}
.field{display:flex; flex-direction:column; gap:.35rem}
.field span.help{color:var(--muted); font-size:.85rem}
.field input, .field select, .field textarea{
  background:#0a1b2c; color:var(--fg); border:1px solid var(--border);
  padding:.55rem .6rem; border-radius:.5rem; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent-2)}
.field textarea{min-height:80px; resize:vertical}
.span2{grid-column: span 2}
.row{display:flex; gap:.5rem; align-items:center}
.grow{flex:1}

.sep h3{margin:.8rem 0 .2rem 0}

.actions{display:flex; gap:.6rem; margin-top:.8rem}
button{
  border:none; border-radius:.6rem; padding:.55rem .8rem; color:var(--fg); cursor:pointer;
  background:var(--chip); border:1px solid var(--border);
}
button.primary{background:var(--accent); border-color:transparent; color:#08130a; font-weight:650}
button.ghost{background:transparent; border-color:var(--border)}
button.danger{background:var(--danger)}

.list-toolbar{display:flex; gap:.6rem; align-items:center; margin:.6rem 0}
.import-label{position:relative; overflow:hidden}
.import-label input{position:absolute; inset:0; opacity:0; cursor:pointer}
.muted{color:var(--muted)}

.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:.6rem; overflow:hidden; display:flex; flex-direction:column;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.thumb{aspect-ratio: 4/3; background:#061222; display:flex; align-items:center; justify-content:center; font-size:2.2rem}
.thumb img{width:100%; height:100%; object-fit:cover}
.card .body{padding:.75rem; display:flex; flex-direction:column; gap:.5rem}
.row{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.badge{background:#052038; border:1px solid var(--border); padding:.15rem .45rem; border-radius:999px; font-size:.8rem}
.badge.ok{background:#062d1a; border-color:#0a6d34}
.badge.warn{background:#2a1f00; border-color:#6e5400}
.badge.closed{background:#2b0b0b; border-color:#7d1e1e}
.badge.nfo{background:#0a1b2c; border-color:#22456e}

.meta{color:var(--muted); font-size:.9rem}
.card .actions{padding:.75rem; border-top:1px solid var(--border); margin-top:auto; display:flex; gap:.5rem; flex-wrap:wrap}

.footer{padding:1rem; color:var(--muted); text-align:center}

dialog{border:none; border-radius:.8rem; padding:0; background:var(--card); color:var(--fg); border:1px solid var(--border); width:min(900px, 96vw)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.dlg-body{padding:1rem}
.dlg-actions{display:flex; justify-content:flex-end; gap:.5rem; padding:0 1rem 1rem 1rem}

@media (max-width: 1000px){
  .cards{grid-template-columns: repeat(2, 1fr)}
  .filters{grid-template-columns: repeat(4, 1fr)}
}
@media (max-width: 640px){
  .cards{grid-template-columns: 1fr}
  .filters{grid-template-columns: repeat(2, 1fr)}
  .form .grid{grid-template-columns: 1fr}
}

/* ATREUS overrides */
.topbar{height:50px !important; padding:0 12px !important; background:#3b435f !important; border-bottom:0 !important;}
.brand .logo{height:48px !important; width:auto !important; background:transparent !important;}
.titles h1{font-size:18px !important; color:#fff !important; margin:0 !important;}

/* Logo responsive */
.topbar .logo{height:48px;width:auto;display:block;object-fit:contain}
@media(max-width:600px){.topbar .logo{height:40px}}