/* =============================================================================
   Consola de seguridad — hoja de estilo del panel principal.

   Reproduce la ventana [Usuarios] del sistema de escritorio: barra de menu,
   barra de herramientas, arbol a la izquierda, matriz de permisos a la
   derecha y barra de estado abajo. Se mantiene la misma densidad y el mismo
   orden de columnas, para que quien viene del programa VB.NET no tenga que
   reaprender donde esta cada cosa.

   La paleta es la de Montagas S.A. E.S.P., tomada del logo y de
   montagas.com.co: azul #00365F, azul noche #001C3F, rojo #BD0A0F.
   Se conserva la densidad del programa de escritorio; lo que cambia
   son los colores.

   No usa ningun framework: son ~600 lineas de CSS plano.
   ============================================================================= */

:root{
  --ventana:#f0f0f0;
  --panel:#ffffff;
  --linea:#b9c6d4;
  --linea-suave:#dce4ec;
  --texto:#1b1b1b;
  --texto-suave:#5b6672;
  --azul:#00365F;          /* Montagas */
  --azul-hondo:#001C3F;    /* Montagas */
  --azul-claro:#E9F1F7;
  --azul-borde:#A9C2D8;
  --barra:#f6f8fa;
  --rojo:#BD0A0F;          /* Montagas */
  --verde:#1f7a4d;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  height:100%;
  overflow:hidden;
  background:var(--ventana);
  color:var(--texto);
  font-family:'Segoe UI',Tahoma,Verdana,Arial,sans-serif;
  font-size:12px;
}

/* ------------------------------------------------------------- estructura */
.ventana{
  height:100vh;
  display:flex;
  flex-direction:column;
}

.cuerpo{
  flex:1 1 auto;
  display:flex;
  min-height:0;
  padding:0 4px 4px;
  gap:4px;
}

/* --------------------------------------------------------------- titulo */
.titulo-ventana{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 8px;
  background:linear-gradient(180deg,#fdfdfe,#eef2f6);
  border-bottom:1px solid var(--linea);
  font-weight:600;
}

.titulo-ventana img{ height:18px; width:auto; }

.titulo-ventana .version{
  color:var(--texto-suave);
  font-weight:400;
}

.titulo-ventana .derecha{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:400;
  color:var(--texto-suave);
}

.insignia-admin{
  background:var(--azul-claro);
  border:1px solid var(--azul-borde);
  color:var(--azul-hondo);
  border-radius:3px;
  padding:1px 6px;
  font-size:11px;
  font-weight:600;
}

/* ------------------------------------------------------------ barra menu */
.menu{
  display:flex;
  background:var(--barra);
  border-bottom:1px solid var(--linea);
  padding:0 4px;
  position:relative;
  z-index:40;
}

.menu__item{ position:relative; }

.menu__boton{
  background:none;
  border:none;
  padding:5px 11px;
  font:inherit;
  color:var(--texto);
  cursor:pointer;
}

.menu__boton:hover,
.menu__item.abierto .menu__boton{
  background:var(--azul-claro);
  outline:1px solid var(--azul-borde);
}

.menu__lista{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:210px;
  background:var(--panel);
  border:1px solid var(--linea);
  box-shadow:0 6px 16px rgba(20,35,55,.18);
  padding:3px 0;
}

.menu__item.abierto .menu__lista{ display:block; }

.menu__lista button{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:6px 14px;
  font:inherit;
  color:var(--texto);
  cursor:pointer;
}

.menu__lista button:hover{ background:var(--azul-claro); }
.menu__lista button:disabled{ color:#9aa4af; cursor:default; background:none; }
.menu__lista hr{ border:none; border-top:1px solid var(--linea-suave); margin:3px 0; }

/* ----------------------------------------------------- barra herramientas */
.herramientas{
  display:flex;
  align-items:center;
  gap:2px;
  padding:4px 6px;
  background:var(--barra);
  border-bottom:1px solid var(--linea);
  flex-wrap:wrap;
}

.herramientas button{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:none;
  border:1px solid transparent;
  border-radius:3px;
  padding:4px 9px;
  font:inherit;
  color:var(--texto);
  cursor:pointer;
}

.herramientas button:hover:not(:disabled){
  background:var(--azul-claro);
  border-color:var(--azul-borde);
}

.herramientas button:disabled{ color:#a3adb8; cursor:default; }

.herramientas .separador{
  width:1px;
  height:20px;
  background:var(--linea);
  margin:0 5px;
}

.herramientas .buscador{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:5px;
}

.herramientas .buscador input{
  border:1px solid var(--linea);
  border-radius:2px;
  padding:3px 6px;
  font:inherit;
  width:190px;
}

/* ------------------------------------------------------------ pestana */
.pestana{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  background:var(--ventana);
  border-bottom:1px solid var(--linea);
  color:var(--texto-suave);
}

/* ---------------------------------------------------------------- arbol */
.arbol{
  width:390px;
  min-width:250px;
  max-width:60%;
  background:var(--panel);
  border:1px solid var(--linea);
  overflow:auto;
  padding:4px 2px;
  resize:horizontal;
}

.nodo{ user-select:none; }

.nodo__fila{
  display:flex;
  align-items:center;
  gap:4px;
  padding:2px 4px;
  cursor:default;
  white-space:nowrap;
}

.nodo__fila:hover{ background:#f2f6fb; }

.nodo__fila.activo{
  background:var(--azul);
  color:#fff;
}

.nodo__fila.activo .nodo__extra{ color:#dbe8fa; }

.nodo__pico{
  width:13px;
  height:13px;
  border:1px solid #9aa9b8;
  background:#fff;
  color:#33414f;
  font-size:10px;
  line-height:11px;
  text-align:center;
  cursor:pointer;
  flex:0 0 auto;
}

.nodo__pico--vacio{
  border:none;
  background:none;
  cursor:default;
}

.nodo__icono{ flex:0 0 auto; }

.nodo__extra{
  color:var(--texto-suave);
  font-size:11px;
}

.nodo__hijos{
  margin-left:15px;
  border-left:1px dotted #c3ced9;
  padding-left:5px;
}

.nodo--inactivo .nodo__texto{ color:#98a3ae; text-decoration:line-through; }
.nodo__fila.activo.nodo--inactivo .nodo__texto{ color:#e6eefb; }

/* -------------------------------------------------------------- permisos */
.permisos{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#dfe7f0;
  border:1px solid var(--linea);
}

.permisos__encabezado{
  display:flex;
  align-items:stretch;
  gap:2px;
  padding:3px;
  background:#dfe7f0;
}

.permisos__titulo{
  flex:1 1 auto;
  background:var(--panel);
  border:1px solid var(--linea);
  text-align:center;
  font-weight:600;
  color:var(--azul-hondo);
  padding:4px 8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.permisos__todo{
  width:96px;
  flex:0 0 96px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:#dfe7f0;
}

.permisos__tabla-caja{
  flex:1 1 auto;
  overflow:auto;
  background:var(--panel);
  margin:0 3px 3px;
  border:1px solid var(--linea);
}

table.rejilla{
  width:100%;
  border-collapse:collapse;
}

table.rejilla thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--barra);
  border-bottom:1px solid var(--linea);
  border-right:1px solid var(--linea-suave);
  padding:5px 8px;
  text-align:left;
  font-weight:600;
}

table.rejilla thead th.centro{ text-align:center; width:96px; }

table.rejilla td{
  border-bottom:1px solid var(--linea-suave);
  border-right:1px solid var(--linea-suave);
  padding:3px 8px;
  white-space:nowrap;
}

table.rejilla td.centro{ text-align:center; }

table.rejilla tbody tr:hover td{ background:#f4f8fd; }

table.rejilla tbody tr.activa td{
  background:var(--azul);
  color:#fff;
}

table.rejilla .grupo td{
  background:#eef3f9;
  font-weight:600;
  color:var(--azul-hondo);
}

.vacio{
  padding:26px;
  text-align:center;
  color:var(--texto-suave);
}

/* ---------------------------------------------------------- barra estado */
.estado{
  display:flex;
  align-items:center;
  gap:16px;
  padding:4px 10px;
  background:var(--barra);
  border-top:1px solid var(--linea);
  color:var(--texto-suave);
}

.estado .derecha{ margin-left:auto; display:flex; align-items:center; gap:14px; }

.estado b{ color:var(--texto); font-weight:600; }

/* ----------------------------------------------------------- formularios */
.velo{
  position:fixed;
  inset:0;
  background:rgba(18,30,45,.42);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:80;
  padding:18px;
}

.velo.oculto{ display:none; }

.dialogo{
  background:var(--panel);
  border:1px solid var(--linea);
  box-shadow:0 18px 44px rgba(15,28,45,.30);
  width:100%;
  max-width:520px;
  max-height:92vh;
  display:flex;
  flex-direction:column;
}

.dialogo--ancho{ max-width:820px; }

.dialogo__barra{
  display:flex;
  align-items:center;
  background:linear-gradient(180deg,#00456F,#00243F);
  color:#fff;
  padding:6px 10px;
  font-weight:600;
}

.dialogo__barra button{
  margin-left:auto;
  background:none;
  border:none;
  color:#fff;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  padding:2px 6px;
}

.dialogo__cuerpo{
  padding:14px;
  overflow:auto;
}

.dialogo__pie{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:10px 14px;
  border-top:1px solid var(--linea-suave);
  background:var(--barra);
}

.reja{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;
}

.campo{ display:flex; flex-direction:column; gap:3px; }
.campo--ancho{ grid-column:1 / -1; }

.campo label{ color:var(--texto-suave); font-size:11px; }

.campo input,
.campo select{
  border:1px solid var(--linea);
  border-radius:2px;
  padding:5px 7px;
  font:inherit;
  background:#fff;
  color:var(--texto);
  width:100%;
}

.campo input:focus,
.campo select:focus{ outline:1px solid var(--azul); outline-offset:-1px; }

.campo .pista{ font-size:11px; color:var(--texto-suave); }

.casilla{
  display:flex;
  align-items:center;
  gap:6px;
  padding-top:16px;
}

.btn{
  border:1px solid var(--linea);
  background:linear-gradient(180deg,#ffffff,#eef2f6);
  border-radius:3px;
  padding:5px 14px;
  font:inherit;
  cursor:pointer;
  color:var(--texto);
}

.btn:hover:not(:disabled){ border-color:var(--azul-borde); background:var(--azul-claro); }
.btn:disabled{ color:#a3adb8; cursor:default; }

.btn--principal{
  background:linear-gradient(180deg,#00456F,#00243F);
  border-color:var(--azul-hondo);
  color:#fff;
}

.btn--principal:hover:not(:disabled){
  background:linear-gradient(180deg,#005486,#00345A);
  border-color:var(--azul-hondo);
}

.btn--peligro{ color:var(--rojo); }

/* -------------------------------------------------------------- mensajes */
.mensaje{
  margin-bottom:12px;
  padding:8px 10px;
  border-left:3px solid var(--azul);
  background:var(--azul-claro);
  color:var(--azul-hondo);
}

.mensaje--error{ border-left-color:var(--rojo); background:#fdeeee; color:#7d1f1f; }

.avisos{
  position:fixed;
  right:14px;
  bottom:34px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:90;
}

.aviso{
  background:#20304a;
  color:#fff;
  padding:9px 14px;
  border-radius:3px;
  box-shadow:0 8px 20px rgba(15,28,45,.30);
  max-width:360px;
}

.aviso--error{ background:#8d2626; }
.aviso--ok{ background:#1f6b45; }

/* --------------------------------------------------------------- tablas */
.tabla-simple{ width:100%; border-collapse:collapse; }

.tabla-simple th,
.tabla-simple td{
  border-bottom:1px solid var(--linea-suave);
  padding:5px 8px;
  text-align:left;
}

.tabla-simple th{ background:var(--barra); font-weight:600; }
.tabla-simple tbody tr:hover td{ background:#f4f8fd; }

@media (max-width:860px){
  .cuerpo{ flex-direction:column; }
  .arbol{ width:auto; max-width:none; height:38%; resize:none; }
  .reja{ grid-template-columns:1fr; }
}


/* -------------------------------------------------- accion principal ----
   El rojo de Montagas se reserva para el boton que confirma: Guardar,
   Aceptar, Ingresar. El azul queda para la navegacion y la seleccion, que
   es lo que ocupa casi toda la pantalla y no debe competir. */
.dialogo__pie .btn--principal{
  background:#BD0A0F;
  border-color:#780D0C;
  color:#fff;
}

.dialogo__pie .btn--principal:hover:not(:disabled){
  background:#780D0C;
  border-color:#780D0C;
}


/* ------------------------------------------------------ marca Montagas ----
   El logo va sobre una placa blanca redondeada: el archivo tiene fondo
   blanco y sin la placa se recortaria contra la barra de titulo. */
.logo-encabezado{
  height:26px;
  width:auto;
  background:#fff;
  border-radius:4px;
  padding:3px 7px;
  flex:0 0 auto;
}

.pie-marca{
  flex:0 0 auto;
  padding:5px 10px;
  text-align:center;
  font-size:10.5px;
  letter-spacing:.3px;
  color:#c9d6e2;
  background:var(--azul-hondo);
}

/* ------------------------------------------- programas y opciones ----
   Las dos listas de la ventana de catalogos, una al lado de la otra:
   programas a la izquierda y opciones del programa elegido a la derecha.
   En pantalla angosta se apilan. */
.catalogo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.catalogo__lado{
  border:1px solid var(--linea);
  background:var(--panel);
  display:flex;
  flex-direction:column;
  min-height:280px;
}

.catalogo__barra{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 8px;
  background:var(--barra);
  border-bottom:1px solid var(--linea);
}

.catalogo__acciones{
  margin-left:auto;
  display:flex;
  gap:4px;
}

.catalogo__acciones .btn{ padding:3px 9px; }

.catalogo__lista{
  flex:1 1 auto;
  overflow:auto;
  max-height:340px;
}

.catalogo__fila{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border-bottom:1px solid var(--linea-suave);
  cursor:default;
  white-space:nowrap;
}

.catalogo__fila:hover{ background:#f4f8fd; }

.catalogo__fila.activa{
  background:var(--azul);
  color:#fff;
}

.catalogo__fila.activa .catalogo__codigo,
.catalogo__fila.activa .catalogo__extra{ color:#dbe8fa; }

.catalogo__codigo{
  flex:0 0 46px;
  color:var(--texto-suave);
  font-variant-numeric:tabular-nums;
}

.catalogo__texto{
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
}

.catalogo__extra{
  flex:0 0 auto;
  color:var(--texto-suave);
  font-size:11px;
}

@media (max-width:760px){
  .catalogo{ grid-template-columns:1fr; }
}