/* =====================================================================
   Estilos propios de SELIMBO (se suman a Bootstrap)
   Colores tomados del prototipo aprobado por el gerente.
   ===================================================================== */
:root {
  --marca: #1f5566;
  --marca-clara: #2aa3d4;
  --tinta: #16313b;
  --fondo: #f2f6f8;
}

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

/* ---------- Pantalla de inicio de sesión ---------- */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login-arte {
  background: var(--marca);
  color: #fff;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.login-arte h1 { font-size: 44px; font-weight: 800; line-height: 1.05; max-width: 12ch; }
.login-arte p  { max-width: 38ch; opacity: .85; }
.ola { position: absolute; left: -10%; right: -10%; bottom: -40px; height: 220px; }
.login-arte > div, .login-arte .marca { position: relative; z-index: 1; }   /* el texto queda encima de la ola */

.marca { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 22px; }
.marca svg { width: 40px; height: 40px; }

.login-formulario { display: flex; align-items: center; justify-content: center; padding: 32px; background: #fff; }
.login-tarjeta { width: 100%; max-width: 360px; }

.btn-marca { background: var(--marca); color: #fff; }
.btn-marca:hover, .btn-marca:focus { background: #174452; color: #fff; }

/* En el celular, el arte pasa arriba y se achica (diseño responsive) */
@media (max-width: 768px) {
  .login { grid-template-columns: 1fr; }
  .login-arte { padding: 28px 28px 70px; min-height: 200px; }
  .ola { height: 110px; bottom: -50px; }
  .login-arte h1 { font-size: 28px; }
}

/* ---------- Paneles ---------- */
.barra { background: var(--marca); color: #fff; }
.barra .marca { font-size: 19px; }
.barra .marca svg { width: 32px; height: 32px; }

/* ---------- Menú lateral de módulos ---------- */
.menu { background: #fff; border-bottom: 1px solid #dde5e8; }
.menu .nav-link { color: var(--tinta); text-align: left; }
.menu .nav-link.active { background: var(--marca); }
@media (min-width: 768px) {
  .menu { width: 210px; min-height: calc(100vh - 52px); border-bottom: 0; border-right: 1px solid #dde5e8; }
}
@media (max-width: 767px) {
  .menu nav { flex-wrap: nowrap; overflow-x: auto; }
}

/* ---------- Panel de inicio y reportes ---------- */
.tarjeta-dato { cursor: pointer; transition: transform .1s; }
.tarjeta-dato:hover { transform: translateY(-2px); }
.tarjeta-dato .numero { font-size: 28px; font-weight: 700; line-height: 1; }
.barra-dato { height: 8px; background: #e3ebee; border-radius: 4px; overflow: hidden; }
.barra-dato > span { display: block; height: 100%; background: var(--marca-clara); }
.solo-impresion { display: none; }

/* Al imprimir (o guardar como PDF) se ocultan el menú y los botones */
@media print {
  .barra, .menu, .no-imprimir, .btn { display: none !important; }
  .solo-impresion { display: block; }
  body, main { background: #fff !important; padding: 0 !important; }
  .card { box-shadow: none !important; }
  .card-header { break-after: avoid; }          /* el título no queda solo al pie de una hoja */
  tr { break-inside: avoid; }                    /* las filas no se cortan entre dos hojas */
  .salto { break-before: page; }
  td.text-end { white-space: nowrap; }
  .card { break-inside: auto; } .card-body { padding-top: .5rem; }
}