/* modern.css - cargar DESPUES de css/style.css
   Look de la plantilla de Blazor (barra lateral con degradado + fila superior),
   hecho con CSS sobre Bootstrap 3 para no romper las paginas existentes. */

:root {
  /* Header y footer: gris claro que resalta sobre el fondo blanco */
  --gris-claro: #e3e6e9;
  --gris-borde: #c3c8cd;
  --gris-texto: #3b4148;
  --gris-enlace: #00508a;
  /* Menu lateral: gris grafito */
  --menu-fondo: linear-gradient(180deg, #4a5159 0%, #373d43 100%);
  --menu-sup: rgba(0, 0, 0, 0.22);
  --menu-texto: #dfe3e6;
  /* Para un menu en gris claro: --menu-fondo: #e3e6e9; --menu-texto: #3b4148;
     y cambiar los rgba(255,255,255,...) de hover/activo por rgba(0,0,0,0.08) / rgba(0,0,0,0.14). */
}

html, body.site-body {
  font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #212529;
  font-size: 15px;
  line-height: 1.5;
}

.site-body a { color: #0071c1; }
.site-body a:hover { color: #005a9b; }
.site-body :focus-visible { outline: 2px solid #1b6ec2; outline-offset: 2px; }

.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 14px; z-index: 2000; }
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Estructura ---------- */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

@media (min-width: 768px) {
  .page { flex-direction: row; }
  .sidebar { width: 250px; height: 100vh; height: 100dvh; position: sticky; top: 0; flex-shrink: 0; overflow: hidden; }
}

/* ---------- Barra lateral ---------- */
.sidebar {
  display: flex; flex-direction: column;
  background: var(--menu-fondo);
}
.sidebar-top {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 3.5rem; padding: 0 1rem;
  background-color: var(--menu-sup);
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-body .sidebar-brand, .site-body .sidebar-brand:hover { color: #fff; }
.brand-name { font-size: 1.1rem; font-weight: 500; }

.sidebar .navbar-toggle {
  display: block; margin: 0; float: none;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
  border-radius: 4px; padding: 8px 10px;
}
.sidebar .navbar-toggle .icon-bar { background: #fff; }
@media (min-width: 768px) { .sidebar .navbar-toggle { display: none; } }

/* Menu con scroll: min-height:0 permite que el contenedor se encoja y scrollee */
.sidebar-nav {
  padding: 0.5rem 0.75rem; border: 0; box-shadow: none;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
@media (max-width: 767px) { .sidebar-nav { max-height: 70vh; } }
/* En escritorio el menu siempre esta visible (Bootstrap solo lo oculta en movil) */
@media (min-width: 768px) { .sidebar-nav.collapse { display: block; height: auto !important; } }

.sidebar .navbar-nav { float: none; margin: 0; padding: 0; display: block; list-style: none; }
.sidebar .navbar-nav > li { float: none; display: block; padding: 0; margin: 0 0 2px; }

.sidebar .navbar-nav li > a,
.sidebar .navbar-nav li > span {
  display: flex; align-items: center; gap: 0.75rem;
  height: 3rem; padding: 0 1rem;
  color: var(--menu-texto); border-radius: 4px; text-decoration: none; background: transparent;
}
.sidebar .navbar-nav li > a::before,
.sidebar .navbar-nav li > span::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: .6; flex: none;
}
.sidebar .navbar-nav li > a:hover,
.sidebar .navbar-nav li > a:focus,
.sidebar .navbar-nav li > span:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.sidebar .navbar-nav li.active > a,
.sidebar .navbar-nav li.active > span,
.sidebar .navbar-nav li > a.selected { background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: inset 3px 0 0 #fff; }
.sidebar .navbar-nav li.has-sub > a,
.sidebar .navbar-nav li.has-sub > span { cursor: pointer; }
.sidebar .navbar-nav .caret { margin-left: auto; transition: transform .15s; }
.sidebar .navbar-nav li.open > a .caret,
.sidebar .navbar-nav li.open > span .caret { transform: rotate(180deg); }

/* Padres con enlace propio (ej. Servicios): el texto navega y la flecha abre/cierra el submenu */
.sidebar .navbar-nav li { position: relative; }
.sidebar .navbar-nav li.has-link > a { padding-right: 48px; }
.sidebar .navbar-nav .sub-toggle {
  position: absolute; top: 0; right: 0; width: 44px; height: 3rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 0 4px 4px 0;
  color: var(--menu-texto); cursor: pointer;
}
.sidebar .navbar-nav .sub-toggle:hover,
.sidebar .navbar-nav .sub-toggle:focus { background: rgba(255, 255, 255, 0.14); color: #fff; }
.sidebar .navbar-nav .sub-toggle .caret { margin: 0; transition: transform .15s; }
.sidebar .navbar-nav li.open > .sub-toggle .caret { transform: rotate(180deg); }
.sidebar .navbar-nav li > ul > li > .sub-toggle { height: 2.5rem; }

/* Submenus: se despliegan hacia abajo dentro de la barra.
   Los !important vencen los estilos en linea que asp:Menu agrega por JavaScript. */
.sidebar .navbar-nav li > ul {
  position: static !important; float: none !important;
  top: auto !important; left: auto !important;
  width: auto !important; min-width: 0 !important;
  visibility: visible !important; display: none !important;
  margin: 2px 0 4px; padding: 0 0 0 1rem; list-style: none;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
.sidebar .navbar-nav li.open > ul { display: block !important; }
.sidebar .navbar-nav li > ul > li { float: none; display: block; margin: 0 0 2px; }
.sidebar .navbar-nav li > ul > li > a,
.sidebar .navbar-nav li > ul > li > span { height: 2.5rem; font-size: 14px; }


/* ---------- Fila superior ---------- */
.top-row {
  background-color: var(--gris-claro); border-bottom: 1px solid var(--gris-borde);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  min-height: 3.5rem; padding: 0.5rem 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
}
.top-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 1.5rem; margin-left: auto; }
.top-links a { white-space: nowrap; text-decoration: none; color: var(--gris-enlace); }
.top-links a:hover, .top-links a:focus { text-decoration: underline; }
.top-user { color: var(--gris-texto); white-space: nowrap; }
.top-user span { font-size: 14px; }
.top-social img { height: 20px; width: auto; vertical-align: middle; }
#google_translate_element { min-height: 24px; }
.top-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* Boton para ocultar/mostrar el menu lateral (solo escritorio) */
.menu-toggle-desktop {
  display: none; background: #fff; border: 1px solid var(--gris-borde); border-radius: 4px;
  padding: 9px 9px; cursor: pointer; line-height: 0;
}
.menu-toggle-desktop:hover { background: #f4f5f6; }
.menu-toggle-desktop .bar { display: block; width: 20px; height: 2px; background: var(--gris-texto); border-radius: 1px; }
.menu-toggle-desktop .bar + .bar { margin-top: 4px; }
@media (min-width: 768px) {
  .menu-toggle-desktop { display: inline-block; }
  html.menu-oculto .sidebar { display: none; }
}

/* Filtros colapsables: ocultos hasta que el usuario los abre */
.filtros-toggle,
.btn-filtros {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 7px 14px;
  background: #fff; border: 1px solid var(--gris-borde); border-radius: 4px;
  color: var(--gris-texto); font-weight: 500; cursor: pointer;
}
.filtros-toggle:hover,
.btn-filtros:hover { background: var(--gris-claro); }
.filtros-toggle .caret,
.btn-filtros .caret { transition: transform .15s; }
.filtros-toggle[aria-expanded="true"] .caret,
.btn-filtros[aria-expanded="true"] .caret { transform: rotate(180deg); }
.filtros-cerrados { display: none !important; }

/* ListarPredios: columna de filtros oculta; los resultados ocupan todo el ancho.
   Al abrir los filtros (clase "filtros-abiertos" en <html>) vuelven a 25% / 75%. */
.layout-filtros .col-filtros { display: none; }
.layout-filtros .col-resultados { width: 100%; }
html.filtros-abiertos .layout-filtros .col-filtros { display: block; }
@media (min-width: 768px) {
  html.filtros-abiertos .layout-filtros .col-resultados { width: 75%; }
}

/* ---------- Contenido ---------- */
.content { padding: 1.25rem 0.5rem 1.5rem; flex: 1; }
@media (min-width: 768px) { .content { padding-left: 1rem; padding-right: 1rem; } }

/* Logo centrado */
.site-logo { text-align: center; margin: 0 0 1.25rem; }
.site-logo img { display: inline-block; max-height: 110px; max-width: 100%; width: auto; height: auto; }
.site-logo p { margin: 0.5rem 0 0; font-size: 1rem; color: #6c757d; }

/* Carrusel: marco de proporcion fija (la fija el script con la primera imagen) */
.site-carousel { border-radius: 8px; overflow: hidden; margin-bottom: 1.25rem; }
.site-carousel .carousel-inner { aspect-ratio: var(--slide-ratio, 3 / 1); max-height: 480px; }
.site-carousel .carousel-inner > .item,
.site-carousel .carousel-inner > .item > a { display: block; height: 100%; }
.site-carousel .carousel-inner > .item:not(.active):not(.next):not(.prev) { display: none; }
.site-carousel .carousel-inner > .item > a > img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center;
}
.site-carousel .carousel-control { width: 8%; background-image: none; }

.content .btn-primary { background-color: #1b6ec2; border-color: #1861ac; }
.content .btn-primary:hover { background-color: #1861ac; }
.content .form-control:focus { border-color: #1b6ec2; box-shadow: 0 0 0 2px rgba(27, 110, 194, 0.25); }

/* ---------- Pie ---------- */
.site-footer { background: var(--gris-claro); border-top: 1px solid var(--gris-borde); padding: 1.75rem 0 1.25rem; font-size: 14px; color: var(--gris-texto); text-align: center; }
.site-footer a { color: var(--gris-enlace); }
.site-footer h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: #212529; }
.site-footer p { margin: 0 0 8px; }
.footer-col { margin-bottom: 12px; }
.footer-wa { height: 24px; width: auto; vertical-align: middle; margin-left: 8px; }
.footer-bottom { border-top: 1px solid var(--gris-borde); padding-top: 14px; font-size: 13px; text-align: center; }
.footer-bottom address { margin: 0 0 6px; }
.footer-bottom .copy { margin: 0; color: #5a636b; }

/* ---------- Tablas y grids en pantallas pequenas ---------- */
/* Envolver el grid con <div class="tabla-responsive">: si no cabe, se desplaza en horizontal
   en vez de cortarse. */
.tabla-responsive { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; }
.tabla-responsive [class*="dxgvControl"] { min-width: 360px; }
.tabla-responsive td.dxgv:not(:first-child),
.tabla-responsive td.dxgvFooter:not(:first-child) { white-space: nowrap; }

/* Los editores de DevExpress con ancho fijo (400px, 300px...) no deben salirse de la pantalla en movil */
@media (max-width: 767px) {
  .content [class*="dxeTextBox_"],
  .content [class*="dxeButtonEdit_"],
  .content [class*="dxeMemo_"] { max-width: 100% !important; }
}

/* ---------- Aviso de inactividad ---------- */
.modal-inactividad {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(33, 37, 41, 0.88);
}
.modal-inactividad[hidden] { display: none; }
.modal-inactividad-caja {
  background: #fff; border-radius: 8px; max-width: 420px; width: 100%;
  padding: 24px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.modal-inactividad-caja h2 { margin: 0 0 10px; font-size: 20px; color: var(--gris-texto); }
.modal-inactividad-caja p { margin: 0 0 8px; }
.modal-inactividad-cuenta { color: #6c757d; font-size: 13px; }
.btn-inactividad {
  margin-top: 8px; padding: 9px 18px; border: 1px solid #1861ac; border-radius: 4px;
  background: #1b6ec2; color: #fff; font-weight: 500; cursor: pointer;
}
.btn-inactividad:hover { background: #1861ac; }

/* ---------- Ventana de carga (clases de PopUp.css) ---------- */
.ModalPopup { border-radius: 6px; background: #fff; border: 1px solid #d6d5d5; }

@media (max-width: 767px) {
  .top-row { padding: 0.5rem 1rem; }
  .top-links { margin-left: 0; gap: 4px 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-inner > .item { transition: none; }
}