/*!
 * inge.css - identidad visual de Ingelectra sobre Bootstrap 5.3.8
 *
 * Generado a partir de la paleta oficial de marca aplicando las mismas
 * funciones que usa Bootstrap al compilar (shade-color, tint-color,
 * color-contrast), para que los estados de hover, activo y deshabilitado
 * se comporten igual que en una compilacion real de SASS.
 *
 * Fuente: sistema de diseno Ingelectra Electromecanica (tokens.json).
 * No editar a mano: se regenera.
 */

:root,
[data-bs-theme=light] {
  /* Colores de marca, en crudo, para usarlos fuera de Bootstrap. */
  --ig-verde-noche: #293633;
  --ig-verde-bosque: #2A3E36;
  --ig-amarillo: #F3B316;
  --ig-arena: #BEA584;
  --ig-piedra: #D6D4CF;

  /* Nombres de uso, que son los que leen los estilos del sitio. */
  --ig-verde: var(--ig-verde-noche);
  --ig-verde-oscuro: #1f2926;
  --ig-gris: var(--ig-piedra);
  --ig-enfoque: var(--ig-verde-noche);

  /* Tipografia: titulares en Helvetica Neue (con licencia; si no esta
     instalada cae a Helvetica/Arial) y texto en Montserrat. */
  --ig-font-display: "Helvetica Neue LT Pro", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  --ig-font-sans: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-body-font-family: var(--ig-font-sans);

  /* Texto en verde-noche; el secundario, en verde-bosque. */
  --bs-body-color: #293633;
  --bs-body-color-rgb: 41, 54, 51;
  --bs-emphasis-color: #293633;
  --bs-emphasis-color-rgb: 41, 54, 51;
  --bs-secondary-color: rgba(42, 62, 54, 0.8);
  --bs-secondary-color-rgb: 42, 62, 54;
  --bs-tertiary-bg: #f3f2f1;
  --bs-tertiary-bg-rgb: 243, 242, 241;
  --bs-border-color: #D6D4CF;

  /* La marca es ortogonal: radio 0 en botones, tarjetas, campos y bloques. */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;

  /* Redefinicion de la paleta de Bootstrap. */
  --bs-primary: #293633;
  --bs-secondary: #f3b316;
  --bs-success: #293633;
  --bs-info: #5a6165;
  --bs-warning: #f3b316;
  --bs-danger: #b02a2a;
  --bs-light: #d6d4cf;
  --bs-dark: #2a3e36;

  --bs-primary-rgb: 41, 54, 51;
  --bs-secondary-rgb: 243, 179, 22;
  --bs-success-rgb: 41, 54, 51;
  --bs-info-rgb: 90, 97, 101;
  --bs-warning-rgb: 243, 179, 22;
  --bs-danger-rgb: 176, 42, 42;
  --bs-light-rgb: 214, 212, 207;
  --bs-dark-rgb: 42, 62, 54;

  /* Variantes suaves: alertas, badges y fondos las leen de aqui. */
  --bs-primary-text-emphasis: #101614;
  --bs-secondary-text-emphasis: #614809;
  --bs-success-text-emphasis: #101614;
  --bs-info-text-emphasis: #242728;
  --bs-warning-text-emphasis: #614809;
  --bs-danger-text-emphasis: #461111;
  --bs-light-text-emphasis: #565553;
  --bs-dark-text-emphasis: #111916;

  --bs-primary-bg-subtle: #d4d7d6;
  --bs-secondary-bg-subtle: #fdf0d0;
  --bs-success-bg-subtle: #d4d7d6;
  --bs-info-bg-subtle: #dedfe0;
  --bs-warning-bg-subtle: #fdf0d0;
  --bs-danger-bg-subtle: #efd4d4;
  --bs-light-bg-subtle: #f7f6f5;
  --bs-dark-bg-subtle: #d4d8d7;

  --bs-primary-border-subtle: #a9afad;
  --bs-secondary-border-subtle: #fae1a2;
  --bs-success-border-subtle: #a9afad;
  --bs-info-border-subtle: #bdc0c1;
  --bs-warning-border-subtle: #fae1a2;
  --bs-danger-border-subtle: #dfaaaa;
  --bs-light-border-subtle: #efeeec;
  --bs-dark-border-subtle: #aab2af;

  /* Enlaces y anillo de foco. */
  --bs-link-color: #293633;
  --bs-link-color-rgb: 41, 54, 51;
  --bs-link-hover-color: #212b29;
  --bs-link-hover-color-rgb: 33, 43, 41;
  --bs-focus-ring-color: rgba(41, 54, 51, 0.25);
}

/* Botones solidos. Bootstrap los compila con valores fijos, no con las
   variables de :root, asi que hay que redefinir cada uno. */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #293633;
  --bs-btn-border-color: #293633;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #232e2b;
  --bs-btn-hover-border-color: #212b29;
  --bs-btn-focus-shadow-rgb: 35, 46, 43;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212b29;
  --bs-btn-active-border-color: #1f2926;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #293633;
  --bs-btn-disabled-border-color: #293633;
}

.btn-secondary {
  --bs-btn-color: #293633;
  --bs-btn-bg: #f3b316;
  --bs-btn-border-color: #f3b316;
  --bs-btn-hover-color: #293633;
  --bs-btn-hover-bg: #f5be39;
  --bs-btn-hover-border-color: #f4bb2d;
  --bs-btn-focus-shadow-rgb: 207, 152, 19;
  --bs-btn-active-color: #293633;
  --bs-btn-active-bg: #f5c245;
  --bs-btn-active-border-color: #f4bb2d;
  --bs-btn-disabled-color: #293633;
  --bs-btn-disabled-bg: #f3b316;
  --bs-btn-disabled-border-color: #f3b316;
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #293633;
  --bs-btn-border-color: #293633;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #232e2b;
  --bs-btn-hover-border-color: #212b29;
  --bs-btn-focus-shadow-rgb: 35, 46, 43;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212b29;
  --bs-btn-active-border-color: #1f2926;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #293633;
  --bs-btn-disabled-border-color: #293633;
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #5a6165;
  --bs-btn-border-color: #5a6165;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4d5256;
  --bs-btn-hover-border-color: #484e51;
  --bs-btn-focus-shadow-rgb: 77, 82, 86;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #484e51;
  --bs-btn-active-border-color: #44494c;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #5a6165;
  --bs-btn-disabled-border-color: #5a6165;
}

.btn-warning {
  --bs-btn-color: #293633;
  --bs-btn-bg: #f3b316;
  --bs-btn-border-color: #f3b316;
  --bs-btn-hover-color: #293633;
  --bs-btn-hover-bg: #f5be39;
  --bs-btn-hover-border-color: #f4bb2d;
  --bs-btn-focus-shadow-rgb: 207, 152, 19;
  --bs-btn-active-color: #293633;
  --bs-btn-active-bg: #f5c245;
  --bs-btn-active-border-color: #f4bb2d;
  --bs-btn-disabled-color: #293633;
  --bs-btn-disabled-bg: #f3b316;
  --bs-btn-disabled-border-color: #f3b316;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #b02a2a;
  --bs-btn-border-color: #b02a2a;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #962424;
  --bs-btn-hover-border-color: #8d2222;
  --bs-btn-focus-shadow-rgb: 150, 36, 36;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #8d2222;
  --bs-btn-active-border-color: #842020;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #b02a2a;
  --bs-btn-disabled-border-color: #b02a2a;
}

.btn-light {
  --bs-btn-color: #293633;
  --bs-btn-bg: #d6d4cf;
  --bs-btn-border-color: #d6d4cf;
  --bs-btn-hover-color: #293633;
  --bs-btn-hover-bg: #dcdad6;
  --bs-btn-hover-border-color: #dad8d4;
  --bs-btn-focus-shadow-rgb: 182, 180, 176;
  --bs-btn-active-color: #293633;
  --bs-btn-active-bg: #deddd9;
  --bs-btn-active-border-color: #dad8d4;
  --bs-btn-disabled-color: #293633;
  --bs-btn-disabled-bg: #d6d4cf;
  --bs-btn-disabled-border-color: #d6d4cf;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #2a3e36;
  --bs-btn-border-color: #2a3e36;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #24352e;
  --bs-btn-hover-border-color: #22322b;
  --bs-btn-focus-shadow-rgb: 36, 53, 46;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #22322b;
  --bs-btn-active-border-color: #202f29;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #2a3e36;
  --bs-btn-disabled-border-color: #2a3e36;
}

/* Botones de contorno. */

.btn-outline-primary {
  --bs-btn-color: #293633;
  --bs-btn-border-color: #293633;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #293633;
  --bs-btn-hover-border-color: #293633;
  --bs-btn-focus-shadow-rgb: 41, 54, 51;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #293633;
  --bs-btn-active-border-color: #293633;
  --bs-btn-disabled-color: #293633;
  --bs-btn-disabled-border-color: #293633;
}

.btn-outline-secondary {
  --bs-btn-color: #f3b316;
  --bs-btn-border-color: #f3b316;
  --bs-btn-hover-color: #293633;
  --bs-btn-hover-bg: #f3b316;
  --bs-btn-hover-border-color: #f3b316;
  --bs-btn-focus-shadow-rgb: 243, 179, 22;
  --bs-btn-active-color: #293633;
  --bs-btn-active-bg: #f3b316;
  --bs-btn-active-border-color: #f3b316;
  --bs-btn-disabled-color: #f3b316;
  --bs-btn-disabled-border-color: #f3b316;
}

.btn-outline-success {
  --bs-btn-color: #293633;
  --bs-btn-border-color: #293633;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #293633;
  --bs-btn-hover-border-color: #293633;
  --bs-btn-focus-shadow-rgb: 41, 54, 51;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #293633;
  --bs-btn-active-border-color: #293633;
  --bs-btn-disabled-color: #293633;
  --bs-btn-disabled-border-color: #293633;
}

.btn-outline-info {
  --bs-btn-color: #5a6165;
  --bs-btn-border-color: #5a6165;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5a6165;
  --bs-btn-hover-border-color: #5a6165;
  --bs-btn-focus-shadow-rgb: 90, 97, 101;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5a6165;
  --bs-btn-active-border-color: #5a6165;
  --bs-btn-disabled-color: #5a6165;
  --bs-btn-disabled-border-color: #5a6165;
}

.btn-outline-warning {
  --bs-btn-color: #f3b316;
  --bs-btn-border-color: #f3b316;
  --bs-btn-hover-color: #293633;
  --bs-btn-hover-bg: #f3b316;
  --bs-btn-hover-border-color: #f3b316;
  --bs-btn-focus-shadow-rgb: 243, 179, 22;
  --bs-btn-active-color: #293633;
  --bs-btn-active-bg: #f3b316;
  --bs-btn-active-border-color: #f3b316;
  --bs-btn-disabled-color: #f3b316;
  --bs-btn-disabled-border-color: #f3b316;
}

.btn-outline-danger {
  --bs-btn-color: #b02a2a;
  --bs-btn-border-color: #b02a2a;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b02a2a;
  --bs-btn-hover-border-color: #b02a2a;
  --bs-btn-focus-shadow-rgb: 176, 42, 42;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a2a;
  --bs-btn-active-border-color: #b02a2a;
  --bs-btn-disabled-color: #b02a2a;
  --bs-btn-disabled-border-color: #b02a2a;
}

.btn-outline-light {
  --bs-btn-color: #d6d4cf;
  --bs-btn-border-color: #d6d4cf;
  --bs-btn-hover-color: #293633;
  --bs-btn-hover-bg: #d6d4cf;
  --bs-btn-hover-border-color: #d6d4cf;
  --bs-btn-focus-shadow-rgb: 214, 212, 207;
  --bs-btn-active-color: #293633;
  --bs-btn-active-bg: #d6d4cf;
  --bs-btn-active-border-color: #d6d4cf;
  --bs-btn-disabled-color: #d6d4cf;
  --bs-btn-disabled-border-color: #d6d4cf;
}

.btn-outline-dark {
  --bs-btn-color: #2a3e36;
  --bs-btn-border-color: #2a3e36;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2a3e36;
  --bs-btn-hover-border-color: #2a3e36;
  --bs-btn-focus-shadow-rgb: 42, 62, 54;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2a3e36;
  --bs-btn-active-border-color: #2a3e36;
  --bs-btn-disabled-color: #2a3e36;
  --bs-btn-disabled-border-color: #2a3e36;
}

/* Badges y fondos con texto: el color del texto va fijo en Bootstrap y
   deja de contrastar al cambiar la paleta. */
.text-bg-primary { color: #fff !important; background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-secondary { color: #293633 !important; background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-success { color: #fff !important; background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-info { color: #fff !important; background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-warning { color: #293633 !important; background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-danger { color: #fff !important; background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-light { color: #293633 !important; background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-dark { color: #fff !important; background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; }

/* Foco: anillo solido de 2px en verde-noche con 2px de separacion, en lugar
   del halo translucido de Bootstrap. */
:focus-visible {
  outline: 2px solid var(--ig-enfoque);
  outline-offset: 2px;
}

.btn:focus-visible,
.btn-close:focus-visible,
.form-check-input:focus,
.form-control:focus,
.form-select:focus {
  outline: 2px solid var(--ig-enfoque);
  outline-offset: 2px;
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: #293633;
}

.form-check-input:checked {
  background-color: #293633;
  border-color: #293633;
}

.form-check-input:focus {
  border-color: #293633;
}

/* --- Estilos propios del sitio --- */

/*
  Titulares en Helvetica Neue Heavy, como pide el sistema de diseño. Las
  mayúsculas van solo en los títulos de pantalla y de sección (h1 a h3): en
  encabezados de tarjeta y tablas un bloque entero en mayúsculas se lee peor.
*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ig-font-display);
  font-weight: 800;
}

h1, h2, h3,
.h1, .h2, .h3 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/*
  Rótulo: Helvetica Neue Medium en mayúsculas con tracking amplio, como
  «ELECTROMECÁNICA» en el logotipo. Para sobretítulos y pies.
*/
.ig-etiqueta {
  font-family: var(--ig-font-display);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/*
  Fondo de la pantalla de acceso: verde-noche liso. El sistema no usa
  degradados; el color de marca ocupa la superficie y la caja blanca va encima.
*/
body.ig-fondo {
  min-height: 100vh;
  background-color: var(--ig-verde-noche);
}

.ig-icono {
  width: 1.125em;
  height: 1.125em;
  vertical-align: -0.2em;
  flex: none;
}

/*
  Estados de un botón que alterna con wire:loading.

  El display va aquí SIN !important a propósito. Livewire muestra y oculta
  escribiendo display como estilo en línea, y un estilo en línea gana a una
  clase normal pero pierde contra !important: por eso las utilidades d-flex de
  Bootstrap rompen wire:loading y esta clase no.

  Es flex, y no inline-flex, para coincidir con lo que restaura el modificador
  .flex de wire:loading; si no, habría un salto de maquetación en el primer
  envío del formulario.
*/
.ig-boton-estado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Pantalla de acceso */

.ig-acceso {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/*
  Caja blanca y recta sobre el verde-noche. El filo inferior amarillo es la
  barra de pie de las láminas de la guía: el acento ocupa poca superficie.
*/
.ig-acceso__caja {
  width: 100%;
  max-width: 26rem;
  background-color: #fff;
  border-radius: 0;
  overflow: hidden;
  border-bottom: 0.5rem solid var(--ig-amarillo);
}

/*
  Logotipo horizontal en verde-noche sobre blanco, que es para lo que está
  hecho. La línea de piedra lo separa del formulario sin pesar.
*/
.ig-acceso__cabecera {
  padding: 2rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--ig-piedra);
  text-align: center;
}

/* A 15rem «ELECTROMECÁNICA» se lee de sobra: el mínimo de la guía es 120px. */
.ig-acceso__logo {
  width: 100%;
  max-width: 15rem;
  height: auto;
}

.ig-acceso__sitio {
  margin: 1rem 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.ig-acceso__cuerpo {
  padding: 1.5rem;
}

.ig-acceso__pie {
  padding: 0 1.5rem 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

/* --- Estructura de la aplicación --- */

/*
  Enlace de salto para quien navega con teclado: primero en el orden de
  tabulación y visible solo cuando tiene el foco, para no obligar a recorrer
  todo el menú lateral antes de llegar al contenido.
*/
.ig-saltar {
  position: absolute;
  left: -9999px;
  z-index: 1100;
  padding: 0.5rem 1rem;
  background-color: #fff;
  border-radius: 0;
}

.ig-saltar:focus {
  left: 0;
  top: 0;
}

body.ig-app {
  min-height: 100vh;
  background-color: var(--ig-gris);
}

.ig-app__marco {
  display: flex;
  min-height: 100vh;
}

.ig-app__columna {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;

  /* Sin esto, una tabla ancha ensancha la columna y desborda la ventana en
     lugar de desplazarse dentro de su contenedor. */
  min-width: 0;
}

.ig-app__contenido {
  flex: 1 1 auto;
  padding: 1.25rem 1rem;
}

@media (min-width: 992px) {
  .ig-app__contenido {
    padding: 1.75rem 2rem;
  }
}

/* --- Menú lateral --- */

/*
  Un solo marcado para las dos presentaciones, con offcanvas-lg de Bootstrap:
  panel deslizante por debajo de 992px y columna fija por encima. El velo, el
  bloqueo del desplazamiento, el foco y el cierre con Escape los pone Bootstrap.

  El panel va en verde-noche, la base de la marca. Contrastes medidos sobre
  #293633: texto blanco 12.58:1, enlaces al 92% 10.92:1, texto secundario al
  78% 8.34:1, iconos en amarillo de marca 6.75:1 y el enlace activo 14.96:1
  sobre el verde más oscuro. Todos llegan a AAA salvo el icono, que no lo
  necesita.

  El logotipo es la versión blanca del horizontal (logotipo-blanco.svg), la que
  pide la guía sobre verde-noche; el punto sigue en amarillo.
*/
.ig-barra {
  /* El cajón mide lo mismo que la columna de escritorio. */
  --bs-offcanvas-width: 16rem;

  /* Color del cajón en móvil, que lo pinta Bootstrap y no el panel. */
  --bs-offcanvas-bg: var(--ig-verde);
}

/* El relleno lo pone el panel de dentro, no el contenedor del offcanvas. */
.ig-barra .offcanvas-body {
  display: flex;
  padding: 0;
}

.ig-barra__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 16rem;

  /* Permite que el menú se desplace dentro del panel en vez de estirarlo. */
  min-height: 0;
  background-color: var(--ig-verde);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

/* Barra con el botón de cierre. Bootstrap la oculta sola a partir de 992px. */
.ig-barra__cierre {
  justify-content: flex-end;
  padding: 0.5rem 0.75rem;
  background-color: var(--ig-verde);
}

@media (min-width: 992px) {
  .ig-barra {
    flex: 0 0 16rem;
  }

  .ig-barra__panel {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}

/*
  Banda del logotipo. La altura mínima es mayor que el logo a propósito: así
  queda centrado de verdad dentro de su franja en vez de apoyado en el borde
  superior, que es lo que hacía el relleno asimétrico anterior.
*/
.ig-barra__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  padding: 1rem;

  /* Separación del bloque del usuario, que se suma a su propio relleno. */
  margin-bottom: 1rem;
}

/* 12rem: por encima de los 120px en que «ELECTROMECÁNICA» deja de leerse. */
.ig-barra__logo {
  width: 100%;
  max-width: 12rem;
  height: auto;
}

.ig-barra__usuario {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ig-barra__avatar {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--ig-amarillo);
}

.ig-barra__identidad {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ig-barra__nombre,
.ig-barra__puesto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-barra__nombre {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}

.ig-barra__puesto {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.78);
}

.ig-barra__menu {
  flex: 1 1 auto;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
}

.ig-barra__enlace {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9375rem;
  text-decoration: none;
}

/* Amarillo de marca: 6.75:1 sobre verde-noche, de sobra para un icono. */
.ig-barra__enlace .ig-icono {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: baseline;
  color: var(--ig-amarillo);
}

.ig-barra__enlace:hover,
.ig-barra__enlace:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/*
  El activo va en verde oscuro, un grado por debajo del panel, con el amarillo
  de marca como filo izquierdo. Es el papel que le da la guía al amarillo:
  acento y marca de posición, no fondo.
*/
.ig-barra__enlace--activo,
.ig-barra__enlace--activo:hover,
.ig-barra__enlace--activo:focus-visible {
  background-color: var(--ig-verde-oscuro);
  color: #fff;
  box-shadow: inset 0.1875rem 0 0 var(--ig-amarillo);
}

/*
  Cabecera de un grupo. Es un botón y no un enlace, así que hereda el aspecto
  de .ig-barra__enlace y aquí solo se deshace lo que trae un <button>.
*/
.ig-barra__grupo {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
}

/* El chevron no es marca: va en blanco apagado, no en el amarillo del icono. */
.ig-barra__grupo .ig-barra__chevron {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.15s ease-in-out;
}

/*
  La cabecera no se rellena al pasar por encima ni al recibir el foco. El velo
  blanco que llevan los enlaces desatura el verde de marca y lo deja gris, y
  aquí se ve de sobra: el puntero se queda encima mientras despliegas y lees lo
  que hay dentro. El resalte del puntero se conserva; lo que no se conserva es
  el del foco, que en un botón se queda pegado después de pulsarlo —un enlace
  no lo hace nunca porque navega—. Ahí el aviso lo da el aro de foco del tema.
*/
.ig-barra__grupo:focus-visible {
  background-color: transparent;
}

.ig-barra__grupo:hover .ig-barra__chevron,
.ig-barra__grupo:focus-visible .ig-barra__chevron {
  color: #fff;
}

.ig-barra__grupo[aria-expanded='true'] .ig-barra__chevron {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .ig-barra__grupo .ig-barra__chevron {
    transition: none;
  }
}

/*
  Los hijos de un grupo van sin icono, colgando de un filete: dentro de
  «Requisiciones» el icono de Requisiciones saldría dos veces, y una columna de
  dibujos casi iguales no distingue nada. El icono de cada acceso se sigue
  usando cuando el acceso sube a la raíz por ser el único concedido del grupo.
*/
.ig-barra__sub {
  margin: 0.125rem 0 0.25rem 1.4375rem;
  padding: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  list-style: none;
}

.ig-barra__sub .ig-barra__enlace {
  padding-left: 0.875rem;
  font-size: 0.875rem;
}

.ig-barra__vacio {
  padding: 1rem 0.75rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.78);
}

.ig-barra__sitio {
  margin: 0;
  padding: 0.625rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.78);
}

/* --- Barra superior --- */

.ig-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background-color: var(--ig-verde);
  color: #fff;
}

.ig-navbar__titulo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--ig-font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ig-navbar__menu {
  display: inline-flex;
  padding: 0.375rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}

@media (min-width: 992px) {
  .ig-navbar__menu {
    display: none;
  }
}

.ig-navbar__acciones {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ig-navbar__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: 0.875rem;
  text-decoration: none;
}

.ig-navbar__enlace:hover,
.ig-navbar__enlace:focus-visible {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* --- Pie --- */

/*
  El pie de las láminas de la guía: banda verde-noche con una línea fina, el
  rótulo de la empresa en blanco y un bloque cuadrado amarillo al extremo
  derecho. El relleno derecho deja sitio al bloque.
*/
.ig-pie {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  min-height: 3rem;
  padding: 0.75rem 4rem 0.75rem 1rem;
  background-color: var(--ig-verde-noche);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.78);
}

.ig-pie__rotulo {
  color: #fff;
}

.ig-pie::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3rem;
  background-color: var(--ig-amarillo);
}

/* --- Tablero --- */

.ig-tablero__saludo {
  margin-bottom: 1.5rem;
}

.ig-tablero__fecha {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.9375rem;
}

/* La primera letra del día viene en minúscula del formateador en español. */
.ig-tablero__fecha::first-letter {
  text-transform: uppercase;
}

.ig-tablero__seccion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--ig-verde);
}

.ig-novedad__imagen {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.ig-tablero__vacio-icono {
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0.5;
}

/* --- Catalogo de interfaz (x-ui.*) --- */

.ig-tabla__cabecera {
  background-color: var(--bs-tertiary-bg);
  font-family: var(--ig-font-display);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.ig-tabla__cabecera th {
  font-weight: 600;
  border-bottom-width: 1px;
}

.ig-tabla__vacio-icono {
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0.5;
}

/* El icono de una insignia acompana al texto: mas pequeno que el de un boton
   y sin peso propio, para que se lea la palabra y no el dibujo. */
.ig-insignia__icono {
  width: 0.875rem;
  height: 0.875rem;
}

/* Titulo de la pantalla mas las acciones que le corresponden, alineadas a la
   derecha y bajando de linea cuando no caben. Es de todas las pantallas y no
   solo de una: nacio en la Mesa de Servicio como .ig-tickets__encabezado. */
.ig-pagina__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* Barra de filtros de un listado. Los controles se alinean por su base para
   que las etiquetas de encima no descuadren las cajas entre si. */
.ig-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
}

/* Una casilla no tiene etiqueta encima, asi que sin esto se apoya en la base
   de la fila y queda mas baja que los desplegables de al lado. */
.ig-filtros__interruptor {
  margin-bottom: 0.375rem;
}

/* --- Mesa de Servicio --- */

.ig-tickets__numero {
  margin: 0.25rem 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ig-verde);
}

.ig-tickets__numero-linea {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ig-verde);
}

.ig-tickets__confirmacion-icono {
  width: 3rem;
  height: 3rem;
}

/* El salto de linea se respeta porque la descripcion la escribe el usuario en
   un textarea: sin esto, un parrafo con enumeraciones llega todo seguido. */
.ig-tickets__descripcion {
  white-space: pre-line;
  margin-bottom: 1.25rem;
}

.ig-tickets__ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bs-border-color);
}

.ig-tickets__ficha dt {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--bs-secondary-color);
}

.ig-tickets__ficha dd {
  margin: 0;
  font-weight: 600;
}

/* --- Resumen por estado del panel --- */

.ig-tickets__resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.ig-resumen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background-color: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0;
  text-align: left;
  line-height: 1.2;
}

.ig-resumen:hover {
  border-color: var(--ig-verde);
}

/* El filtro activo se marca con el amarillo de marca en el borde izquierdo,
   igual que la entrada activa del menu lateral. */
.ig-resumen--activo {
  border-color: var(--ig-verde);
  box-shadow: inset 0.1875rem 0 0 var(--ig-amarillo);
}

.ig-resumen__cifra {
  font-size: 1.125rem;
  font-weight: 700;
}

.ig-resumen__nombre {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

/* --- Conversacion --- */

.ig-comentario {
  padding: 0.75rem 0.875rem;
  margin-bottom: 0.75rem;
  background-color: var(--bs-tertiary-bg);
  border-radius: 0;
}

/* Las notas internas se distinguen por color Y por borde: quien no separa el
   amarillo del gris tiene que poder ver igualmente que un comentario no lo
   lee el solicitante. La insignia con candado lo dice ademas con palabras. */
.ig-comentario--interno {
  background-color: var(--bs-warning-bg-subtle);
  border-left: 0.1875rem solid var(--ig-amarillo);
}

.ig-comentario__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
}

.ig-comentario__texto {
  white-space: pre-line;
  margin: 0;
}

.ig-bitacora {
  max-height: 22rem;
  overflow-y: auto;
}

/* --- Paginas de error --- */

.ig-error__icono {
  width: 3rem;
  height: 3rem;
  opacity: 0.5;
}

/* --- Administracion --- */

/* El buscador se lleva el espacio sobrante de la barra de filtros: es lo que
   mas texto recibe y lo que peor se lee recortado. */
.ig-filtros__buscador {
  flex: 1 1 16rem;
  min-width: 0;
}

/* Nombres de acceso y codigos: se leen como identificadores, no como prosa.
   Monoespaciada para que el guion bajo y el uno se distingan del resto. */
.ig-admin__codigo {
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  color: var(--bs-emphasis-color);
}

/* Sin ancho fijo la columna del interruptor se estira y el switch queda
   perdido en medio de una celda vacia. */
.ig-admin__columna-interruptor {
  width: 6rem;
}

.ig-admin__omitidas {
  max-height: 12rem;
  overflow-y: auto;
  padding-left: 1.25rem;
  font-size: 0.875rem;
}


/* --- Fases --- */

/* Codigos de empleado, de proyecto y de fase: son identificadores, no prosa.
   Monoespaciada para que '1-1037' y '1-103' se distingan de un vistazo, que en
   este modulo es justo lo que hay que distinguir. */
.ig-fases__codigo {
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  /* Sin esto el navegador parte '01-01-11-02-03' por los guiones y un codigo
     de fase ocupa tres lineas, con lo que la fila se hace altisima. */
  white-space: nowrap;
}

/* El desplegable de fases lleva nombres largos. Sin un ancho minimo la columna
   se encoge hasta dejar la fase ilegible, y con uno fijo no cabe en un movil. */
.ig-fases__columna-fase {
  min-width: 14rem;
}

/* Un capataz por linea. La columna guarda '1-131,1-6228' y se pinta resuelta a
   nombres: en una sola linea la celda se hace tan ancha que empuja la tabla. */
.ig-fases__capataces {
  white-space: pre-line;
  font-size: 0.8125rem;
  /* Un capataz por linea, pero solo si el nombre cabe: sin ancho minimo,
     'PEREZ JIMENEZ ALLAN ALFONSO' se parte en cuatro y deja de leerse como un
     nombre. */
  min-width: 14rem;
}

/* Circulo del numero de paso en la ayuda de la pantalla. */
.ig-fases__paso {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0;
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

/* El historico de la auditoria tiene once columnas: si se dejan repartir el
   ancho de la pantalla, los nombres se parten palabra a palabra y cada fila crece
   hasta cinco lineas. Con un ancho minimo la tabla se desplaza en horizontal
   dentro de su tarjeta, que es para lo que esta el table-responsive. */
.ig-fases__historico table {
  min-width: 82rem;
}

/* Los nombres de fase del ERP son frases enteras ('ELECTRICO-POTENCIA-MANO DE
   OBRA-Canalizacion Y Cableado-Mo'). Se les da sitio para que no sean ellas
   solas las que estiren la altura de la fila. */
.ig-fases__nombre-fase {
  min-width: 17rem;
}

/* Los nombres del ERP vienen completos, con dos apellidos: sin sitio se parten
   en tres lineas y son ellos los que marcan la altura de toda la fila. */
.ig-fases__nombre {
  min-width: 11rem;
}
/* --- Documentos de bodega: boletas de EPP y requisiciones --- */
/* Los dos modulos arman la misma clase de pantalla -un encabezado y una grilla
   de lineas de articulo-, asi que estas reglas son de los dos. Lo unico propio
   de cada uno es el ancho minimo de su grilla, que depende de cuantas columnas
   tenga. */

/* Codigos de articulo y de fase: se leen como identificadores, no como prosa.
   Sin nowrap el navegador parte '03-01-04-02-08' por los guiones y una celda de
   fase ocupa tres lineas, con lo que crece la fila entera. */
.ig-codigo {
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* La grilla tiene diez columnas: si se dejan repartir el ancho de la pantalla,
   la descripcion se parte palabra a palabra y cada fila crece hasta cinco
   lineas. Con un ancho minimo la tabla se desplaza en horizontal dentro de su
   tarjeta, que es para lo que esta el table-responsive. El ancho es el que
   ocupa de forma natural: por encima solo se anade desplazamiento sin ganar
   legibilidad. */
.ig-epp__lineas table {
  min-width: 64rem;
}

/* El recuadro de la firma. Ancho completo y proporcion fija: el canvas se
   dibuja a 600x220 por dentro y se muestra al ancho que le deje la tarjeta, y
   el guion lleva las coordenadas del puntero de un sistema al otro.
   touch-action: none es lo que impide que el gesto de firmar arrastre la pagina
   en un telefono. */
.ig-firma {
  display: block;
  width: 100%;
  max-width: 37.5rem;
  height: auto;
  aspect-ratio: 600 / 220;
  margin-inline: auto;
  border: 2px dashed var(--bs-border-color);
  border-radius: 0;
  background-color: #fff;
  cursor: crosshair;
  touch-action: none;
}

/* La grilla de una requisicion tiene seis columnas y una de ellas es un campo
   de texto libre para el comentario, que necesita sitio para leerse mientras se
   escribe. */
.ig-req__lineas table {
  min-width: 52rem;
}

/* Las descripciones del ERP son frases enteras ('PANITO MICROFIBRA USO
   GENERAL'). Se les da sitio para que no sean ellas solas las que marquen la
   altura de la fila. */
.ig-descripcion {
  min-width: 16rem;
}

/* Sin ancho fijo la columna de la cantidad se estira y el campo queda perdido
   en medio de una celda vacia. */
.ig-columna-cantidad {
  width: 7rem;
}

/* La grilla de una solicitud de compra tiene nueve columnas -las seis de una
   requisicion mas lo que hay en bodega, el saldo del presupuesto y la fecha
   requerida de cada linea-, asi que necesita mas sitio antes de desplazarse. */
.ig-soli__lineas table {
  min-width: 76rem;
}

/* El selector de fecha del navegador tiene ancho propio y sin esto la columna
   se encoge por debajo de el. */
.ig-columna-fecha {
  width: 10rem;
}

/* Lo que pinta Alpine no se ve hasta que Alpine arranca. Sin esto, abrir el
   buscador antes de que cargue el guion ensena los tres mensajes a la vez: el
   recuento del catalogo, el "ningun articulo casa" y la lista. */
[x-cloak] {
  display: none !important;
}

/* La lista de resultados del buscador se desplaza dentro de la ventana en vez
   de estirarla: con veinte resultados, el boton de cerrar se salia de la
   pantalla. */
.ig-resultados {
  max-height: 24rem;
  overflow-y: auto;
}

/* El acta que quien despacha coteja antes de entregar. Alto fijo porque el
   visor de PDF del navegador no sabe encogerse al contenido: sin esto, el
   <embed> se queda en cero y no se ve nada. */
.ig-epp__acta-pdf {
  display: block;
  width: 100%;
  height: 30rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

/* El texto del acta se lee entero antes de firmar: justificado y con las lineas
   algo mas sueltas que el resto de la interfaz. */
.ig-epp__acta {
  text-align: justify;
  line-height: 1.6;
}

/* --- Evaluaciones de desempeno --- */

/* Cada tarjeta es un encargo o un periodo del historial. El realce al pasar por
   encima es lo unico que dice que se puede pulsar: no llevan boton. */
.ig-evaluaciones__encargo {
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ig-evaluaciones__encargo:hover,
.ig-evaluaciones__encargo:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--bs-box-shadow) !important;
}

/* Lo ya entregado se apaga, para que lo pendiente resalte sin necesidad de
   leer la insignia de cada tarjeta. */
.ig-evaluaciones__encargo--hecha {
  background-color: var(--bs-tertiary-bg);
}

/* La nota es el dato que se busca al abrir la pantalla. */
.ig-evaluaciones__nota {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
}

/* La columna de conductas lleva un parrafo por opcion, asi que sin un ancho
   minimo la tabla las estrecha hasta partir cada linea en tres. */
.ig-evaluaciones__cuestionario {
  min-width: 46rem;
}

/* Los comentarios los escribe la gente en un textarea: se respetan sus saltos
   de linea, como en la descripcion de un ticket. */
.ig-evaluaciones__comentario {
  white-space: pre-line;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-tertiary-bg);
}

.ig-evaluaciones__comentario:last-child {
  margin-bottom: 0;
}


/* --- Compras: solicitudes y ordenes de compra --- */

/* Siete columnas, y tres de ellas son texto largo del ERP: la descripcion del
   articulo, el nombre de la fase y el comentario de la linea. Los nombres de
   fase de Exactus llegan a los ochenta caracteres -'MECANICO-GASES MEDICOS-EQ.
   MENORES-Flujometro, Regulador Vacio, Botella, Otro'-, asi que sin un minimo
   generoso la tabla los parte en una palabra por linea. */
.ig-compras__lineas table {
  min-width: 68rem;
}

/* La de ordenes de compra lleva nueve columnas: las seis cifras del pedido
   -pedida, recibida, precio, monto- mas el centro de costo, que en solicitudes
   va en su propia columna pero sin las cantidades al lado. */
.ig-compras__lineas--orden table {
  min-width: 76rem;
}

.ig-compras__fase,
.ig-compras__comentario-linea {
  min-width: 13rem;
}

/* El comentario de la solicitud lo escribe quien la pide, en un campo libre:
   se respetan sus saltos de linea, como en la descripcion de un ticket. */
.ig-compras__comentario {
  white-space: pre-line;
  margin-bottom: 0;
  padding: 0.75rem;
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-tertiary-bg);
}

/* --- Subcontratos --- */

/* El pie de una tabla que suma columnas. Se separa del cuerpo con un borde
   propio y no con un fondo de color: el pie de la tabla de avances del sistema
   anterior va en gris solido con letra blanca, que a 0.8 de opacidad deja las
   cifras peor contrastadas que el resto de la tabla. */
.ig-tabla__pie {
  border-top: 2px solid var(--bs-border-color);
  font-weight: 600;
}

/* Diez columnas de cifras no caben en un telefono: la tabla se desplaza dentro
   de su contenedor en vez de estirar la pagina. */
.ig-subcontrato__avances {
  min-width: 62rem;
}

/* --- Impresion --- */

/* El reporte de un subcontrato se imprime: sustituye a la pantalla 'imprimir'
   del sistema anterior, que era esta misma tabla duplicada en otra vista y con
   otra plantilla. Lo que sobra en papel es el armazon del sitio y los botones;
   el contenido se imprime tal cual. */
@media print {
  .ig-barra,
  .ig-navbar,
  .ig-pie,
  .ig-saltar,
  .ig-sin-impresion {
    display: none !important;
  }

  .ig-app__contenido {
    padding: 0;
  }

  /* En papel no hay desplazamiento horizontal que valga: la tabla ancha se
     imprime entera y con la letra mas pequena. */
  .table-responsive {
    overflow: visible !important;
  }

  .ig-subcontrato__avances {
    min-width: 0;
    font-size: 0.75rem;
  }

  /* Las tarjetas con sombra y sin borde se ven como manchas al imprimir. */
  .card {
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
}

/* Siete columnas, dos de ellas con un campo dentro: en un telefono no caben. */
.ig-subcontrato__rubros {
  min-width: 58rem;
}

/* El campo del porcentaje no tiene por que ocupar toda la celda: con cinco
   caracteres -'99.99'- sobra, y asi la columna no empuja a las demas. */
.ig-subcontrato__porcentaje {
  max-width: 7rem;
  margin-left: auto;
}

/* Un documento en Markdown convertido a HTML (el contrato de la OT). No hay
   clases dentro -lo escribe CommonMark-, asi que se estiliza por etiqueta,
   solo dentro de .ig-documento. */
.ig-documento {
  max-width: 62rem;
  line-height: 1.6;
}

.ig-documento h2 {
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.ig-documento h3 {
  font-size: 1.1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bs-border-color);
}

.ig-documento blockquote {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--ig-amarillo);
  background: var(--bs-tertiary-bg);
}

.ig-documento blockquote p:last-child {
  margin-bottom: 0;
}

/* Las tablas del contrato tienen columnas de texto largo: en un telefono
   se desplazan dentro de su caja en vez de romper la pagina. */
.ig-documento table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.ig-documento th,
.ig-documento td {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--bs-border-color);
  vertical-align: top;
}

.ig-documento th {
  background: var(--bs-tertiary-bg);
}

.ig-documento pre {
  padding: 0.75rem 1rem;
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
  font-size: 0.8rem;
}

.ig-documento code {
  color: var(--ig-verde);
}

.ig-documento pre code {
  color: inherit;
}