/* =====================================================================
   Identidad visual
   Valores originales: paleta del logo de Grupo de Transporte ATM, C.A.
   (azul marino #192A89, turquesa #00A7BF, verde agua #A9CABD). Se cambian
   en Desarrollador → Configuración: base.html vuelve a definir estas
   variables con los colores guardados (ver app/marca.py).
   ===================================================================== */
:root {
  --color-principal: #192A89;          --color-principal-rgb: 25, 42, 137;
  --color-principal-suave: #E8EAF3;
  --color-principal-borde: #BABFDC;
  --color-menu: #131F66;               --color-menu-rgb: 19, 31, 102;
  --color-menu-oscuro: #0F1952;        --color-menu-oscuro-rgb: 15, 25, 82;
  --color-acento: #00A7BF;             --color-acento-rgb: 0, 167, 191;
  --color-acento-oscuro: #00879B;      --color-acento-oscuro-rgb: 0, 135, 155;
  --color-acento-suave: #DEF4F7;
  --color-secundario: #A9CABD;         --color-secundario-rgb: 169, 202, 189;
  --color-fondo: #F2F6F4;
  --color-borde: #DFE7E3;
  --sombra: 0 1px 2px rgba(var(--color-menu-rgb), .05), 0 2px 8px rgba(var(--color-menu-rgb), .06);

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: #1F2A44;
  --bs-primary: var(--color-principal);
  --bs-primary-rgb: var(--color-principal-rgb);
  --bs-primary-text-emphasis: var(--color-menu-oscuro);
  --bs-primary-bg-subtle: var(--color-principal-suave);
  --bs-primary-border-subtle: var(--color-principal-borde);
  --bs-info: var(--color-acento);
  --bs-info-rgb: var(--color-acento-rgb);
  --bs-link-color: var(--color-principal);
  --bs-link-color-rgb: var(--color-principal-rgb);
  --bs-link-hover-color: var(--color-acento-oscuro);
  --bs-link-hover-color-rgb: var(--color-acento-oscuro-rgb);
  --bs-border-color: var(--color-borde);
  --bs-border-radius: .55rem;
  --bs-border-radius-lg: .8rem;
  --bs-focus-ring-color: rgba(var(--color-acento-rgb), .25);
}

body { background: var(--color-fondo); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: "Montserrat", var(--bs-body-font-family);
  font-weight: 700; font-size: 1.55rem; color: var(--color-menu);
}
h1 .ti { color: var(--color-acento); vertical-align: -.1em; margin-right: .15rem; }
h2.h5, .h5 { font-weight: 600; color: var(--color-menu); }

/* ---------------------------------------------------------------------
   Botones y formularios con los colores de la marca
   --------------------------------------------------------------------- */
.btn { font-weight: 500; }
.btn .ti { font-size: 1.15em; vertical-align: -.15em; }
.btn-primary {
  --bs-btn-bg: var(--color-principal); --bs-btn-border-color: var(--color-principal);
  --bs-btn-hover-bg: var(--color-menu); --bs-btn-hover-border-color: var(--color-menu);
  --bs-btn-active-bg: var(--color-menu-oscuro); --bs-btn-active-border-color: var(--color-menu-oscuro);
  --bs-btn-disabled-bg: var(--color-principal); --bs-btn-disabled-border-color: var(--color-principal);
  --bs-btn-focus-shadow-rgb: var(--color-acento-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--color-principal); --bs-btn-border-color: var(--color-principal);
  --bs-btn-hover-bg: var(--color-principal); --bs-btn-hover-border-color: var(--color-principal); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--color-menu); --bs-btn-active-border-color: var(--color-menu); --bs-btn-active-color: #fff;
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--color-principal); scrollbar-width: none; }
.nav-pills::-webkit-scrollbar { display: none; }
.nav-pills .nav-link:not(.active) { color: var(--color-principal); }
.form-control:focus, .form-select:focus { border-color: var(--color-acento); box-shadow: 0 0 0 .25rem rgba(var(--color-acento-rgb), .2); }
.form-check-input:checked { background-color: var(--color-acento); border-color: var(--color-acento); }
.form-check-input:focus { border-color: var(--color-acento); box-shadow: 0 0 0 .25rem rgba(var(--color-acento-rgb), .2); }
.form-label { font-weight: 500; }

/* Pensado para tablets: objetivos táctiles de al menos 44 px */
.form-control, .form-select, .btn:not(.btn-sm) { min-height: 2.75rem; }
.form-check-input { width: 1.4em; height: 1.4em; }
.form-switch .form-check-input { width: 2.6em; }

/* ---------------------------------------------------------------------
   Etiquetas de estado
   --------------------------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .01em; }
.text-bg-naranja { background-color: #FD7E14 !important; color: #fff !important; }
.text-bg-info { color: #04323A !important; }

/* ---------------------------------------------------------------------
   Estructura: menú lateral + contenido
   --------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }
.contenido { flex: 1 1 auto; min-width: 0; }
.contenido-principal { max-width: 1440px; padding: 1.5rem 1rem 2rem; }
@media (min-width: 768px) { .contenido-principal { padding: 1.75rem 2rem 2.5rem; } }

.sidebar .offcanvas-lg {
  --bs-offcanvas-width: 280px;
  --bs-offcanvas-bg: var(--color-menu);
  --bs-offcanvas-color: #fff;
}
.sidebar .offcanvas-header { padding: .75rem .75rem 0; }
.sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; }

@media (min-width: 992px) {
  .sidebar {
    width: 264px; flex-shrink: 0;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: var(--color-menu); color: #fff;
    display: flex; flex-direction: column;
  }
  .sidebar .offcanvas-lg { display: flex; flex-direction: column; flex: 1 1 auto; }
  .sidebar .offcanvas-body { flex: 1 1 auto; }
}

.sidebar-marca { display: block; padding: 1.25rem 1.25rem .75rem; text-decoration: none; }
.sidebar-logo { display: block; width: 100%; max-width: 13rem; height: auto; max-height: 7rem; object-fit: contain; margin: 0 auto; }

.sidebar-nav { padding-bottom: 1rem; }
.sidebar-seccion {
  padding: 1rem 1.5rem .35rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(var(--color-secundario-rgb), .7);
}
.sidebar-enlace {
  position: relative; display: flex; align-items: center; gap: .8rem;
  margin: .1rem .75rem; padding: .6rem .8rem; min-height: 2.75rem;
  border-radius: .65rem; text-decoration: none; font-weight: 500;
  color: rgba(255, 255, 255, .82); transition: background-color .15s, color .15s;
}
.sidebar-enlace .ti { font-size: 1.35rem; color: var(--color-secundario); transition: color .15s; }
.sidebar-enlace:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-enlace:hover .ti { color: #fff; }
.sidebar-enlace.activo { background: rgba(var(--color-acento-rgb), .2); color: #fff; }
.sidebar-enlace.activo .ti { color: var(--color-acento); }
.sidebar-enlace.activo::before {
  content: ""; position: absolute; left: -.75rem; top: .45rem; bottom: .45rem;
  width: 4px; border-radius: 0 4px 4px 0; background: var(--color-acento);
}
.sidebar-enlace:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }

.sidebar-usuario { margin-top: auto; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, .1); color: #fff; }
.sidebar-rol { color: var(--color-secundario); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--color-acento); color: var(--color-menu-oscuro); font-weight: 700; font-size: .9rem;
}
.btn-sidebar {
  --bs-btn-color: rgba(255, 255, 255, .85); --bs-btn-border-color: rgba(255, 255, 255, .22);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .1); --bs-btn-hover-border-color: rgba(255, 255, 255, .35);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .15);
  padding: .4rem .5rem;
}

/* Barra superior (tablet vertical y celular) */
.barra-superior {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; background: var(--color-menu); color: #fff;
  box-shadow: 0 2px 8px rgba(var(--color-menu-oscuro-rgb), .25);
}
.btn-menu { color: #fff; font-size: 1.6rem; line-height: 1; padding: .35rem .5rem; border: 0; }
.btn-menu:hover, .btn-menu:focus { color: var(--color-acento); }
.barra-marca {
  display: flex; align-items: center; gap: .65rem; text-decoration: none; color: #fff;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: .95rem;
}
.barra-logo { height: 2rem; width: auto; max-width: 60vw; object-fit: contain; display: block; }

/* ---------------------------------------------------------------------
   Tarjetas y tablas
   --------------------------------------------------------------------- */
.card { border-color: var(--color-borde); border-radius: .8rem; box-shadow: var(--sombra); }
.card-header { background: #fff; border-bottom-color: var(--color-borde); font-weight: 600; color: var(--color-menu); }
.card-header:first-child { border-radius: calc(.8rem - 1px) calc(.8rem - 1px) 0 0; }
.list-group { box-shadow: var(--sombra); border-radius: .8rem; }
.list-group-item { border-color: var(--color-borde); }

.table-responsive { background: #fff; border: 1px solid var(--color-borde); border-radius: .8rem; box-shadow: var(--sombra); }
.table-responsive > .table { margin: 0 !important; }
.card .table-responsive { border: 0; border-radius: 0 0 .8rem .8rem; box-shadow: none; }
.tabla td, .tabla th { vertical-align: middle; padding: .7rem .75rem; }
.tabla td:first-child, .tabla th:first-child { padding-left: 1.1rem; }
/* Listas que deben caber en una pantalla sin desplazarse (la bitácora, de a 10) */
.tabla-compacta td { padding-top: .45rem; padding-bottom: .45rem; }
.texto-recortado { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla thead th {
  white-space: nowrap; background: #F6F9F8; color: #56627D;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--color-borde);
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------------
   Inicio: indicadores
   --------------------------------------------------------------------- */
.indicador {
  display: flex; flex-direction: row; align-items: center; gap: .9rem;
  height: 100%; padding: 1rem 1.1rem; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.indicador:hover { transform: translateY(-1px); }
.indicador:hover { border-color: var(--color-acento); }
.indicador-icono {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.9rem; height: 2.9rem; border-radius: .8rem; font-size: 1.5rem;
}
.indicador-numero { font-family: "Montserrat", sans-serif; font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--color-menu); }
.indicador-texto { font-size: .82rem; color: #5B6680; margin-top: .2rem; }
.indicador.vacio { opacity: .55; }
.tono-rojo     { background: #FCE8EA; color: #C42B3A; }
.tono-naranja  { background: #FFF0E3; color: #D9620A; }
.tono-amarillo { background: #FFF6D9; color: #A87A00; }
.tono-marino   { background: var(--color-principal-suave); color: var(--color-principal); }
.tono-turquesa { background: var(--color-acento-suave); color: var(--color-acento-oscuro); }
.tono-verde    { background: #E2F2EC; color: #23845A; }

/* ---------------------------------------------------------------------
   Formulario de inspección: todo viene en OK, solo se toca lo que falla
   --------------------------------------------------------------------- */
.checklist .item {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .6rem 1rem; border-bottom: 1px solid var(--color-borde);
}
.checklist .item:last-child { border-bottom: 0; }
.checklist .item-nombre { flex: 1 1 14rem; }
.checklist .btn-group .btn { min-width: 4.75rem; }
.checklist .falla-detalle { display: none; flex-basis: 100%; }
.checklist .item:has(input[value="FALLA"]:checked) { background: var(--bs-danger-bg-subtle); }
.checklist .item:has(input[value="FALLA"]:checked) .falla-detalle { display: block; }
/* ¿La falla deja la maquinaria inoperativa? Con «Sí» la fila se marca más fuerte */
.checklist .falla-inoperativa { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .5rem; }
.checklist .item:has(input[value="FALLA"]:checked):has(input[name^="inoperativa_"][value="SI"]:checked) {
  box-shadow: inset 4px 0 0 var(--bs-danger);
}
.checklist .item:has(input[value="NA"]:checked) .item-nombre { color: var(--bs-secondary-color); }
.checklist-categoria {
  padding: .5rem 1rem; background: #F6F9F8; border-bottom: 1px solid var(--color-borde);
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-acento-oscuro);
}

.resumen-fallas { position: sticky; bottom: 0; z-index: 10; }

@media (max-width: 575.98px) {
  .checklist .btn-group { width: 100%; }
  .checklist .btn-group .btn { flex: 1; }
}

/* ---------------------------------------------------------------------
   Inicio de sesión
   --------------------------------------------------------------------- */
.pagina-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--color-menu);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(var(--color-acento-rgb), .22), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(var(--color-secundario-rgb), .18), transparent 50%);
}
.pagina-login main { width: 100%; padding: 1.5rem 1rem 6rem; position: relative; z-index: 1; }
.login-tarjeta { max-width: 26rem; margin: 0 auto; border: 0; border-radius: 1.25rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.login-logo { display: block; width: 78%; max-width: 15rem; max-height: 10rem; object-fit: contain; margin: 0 auto 1rem; }
.login-olas .ola-1 { fill: var(--color-acento); }
.login-olas .ola-2 { fill: var(--color-secundario); }
.login-olas { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 7rem; z-index: 0; }
.login-pie { text-align: center; margin-top: 1.5rem; font-size: .8rem; color: rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------------------
   Configuración: colores y logos
   --------------------------------------------------------------------- */
.color-fila {
  display: grid; grid-template-columns: auto 1fr auto auto; column-gap: .75rem; align-items: center;
  grid-template-areas: "selector nombre original hex" "selector uso original hex";
  padding: .7rem 0; border-bottom: 1px solid var(--color-borde);
}
.color-selector { grid-area: selector; width: 3.25rem; height: 2.75rem; padding: .25rem; }
.color-nombre { grid-area: nombre; align-self: end; }
.color-uso { grid-area: uso; align-self: start; }
.color-original { grid-area: original; }
.color-hex { grid-area: hex; width: 7.25rem; text-transform: uppercase; }
/* En el teléfono la descripción pasa abajo, a todo lo ancho */
@media (max-width: 575.98px) {
  .color-fila { grid-template-areas: "selector nombre original hex" "uso uso uso uso"; row-gap: .35rem; }
  .color-nombre { align-self: center; }
}
.vista-previa { padding: 1rem; border-radius: .8rem; background: var(--color-fondo); }
.logo-muestra {
  display: flex; align-items: center; justify-content: center; min-height: 8rem; padding: 1.25rem;
  margin-bottom: .75rem; border: 1px solid var(--color-borde); border-radius: .8rem; background: #fff;
}
.logo-muestra-menu { background: var(--color-menu); border-color: transparent; }
.logo-muestra img { max-width: 100%; max-height: 6rem; object-fit: contain; }

/* ---------------------------------------------------------------------
   Operaciones: tablero y reporte de viaje
   --------------------------------------------------------------------- */
.texto-largo { white-space: pre-line; }
/* El tablero: la flota como íconos de lanchas del mismo tamaño; el color dice su disponibilidad. Las etiquetas siempre
   se ven, porque en la tablet no hay cursor. Con cursor, al pasarlo la lancha se resalta y se mece sobre las olas. */
.flota { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .5rem; }
@media (min-width: 768px) {
  .flota { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.25rem; }
}
.flota-lancha {
  --lancha-tono: var(--bs-secondary);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1rem .5rem; border-radius: 1rem; overflow-wrap: anywhere;
  transition: background-color .2s, box-shadow .2s, transform .2s;
}
.flota-disponible { --lancha-tono: #23845A; }
.flota-en_servicio { --lancha-tono: var(--color-acento-oscuro); }
.flota-no_operativa { --lancha-tono: var(--bs-danger); }
.flota-inactiva .flota-icono { opacity: .5; }
.flota-icono { display: block; width: min(100%, 9.5rem); margin-bottom: .5rem; border-radius: .75rem; color: var(--lancha-tono); }
.flota-nombre { font-weight: 600; font-size: 1.15rem; line-height: 1.25; color: var(--color-menu); }
.lancha-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lancha-barco { transform-box: fill-box; transform-origin: 50% 90%; transition: filter .2s; }
.flota-lancha:focus-within { background: #fff; box-shadow: var(--sombra); }
@media (hover: hover) {
  .flota-lancha:hover { background: #fff; box-shadow: 0 6px 20px rgba(var(--color-menu-rgb), .14); transform: translateY(-4px); }
  .flota-lancha:hover .lancha-barco { filter: drop-shadow(0 5px 5px rgba(var(--color-menu-rgb), .3)); animation: lancha-mecerse 1.8s ease-in-out infinite; }
  .flota-lancha:hover .lancha-olas { animation: lancha-olas 1.8s linear infinite; }
}
@keyframes lancha-mecerse {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-4px) rotate(-2deg); }
  75% { transform: translateY(-2px) rotate(1.5deg); }
}
@keyframes lancha-olas { to { transform: translateX(-18px); } }
@media (prefers-reduced-motion: reduce) {
  .flota-lancha { transition: none; }
  .flota-lancha:hover { transform: none; }
  .flota-lancha:hover .lancha-barco, .flota-lancha:hover .lancha-olas { animation: none; }
}
/* Tripulación */
.tarjeta-recomendado { border-left: 4px solid #23845A; }
.tarjeta-recomendado-estrella { color: #23845A; }
.panel-operacion { border: 2px solid var(--color-acento); }
.fila-correccion > td { background: var(--color-fondo); }
.reporte dt { font-weight: 500; color: var(--bs-secondary-color); }
.reporte dd { margin-bottom: .6rem; }
.opciones-calificacion { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; }

/* Gráfico de toques del reporte de viaje: una línea de seguimiento en horizontal. Arriba, la fecha, la hora y
   el tipo de punto (alturas fijas, para que todos los círculos caigan sobre la línea); abajo, el lugar.
   Si no caben, se desplazan dentro de su marco. */
.toques-marco { overflow-x: auto; }
.toques { display: flex; list-style: none; margin: 0; padding: 0; }
.toque { position: relative; flex: 1 1 0; min-width: 7rem; padding: 0 .35rem; text-align: center; }
.toque-fecha { height: 1.25rem; line-height: 1.25rem; }
.toque-hora { height: 1.5rem; line-height: 1.5rem; font-size: 1.05rem; font-weight: 700; color: var(--color-menu); }
.toque-icono { height: 1.85rem; line-height: 1.85rem; font-size: 1.35rem; color: var(--color-principal); }
.toque-marca {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; margin: 0 auto .5rem; border-radius: 50%;
  background: var(--color-menu); color: #fff; font-size: 1.25rem;
}
.toque-lugar { font-weight: 600; line-height: 1.25; color: var(--color-menu); overflow-wrap: anywhere; }
/* La línea que une cada toque con el anterior: de borde a borde de sus círculos */
.toque + .toque::before {
  content: ""; position: absolute; top: calc(1.25rem + 1.5rem + 1.85rem + 1.125rem - 2.5px);
  left: calc(-50% + 1.125rem); right: calc(50% + 1.125rem); border-top: 5px solid var(--color-menu);
}
.toque-aqui .toque-marca { background: var(--color-acento-oscuro); box-shadow: 0 0 0 .3rem rgba(var(--color-acento-rgb), .25); }
.toque-por-llegar .toque-hora { font-size: 1rem; font-weight: 500; color: var(--bs-secondary-color); }
.toque-por-llegar .toque-icono { color: var(--color-principal-borde); }
.toque-por-llegar .toque-marca { background: transparent; border: 3px dashed var(--color-principal-borde); }
.toque-por-llegar .toque-lugar { font-weight: 500; color: var(--bs-secondary-color); }
.toque + .toque-por-llegar::before { border-top-style: dashed; border-top-color: var(--color-principal-borde); }

/* ---------------------------------------------------------------------
   Listas fila por fila (materiales, motivos): en el teléfono el selector
   va arriba, a todo lo ancho, y la cantidad con el botón de quitar abajo
   --------------------------------------------------------------------- */
.fila-lista { display: grid; grid-template-columns: minmax(0, 1fr) 11rem auto; gap: .5rem; align-items: center; }
@media (max-width: 575.98px) {
  .fila-lista { grid-template-columns: minmax(0, 1fr) auto; }
  .fila-lista > select { grid-column: 1 / -1; }
}
/* Fila de un solo campo (mecánico de la ODS): el desplegable y la X, también en el teléfono */
.fila-lista.fila-simple { grid-template-columns: minmax(0, 1fr) auto; }
.fila-lista.fila-simple > select { grid-column: auto; }

/* Selector con búsqueda (select[data-buscador], ver buscador.js): la lista se abre bajo el campo */
.buscador { position: relative; }
.buscador-lista {
  position: absolute; z-index: 1000; top: 100%; left: 0; right: 0; max-height: min(20rem, 55vh); overflow-y: auto;
  margin: .25rem 0 0; padding: .3rem; list-style: none; background: #fff;
  border: 1px solid var(--color-borde); border-radius: .8rem; box-shadow: 0 .75rem 2rem rgba(var(--color-menu-oscuro-rgb), .15);
}
.buscador-opcion {
  display: flex; flex-direction: column; justify-content: center; min-height: 2.75rem; padding: .45rem .75rem;
  border-radius: .5rem; cursor: pointer;
}
.buscador-opcion small { color: #5B6680; }
.buscador-opcion.activa, .buscador-opcion:hover { background: var(--color-principal-suave); }
.buscador-opcion[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--color-acento); }
.buscador-opcion mark { padding: 0; background: var(--color-acento-suave); color: inherit; font-weight: 600; border-radius: .15rem; }
.buscador-vacio { padding: .6rem .75rem; color: #5B6680; font-size: .875rem; }

/* ODS: cuándo toca la próxima vez de cada tarea del programa cumplida */
.ajuste-tarea { padding: .5rem .75rem; border-left: 3px solid var(--color-acento); background: var(--bs-tertiary-bg); border-radius: 0 .375rem .375rem 0; }
.ajuste-campo { width: 11rem; }
.ajuste-campo .form-control { min-height: 44px; }

/* ---------------------------------------------------------------------
   Inicio: fallas y tiempos (barras finas, siempre con su número al lado)
   --------------------------------------------------------------------- */
.barra { display: block; height: .5rem; border-radius: 4px; background: var(--color-fondo); overflow: hidden; }
.barra-valor { display: block; height: 100%; min-width: 2px; border-radius: 4px; background: var(--color-principal); }
.barra-externa { background: var(--color-acento); }
.barra-tabla { flex: 1 1 auto; min-width: 4rem; }

/* ---------------------------------------------------------------------
   Fotos de la ODS: la imagen y su leyenda siempre juntas
   --------------------------------------------------------------------- */
.foto-ods { display: flex; flex-direction: column; border: 1px solid var(--color-borde); border-radius: .8rem; overflow: hidden; background: #fff; }
.foto-ods-imagen { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-fondo); }
.foto-ods-leyenda { padding: .75rem .9rem; }

/* ---------------------------------------------------------------------
   Avisos y firma
   --------------------------------------------------------------------- */
.aviso-nuevo { background: var(--color-acento-suave); }
.aviso-contador { position: absolute; top: .1rem; right: .1rem; font-size: .65rem; }
.lienzo-firma {
  display: block; width: 100%; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair;
  background: #fff; border: 2px dashed var(--color-principal-borde); border-radius: .8rem;
}
.firma-muestra { display: inline-block; padding: .75rem 1.25rem; background: #fff; border: 1px solid var(--color-borde); border-radius: .8rem; }
.firma-muestra img { display: block; max-width: 100%; max-height: 6rem; }

/* ---------------------------------------------------------------------
   Ventanas emergentes: al centro, sobre un velo semitransparente con el
   color del menú que deja ver el sistema detrás. La de confirmación
   (data-confirmar, en base.html) reemplaza al confirm() del navegador
   --------------------------------------------------------------------- */
.modal-backdrop {
  --bs-backdrop-bg: rgba(var(--color-menu-oscuro-rgb), .5); --bs-backdrop-opacity: 1;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.modal {
  --bs-modal-border-color: transparent; --bs-modal-border-radius: 1rem; --bs-modal-inner-border-radius: 1rem;
  --bs-modal-header-border-color: var(--color-borde); --bs-modal-footer-border-color: var(--color-borde);
}
.modal-content { box-shadow: 0 1.25rem 3rem rgba(var(--color-menu-oscuro-rgb), .3); }
.modal-title { font-weight: 600; color: var(--color-menu); }

.modal-confirmar .modal-dialog { max-width: 27rem; }
.modal-confirmar.fade .modal-dialog { transform: scale(.94); transition: transform .2s ease-out; }
.modal-confirmar.show .modal-dialog { transform: none; }
.modal-confirmar .modal-body { padding: 1.75rem 1.5rem .25rem; text-align: center; }
.confirmar-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; border-radius: 50%; font-size: 1.75rem;
}
.confirmar-titulo {
  margin-bottom: .5rem; text-wrap: balance;
  font-family: "Montserrat", var(--bs-body-font-family); font-weight: 700; font-size: 1.15rem; color: var(--color-menu);
}
.confirmar-mensaje { margin-bottom: 0; color: #5B6680; text-wrap: pretty; }
/* Los dos botones lado a lado; si no caben, el de la acción queda arriba */
.modal-confirmar .modal-footer { flex-wrap: wrap-reverse; gap: .75rem; padding: 1.25rem 1.5rem 1.5rem; border-top: 0; }
.modal-confirmar .modal-footer > .btn { flex: 1 1 9rem; margin: 0; white-space: nowrap; }

/* ---------------------------------------------------------------------
   Documentos con formato de la empresa (programa de mantenimiento):
   en pantalla, una hoja; al imprimir, solo la hoja
   --------------------------------------------------------------------- */
/* Botones de paginación y de «cuántos por página»: del alto mínimo para el dedo en la tablet */
.boton-pagina { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.documento-scroll { overflow-x: auto; }
.formato {
  position: relative; min-width: 46rem; max-width: 64rem; margin: 0 auto; padding: 1.25rem;
  background: #fff; color: #000; border: 1px solid var(--color-borde); box-shadow: var(--sombra);
  font-family: Arial, Helvetica, sans-serif; font-size: .74rem; line-height: 1.3;
}
.formato table { width: 100%; border-collapse: collapse; margin-bottom: -1px; }
.formato th, .formato td { border: 1px solid #000; padding: .25rem .4rem; vertical-align: middle; }
.formato th { font-weight: 700; }
.formato .relleno, .formato .relleno th { background: var(--color-principal-suave); text-align: center; }
.formato .titulo { font-weight: 700; font-size: .85rem; }
.formato-logo { width: 22%; text-align: center; }
.formato-logo img { max-width: 100%; max-height: 4.5rem; }
.formato-sistema { font-weight: 700; font-size: 1rem; vertical-align: top !important; }
.formato-dato { width: 12%; font-size: .68rem; }
.formato-valor { width: 14%; text-align: center; font-weight: 700; }
.formato-intervalo { text-align: center; font-weight: 700; }
.formato-detalle { font-size: .66rem; color: #444; margin-top: .1rem; }
.formato-observaciones { height: 4.5rem; vertical-align: top !important; }
.formato-firmas td { width: 41%; }
.formato-firmas-tres td { width: 28%; }   /* elaborado, revisado y aprobado */
.formato-fila-firma td { height: 4.5rem; text-align: center; }
.formato-fila-firma img { max-height: 4rem; max-width: 100%; }
.formato-texto { height: 3.2rem; vertical-align: top !important; }
.formato-fotos td { width: 50%; }
.formato-foto { text-align: center; vertical-align: top !important; }
/* Todas las fotos del mismo tamaño, cuadradas: se estiran si hace falta (decisión del usuario: uniformes,
   aunque se deformen, mejor que recortadas, para no perder nada de lo que muestran) */
.formato-foto img { display: block; width: min(16rem, 100%); height: auto; aspect-ratio: 1 / 1; margin: 0 auto .25rem; object-fit: fill; }
.formato-firmas-ods td { width: auto; }
/* Formatos apaisados (historial de mantenimientos, ATM-RG-MT-007): más anchos y con letra más chica */
.formato-apaisado { min-width: 64rem; max-width: 92rem; }
.formato-historial th, .formato-historial td { font-size: .66rem; }
.formato-historial thead th { font-size: .58rem; }
.formato-indicadores th, .formato-indicadores td { width: 8.33%; font-size: .62rem; }
.formato-firmas-ods .formato-fila-firma td { height: 3.6rem; }
.formato-sello {
  position: absolute; top: 1.4rem; right: 50%; transform: translateX(50%) rotate(-4deg);
  padding: .15rem .8rem; border: 2px solid currentColor; border-radius: .3rem;
  color: var(--bs-danger); font-weight: 700; font-size: .8rem; letter-spacing: .08em; background: rgba(255, 255, 255, .85);
}

@media print {
  @page { size: letter; margin: 10mm; @bottom-right { content: "Página " counter(page) " de " counter(pages); font-size: 8pt; } }
  @page apaisado { size: letter landscape; margin: 10mm; @bottom-right { content: "Página " counter(page) " de " counter(pages); font-size: 8pt; } }
  .formato-apaisado { page: apaisado; min-width: 0; }
  .formato-historial tr { break-inside: avoid; }
  body { background: #fff !important; }
  .sidebar, .barra-superior, .no-imprimir, main > .alert { display: none !important; }
  .contenido-principal { padding: 0 !important; max-width: none !important; }
  .documento-scroll { overflow: visible; }
  .formato { min-width: 0; max-width: none; padding: 0; border: 0; box-shadow: none; font-size: 8pt; }
  .formato .relleno, .formato .relleno th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .formato-actividades tr { break-inside: avoid; }
  .formato-firmas { break-inside: avoid; }
  .formato-fotos tr { break-inside: avoid; }
}