:root {
  --ip-primario: #1d3557;
  --ip-primario-oscuro: #14253d;
  --ip-acento: #2a9d8f;
  --ip-fondo: #f4f6f9;
}

/* Tema oscuro (requisito "permitir también que el tema sea oscuro"): "static/js/tema.js" fija
   data-bs-theme="dark" en <html> antes del primer pintado. Bootstrap 5.3 ya adapta con ese mismo
   atributo casi todo (tarjetas, tablas, formularios, alertas, paginación, botones); aquí solo se
   redefinen las variables --ip-* propias. El resto de los colores fijos de este archivo se revisó uno
   por uno: los que son texto o borde sobre un fondo que cambia con el tema pasaron a un token de
   Bootstrap (--bs-border-color, --bs-secondary-color, --bs-tertiary-bg, --bs-emphasis-color...); los que
   deben verse siempre igual se dejaron igual (el escáner de cámara, y el fondo blanco de los logos y del
   código QR, que deben seguir siendo blancos para que se lean). La impresión de etiquetas (@media print,
   más abajo) fuerza colores claros aparte, sin depender de estas variables. */
[data-bs-theme="dark"] {
  --ip-primario: var(--ip-primario-oscuro);
  --ip-fondo: #121417;
}

html {
  position: relative;
  min-height: 100%;
}

/* Utilidad que Bootstrap no incluye: permite que un hijo flex se encoja por debajo de su contenido. */
.min-w-0 {
  min-width: 0;
}

body {
  background-color: var(--ip-fondo);
}

/* El anillo interno usa --bs-body-bg (blanco en claro, oscuro en... oscuro) en vez de "white" fijo, para
   que no se note como un borde blanco pegado sobre un fondo oscuro; el anillo externo (#258cfb) es el
   indicador de foco real y ya tiene contraste de sobra sobre cualquiera de los dos fondos. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem #258cfb;
}

/* Estructura general de la aplicación */

.ip-shell {
  display: flex;
  min-height: 100vh;
}

.ip-area-principal {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.ip-contenido {
  flex: 1 1 auto;
  padding: 1rem;
}

@media (min-width: 992px) {
  .ip-contenido {
    padding: 2rem;
  }
}

/* Menú lateral */

.ip-menu {
  width: 260px;
}

@media (min-width: 992px) {
  .ip-menu.offcanvas-lg {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    flex-shrink: 0;
    border: none;
  }
}

.ip-menu-interno {
  background-color: var(--ip-primario);
  color: #fff;
  min-height: 100%;
}

.ip-menu-titulo {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}

.ip-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow-y: auto;
}

.ip-enlace-menu {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid transparent;
  border-radius: 0.25rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.ip-enlace-menu:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.ip-enlace-menu.active {
  border-left-color: var(--ip-acento);
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
}

.ip-enlace-menu .bi {
  font-size: 1.1rem;
}

.ip-menu-pie {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
}

.ip-texto-atenuado {
  color: rgba(255, 255, 255, 0.7);
}

.ip-boton-cerrar-sesion {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Selector de tema claro/oscuro/automático (static/js/tema.js + static/js/site.js): en el pie del menú
   lateral, y en compacto (sin la etiqueta "Tema" ni el estado en texto) bajo la tarjeta de acceso. */

.ip-selector-tema {
  margin-bottom: 0.75rem;
}

.ip-selector-tema-acceso {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* Barra superior (menor a lg) */

.ip-barra-superior {
  background-color: var(--ip-primario);
  color: #fff;
}

.ip-barra-superior .ip-marca-nombre {
  color: #fff;
}

.ip-boton-menu {
  color: #fff;
}

.ip-boton-menu:hover {
  color: #fff;
}

/* Marca de la institución (ViewComponent) */

.ip-marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  min-width: 0;
}

/* Fondo blanco fijo (no --ip-fondo): la imagen del escudo suele traer transparencia y en tema oscuro se
   perdería contra un fondo oscuro; se mantiene igual en los dos temas a propósito, igual que el fondo del
   código QR más abajo. */
.ip-marca-logo {
  height: 32px;
  width: 32px;
  object-fit: contain;
  background-color: #fff;
  border-radius: 0.25rem;
  padding: 2px;
  flex-shrink: 0;
}

.ip-marca-icono {
  font-size: 1.75rem;
  flex-shrink: 0;
}

.ip-marca-nombre {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* En el menú lateral el nombre usa hasta dos líneas: los nombres de instituciones suelen ser largos. */
.ip-menu .ip-marca-nombre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  line-height: 1.25;
}

.ip-marca-acceso {
  flex-direction: column;
  color: var(--ip-primario);
}

/* En tema oscuro estos tres ya no van sobre una tarjeta clara (Bootstrap oscurece ".card" con el mismo
   data-bs-theme): --ip-primario pasa a ser un azul muy oscuro (arriba) y dejaría el texto casi invisible,
   así que se usa el color de énfasis de Bootstrap, pensado justo para eso. */
[data-bs-theme="dark"] .ip-marca-acceso,
[data-bs-theme="dark"] .ip-marca-icono-acceso,
[data-bs-theme="dark"] .ip-marca-nombre-acceso {
  color: var(--bs-emphasis-color);
}

.ip-marca-logo-acceso {
  height: 64px;
  width: 64px;
  object-fit: contain;
}

.ip-marca-icono-acceso {
  font-size: 3rem;
  color: var(--ip-primario);
}

.ip-marca-nombre-acceso {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ip-primario);
}

/* Tarjetas */

.ip-tarjeta {
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
  border: none;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ip-tarjeta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}

.ip-tarjeta-deshabilitada {
  opacity: 0.7;
}

/* Página de acceso (login) */

/* "flex-direction: column" para que ".ip-selector-tema-acceso" (segundo hijo, agregado con el tema
   oscuro) quede DEBAJO de la tarjeta y no al lado: con la dirección por defecto ("row") ambos quedarían
   centrados uno junto al otro. Con un solo hijo (antes de este cambio) el resultado visual era igual. */
.ip-body-acceso {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: var(--ip-fondo);
}

.ip-tarjeta-acceso {
  width: 100%;
  max-width: 420px;
}

/* Botón de escanear en Inicio */

.ip-boton-escanear {
  width: 100%;
}

@media (min-width: 576px) {
  .ip-boton-escanear {
    width: auto;
    min-width: 280px;
  }
}

/* Logo de la institución en Configuración: fondo blanco fijo (no --ip-fondo), igual que
   ".ip-marca-logo", porque el logo puede traer transparencia. */
.ip-logo-vista-previa {
  max-width: 160px;
  max-height: 160px;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  background-color: #fff;
}

.ip-logo-vacio {
  background-color: #f8f9fa;
}

/* Código QR en la ficha del bien: fondo blanco fijo (sin relleno: encogería el código), igual que
   ".ip-marca-logo" y ".ip-etiqueta-qr" más abajo. El PNG que genera "patrimonio/servicios/qr.py" ya trae
   su propio fondo blanco con margen (zona de silencio, border=4) y cubre todo el recuadro, así que este
   respaldo solo importa mientras la imagen carga o si llegara a fallar. */
.ip-qr-ficha {
  width: 180px;
  height: 180px;
  max-width: 100%;
  background-color: #fff;
  image-rendering: pixelated;
}

/* Botones de acción en tablas: tamaño cómodo para pantalla táctil */

.ip-acciones-tabla .btn {
  min-width: 38px;
  min-height: 38px;
}

/* Formulario plegable para anular una baja o un alta (ficha del bien y sus listados): el <summary> se ve
   como un botón, sin la flecha de despliegue nativa del navegador. */

.ip-anular-plegable > summary {
  list-style: none;
  cursor: pointer;
}

.ip-anular-plegable > summary::-webkit-details-marker {
  display: none;
}

.ip-anular-plegable[open] > summary {
  margin-bottom: 0.5rem;
}

.ip-anular-plegable form {
  min-width: 220px;
  max-width: 100%;
}

/* Traslado y verificación desde la ficha del bien: trabajo de campo, tamaño cómodo para el dedo */

.ip-boton-campo {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Miniaturas de fotografías de bienes (ficha y formulario) */

/* El fondo es un literal a propósito, no un token de Bootstrap: en tema claro "--bs-tertiary-bg" vale
   #f8f9fa, no #fff, así que cambiaría (aunque sea sutilmente) el fondo detrás de fotos no cuadradas en
   el propio tema claro. En tema oscuro sí se adapta (regla siguiente): #fff fijo quedaría como un
   recuadro blanco pegado sobre el fondo oscuro. */
.ip-foto-miniatura {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  background-color: #fff;
}

[data-bs-theme="dark"] .ip-foto-miniatura {
  background-color: var(--bs-tertiary-bg);
}

/* Selección de filas para imprimir etiquetas (listado de bienes) */

.ip-columna-checkbox {
  width: 2.5rem;
}

/* Hoja de etiquetas para imprimir (Bienes/Etiquetas) */

.ip-etiquetas-cuadricula {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

@media (max-width: 575.98px) {
  .ip-etiquetas-cuadricula {
    grid-template-columns: 1fr;
  }
}

.ip-etiqueta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  break-inside: avoid;
}

/* Fondo blanco fijo, igual que ".ip-qr-ficha": esta es la vista previa en pantalla; al imprimir (@media
   print, más abajo) el color siempre es claro de todos modos. */
.ip-etiqueta-qr {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  background-color: #fff;
  image-rendering: pixelated;
}

.ip-etiqueta-texto {
  min-width: 0;
}

.ip-etiqueta-codigo {
  font-size: 1rem;
  font-weight: 700;
}

.ip-etiqueta-denominacion {
  font-size: 0.8rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* El color es un literal a propósito, no un token de Bootstrap: en tema claro "--bs-secondary-color"
   vale rgba(33, 37, 41, 0.75) (~#585b5e), no #6c757d, así que cambiaría el color del propio tema claro.
   El bloque @media print de más abajo repite este mismo literal por la misma razón. En tema oscuro sí
   se adapta (regla siguiente), porque #6c757d fijo quedaría con poco contraste sobre el fondo oscuro. */
.ip-etiqueta-ubicacion,
.ip-etiqueta-institucion {
  font-size: 0.7rem;
  color: #6c757d;
}

[data-bs-theme="dark"] .ip-etiqueta-ubicacion,
[data-bs-theme="dark"] .ip-etiqueta-institucion {
  color: var(--bs-secondary-color);
}

/* Escáner de código QR con la cámara */

.ip-escaner-video-contenedor {
  position: relative;
  width: 100%;
  max-width: 480px;
  /* Antes de iniciar la cámara el video no tiene tamaño: la proporción fija evita que la guía se deforme. */
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  background-color: #000;
  border-radius: 0.375rem;
  overflow: hidden;
}

.ip-escaner-video {
  display: block;
  width: 100%;
  height: auto;
}

.ip-escaner-guia {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 0.5rem;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* Impresión: solo se imprimen las etiquetas (Bienes/Etiquetas); el resto de las páginas tampoco
   imprime el menú lateral ni la barra superior. Los elementos con "ip-no-imprimir" son avisos o
   botones que solo tienen sentido en pantalla. */

@media print {
  /* Siempre en claro, aunque la pantalla esté en tema oscuro: "color-scheme" evita que el navegador
     aplique su propio ajuste oscuro a lo que no tenga un color explícito, y "body" fuerza fondo blanco y
     texto negro por si el usuario tiene activado "imprimir gráficos de fondo" (si no lo tiene, el
     navegador ya omite el fondo oscuro por su cuenta, pero el texto sin este ajuste seguiría siendo el
     gris claro de --bs-body-color en oscuro, casi ilegible sobre el papel). */
  html {
    color-scheme: light;
  }

  body {
    background-color: #fff;
    color: #000;
  }

  .ip-menu,
  .ip-barra-superior,
  .ip-no-imprimir {
    display: none !important;
  }

  .ip-shell {
    display: block;
  }

  .ip-contenido {
    padding: 0;
  }

  .ip-etiqueta {
    border-color: #adb5bd;
  }

  /* El QR (".ip-etiqueta-qr") ya es una imagen opaca con su propio fondo blanco: no depende de esto. */
  .ip-etiqueta-ubicacion,
  .ip-etiqueta-institucion {
    color: #6c757d;
  }

  @page {
    margin: 8mm;
  }
}

/* Campos compactos de las acciones del panel del Maestro (motivo y rol en línea con el botón) */

.ip-campo-motivo {
  width: 12rem;
}

.ip-campo-rol {
  width: 10rem;
}

/* Barra de avance de la toma de inventario (Inventario/Index): el atributo style está prohibido, así que el
   ancho de la barra se fija con una clase por decena en vez de un porcentaje exacto en línea. */

.ip-ancho-0 { width: 0%; }
.ip-ancho-10 { width: 10%; }
.ip-ancho-20 { width: 20%; }
.ip-ancho-30 { width: 30%; }
.ip-ancho-40 { width: 40%; }
.ip-ancho-50 { width: 50%; }
.ip-ancho-60 { width: 60%; }
.ip-ancho-70 { width: 70%; }
.ip-ancho-80 { width: 80%; }
.ip-ancho-90 { width: 90%; }
.ip-ancho-100 { width: 100%; }

/* Selector de nivel (RadioSelect, sin JavaScript en línea) en el editor de roles (Maestro/Roles/Crear y
   Editar): la celda "Nivel" de la tabla "table-sm" es angosta en un celular y el <label> por defecto de
   Django partía "Administrar" en dos líneas, dejando el círculo del radio solo en la primera y la palabra
   sola en la segunda, como si fuera una quinta opción vacía. Se apilan las opciones y se evita el salto de
   línea dentro de cada una; la tabla ya es "table-responsive" (crear.html/editar.html) y se desplaza
   horizontalmente si hiciera falta más ancho. */
.ip-niveles-rol div + div {
  margin-top: 0.35rem;
}

.ip-niveles-rol label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}