/* OREX ILL: azul corporativo de OREX (#2E6DA4), Arial. Va después de Bootstrap y lo ajusta. */
:root {
  --azul: #2E6DA4; --azul-osc: #245a88; --azul-claro: #eaf2fa;
  --marino: #17385c; --marino-2: #24527f;
  --acento: #e8a020; --acento-osc: #c97d10;
  --texto: #1d2733; --suave: #5b6675; --fondo: #f3f6f9; --borde: #dfe5ec; --error: #b3261e; --ok: #1e8e5a;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(16, 36, 64, .05), 0 6px 18px rgba(16, 36, 64, .06);
  --barra: 60px;
  --bs-primary: #2E6DA4; --bs-primary-rgb: 46, 109, 164;
  --bs-link-color: #2E6DA4; --bs-link-color-rgb: 46, 109, 164;
  --bs-link-hover-color: #245a88; --bs-link-hover-color-rgb: 36, 90, 136;
  --bs-body-font-family: Arial, Helvetica, sans-serif;
  --bs-body-color: #1d2733; --bs-body-bg: #f3f6f9;
  --bs-border-color: #dfe5ec;
}
body { margin: 0; min-height: 100vh; background: var(--fondo); }
a { text-underline-offset: 2px; }

/* Botones de Bootstrap con el azul de OREX */
.btn-primary { --bs-btn-bg: var(--azul); --bs-btn-border-color: var(--azul); --bs-btn-hover-bg: var(--azul-osc);
  --bs-btn-hover-border-color: var(--azul-osc); --bs-btn-active-bg: #1f4e77; --bs-btn-active-border-color: #1f4e77;
  --bs-btn-disabled-bg: var(--azul); --bs-btn-disabled-border-color: var(--azul); --bs-btn-focus-shadow-rgb: 46, 109, 164; }
.btn-outline-primary { --bs-btn-color: var(--azul); --bs-btn-border-color: var(--azul); --bs-btn-hover-bg: var(--azul);
  --bs-btn-hover-border-color: var(--azul); --bs-btn-active-bg: var(--azul-osc); --bs-btn-active-border-color: var(--azul-osc); }
.btn-pib { background: var(--acento) !important; border-color: var(--acento) !important; color: #fff !important; font-weight: 600; }
.btn-pib:hover, .btn-pib:focus { background: var(--acento-osc) !important; border-color: var(--acento-osc) !important; }
.form-control:focus, .form-select:focus { border-color: #8db3d6; box-shadow: 0 0 0 .2rem rgba(46, 109, 164, .18); }
.form-check-input:checked { background-color: var(--azul); border-color: var(--azul); }
.page-link { color: var(--azul); }
.page-item.active .page-link { background: var(--azul); border-color: var(--azul); }
.nav-pills .nav-link.active { background: var(--azul); }
.nav-tabs .nav-link.active { color: var(--azul); font-weight: 600; }

/* Cabecera */
.barra { position: sticky; top: 0; z-index: 1030; height: var(--barra); display: flex; align-items: center; gap: 14px;
  padding: 0 20px; color: #fff; background: linear-gradient(90deg, var(--marino), var(--marino-2));
  box-shadow: 0 2px 8px rgba(10, 30, 60, .18); }
.barra-boton { border: 0; background: rgba(255, 255, 255, .1); color: #fff; border-radius: 8px; width: 38px; height: 38px;
  font-size: 1.35rem; line-height: 1; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.marca:hover { color: #fff; }
.marca img { height: 26px; width: auto; }
.marca-producto { font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, .35); }
.marca-texto { font-size: .9rem; opacity: .8; white-space: nowrap; }
.usuario { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: #fff;
  padding: 5px 8px; border-radius: 10px; text-align: left; }
.usuario:hover, .usuario[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--acento); color: #fff; font-weight: 700; font-size: .85rem; flex: 0 0 auto; }
.usuario-datos { display: flex; flex-direction: column; line-height: 1.15; }
.usuario-nombre { font-size: .9rem; font-weight: 600; }
.usuario-rol { font-size: .75rem; opacity: .75; }
.usuario .bi-chevron-down { font-size: .75rem; opacity: .75; }

/* Menú lateral */
.marco { display: flex; align-items: flex-start; }
.lateral .offcanvas-body { display: block; padding: 18px 12px; }
.lateral { --bs-offcanvas-width: 270px; --bs-offcanvas-bg: #fff; }
.lateral-seccion + .lateral-seccion { margin-top: 18px; }
.lateral-titulo { margin: 0 0 6px; padding: 0 12px; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #8893a2; }
.lateral a { display: flex; align-items: center; gap: 11px; padding: 8px 12px; margin: 1px 0; border-radius: 8px;
  color: var(--texto); text-decoration: none; font-size: .93rem; }
.lateral a i { font-size: 1.05rem; color: var(--suave); width: 18px; text-align: center; }
.lateral a:hover { background: var(--fondo); color: var(--azul); }
.lateral a:hover i { color: var(--azul); }
.lateral a.activo { background: var(--azul-claro); color: var(--azul); font-weight: 700; box-shadow: inset 3px 0 0 var(--azul); }
.lateral a.activo i { color: var(--azul); }
@media (min-width: 992px) {
  .lateral-col { flex: 0 0 248px; position: sticky; top: var(--barra); height: calc(100vh - var(--barra)); overflow-y: auto;
    background: #fff; border-right: 1px solid var(--borde); }
}

/* Contenido */
.contenido { flex: 1 1 auto; min-width: 0; max-width: 1320px; margin: 0 auto; padding: 28px 32px 0; }
.sin-menu .contenido { max-width: 960px; }
.pie { text-align: center; color: var(--suave); font-size: .8rem; padding: 32px 0 24px; }
.pie a { color: inherit; }
@media (max-width: 575.98px) {
  .contenido { padding: 18px 14px 0; }
  .barra { padding: 0 12px; gap: 10px; }
  .marca-texto, .usuario-datos { display: none; }
}
@media (max-width: 991.98px) { .marca-texto { display: none; } }

/* Piezas comunes */
.tarjeta, .card { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tarjeta { padding: 24px; }
.card-header { background: #f8fafc; border-bottom-color: var(--borde); font-weight: 600; }
.pib-hero { background: linear-gradient(115deg, var(--marino) 0%, var(--azul) 100%); color: #fff;
  border-radius: var(--radio); padding: 1.4rem 1.6rem; margin-bottom: 1.4rem; box-shadow: var(--sombra); }
.pib-hero h1 { font-size: 1.35rem; margin: 0 0 .25rem; font-weight: 700; }
.pib-hero p { margin: 0; opacity: .85; font-size: .92rem; }
.pib-hero a:not(.btn) { color: #fff; }
.pib-hero .btn-light, .pib-hero .btn-outline-light { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28);
  color: #fff; }
.pib-hero .btn-light:hover, .pib-hero .btn-outline-light:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.table { --bs-table-bg: #fff; }
.table > thead th { background: #f6f8fb; color: var(--suave); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .03em; font-weight: 700; border-bottom-width: 1px; }
.alert { border-radius: var(--radio); }
.badge { font-weight: 600; }
.aviso { padding: 10px 12px; border-radius: 8px; background: var(--azul-claro); }
.aviso-error { background: #fbeaea; color: var(--error); }
.nota { color: var(--suave); font-size: .9rem; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.datos dt { font-weight: bold; }
.datos dd { margin: 0; }
button.enlace { margin: 0; padding: 0; border: 0; background: none; color: var(--azul); text-decoration: underline; }
.seccion-titulo { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8893a2;
  margin: 32px 0 12px; }

/* Inicio */
.bienvenida { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 28px 30px 48px; border-radius: 14px; color: #fff; box-shadow: var(--sombra);
  background: radial-gradient(circle at 92% 10%, rgba(232, 160, 32, .28), transparent 38%),
              linear-gradient(115deg, var(--marino) 0%, var(--azul) 100%); }
.bienvenida h1 { margin: 0 0 6px; font-size: 1.8rem; font-weight: 700; }
.bienvenida p { margin: 0; opacity: .9; max-width: 560px; }
.bienvenida .bienvenida-sub { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; margin-bottom: 6px; }
.estado { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 999px;
  font-size: .85rem; background: rgba(255, 255, 255, .14); white-space: nowrap; }
.estado .punto { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .25); }
.estado-ko .punto { background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, .25); }
.busqueda-rapida { position: relative; display: flex; gap: 8px; margin: -22px 24px 28px; padding: 10px; background: #fff;
  border-radius: 12px; box-shadow: 0 8px 28px rgba(16, 36, 64, .12); }
.busqueda-rapida > i { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); color: var(--suave); }
.busqueda-rapida .form-control { border: 0; padding-left: 42px; font-size: 1rem; box-shadow: none; }
.busqueda-rapida .btn { padding-left: 22px; padding-right: 22px; }
.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.acceso { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); color: var(--texto); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.acceso:hover { transform: translateY(-2px); border-color: #b9cfe4; box-shadow: 0 10px 26px rgba(16, 36, 64, .12); color: var(--texto); }
.acceso-icono { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 10px;
  border-radius: 10px; background: var(--azul-claro); color: var(--azul); font-size: 1.25rem; }
.acceso-icono-op { background: #fdf3e1; color: var(--acento-osc); }
.acceso-titulo { font-weight: 700; font-size: 1rem; }
.acceso-texto { color: var(--suave); font-size: .88rem; line-height: 1.4; }
@media (max-width: 575.98px) {
  .bienvenida { padding: 22px 20px; }
  .bienvenida h1 { font-size: 1.45rem; }
  .busqueda-rapida { margin: -18px 8px 22px; }
  .accesos { gap: 10px; }
  .acceso { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; padding: 14px 16px; }
  .acceso-icono { grid-row: span 2; margin: 0; }
}

/* Entrar */
.acceso-portal { display: grid; grid-template-columns: 1fr 1fr; max-width: 880px; margin: 48px auto 0; background: #fff;
  border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(16, 36, 64, .14); }
.acceso-portal-marca { padding: 44px 40px; color: #fff;
  background: radial-gradient(circle at 85% 15%, rgba(232, 160, 32, .3), transparent 40%),
              linear-gradient(140deg, var(--marino) 0%, var(--azul) 100%); }
.acceso-portal-marca h2 { margin: 28px 0 6px; font-size: 2rem; font-weight: 700; letter-spacing: .02em; }
.acceso-portal-marca p { opacity: .88; }
.acceso-portal-marca ul { list-style: none; padding: 0; margin: 28px 0 0; }
.acceso-portal-marca li { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: .95rem; }
.acceso-portal-marca li i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; background: rgba(255, 255, 255, .14); flex: 0 0 auto; }
.acceso-portal-form { padding: 44px 40px; }
.acceso-portal-form h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 22px; color: var(--marino); }
.acceso-portal-form .form-control { padding: 10px 12px; }
.acceso-portal-form .btn { padding: 10px; font-weight: 600; }
@media (max-width: 767.98px) {
  .acceso-portal { grid-template-columns: 1fr; margin-top: 16px; }
  .acceso-portal-marca { padding: 28px 24px; }
  .acceso-portal-marca h2 { margin-top: 0; font-size: 1.6rem; }
  .acceso-portal-marca ul, .acceso-portal-marca img { display: none; }
  .acceso-portal-form { padding: 28px 24px; }
}