/*
 * La estructura del backoffice de JapoPrint.
 * ===========================================================================
 *
 * Obra propia de JAPOPRINT E.A.S. Segunda parte del reemplazo del tema
 * comercial. La primera —`componentes.css`— cubrió tarjetas, botones y
 * etiquetas. Ésta cubre lo que quedaba: el armazón, el menú lateral y los
 * campos de formulario.
 *
 * ===========================================================================
 * DE DONDE SALE CADA MEDIDA
 * ===========================================================================
 *
 * De medir el tema, no de inventar. Cada regla de acá se extrajo de
 * `metronic/css/styles.css` resolviendo sus variables, y las que sólo existen
 * como combinador —`.menu-default .menu-icon i`, y así— se leyeron del
 * navegador sobre una página que reproduce el mismo nido que las plantillas.
 *
 * No es un rediseño: es la misma pantalla, escrita de nuestro lado. Un
 * rediseño obligaría a mirar 51 pantallas preguntándose si cada diferencia es
 * un error o una decisión; así, cualquier diferencia es un error.
 *
 * ===========================================================================
 * DOS COSAS QUE ENCONTRAMOS AL MEDIR Y CONVIENE SABER
 * ===========================================================================
 *
 * 1. `.menu-item-active:` y `.menu-link-hover:` aparecen en `menu_item.html`
 *    y NO GENERAN NADA, tampoco en el tema comprado. Son variantes de un
 *    complemento de Tailwind que no quedó compilado. O sea que el menú, hoy,
 *    NO marca en qué pantalla estás. No es algo que rompa este reemplazo:
 *    ya estaba así. Se deja igual acá para no cambiar el aspecto sin querer,
 *    y se arregla aparte.
 *
 * 2. El layout de escritorio vive entero dentro de `@media (min-width:1024px)`.
 *    Aplicarlo sin ese envoltorio le mete al `wrapper` 280 píxeles de sangría
 *    en un teléfono, donde el menú ni siquiera se muestra. Se respeta.
 */

/* ===========================================================================
   EL ARMAZON
   ===========================================================================

   `demo1`, `sidebar-fixed` y `header-fixed` son nombres del tema y están
   escritos en el `<body>` de `base.html`. Se conservan tal cual: cambiarlos
   obligaría a tocar la plantilla, y el objetivo es no tocar ninguna. */

.demo1 {
  --jp-sidebar-ancho: 280px;
  --jp-encabezado-alto: 60px;
}

.demo1 .sidebar {
  width: var(--jp-sidebar-ancho);
}

/* OJO CON EL ESPACIO DE ARRIBA.
   El encabezado es `fixed` y transparente, y lo unico que lleva es el circulo
   del usuario, a la derecha. Reservarle 60 px arriba del contenido parece lo
   correcto y NO lo es: el contenido ya trae su propio espacio, y sumar los dos
   empujaba cada pantalla 60 px hacia abajo.

   Se descubrio comparando contra las capturas del tema viejo: el titulo de la
   pagina estaba a 96 px y habia quedado a 156. */
.demo1.header-fixed .wrapper {
  padding-top: 0;
}

/* ===========================================================================
   EL MENU LATERAL TIENE QUE PODER DESLIZARSE
   ===========================================================================

   Esto lo hacia el javascript del tema: `data-scrollable` le calculaba y le
   escribia un alto en pixeles al contenedor del menu. Sin ese alto, un
   `overflow-y: auto` no sirve para nada -no hay de que desbordar-, y el menu
   simplemente se cortaba abajo, sin barra y sin forma de llegar a las ultimas
   entradas.

   Con 26 entradas y una pantalla de portatil, lo que quedaba afuera era la
   mitad del menu.

   No hace falta javascript. Alcanza con dejar que los contenedores se achiquen:
   en una columna flexible, un hijo NO baja de su alto de contenido a menos que
   se le diga `min-height: 0`, y la plantilla ademas les pone `shrink-0`.

   Las dos reglas ganan por especificidad -dos clases contra una-, asi que no
   hace falta tocar la plantilla ni poner `!important`. */
.demo1 .sidebar {
  overflow: hidden;
}
.demo1 .sidebar .sidebar-content,
.demo1 .sidebar .scrollable-y-hover {
  min-height: 0;
  flex-shrink: 1;
}

/* El ancho máximo del contenido. 1280 px: más que eso y un renglón de texto
   se vuelve incómodo de leer de punta a punta. */
.container-fixed {
  flex-grow: 1;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.875rem;
}

@media (min-width: 1024px) {
  .demo1 .sidebar {
    transition: width 0.3s ease;
  }
  .demo1 .sidebar .sidebar-header {
    height: var(--jp-encabezado-alto);
  }
  /* El logo chico es para cuando el menú está plegado. */
  .demo1 .sidebar .small-logo {
    display: none;
  }
  .demo1.sidebar-fixed .wrapper {
    padding-inline-start: var(--jp-sidebar-ancho);
  }
  .demo1.sidebar-fixed.header-fixed .header {
    inset-inline-start: var(--jp-sidebar-ancho);
  }
  .demo1.sidebar-fixed.header-fixed .wrapper {
    padding-top: 0;   /* mismo motivo que arriba: el contenido ya trae su espacio */
  }

  /* --- el menú plegado ---------------------------------------------------
     Se achica a 80 px y sólo muestra los iconos. Al pasarle el mouse vuelve
     a abrirse encima del contenido, sin empujarlo: por eso el ancho lo
     cambia el `.sidebar` y no el `.wrapper`. */
  .demo1.sidebar-collapse {
    --jp-sidebar-ancho: 80px;
  }
  .demo1.sidebar-collapse .sidebar:hover:not(.animating) {
    width: 280px;
  }
  .demo1.sidebar-collapse .sidebar:not(:hover) .default-logo {
    display: none;
  }
  .demo1.sidebar-collapse .sidebar:not(:hover) .small-logo {
    display: block;
  }
  .demo1.sidebar-collapse .sidebar:not(:hover) .menu-title {
    display: none;
  }
}

/* El cajón lateral del teléfono: el mismo menú, que entra deslizándose. */
.drawer {
  position: fixed;
  transition: transform 300ms ease;
  background-color: var(--jp-light);
}

/* Barra de desplazamiento fina y transparente hasta que se pasa el mouse.
   En el menú lateral una barra gruesa se come el ancho de los títulos. */
.scrollable-y-hover {
  position: relative;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.scrollable-y-hover:hover {
  scrollbar-color: var(--jp-gray-300) transparent;
}
.scrollable-y-hover::-webkit-scrollbar {
  width: 5px;
}
.scrollable-y-hover::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 5px;
}
.scrollable-y-hover:hover::-webkit-scrollbar-thumb {
  background-color: var(--jp-gray-300);
}

/* ===========================================================================
   EL MENU LATERAL
   =========================================================================== */

.menu {
  display: flex;
}

.menu-item,
.menu-link {
  padding: 0;
  margin: 0;
}

.menu-item {
  flex-direction: column;
}

.menu-link,
.menu-label,
.menu-toggle {
  display: flex;
  align-items: center;
  flex-grow: 1;
  cursor: pointer;
}

.menu-icon,
.menu-bullet,
.menu-badge,
.menu-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.menu-title {
  display: flex;
  align-items: center;
  line-height: 1;
  flex-grow: 1;
}

/* `menu-default` es la variante que usa el menú lateral. Las otras del tema
   —compacto, horizontal— no las usa ninguna plantilla y no se reponen. */
.menu-default {
  padding-block: 0.625rem;
}
.menu-default .menu-link,
.menu-default .menu-label {
  margin-inline: 0.625rem;
  padding: 0.625rem;
  border-radius: 0.375rem;
}
.menu-default .menu-icon {
  margin-inline-end: 0.625rem;
}
.menu-default .menu-icon i {
  font-size: 1.125rem;
  color: var(--jp-gray-500);
}
.menu-default .menu-title {
  font-size: 0.8125rem;
  line-height: 1.125rem;
  font-weight: 500;
  color: var(--jp-gray-800);
}
.menu-default .menu-item .menu-link:hover .menu-title,
.menu-default .menu-item .menu-label:hover .menu-title {
  color: var(--jp-gray-900);
}
.menu-default .menu-item .menu-link:hover .menu-icon i,
.menu-default .menu-item .menu-label:hover .menu-icon i {
  color: var(--jp-primary);
}

/* La entrada de la pantalla en la que se está. Ver la nota del encabezado:
   hoy nada le pone `active`, así que esto no se ve nunca. Se repone igual
   para que el día que se marque, se vea como se veía en el tema. */
.menu-default .menu-item.active > .menu-link,
.menu-default .menu-item.here > .menu-link,
.menu-default .menu-item.show > .menu-link {
  background-color: var(--jp-gray-100);
}
.menu-default .menu-item.active > .menu-link .menu-title,
.menu-default .menu-item.here > .menu-link .menu-title {
  color: var(--jp-gray-900);
}
.menu-default .menu-item.active > .menu-link .menu-icon i,
.menu-default .menu-item.here > .menu-link .menu-icon i {
  color: var(--jp-primary);
}

.menu-default .menu-separator {
  border-bottom: 1px solid var(--jp-gray-200);
  margin-block: 0.625rem;
}

.menu-dropdown {
  gap: 0.125rem;
  border: var(--jp-tarjeta-borde);
  border-radius: 0.75rem;
  background-color: var(--jp-tarjeta-fondo);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ===========================================================================
   FORMULARIOS
   ===========================================================================

   Son 90 usos entre etiquetas, cajas de texto y desplegables: la familia más
   usada después de las tarjetas. */

.form-label {
  display: flex;
  width: 100%;
  color: var(--jp-gray-700);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.125rem;
}

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  height: 2.5rem;
  padding-inline: 0.75rem;
  appearance: none;
  outline: none;
  box-shadow: none;
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--jp-gray-700);
  background-color: var(--jp-gray-100);
  border: 1px solid var(--jp-gray-300);
  border-radius: 0.375rem;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--jp-gray-500);
}
.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--jp-gray-400);
}
.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--jp-primary);
  color: var(--jp-gray-700);
}
.input:disabled,
.textarea:disabled,
.select:disabled {
  background-color: var(--jp-gray-100);
  color: var(--jp-gray-500);
  cursor: not-allowed;
}

/* ===========================================================================
   El textarea: mismo aspecto que el input, con el alto que le corresponde
   ===========================================================================

   Faltaba, y dos plantillas la usaban igual —relevamientos/relevar.html y
   tareas/detalle.html—, asi que esos dos campos se dibujaban sin ningun
   estilo: sin borde, sin fondo, sin el redondeo del resto del formulario.
   Lo encontro la sesion del agente de soporte el 29/08/2026.

   Y NO ALCANZABA CON PONERLES `input`, que es lo que parece la solucion facil
   y es lo que hace incidentes/detail.html: `.input` fija `height: 2.5rem`, o
   sea la altura de una linea. Un textarea con `rows="4"` y esa clase queda
   aplastado a una sola linea y hay que arrastrarlo para escribir. Se arregla
   una cosa y se rompe la otra.

   Por eso el alto se deja al navegador —que lo calcula con `rows`— y solo se
   heredan el borde, el fondo y la tipografia. */
.textarea {
  height: auto;
  min-height: 2.5rem;
  padding-block: 0.5rem;
  line-height: 1.5;
  resize: vertical;
}

/* La flechita del desplegable va como imagen de fondo, igual que en el tema:
   `appearance:none` borra la del navegador y sin esto el campo queda sin
   ninguna señal de que se despliega. El color del trazo es el gris 500. */
.select {
  padding-inline-end: 2rem;
  background-repeat: no-repeat;
  background-position: right 0.675rem center;
  background-size: 14px 11px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2378829D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.input-sm,
.select-sm {
  height: 2rem;
  padding-inline: 0.625rem;
  font-weight: 500;
  font-size: 0.75rem;
}
.select-sm {
  padding-inline-end: 1.75rem;
  background-size: 14px 10px;
  background-position: right 0.55rem center;
}

/* La casilla. `appearance:none` y el tilde dibujado a mano, para que se vea
   igual en los tres navegadores en vez de que cada uno ponga la suya. */
.checkbox[type="checkbox"] {
  flex-shrink: 0;
  appearance: none;
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid var(--jp-gray-300);
  border-radius: 0.375rem;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.checkbox[type="checkbox"]:checked {
  background-color: var(--jp-primary);
  border-color: var(--jp-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m3 8 3.5 3.5L13 5'/%3e%3c/svg%3e");
}
.checkbox[type="checkbox"]:disabled {
  background-color: var(--jp-gray-200);
  cursor: not-allowed;
}

.switch {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}
.switch input[type="checkbox"] {
  appearance: none;
  position: relative;
  width: 2.5rem;
  height: 1.375rem;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: var(--jp-gray-300);
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-color: #fff;
  transition: transform 0.15s ease;
}
.switch input[type="checkbox"]:checked {
  background-color: var(--jp-primary);
}
.switch input[type="checkbox"]:checked::after {
  transform: translateX(1.125rem);
}
.switch-sm input[type="checkbox"] {
  width: 2rem;
  height: 1.125rem;
}
.switch-sm input[type="checkbox"]::after {
  width: 0.875rem;
  height: 0.875rem;
}
.switch-sm input[type="checkbox"]:checked::after {
  transform: translateX(0.875rem);
}

/* ===========================================================================
   LOS TAMAÑOS QUE FALTABAN
   ===========================================================================

   `componentes.css` repuso `.btn`, `.btn-sm` y `.badge`. Estos tres se usan
   poco y por eso quedaron para esta pasada. */

.btn-xs {
  height: 1.75rem;
  padding-inline: 0.5rem;
  font-weight: 500;
  font-size: 0.6875rem;
  gap: 0.25rem;
}
.btn-xs.btn-icon {
  width: 1.75rem;
  padding: 0;
}

.btn-icon-md {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
}

.badge-xs {
  font-size: 0.625rem;
  padding: 0.1875rem 0.3125rem;
}

.text-2sm {
  font-size: 0.8125rem;
  line-height: 1.125rem;
}

/* ===========================================================================
   LO QUE ACOMPAÑA A `panel.js`
   ===========================================================================

   Cada bloque de acá es la mitad visible de un comportamiento que vive en
   `japoprint/panel.js`. Van juntos: si se borra uno, el otro no hace nada. */

/* --- el menú del usuario ------------------------------------------------- */

.menu-item[data-menu-item-toggle="dropdown"] {
  position: relative;
}
.menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: 105;
  flex-direction: column;
}
.menu-item.show > .menu-dropdown {
  display: flex;
}

/* --- el cajón del teléfono ------------------------------------------------ */

.drawer-start {
  inset-inline-start: 0;
  transform: translateX(-100%);
}
/* Tres clases para ganarle a la utilitaria `hidden` que la plantilla le pone
   al menú en pantalla chica. Sin esto el cajón se desliza y no se ve. */
.sidebar.drawer.open,
.drawer.open {
  display: flex;
  transform: none;
}

.jp-fondo-cajon {
  position: fixed;
  inset: 0;
  z-index: 19;
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.jp-fondo-cajon.visible {
  opacity: 1;
  visibility: visible;
}

/* --- la flecha de plegar -------------------------------------------------- */

/* La plantilla trae `toggle-active:rotate-180`, que no genera nada. Con esto
   la flecha por fin gira, que es lo que dice que hace desde el primer día. */
.toggle .ki-black-left-line {
  transition: transform 0.3s ease;
}
.toggle.active .ki-black-left-line {
  transform: rotate(180deg);
}

/* --- el ojo de la contraseña ---------------------------------------------- */

[data-toggle-password] .ki-eye-slash {
  display: none;
}
[data-toggle-password].jp-viendo-clave .ki-eye {
  display: none;
}
[data-toggle-password].jp-viendo-clave .ki-eye-slash {
  display: inline-block;
}

/* El campo de la contraseña es una caja `.input` con el `<input>` adentro y
   el botón del ojo al lado. Sin esto el botón queda debajo, en otro renglón. */
.input:has(> input) {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.input > input {
  flex-grow: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0;
}