/* Marca Luis Girón Technology: navy + teal + dorado. */
:root{
  --bg:#020F1E; --panel:#0D2B47; --panel-alt:#14465A; --ink:#FBFBFC; --ink-soft:#9CA3AA;
  --border:#1E3A52; --accent:#309DB7; --accent-soft:rgba(48,157,183,0.16); --accent-ink:#06202F;
  --gold:#E0A03B; --danger:#F2707F; --success:#4ADE91;
  --warn:var(--gold); --warn-soft:rgba(224,160,59,0.14);
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; font-size:14px;}
h1,h2,h3{font-family:'Inter',system-ui,sans-serif; font-weight:700; margin:0;}
input,select,textarea,button{font-family:inherit; font-size:14px;}
input,select,textarea{background:#0A2338; color:var(--ink); border:1px solid var(--border);}
input::placeholder, textarea::placeholder{color:var(--ink-soft);}

#login{max-width:360px; width:92%; margin:90px auto; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:28px; text-align:center; box-sizing:border-box;}
#login h1{font-size:1.3rem; margin-bottom:6px;}
#login p{color:var(--ink-soft); font-size:0.85rem; margin:0 0 18px;}
#login input{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; margin-bottom:10px;}
#login button{width:100%; padding:10px; background:var(--accent); color:var(--accent-ink); border:none; border-radius:8px; font-weight:700; cursor:pointer;}
#loginError{color:var(--danger); font-size:0.8rem; min-height:18px; margin-top:6px;}

#app{display:none;}
header.topbar{background:var(--panel); border-bottom:1px solid var(--border); padding:14px 24px; display:flex; justify-content:space-between; align-items:center;}
header.topbar .brand{font-weight:700; font-size:1.1rem; letter-spacing:0.01em;}
header.topbar .brand .punto{color:var(--gold);}
.tabs{display:flex; gap:6px; padding:16px 24px 0; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tab-pill{flex:0 0 auto;}
.tab-pill{padding:8px 16px; border-radius:8px 8px 0 0; background:var(--panel); border:1px solid var(--border); border-bottom:none; cursor:pointer; color:var(--ink-soft); font-weight:600; font-size:0.85rem;}
.tab-pill.activa{background:var(--accent-soft); color:var(--accent);}
main{padding:0 24px 40px;}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:0 10px 10px 10px; padding:22px;}
.card{background:var(--panel-alt); border:1px solid var(--border); border-radius:10px; padding:14px;}

.fila-top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
select.empresa-sel{padding:9px 12px; border:1px solid var(--border); border-radius:8px; min-width:220px;}
.btn{background:var(--accent); color:var(--accent-ink); border:none; border-radius:8px; padding:9px 16px; font-weight:700; cursor:pointer; font-size:0.85rem;}
.btn.secundario{background:var(--panel-alt); color:var(--ink); border:1px solid var(--border); font-weight:600;}
.btn:disabled{opacity:0.55; cursor:default;}

table{width:100%; border-collapse:collapse; font-size:0.86rem;}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border);}
th{font-family:'JetBrains Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft);}
tbody tr{cursor:pointer;}
tbody tr:hover{background:var(--accent-soft);}
.vacio{color:var(--ink-soft); font-size:0.85rem; padding:16px 0;}
.chip{display:inline-block; font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--warn-soft); color:var(--gold);}

.modal{display:none; position:fixed; inset:0; background:rgba(2,8,16,0.6); align-items:center; justify-content:center; z-index:50;}
.modal.activa{display:flex;}
.modal .card{background:var(--panel); border-radius:14px; padding:24px; width:420px; max-width:92vw; max-height:88vh; overflow-y:auto;}
.modal h2{font-size:1.1rem; margin-bottom:14px;}
.campo{margin-bottom:12px;}
.campo label{display:block; font-size:0.78rem; font-weight:600; color:var(--ink-soft); margin-bottom:5px;}
.campo input, .campo select{width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:8px;}
.fila2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.modal-acciones{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}
.msg{font-size:0.8rem; min-height:18px; margin-top:6px;}
.msg.error{color:var(--danger);}
.msg.ok{color:var(--success);}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
.grid-4{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px;}

/* Tarjetas de selección de plantilla de consulta */
.tipo-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:14px;}
.tipo-card{border:1px solid var(--border); background:var(--panel-alt); border-radius:10px; padding:14px; cursor:pointer; text-align:left;}
.tipo-card:hover{border-color:var(--accent);}
.tipo-card.activa{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
.tipo-card .nombre{font-weight:700; font-size:0.88rem; margin-bottom:3px;}
.tipo-card .corta{font-size:0.75rem; color:var(--ink-soft); line-height:1.35;}
.tipo-card.activa .nombre{color:var(--accent);}

label.check-inline{display:flex; align-items:center; gap:8px; padding:7px 4px; font-size:0.85rem; cursor:pointer;}
label.check-inline input{width:auto;}

.badge-rol{display:inline-block; font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent);}

@media (max-width:760px){
  header.topbar{padding:12px 16px; flex-wrap:wrap; gap:8px;}
  .tabs{padding:12px 16px 0;}
  main{padding:0 16px 40px;}
  .fila-top{flex-direction:column; align-items:stretch;}
  .fila2{grid-template-columns:1fr;}
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
  select.empresa-sel{width:100%;}
  table{display:block; overflow-x:auto; white-space:nowrap;}
  .modal .card{width:94vw; padding:18px;}
}