/* Sin @import de fuente externa: se probó Inter y en Windows renderiza más fina que la
   que trae PHPMaker. AdminLTE usa Verdana, que está hinteada para pantallas Windows -
   trazo más grueso y x-height alta, se lee más definida a tamaño chico. Además cada
   @import es una petición extra a Google Fonts que bloquea el pintado de la página.
   Para volver a Inter: restaurar el @import ACÁ ARRIBA (si va después de cualquier
   regla el navegador lo ignora) y el font-family en body. */

:root {
  --primary: #635BFF;
  --primary-dark: #0A2540;
  --surface: #FFFFFF;
  --background: #F7FAFC;
  --border: #E3E8EE;
  --text: #0A2540;
  --text-muted: #425466;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
}

body {
  /* Sin font-family acá: así hereda la de AdminLTE (Verdana + fallbacks), que se ve
     más definida en Windows. Declararla de nuevo sólo agregaría una copia que
     mantener sincronizada. */
  background: var(--background);
  color: var(--text);
  /* AdminLTE trae 0.875rem (14px). Subimos a 15px: se lee bastante mejor y no
     descoloca nada, porque tablas, botones, cards, sidebar y dropdowns HEREDAN
     de body - no declaran font-size propio. */
  font-size: 0.9375rem;
}

/* Cards mejorados (transición SOLO de sombra: nada de transform, rompe los dropdowns de Popper) */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  padding: 1.25rem 1.5rem;
}

/* Botones modernos */
.btn-primary {
  background: var(--primary);
  border: none;
  border-radius: var(--radius);
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  transition: all 0.2s;
}

.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(99, 91, 255, 0.3);
}

/* Efecto lift en botones, EXCEPTO dropdown-toggles (moverían el menú al abrirlo) */
.btn:not(.dropdown-toggle):not(:disabled):not(.disabled):hover {
  transform: translateY(-1px);
}

/* Tablas limpias */
.table {
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background: var(--background);
  border-bottom: 2px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  /* Era 0.75rem (12px), y con MAYÚSCULAS + letter-spacing es lo más difícil de leer
     de toda la app. 13px con el mismo tratamiento se lee sin esfuerzo. */
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem;
}

.table tbody tr {
  border-bottom: 1px solid var(--border);
}

.table tbody tr:hover {
  /* Mismo valor que --background en claro. Por variable y no fijo: en oscuro un fijo
     claro deja la fila tocada en la tablet con letra clara sobre fondo claro. */
  background: var(--background);
}

.table td {
  border-bottom: 1px solid var(--border);
  padding: 0.75rem;
}

/* Inputs refinados (sin transform: scale - descoloca date-pickers y autocompletar) */
.form-control, .form-select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.625rem 0.875rem;
  transition: border 0.2s, box-shadow 0.2s;
  /* Acá SÍ hay que repetirlo: AdminLTE le pone font-size:0.875rem explícito al
     .form-control, así que no hereda el de body. Sin esta línea los campos de
     carga quedarían más chicos que el texto de alrededor. */
  font-size: 0.9375rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.1);
  outline: none;
}

/* Navbar limpio */
.navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Sidebar moderno */
.ew-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.ew-sidebar .nav-link {
  color: var(--text-muted);
  border-radius: var(--radius);
  margin: 0.25rem 0.5rem;
  padding: 0.75rem 1rem;
  transition: all 0.2s;
}

.ew-sidebar .nav-link:hover {
  background: var(--background);
  color: var(--primary);
}

.ew-sidebar .nav-link.active {
  background: rgba(99, 91, 255, 0.1);
  color: var(--primary);
  font-weight: 500;
}

/* -- Logo del header --------------------------------------------------------
   AdminLTE capa la marca en 33px de ALTO (.brand-image { height:33px; max-height:33px }).
   Con el logo actual, que es 467x273 (apaisado), ese cap deja apenas 56px de ancho
   dentro de una barra de 250px: se ve diminuto. Acá se libera el alto y se manda por
   ANCHO, que es la dimensión que se quiere llenar.

   El logo sale del setting HeaderLogo del proyecto y se emite en dos lugares: el
   navbar (que va con d-none, oculto) y este brand del sidebar, que es el que se ve. */
.brand-link {
  height: auto;              /* AdminLTE lo fija en ~54px y recortaría el logo */
  padding: 0.85rem 0.75rem;
  text-align: center;
}

/* OJO CON EL SELECTOR: la regla de AdminLTE es `.brand-link .brand-image`, o sea DOS
   clases. Un `.brand-image` suelto pierde por especificidad aunque esta hoja cargue
   después - el orden de carga sólo desempata cuando la especificidad es igual. Por eso
   acá van tres clases: gana con margen, y sigue ganando si algún día se activa el tema
   `text-sm`, que trae su propia `.brand-link.text-sm .brand-image`. */
.brand-container .brand-link .brand-image,
.brand-container .brand-link .ew-brand-image {
  float: none;               /* AdminLTE lo flota a la izquierda */
  margin: 0 auto;            /* pisa su margin-left:.8rem / margin-top:-3px */
  height: auto;
  max-height: none;          /* acá vive el cap de 33px que achicaba todo */
  width: 100%;
  max-width: 190px;          /* <- ÚNICO número a mover para agrandar o achicar */
}

/* Barra colapsada: mide 4.6rem (~74px), así que el logo tiene que volver a un
   tamaño chico o se desborda encima del menú. */
.sidebar-collapse .brand-container .brand-link .brand-image,
.sidebar-collapse .brand-container .brand-link .ew-brand-image {
  max-width: 44px;
}

/* ...salvo al pasar el mouse, que AdminLTE la vuelve a expandir a 250px. Sin esta
   regla el logo quedaría chico mientras la barra está abierta. */
.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-link .brand-image,
.sidebar-collapse .main-sidebar:not(.sidebar-no-expand).sidebar-focused .brand-link .brand-image {
  max-width: 190px;
}

/* Paginación limpia */
.pagination .page-link {
  border: 1px solid var(--border);
  color: var(--text);
  margin: 0 0.125rem;
  border-radius: var(--radius);
}

.pagination .page-link:hover {
  background: var(--background);
  border-color: var(--primary);
}

.pagination .page-item.active .page-link {
  background: var(--primary);
  border-color: var(--primary);
}

/* Badges modernos */
.badge {
  border-radius: calc(var(--radius) / 2);
  font-weight: 500;
  padding: 0.35em 0.65em;
}

/* -- Contadores de los detalles ---------------------------------------------
   Son los numeritos de "ampliacion 0 / REPUESTO 3 / recepcion 0..." del menú de
   la fila y de los títulos en la página View.

   PHPMaker los pinta TODOS del mismo cyan (el %s de la frase DetailCount va fijo
   en "cyan"), así que un 0 y un 3 se ven idénticos: hay que leer número por número
   para saber qué secciones tienen algo. El markup ya trae `data-count`, así que se
   pueden separar por CSS sin tocar el generador ni la frase del idioma. */
.ew-detail-count-badge {
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 1.6em;          /* alinea el 1 con el 12: no bailan al mirar la lista */
  text-align: center;
  padding: 0.3em 0.55em;
  border-radius: 999px;      /* píldora - se distingue mejor del texto del link */
}

/* Vacío: se apaga. Sigue estando -informa que la sección existe y no tiene datos-
   pero deja de competir por la atención con los que sí tienen. */
.ew-detail-count-badge[data-count="0"] {
  background-color: transparent !important;   /* text-bg-* de Bootstrap usa !important */
  color: var(--text-muted) !important;
  border: 1px solid var(--border);
  font-weight: 500;
  opacity: 0.7;
}

.badge-primary {
  box-shadow: 0 0 10px rgba(99, 91, 255, 0.3);
}

/* Grid mejorado - overflow VISIBLE para que el menú "Columnas" no se recorte.
   El scroll horizontal lo maneja .table-responsive (hijo), no se ve afectado. */
.ew-grid {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: visible;
}

/* Truncar OBSERVACION en los listados de siniestro (un texto largo estiraba la tabla) */
.el_siniestro_OBSERVACION {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* ==========================================================================
   LOGIN — identidad VShop
   ==========================================================================

   FRANJA HORIZONTAL, no dos columnas. La decision sale de MEDIR el archivo, no de
   mirarlo:

     lienzo     1408 x 768
     contenido  x 166..1242, y 218..548
     ocupa      76% del ancho, 43% del alto — proporcion 3.26:1
     aire       12% a los lados, 28% arriba, 29% abajo

   Un lockup de 3.26:1 metido en una columna vertical se corta el wordmark. En cambio
   el 28% de aire vertical es exactamente el margen que permite recortar en alto sin
   tocar el logo. Por eso: banda ancha arriba, formulario abajo.

   Se usa `contain` y no `cover`: con cover, en una banda muy ancha el recorte vertical
   se pasa del 28% de aire y come la punta del escudo. Con contain el logo entra
   siempre entero y el degradado de atras extiende el fondo.

   EL ARCHIVO ESTA OPTIMIZADO. El render original pesa 595 KB; el login carga
   vshop_lockup.jpg, de 61 KB (-90%). Es la primera pantalla que ve todo el mundo
   todos los dias.
   ========================================================================== */

:root {
  --vshop-azul:        #1E6DB4;   /* el azul del wordmark */
  --vshop-azul-hondo:  #0F4C81;   /* el azul oscuro del escudo */
  --vshop-naranja:     #F26A21;   /* el acento */
  --vshop-gris-claro:  #4A4E52;   /* muestreado del borde derecho del render */
  --vshop-gris-hondo:  #24292C;   /* muestreado de las esquinas izquierdas */
}

/* La caja del login ocupa la pantalla y apila banda + tarjeta. */
.ew-login-box {
  max-width: none;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--vshop-gris-hondo);
}

/* --- La banda de marca ---------------------------------------------------- */
/* El degradado replica el del render (luz arriba a la izquierda, sombra en los
   bordes) para que el fondo continue sin costura donde la imagen no llega. */
.ew-login-box .login-logo {
  /* PANEL, no imagen flotando.

     `vshop_lockup.jpg` es un render de marketing, no un logotipo: no tiene
     transparencia y su fondo es un degradado DIAGONAL -- medido con GD, de
     #24272C abajo-izquierda a #606368 arriba-derecha. Sobre una pagina plana
     oscura el rectangulo se ve SIEMPRE. Se probo calzar la caja con la
     proporcion del archivo (queda el recuadro duro) y fundir los bordes con
     degradados al color de la pagina (queda un halo claro, porque lo que
     sobresale es el centro del fondo, no el borde). El recuadro esta adentro
     del archivo: no hay encuadre que lo saque.

     Asi que se lo presenta como lo que es. Mismo radio y misma sombra que la
     tarjeta de abajo: leido como par, el rectangulo pasa de accidente a
     composicion.

     El limite de alto va DENTRO del ancho (`calc(38vh * 1.832)`, 1.832 =
     1200/655) y no como `max-height`: puesto como max-height la caja se
     deforma, deja de coincidir con la imagen y reaparece el aire lateral. */
  width: min(440px, 88vw, calc(30vh * 2.483));
  height: auto;
  /* El archivo trae 12% de aire a los costados y 28% arriba y abajo, asi que
     mostrado entero el logo ocupaba 33% del panel y el otro 67% era gris muerto
     (medido con GD sobre la caja real del logo: x 140..1056, y 186..468 de
     1200x655). Se acerca el encuadre a la marca.

     La ventana visible queda en x 96..1104 e y 125..530: deja ~45px de aire a
     los lados y ~61px arriba y abajo EN COORDENADAS DEL ARCHIVO, que es el
     margen que necesitan la sombra y el resplandor del render. Recortar justo
     en la caja del logo se los comeria.

     Sale `center` sin corrimiento porque el logo YA esta centrado en el archivo
     (su centro cae en 598,327 contra 600,327.5 del lienzo).

     119% = 1200/1008: cuanto hay que agrandar la imagen para que esa ventana
     de 1008px llene el ancho del panel. 2.483 = 1008/406, la proporcion de la
     ventana -- y por eso el panel bajo de 240px de alto a 177px. */
  aspect-ratio: 1008 / 406;
  margin: 0 0 26px;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .32);
  background: url("../images/vshop_lockup.jpg") center / 119% auto no-repeat;
}

/* En pantallas angostas se sirve la version de 640px: 18 KB en vez de 61. */
@media (max-width: 700px) {
  .ew-login-box .login-logo {
    background-image: url("../images/vshop_lockup_640.jpg");
  }
}

/* --- La tarjeta del formulario -------------------------------------------- */
.ew-login-box .ew-login-card {
  /* Mismo ancho que el panel de arriba: una sola columna, no dos piezas de
     tamano distinto apiladas. */
  width: min(440px, 88vw);
  overflow: hidden;                 /* el acento naranja al pie va recortado al radio */
  margin: 34px auto 40px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .32);
}
.ew-login-box .ew-login-card .card-body { padding: 32px 30px; }

/* El boton toma el azul de la marca, no el violeta de esta hoja. */
.ew-login-box .ew-login-card .btn-primary {
  background: var(--vshop-azul);
  border-color: var(--vshop-azul);
  font-weight: 600;
}
.ew-login-box .ew-login-card .btn-primary:hover,
.ew-login-box .ew-login-card .btn-primary:focus {
  background: var(--vshop-azul-hondo);
  border-color: var(--vshop-azul-hondo);
}
.ew-login-box .ew-login-card .form-control:focus {
  border-color: var(--vshop-azul);
  box-shadow: 0 0 0 .2rem rgba(30, 109, 180, .18);
}
.ew-login-box .login-box-msg { color: var(--text-muted); }

/* Un unico toque de naranja, al pie de la tarjeta. Un acento que aparece una vez se
   nota; repartido por todos lados deja de ser acento. */
.ew-login-box .ew-login-card::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--vshop-naranja);
  border-radius: 0 0 12px 12px;
}

.ew-login-box .login-page-links a { color: #C9D3DC; }
.ew-login-box .login-page-links a:hover { color: #fff; }

/* Pantallas bajas: la banda cede alto para que el boton de entrar no quede fuera. */
@media (max-height: 620px) {
  .ew-login-box { padding: 2vh 0; }
  .ew-login-box .login-logo { margin-bottom: 16px; }
}

/* ===== Vista previa del PDF de la orden (adm_orden_archivo) =====================
   El PDF vive como blob en la base; PHPMaker lo incrusta con PDFObject dentro de un
   .ew-pdfobject. Ese div traia solo `max-width: 1000px` y ninguna altura, asi que el alto
   lo ponia el componente por su cuenta -- igual en la vista que en el listado.

   Van dos tamanos distintos porque son dos lecturas distintas: en la VISTA se abre un caso
   para leer la orden, y en el LISTADO se recorren muchas filas y una previa alta empuja el
   resto de la grilla fuera de la pantalla.

   Esto vive en nitrox-saas.css (el CSS propio del proyecto) y no en el generado: el
   generado se reescribe en cada generacion. */
.ew-view-form .ew-pdfobject {
  height: 720px;
  max-width: 100%;
}

.ew-list-form .ew-pdfobject {
  height: 200px;
  max-width: 340px;
}

.ew-pdfobject .pdfobject,
.ew-pdfobject iframe {
  height: 100%;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
}


/* ==========================================================================
   LOGIN — fuera el armazon del ERP
   ==========================================================================

   La pantalla de login se dibujaba DENTRO del armazon de AdminLTE: barra
   superior con el boton de menu, sidebar con el logo del taller, encabezado
   con titulo y miga de pan, y pie de pagina.

   Nada de eso sirve ANTES de iniciar sesion: el menu no tiene items, la miga
   de pan ofrece "Inicio" hacia una pagina que rebota de vuelta al login, y el
   sidebar corria el contenido a la derecha. Esa es la causa real del
   desequilibrio que se veia: la banda de marca esta pensada a pantalla
   completa —ver el bloque de arriba, donde se midio el lockup— y se estaba
   dibujando dentro de una columna angosta y descentrada.

   EL GANCHO ES LA RUTA EXACTA DEL DOM, no `.ew-login-box` suelto. Hoy
   USE_MODAL_LOGIN es false (verificado en src/config.php), pero si se
   activara, el login se dibuja dentro de un `.modal-body` encima de otra
   pagina: un selector suelto le borraria el armazon a la pagina de atras, y
   el sintoma —una pantalla sin menu despues de que expira la sesion— no se
   parece en nada a su causa.

   Va en CSS y no en views/layout.php porque ese archivo se reescribe en cada
   generacion. nitrox-saas.css esta registrado en el .pmp (verificado), asi
   que sobrevive.
   ========================================================================== */

body:has(.content > .container-fluid > .ew-login-box) {
  background: var(--vshop-gris-hondo);
}

body:has(.content > .container-fluid > .ew-login-box) :is(
    .main-header,
    .main-sidebar,
    .content-header,
    .main-footer) {
  display: none !important;
}

/* El margen izquierdo lo pone AdminLTE para dejarle lugar al sidebar; sin
   sidebar es un corrimiento sin motivo. */
body:has(.content > .container-fluid > .ew-login-box) .content-wrapper {
  margin: 0 !important;
  min-height: 0;
  background: var(--vshop-gris-hondo);
}

body:has(.content > .container-fluid > .ew-login-box) :is(.content, .container-fluid) {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none;
}

/* --- Equilibrio de la composicion ----------------------------------------
   La tarjeta colgaba de la banda a 34px fijos y todo el alto sobrante quedaba
   muerto abajo: la pantalla pesaba arriba. Con `margin:auto` sobre un hijo
   flex el espacio libre se reparte por igual arriba y abajo, asi que la
   tarjeta se centra sola en el aire que deja la banda, sea cual sea el alto
   de la pantalla. El margen de la banda garantiza un piso de aire cuando no
   sobra nada. */
.ew-login-box { justify-content: center; padding: 4vh 0; }
.ew-login-box .ew-login-card { margin: 0 auto; }

/* --- Ritmo adentro de la tarjeta -----------------------------------------
   Las dos filas de campos venian pegadas: `row gx-0` separa en horizontal y
   nada en vertical, asi que usuario y contrasena se leian como una sola caja
   partida al medio. */
.ew-login-box .ew-login-card .login-box-msg { margin-bottom: 20px; }
.ew-login-box .ew-login-card .row + .row { margin-top: 14px; }
.ew-login-box .ew-login-card .d-grid { margin-top: 22px; }

/* Sin enlaces de registro ni de recuperar clave este div queda vacio, y su
   `mt-3` deja 16px de aire muerto al pie de la tarjeta. */
.ew-login-box .login-page-links:empty { margin-top: 0 !important; }


/* --- El error de login, donde el ojo esta mirando -------------------------
   Con USE_JAVASCRIPT_MESSAGE=true el mensaje NO se dibuja en la tarjeta: se
   esconde con `d-none` y un toast lo repite fijo ARRIBA A LA DERECHA, a 380px
   de ancho, sin radio ni sombra. Medido en la pantalla real.

   Dos problemas, y el grave es el segundo:
     - no se parece en nada al resto (radio 12, sombras suaves, paleta VShop);
     - aparece a ~700px de donde el usuario esta mirando. Escribio mal la clave,
       tiene los ojos en el campo del centro, y el aviso sale en la esquina
       opuesta. El desenlace tipico es que vuelva a escribir lo mismo creyendo
       que no paso nada -- y despues llame por telefono.

   Se apaga el toast y se muestra el mensaje que YA ESTABA ahi adentro de la
   tarjeta, arriba de todo: mismo eje, empuja el formulario y no tapa nada.
   Solo en el login: en el resto del ERP el toast en la esquina esta bien,
   porque ahi el aviso es de una accion que ya termino. */
body:has(.content > .container-fluid > .ew-login-box) .toast-container {
  display: none !important;
}
body:has(.content > .container-fluid > .ew-login-box) .ew-message-dialog.d-none {
  display: block !important;
}
/* 🚨 El JS de la app, al armar el toast, le SACA al nodo la clase `alert-danger`
   y el icono: medido, queda `class="alert alert-dismissible ew-error"` con fondo
   transparente. Por eso mostrarlo asi nomas daba texto negro suelto, que como
   error avisa peor que el toast. Se pinta sobre `ew-error`, que es la clase
   propia de PHPMaker y SI sobrevive.

   La marca es una barra de acento y no un icono de fuente: no depende de que
   cargue Font Awesome, y repite el lenguaje del acento naranja de la tarjeta. */
.ew-login-box .ew-message-dialog .alert {
  border: none;
  border-radius: 8px;
  padding: 11px 14px;
  margin: 0 0 18px;
  font-size: .9rem;
  text-align: left;
}
.ew-login-box .ew-message-dialog .ew-error {
  background: #FDECEC;
  color: #8E1F1F;
  border-left: 3px solid #C0392B;
}
.ew-login-box .ew-message-dialog .ew-success {
  background: #EAF6EE;
  color: #1E6B3A;
  border-left: 3px solid #2E9E5B;
}
.ew-login-box .ew-message-dialog .ew-warning,
.ew-login-box .ew-message-dialog .ew-info {
  background: #F1F4F8;
  color: var(--text-muted);
  border-left: 3px solid var(--vshop-azul);
}

/* Sin mensaje el contenedor va igual y vacio. La regla de arriba lo hace
   visible, asi que hay que volver a ocultarlo -- y con al menos la misma
   especificidad, si no el `display:block` gana y deja un hueco en la tarjeta. */
body:has(.content > .container-fluid > .ew-login-box) .ew-message-dialog.d-none:empty {
  display: none !important;
}


/* --- El pie: a quien llamar y que version corre ---------------------------
   Lo agrega el Startup Script del proyecto (ver patch_pmp_login_pie_v1.js), no
   el HTML generado: la pantalla de login la escribe PHPMaker y se reescribe en
   cada generacion.

   No se usa el pie del ERP (.main-footer) por dos razones: aca esta oculto a
   proposito, y su texto sale de FooterText, que es del proyecto entero -- el
   mail de soporte terminaria en las 200 pantallas del ERP, donde no hace falta.

   Discreto a proposito: tiene que estar cuando se lo busca y no competir con el
   formulario cuando no. */
.ew-login-box .vshop-pie {
  margin-top: 22px;
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
  color: #79838D;
}
.ew-login-box .vshop-pie .sep { margin: 0 8px; opacity: .55; }
.ew-login-box .vshop-pie a {
  color: #A9B4BE;
  text-decoration: none;
  border-bottom: 1px solid rgba(169, 180, 190, .35);
}
.ew-login-box .vshop-pie a:hover,
.ew-login-box .vshop-pie a:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
}

@media (max-height: 620px) {
  .ew-login-box .vshop-pie { margin-top: 14px; }
}

/* ==========================================================================
   MODO OSCURO (Henry 2026-09-28: «hay partes del menú que no se ven en la
   tablet o celular»).

   La paleta de :root es SOLO del modo claro, y 26 reglas de esta hoja la usan.
   La barra superior, en particular, va con `background: var(--surface) !important`
   = blanco SIEMPRE. En oscuro Bootstrap pone los íconos y textos de la barra en
   claro (medido: rgba(255,255,255,.65)) y quedaban blanco sobre blanco: sin la
   hamburguesa no se abre el menú, y sin el engranaje no se puede volver a claro.

   Y no hace falta elegirlo: si nadie eligió tema, PHPMaker sigue el del sistema
   (prefers-color-scheme). Un celular o tablet en modo oscuro abre el ERP así solo.

   Se redefine la paleta con las variables del modo oscuro de Bootstrap, que ya
   vienen en adminlte.css: todo lo que usa la paleta pasa a oscuro junto con el
   resto de la pantalla, sin tocar regla por regla. El claro no cambia.
   ========================================================================== */
[data-bs-theme="dark"] {
  --surface: var(--bs-body-bg);            /* #212529 */
  --background: var(--bs-tertiary-bg);     /* #2B3035 */
  --border: var(--bs-border-color);        /* #495057 */
  --text: var(--bs-body-color);            /* #DEE2E6 */
  --text-muted: var(--bs-secondary-color);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   LA BARRA SUPERIOR EN TABLET (Henry 2026-09-28).

   Los ítems de la barra (ORDEN DE LA ASEGURADORA, CALENDARIO, CONSULTAS,
   REPORTES, CENTRO DE AYUDA) + los íconos piden ~950px de ANCHO ÚTIL, y no se
   parten: si no entran, la página entera se ensancha y el navegador de la
   tablet la achica o la corre de costado. Medido en la lista de siniestros:
     - hasta 991px la barra ocupa todo el ancho: no entra desde 576px (en 800px
       la página medía 934px);
     - desde 992px el lateral fijo se come 250px: recién entra desde ~1200px
       (en 1024 y 1180 la página medía 1200px). 1280 entra con 7px de margen.
   PHPMaker los pasa al menú lateral sólo por debajo de 576px (celular): la
   tablet quedaba en el medio. Acá el corte pasa a 1280px: por debajo, los ítems
   van al lateral (las mismas copias que usa el celular, `li.d-sm-none`) y en la
   barra quedan la hamburguesa y los íconos, que sí entran siempre.
   ========================================================================== */
@media (max-width: 1279.98px) {
  #ew-navbar > li.ew-navbar-item {
    display: none !important;
  }
  .main-sidebar .nav-sidebar li.d-sm-none {
    display: block !important;
  }
}