/* Nexora Documental — portal de cliente (municipalidades/empresas).
   Paleta propia, distinta de Nexora Legal: azules "institucional/gobierno"
   en vez del forest/brass de despacho legal, para que se sienta como un
   producto propio de cara al cliente final. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#0E1B2C;
  --azul:#123A6B;
  --azul-2:#0B2646;
  --azul-soft:#3E6FA6;
  --acento:#1B8A6B;
  --acento-light:#37B78F;
  --paper:#F4F6F9;
  --paper-2:#FFFFFF;
  --line:#D9E0EA;
  --ink-soft:#5B6B80;
  --red:#B3392C;
  --ok:#1B8A6B;
  --radius:10px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand-font{font-family:'Manrope',sans-serif;}
button{font-family:inherit;}

/* ---------- LOGIN / MFA ---------- */
.auth-screen{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--azul);
  background-image:radial-gradient(circle at 85% -10%, rgba(55,183,143,.18), transparent 55%);
  padding:20px;
}
.auth-card{
  background:var(--paper-2);
  border-radius:var(--radius);
  padding:40px 36px;
  width:100%; max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.auth-brand{text-align:center; margin-bottom:24px;}
.auth-logo{font-size:34px; margin-bottom:8px;}
.auth-brand h1{margin:0; font-size:23px; color:var(--azul); font-weight:800;}
.auth-brand h1 span{color:var(--acento);}
.auth-brand p{margin:6px 0 0; font-size:13px; color:var(--ink-soft);}
.auth-card label{display:block; font-size:12px; font-weight:600; color:var(--azul-2); margin:14px 0 4px;}
.auth-card input{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:7px;
  font-size:14px; background:var(--paper);
}
.auth-card input:focus{outline:2px solid var(--acento-light); border-color:var(--acento);}
.auth-card input.codigo-mfa{
  text-align:center; font-size:24px; letter-spacing:8px; font-weight:700;
}
.btn-primary{
  width:100%; margin-top:20px; padding:11px; border:none; border-radius:7px;
  background:var(--azul); color:#fff; font-size:14px; font-weight:600; cursor:pointer;
  transition:background .15s;
}
.btn-primary:hover{background:var(--azul-2);}
.btn-primary:disabled{opacity:.6; cursor:default;}
.auth-error{
  margin-top:12px; padding:8px 10px; background:#fbeae7; color:var(--red);
  border-radius:6px; font-size:12.5px;
}
.auth-info{
  margin-top:12px; padding:10px 12px; background:#eaf3f0; color:var(--acento);
  border-radius:6px; font-size:12.5px; line-height:1.5;
}
.mfa-qr{display:flex; justify-content:center; margin:16px 0;}
.mfa-qr img{width:200px; height:200px; border:1px solid var(--line); border-radius:8px; padding:8px; background:#fff;}
.mfa-secret{
  text-align:center; font-family:monospace; font-size:13px; letter-spacing:1px;
  color:var(--ink-soft); background:var(--paper); padding:8px; border-radius:6px; margin-top:8px;
  word-break:break-all;
}
.auth-link{
  display:block; text-align:center; margin-top:16px; font-size:12.5px;
  color:var(--azul-soft); cursor:pointer; text-decoration:underline;
}

/* Aviso de retirar la tarjeta, en la pantalla de cierre de sesión.
   Va en ámbar y no en verde a propósito: no es una confirmación de que
   todo salió bien, es una instrucción pendiente. */
.auth-aviso-tarjeta{
  margin-top:18px; padding:14px 16px; text-align:left;
  background:#FFF8E6; border:1px solid #F0D48A; border-left:4px solid #E0A800;
  border-radius:8px;
}
.auth-aviso-titulo{
  font-weight:700; font-size:14px; color:#7A5A00; margin-bottom:6px;
}
.auth-aviso-tarjeta p{
  font-size:12.5px; line-height:1.55; color:#6B5520; margin:0 0 8px;
}
.auth-aviso-tarjeta p:last-child{ margin-bottom:0; }
.auth-aviso-nota{ font-style:italic; opacity:.85; }

/* Selector de método de ingreso: contraseña o tarjeta de firma digital.
   Son dos caminos equivalentes, así que se presentan con el mismo peso
   visual -- nada de "avanzado" ni de esconder uno detrás de un enlace. */
.auth-metodos{
  display:flex; gap:6px; margin:18px 0 4px;
  background:var(--paper); padding:4px; border-radius:8px;
  border:1px solid var(--line);
}
.auth-metodo{
  flex:1; padding:9px 8px; border:0; border-radius:6px;
  background:transparent; color:var(--ink-soft);
  font-size:13px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:background .15s, color .15s;
}
.auth-metodo:hover{ color:var(--ink); }
.auth-metodo.activo{
  background:#fff; color:var(--azul-2);
  box-shadow:0 1px 3px rgba(16,32,56,.14);
}
/* El foco tiene que verse: a este control se llega con el teclado. */
.auth-metodo:focus-visible{ outline:2px solid var(--azul-soft); outline-offset:1px; }

/* ---------- SHELL ---------- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:250px; flex-shrink:0;
  background:var(--azul-2); color:#EAF0F7;
  display:flex; flex-direction:column;
  padding:20px 0;
}
.sidebar-brand{
  font-family:'Manrope',sans-serif; font-size:18px; font-weight:800;
  padding:0 20px 20px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:14px;
}
.sidebar-brand span{color:var(--acento-light);}
.sidebar-tenant{padding:0 20px 14px; font-size:12px; color:#B7C6DA;}
.sidebar-footer{padding:14px 20px 0; border-top:1px solid rgba(255,255,255,.1); margin-top:auto;}
.user-info{font-size:12.5px; color:#B7C6DA; margin-bottom:10px;}
.user-info b{display:block; color:#fff; font-size:13.5px;}
.btn-logout{
  width:100%; padding:8px; border-radius:6px; border:1px solid rgba(255,255,255,.2);
  background:transparent; color:#B7C6DA; font-size:12px; cursor:pointer;
}
.btn-logout:hover{background:rgba(255,255,255,.08); color:#fff;}

.content-area{flex:1; overflow-y:auto; padding:28px 32px; max-width:100%;}

.module-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px;}
.module-header h2{margin:0; font-size:22px; color:var(--azul);}
.module-actions{display:flex; gap:10px; flex-wrap:wrap;}

.btn{
  padding:9px 16px; border-radius:7px; border:1px solid var(--azul);
  background:var(--azul); color:#fff; font-size:13px; font-weight:600; cursor:pointer;
}
.btn:hover{background:var(--azul-2);}
.btn.secondary{background:transparent; color:var(--azul);}
.btn.secondary:hover{background:rgba(18,58,107,.08);}
.btn.danger{background:transparent; border-color:var(--red); color:var(--red);}
.btn.danger:hover{background:#fbeae7;}

.search-input{
  padding:9px 12px; border:1px solid var(--line); border-radius:7px;
  font-size:13.5px; min-width:260px; background:#fff;
}

table.data-table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06);}
table.data-table th{
  background:var(--azul); color:#fff; text-align:left; padding:10px 14px; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em;
}
table.data-table td{padding:10px 14px; font-size:13.5px; border-bottom:1px solid var(--line);}
table.data-table tr:last-child td{border-bottom:none;}
table.data-table tr:hover td{background:var(--paper);}

.modal-overlay{
  position:fixed; inset:0; background:rgba(14,27,44,.55); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  background:#fff; border-radius:var(--radius); width:100%; max-width:480px;
  max-height:90vh; overflow-y:auto; padding:24px;
}
.modal-box.modal-ancho{max-width:640px;}
.modal-box h3{margin:0 0 18px; color:var(--azul);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.form-grid .full{grid-column:1/-1;}
.form-grid label{display:block; font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:4px;}
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:6px; font-size:13.5px;
  font-family:inherit;
}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}

.empty-state{text-align:center; padding:50px 0; color:var(--ink-soft); font-style:italic;}

.toast{
  position:fixed; bottom:24px; right:24px; z-index:2000;
  background:var(--azul-2); color:#fff; padding:12px 18px; border-radius:8px;
  font-size:13.5px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:translateY(0);}
.toast.error{background:var(--red);}

/* ---------- Gestor documental ---------- */
.gd-layout{display:grid; grid-template-columns:270px 1fr; gap:18px; align-items:start;}
.gd-arbol{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px; max-height:70vh; overflow-y:auto;
}
.gd-arbol-lista{list-style:none; margin:0; padding-left:14px;}
.gd-arbol-lista:first-child{padding-left:0;}
.gd-nodo{
  display:flex; align-items:center; gap:6px; padding:7px 9px; border-radius:6px;
  cursor:pointer; font-size:13.5px; color:var(--ink);
}
.gd-nodo:hover{background:var(--paper);}
.gd-nodo.active{background:var(--azul); color:#fff;}
.gd-panel{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; min-height:200px;
}
.gd-breadcrumb{font-size:12.5px; color:var(--ink-soft); margin-bottom:12px;}
.gd-version{
  display:inline-block; font-size:10.5px; font-weight:600; color:var(--acento);
  border:1px solid var(--acento-light); border-radius:10px; padding:0 7px; margin-left:6px;
}
.gd-detalle-meta{
  display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; margin-bottom:14px;
  font-size:13px; color:var(--ink-soft);
}
.gd-detalle-acciones{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0;}
.gd-transcripcion{
  background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:12px; font-size:13px; white-space:pre-wrap; max-height:260px; overflow-y:auto;
  margin-bottom:14px;
}
.gd-metadatos-fila{display:flex; gap:8px; margin-bottom:8px; align-items:center;}
.gd-metadatos-fila input{flex:1;}
.gd-metadatos-fila button{flex-shrink:0; padding:6px 10px; border-radius:6px; border:1px solid var(--line); background:#fff; cursor:pointer;}

/* ---------- Navegación lateral ---------- */
.sidebar-nav{display:flex; flex-direction:column; gap:2px; padding:0 12px;}
.nav-item{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:9px 12px; border:none; border-radius:7px; background:transparent;
  color:#B7C6DA; font-size:13.5px; font-weight:500; text-align:left; cursor:pointer;
  transition:background .12s, color .12s;
}
.nav-item:hover{background:rgba(255,255,255,.08); color:#fff;}
.nav-item.active{background:var(--azul); color:#fff; font-weight:600;}

/* ---------- Administración (usuarios / papelera / auditoría) ---------- */
.nx-nota{
  background:#EAF1F8; border-left:3px solid var(--azul-soft); border-radius:6px;
  padding:10px 14px; font-size:12.5px; color:var(--ink-soft); line-height:1.55;
  margin:0 0 16px;
}
.nx-sub{font-size:11.5px; color:var(--ink-soft); margin-top:3px;}
.nx-chip{
  display:inline-block; font-size:10.5px; font-weight:600; border-radius:10px;
  padding:1px 8px; background:var(--paper); border:1px solid var(--line); color:var(--ink-soft);
}
.nx-chip.rol-admin_tenant{background:#E7F1FB; border-color:var(--azul-soft); color:var(--azul);}
.nx-chip.rol-editor{background:#E7F5F0; border-color:var(--acento-light); color:var(--acento);}
.nx-acciones{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.nx-acciones .btn{padding:5px 10px; font-size:12px;}
tr.fila-inactiva td{opacity:.55;}
.nx-celda-motivo{max-width:320px; font-size:12.5px; color:var(--ink-soft); word-break:break-word;}

.nx-filtros{
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:16px;
}
.nx-filtros label{display:block; font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:4px;}
.nx-filtros input, .nx-filtros select{
  padding:8px 10px; border:1px solid var(--line); border-radius:6px;
  font-size:13px; font-family:inherit; background:#fff; min-width:170px;
}
.nx-filtros-acciones{display:flex; gap:8px; margin-left:auto;}

.nx-paginacion{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:16px; font-size:12.5px; color:var(--ink-soft);
}
.nx-paginacion .btn:disabled{opacity:.45; cursor:default;}

/* ---------- Vigencia documental ---------- */
.nav-item{position:relative;}
.nav-badge{
  margin-left:auto; background:var(--red); color:#fff; font-size:10.5px; font-weight:700;
  border-radius:10px; padding:1px 7px; min-width:20px; text-align:center;
}
.nav-item.active .nav-badge{background:#fff; color:var(--red);}

/* Semáforo. Los tres estados tienen color Y texto: el color solo no
   alcanza para quien no distingue rojo de verde. */
.nx-chip.est-vencido{background:#fbeae7; border-color:var(--red); color:var(--red);}
.nx-chip.est-por_vencer{background:#FDF3E2; border-color:#B8860B; color:#8A6508;}
.nx-chip.est-vigente{background:#E7F5F0; border-color:var(--acento-light); color:var(--acento);}
.nx-chip.est-reemplazado{background:var(--paper); border-color:var(--line); color:var(--ink-soft);}

.gd-vigencia{
  display:flex; align-items:flex-start; gap:14px;
  border:1px solid var(--line); border-left:4px solid var(--azul-soft);
  background:var(--paper); border-radius:8px; padding:10px 14px; margin:0 0 14px;
  font-size:13px; color:var(--ink-soft); line-height:1.6;
}
.gd-vigencia b{color:var(--ink);}
.gd-vigencia-estado{font-weight:700; white-space:nowrap; color:var(--azul);}
.gd-vigencia.est-vencido{border-left-color:var(--red); background:#fdf1ef;}
.gd-vigencia.est-vencido .gd-vigencia-estado{color:var(--red);}
.gd-vigencia.est-por_vencer{border-left-color:#B8860B; background:#FDF8EE;}
.gd-vigencia.est-por_vencer .gd-vigencia-estado{color:#8A6508;}
.gd-vigencia.est-vigente{border-left-color:var(--acento-light);}
.gd-vigencia.est-vigente .gd-vigencia-estado{color:var(--acento);}

.nx-seccion{
  margin-top:10px; padding-top:12px; border-top:1px solid var(--line);
  font-family:'Manrope',sans-serif; font-size:13px; font-weight:700; color:var(--azul);
}
.nx-plantilla{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:10px;
  font-size:13.5px;
}
.gd-vigencia code, .nx-sub code{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:0 4px; font-size:11.5px;
}

@media (max-width: 820px){
  .gd-layout{grid-template-columns:1fr;}
  .gd-arbol{max-height:220px;}
  .nx-filtros-acciones{margin-left:0;}
  .gd-vigencia{flex-direction:column; gap:4px;}
}

/* ---------- CUADRO DE CLASIFICACIÓN ----------
   La sangría comunica la jerarquía; el código de referencia va en
   monoespaciada porque es un identificador que la gente copia y compara,
   no prosa. */
.clas-arbol{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 14px;}
.clas-fila{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:7px 6px; border-radius:5px;
}
.clas-fila:hover{background:var(--paper);}
.clas-icono{font-size:14px;}
.clas-codigo{
  font-family:ui-monospace,Menlo,monospace; font-size:12px;
  color:var(--azul-soft); white-space:nowrap;
}
.clas-nombre{font-weight:500; color:var(--ink);}
.clas-nivel{font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em;}
.clas-desc{font-size:12.5px; color:var(--ink-soft); padding:0 6px 6px;}
.clas-marca{
  font-size:11.5px; padding:2px 7px; border-radius:10px;
  background:var(--paper); color:var(--ink-soft); white-space:nowrap;
}
.clas-marca.ok{background:#EAF3F0; color:var(--acento);}
.clas-marca.falta{background:#FBF0DC; color:#9A6510;}
.clas-acciones{margin-left:auto; display:flex; gap:3px; opacity:0; transition:opacity .12s;}
.clas-fila:hover .clas-acciones, .clas-acciones:focus-within{opacity:1;}
.clas-btn{
  border:1px solid var(--line); background:#fff; color:var(--ink-soft);
  width:24px; height:24px; border-radius:4px; cursor:pointer;
  font-size:13px; line-height:1; font-family:inherit;
}
.clas-btn:hover{border-color:var(--azul-soft); color:var(--azul-2);}
.clas-btn.peligro:hover{border-color:var(--red); color:var(--red);}
.clas-btn:focus-visible{outline:2px solid var(--azul-soft); outline-offset:1px; opacity:1;}