/* ==========================================================================
   PDU · Sistema gráfico institucional
   Referencias: medicina.uchile.cl (PT Sans, azul #224897, cian #1da7d9)
                dpi.med.uchile.cl (Nunito, navy #181d38, cielo #f0fbfc)
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  --pdu-azul: #224897;
  --pdu-azul-oscuro: #1a3877;
  --pdu-navy: #181d38;
  --pdu-cian: #1da7d9;
  --pdu-cian-oscuro: #14809f;
  --pdu-teal: #276780;
  --pdu-cielo: #f0fbfc;
  --pdu-hielo: #eef3fb;
  --pdu-rojo: #c8102e;
  --pdu-ambar: #e9a020;
  --pdu-verde: #1b7f5c;
  --pdu-texto: #404040;
  --pdu-texto-suave: #5d6470;
  --pdu-linea: #dfe6ee;

  --pdu-font-titulo: "Nunito", "PT Sans", system-ui, sans-serif;
  --pdu-font-cuerpo: "PT Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --pdu-radio-boton: 5px;
  --pdu-radio-campo: 3px;
  --pdu-sombra: 0 1px 2px rgba(24, 29, 56, .08), 0 6px 18px rgba(24, 29, 56, .06);

  /* Bootstrap 5.3 */
  --bs-primary: #224897;
  --bs-primary-rgb: 34, 72, 151;
  --bs-secondary: #5d6470;
  --bs-secondary-rgb: 93, 100, 112;
  --bs-success: #1b7f5c;
  --bs-success-rgb: 27, 127, 92;
  --bs-danger: #c8102e;
  --bs-danger-rgb: 200, 16, 46;
  --bs-warning: #e9a020;
  --bs-warning-rgb: 233, 160, 32;
  --bs-info: #1da7d9;
  --bs-info-rgb: 29, 167, 217;
  --bs-body-font-family: var(--pdu-font-cuerpo);
  --bs-body-color: var(--pdu-texto);
  --bs-body-color-rgb: 64, 64, 64;
  --bs-link-color: #224897;
  --bs-link-color-rgb: 34, 72, 151;
  --bs-link-hover-color: #14809f;
  --bs-link-hover-color-rgb: 20, 128, 159;
  --bs-border-color: #dfe6ee;
}

/* ---- 2. Base ------------------------------------------------------------ */
html { scroll-behavior: smooth; }

body {
  font-family: var(--pdu-font-cuerpo);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--pdu-texto);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.modal-title, .accordion-button {
  font-family: var(--pdu-font-titulo);
  font-weight: 800;
  color: var(--pdu-navy);
  letter-spacing: -.01em;
}

h5, h6, .h5, .h6 { font-weight: 700; }

a { text-underline-offset: .18em; }

:focus-visible {
  outline: 3px solid var(--pdu-cian);
  outline-offset: 2px;
}

.bg-morado { background-color: var(--pdu-cian) !important; }

.text-dark { color: var(--pdu-navy) !important; }
.text-primary { color: var(--pdu-azul) !important; }
.text-muted, .text-body-secondary { color: var(--pdu-texto-suave) !important; }
.bg-primary { background-color: var(--pdu-azul) !important; }
.bg-secondary { background-color: var(--pdu-texto-suave) !important; }
.bg-dark { background-color: var(--pdu-navy) !important; }
.bg-light { background-color: var(--pdu-cielo) !important; }
.bg-success { background-color: var(--pdu-verde) !important; }
.bg-danger { background-color: var(--pdu-rojo) !important; }
.bg-warning { background-color: var(--pdu-ambar) !important; color: var(--pdu-navy) !important; }
.bg-info { background-color: var(--pdu-cian) !important; }

/* ---- 3. Botones --------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: var(--pdu-radio-boton);
  --bs-btn-font-weight: 700;
  font-family: var(--pdu-font-titulo);
  letter-spacing: .01em;
  transition: background-color .15s, border-color .15s, color .15s;
}

.btn-primary {
  --bs-btn-bg: var(--pdu-azul); --bs-btn-border-color: var(--pdu-azul);
  --bs-btn-hover-bg: var(--pdu-azul-oscuro); --bs-btn-hover-border-color: var(--pdu-azul-oscuro);
  --bs-btn-active-bg: var(--pdu-navy); --bs-btn-active-border-color: var(--pdu-navy);
  --bs-btn-disabled-bg: var(--pdu-azul); --bs-btn-disabled-border-color: var(--pdu-azul);
  --bs-btn-focus-shadow-rgb: 29, 167, 217;
}
.btn-outline-primary {
  --bs-btn-color: var(--pdu-azul); --bs-btn-border-color: var(--pdu-azul);
  --bs-btn-hover-bg: var(--pdu-azul); --bs-btn-hover-border-color: var(--pdu-azul);
  --bs-btn-active-bg: var(--pdu-azul-oscuro); --bs-btn-active-border-color: var(--pdu-azul-oscuro);
  --bs-btn-disabled-color: var(--pdu-azul); --bs-btn-disabled-border-color: var(--pdu-azul);
  --bs-btn-focus-shadow-rgb: 29, 167, 217;
}
.btn-secondary {
  --bs-btn-bg: var(--pdu-texto-suave); --bs-btn-border-color: var(--pdu-texto-suave);
  --bs-btn-hover-bg: #4a505b; --bs-btn-hover-border-color: #4a505b;
  --bs-btn-active-bg: #3d424b; --bs-btn-active-border-color: #3d424b;
  --bs-btn-disabled-bg: var(--pdu-texto-suave); --bs-btn-disabled-border-color: var(--pdu-texto-suave);
}
.btn-outline-secondary {
  --bs-btn-color: var(--pdu-texto-suave); --bs-btn-border-color: var(--pdu-texto-suave);
  --bs-btn-hover-bg: var(--pdu-texto-suave); --bs-btn-hover-border-color: var(--pdu-texto-suave);
  --bs-btn-active-bg: #4a505b; --bs-btn-active-border-color: #4a505b;
}
.btn-success {
  --bs-btn-bg: var(--pdu-verde); --bs-btn-border-color: var(--pdu-verde);
  --bs-btn-hover-bg: #166b4d; --bs-btn-hover-border-color: #166b4d;
  --bs-btn-active-bg: #12593f; --bs-btn-active-border-color: #12593f;
  --bs-btn-disabled-bg: var(--pdu-verde); --bs-btn-disabled-border-color: var(--pdu-verde);
}
.btn-outline-success {
  --bs-btn-color: var(--pdu-verde); --bs-btn-border-color: var(--pdu-verde);
  --bs-btn-hover-bg: var(--pdu-verde); --bs-btn-hover-border-color: var(--pdu-verde);
  --bs-btn-active-bg: #166b4d; --bs-btn-active-border-color: #166b4d;
}
.btn-danger {
  --bs-btn-bg: var(--pdu-rojo); --bs-btn-border-color: var(--pdu-rojo);
  --bs-btn-hover-bg: #a60d26; --bs-btn-hover-border-color: #a60d26;
  --bs-btn-active-bg: #8c0b20; --bs-btn-active-border-color: #8c0b20;
  --bs-btn-disabled-bg: var(--pdu-rojo); --bs-btn-disabled-border-color: var(--pdu-rojo);
}
.btn-outline-danger {
  --bs-btn-color: var(--pdu-rojo); --bs-btn-border-color: var(--pdu-rojo);
  --bs-btn-hover-bg: var(--pdu-rojo); --bs-btn-hover-border-color: var(--pdu-rojo);
  --bs-btn-active-bg: #a60d26; --bs-btn-active-border-color: #a60d26;
}
.btn-warning {
  --bs-btn-color: var(--pdu-navy);
  --bs-btn-bg: var(--pdu-ambar); --bs-btn-border-color: var(--pdu-ambar);
  --bs-btn-hover-color: var(--pdu-navy);
  --bs-btn-hover-bg: #d18f18; --bs-btn-hover-border-color: #d18f18;
  --bs-btn-active-color: var(--pdu-navy);
  --bs-btn-active-bg: #b87b12; --bs-btn-active-border-color: #b87b12;
}
.btn-outline-warning {
  --bs-btn-color: #8a5a00; --bs-btn-border-color: var(--pdu-ambar);
  --bs-btn-hover-color: var(--pdu-navy);
  --bs-btn-hover-bg: var(--pdu-ambar); --bs-btn-hover-border-color: var(--pdu-ambar);
  --bs-btn-active-color: var(--pdu-navy);
  --bs-btn-active-bg: #d18f18; --bs-btn-active-border-color: #d18f18;
}
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--pdu-cian-oscuro); --bs-btn-border-color: var(--pdu-cian-oscuro);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pdu-teal); --bs-btn-hover-border-color: var(--pdu-teal);
  --bs-btn-active-color: #fff;
}
.btn-outline-info {
  --bs-btn-color: var(--pdu-cian-oscuro); --bs-btn-border-color: var(--pdu-cian);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pdu-cian-oscuro); --bs-btn-hover-border-color: var(--pdu-cian-oscuro);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--pdu-teal); --bs-btn-active-border-color: var(--pdu-teal);
}
.btn-light { --bs-btn-color: var(--pdu-navy); }

/* ---- 4. Formularios, tarjetas, modales ---------------------------------- */
.form-control, .form-select { border-radius: var(--pdu-radio-campo); border-color: #c7d0db; }
.form-control:focus, .form-select:focus,
.form-check-input:focus {
  border-color: var(--pdu-cian);
  box-shadow: 0 0 0 .2rem rgba(29, 167, 217, .25);
}
.form-check-input:checked { background-color: var(--pdu-azul); border-color: var(--pdu-azul); }
.form-label { font-weight: 700; color: var(--pdu-navy); }

.card {
  --bs-card-border-color: var(--pdu-linea);
  --bs-card-border-radius: 0;
  --bs-card-inner-border-radius: 0;
  --bs-card-cap-bg: var(--pdu-hielo);
  box-shadow: var(--pdu-sombra);
}
.card.rounded-4, .rounded-4 { border-radius: 0 !important; }
.card.p-4 { border-top: 4px solid var(--pdu-azul); }
.card-header { font-family: var(--pdu-font-titulo); font-weight: 700; color: var(--pdu-navy); }
.card-header.bg-primary { color: #fff; }

.modal-content { border: 0; border-radius: 0; border-top: 4px solid var(--pdu-azul); box-shadow: 0 24px 60px rgba(24, 29, 56, .3); }
.modal-header { border-bottom: 1px solid var(--pdu-linea); }
.modal-header.bg-danger { border-top: 0; }
.modal-header.bg-danger .modal-title { color: #fff; }
.modal-footer { border-top: 1px solid var(--pdu-linea); background: var(--pdu-cielo); }

.alert { border-radius: 0; border-width: 0 0 0 4px; border-left-style: solid; }
.alert-info { background: var(--pdu-cielo); color: var(--pdu-navy); border-left-color: var(--pdu-cian); }
.alert-warning { background: #fff7e6; color: #5b3d00; border-left-color: var(--pdu-ambar); }
.alert-danger { background: #fdecef; color: #6d0a1b; border-left-color: var(--pdu-rojo); }
.alert-success { background: #e9f6f0; color: #0f4a36; border-left-color: var(--pdu-verde); }

.badge { border-radius: 3px; font-family: var(--pdu-font-titulo); }

/* Tablas */
.table { --bs-table-border-color: var(--pdu-linea); }
.table > thead { --bs-table-bg: var(--pdu-hielo); color: var(--pdu-navy); }
.table > thead th { font-family: var(--pdu-font-titulo); font-weight: 700; border-bottom: 2px solid var(--pdu-azul); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--pdu-cielo); }

/* Acordeón (objetivos estratégicos) */
.accordion { --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; --bs-accordion-border-color: var(--pdu-linea); }
.accordion-button:not(.collapsed) { background: var(--pdu-hielo); color: var(--pdu-azul); box-shadow: inset 0 -1px 0 var(--pdu-linea); }
.accordion-button:focus { border-color: var(--pdu-cian); box-shadow: 0 0 0 .2rem rgba(29, 167, 217, .25); }

/* Progreso: sin rayado animado */
.progress { height: 1.25rem; border-radius: 0; background: #e3e8ef; font-family: var(--pdu-font-titulo); font-weight: 700; }
.progress-bar { background-color: var(--pdu-azul); transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.progress-bar-striped { background-image: none; }
.progress-bar-animated { animation: none; }

/* ---- 5. Cabecera institucional ------------------------------------------ */
.pdu-header { position: relative; z-index: 1030; background: #fff; }

.pdu-utilbar { background: var(--pdu-navy); font-size: .8125rem; }
.pdu-utilbar .container { display: flex; gap: 1.5rem; padding-block: .35rem; }
.pdu-utilbar a { color: #c9d3ea; text-decoration: none; }
.pdu-utilbar a:hover { color: #fff; text-decoration: underline; }

.pdu-brandbar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .9rem;
}
.pdu-brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--pdu-navy); }
.pdu-brand img { height: 72px; width: auto; }
.pdu-brand__texto { display: flex; flex-direction: column; line-height: 1.15; padding-left: 1rem; border-left: 3px solid var(--pdu-cian); }
.pdu-brand__sigla { font-family: var(--pdu-font-titulo); font-weight: 800; font-size: 1.75rem; color: var(--pdu-azul); }
.pdu-brand__nombre { font-size: .9375rem; color: var(--pdu-texto-suave); max-width: 26ch; }

.pdu-user { display: flex; align-items: center; gap: .65rem; text-align: right; font-size: .9375rem; color: var(--pdu-texto-suave); }
.pdu-user i { font-size: 1.4rem; color: var(--pdu-cian); }
.pdu-user strong { display: block; font-family: var(--pdu-font-titulo); color: var(--pdu-navy); font-size: 1rem; }

.pdu-nav { background: var(--pdu-azul); padding: 0; border-bottom: 3px solid var(--pdu-cian); }
.pdu-nav .navbar-nav { gap: .25rem; }
.pdu-nav .nav-link {
  color: #fff; font-family: var(--pdu-font-titulo); font-weight: 700; font-size: .9375rem;
  padding: .85rem 1rem; border-bottom: 3px solid transparent; margin-bottom: -3px;
  cursor: pointer;
}
.pdu-nav .nav-link:hover, .pdu-nav .nav-link:focus-visible { background: var(--pdu-azul-oscuro); border-bottom-color: var(--pdu-cian); color: #fff; }
.pdu-nav .nav-item:has(.pdu-nav__salir) { margin-left: auto; }
.pdu-nav .navbar-toggler { border-color: rgba(255, 255, 255, .5); margin-block: .5rem; }
.pdu-nav .navbar-toggler-icon { filter: invert(1); }
.pdu-nav .navbar-toggler-label { color: #fff; font-family: var(--pdu-font-titulo); font-weight: 700; }

/* ---- 6. Hero con parallax ----------------------------------------------- */
.pdu-hero {
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff; min-height: 26rem;
  display: flex; align-items: center;
  background: var(--pdu-navy);
}
.pdu-hero--compacto { min-height: 15rem; }
.pdu-hero__bg {
  position: absolute; inset: -30% 0; z-index: -2;
  background: var(--pdu-hero-img, url("../img/frontis_facultad.jpg")) center / cover no-repeat;
  will-change: transform;
}
.pdu-hero--alt .pdu-hero__bg { --pdu-hero-img: url("../img/frontis_facultad2.jpeg"); }
.pdu-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(24, 29, 56, .94) 0%, rgba(24, 29, 56, .78) 48%, rgba(34, 72, 151, .45) 100%);
}
.pdu-hero__inner { padding-block: 4.5rem; }
.pdu-hero--compacto .pdu-hero__inner { padding-block: 2.5rem; }

.pdu-hero h1, .pdu-hero h2, .pdu-hero h3, .pdu-hero h4 { color: #fff; }
.pdu-hero h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.1; max-width: 20ch; margin-bottom: 1.25rem; }
.pdu-hero p { max-width: 62ch; font-size: 1.125rem; line-height: 1.7; color: #e6ecfa; }
.pdu-hero p:last-child { margin-bottom: 0; }

/* Etiqueta cian, como en las portadas de medicina.uchile.cl */
.pdu-etiqueta {
  display: inline-block; background: var(--pdu-cian); color: #fff;
  font-family: var(--pdu-font-titulo); font-weight: 700; font-size: .9375rem;
  padding: .3rem .8rem; margin-bottom: 1.1rem;
}

/* Único momento animado de carga: la portada */
@keyframes pdu-entrada { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pdu-hero__inner > * { animation: pdu-entrada .7s cubic-bezier(.2, .7, .2, 1) both; }
.pdu-hero__inner > *:nth-child(2) { animation-delay: .12s; }
.pdu-hero__inner > *:nth-child(3) { animation-delay: .24s; }
.pdu-hero__inner > *:nth-child(4) { animation-delay: .36s; }

/* ---- 7. Bandas de contenido --------------------------------------------- */
.pdu-band { padding-block: 3.5rem; }
.pdu-band--cielo { background: var(--pdu-cielo); }

.pdu-titulo {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  padding-left: .85rem; border-left: 5px solid var(--pdu-cian);
  margin-bottom: 1.5rem;
}
.pdu-seccion-gap { display: block; height: 2.5rem; }

/* ---- 8. Lineamientos ---------------------------------------------------- */
.pdu-lineamientos-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pdu-lineamientos { width: 100%; min-width: 58rem; table-layout: fixed; }
.pdu-lineamientos td { padding: .5rem .75rem; vertical-align: top; text-align: center; }

.pdu-lin-enlace { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-decoration: none; color: var(--pdu-navy); }
.pdu-lin-enlace:hover .pdu-circulo, .pdu-lin-enlace:focus-visible .pdu-circulo { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(24, 29, 56, .28); }
.pdu-lin-enlace:hover .pdu-lin-nombre { text-decoration: underline; }
.pdu-lin-nombre { font-family: var(--pdu-font-titulo); font-weight: 700; font-size: 1rem; line-height: 1.25; }

.pdu-circulo {
  display: flex; align-items: center; justify-content: center;
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  font-family: var(--pdu-font-titulo); font-weight: 800; font-size: 2.25rem; color: #fff;
  border: 4px solid #fff; box-shadow: 0 0 0 2px currentColor, 0 4px 12px rgba(24, 29, 56, .2);
  transition: transform .2s, box-shadow .2s;
}
.pdu-circulo > span { color: #fff; }
.pdu-l1 { background: #224897; color: #224897; }
.pdu-l2 { background: #14809f; color: #14809f; }
.pdu-l3 { background: #c8102e; color: #c8102e; }
.pdu-l4 { background: #1b7f5c; color: #1b7f5c; }
.pdu-l5 { background: #e9a020; color: #e9a020; }
.pdu-l5 > span { color: var(--pdu-navy); }
.pdu-l6 { background: #52565b; color: #52565b; }

/* ---- 9. Cumplimiento ----------------------------------------------------- */
.pdu-cumplimiento { max-width: 56rem; margin-inline: auto; }
.pdu-cumplimiento h4 { margin-bottom: 1rem; }

/* ---- 10. Pie institucional ---------------------------------------------- */
.pdu-footer { background: var(--pdu-navy); color: #c9d3ea; margin-top: 4rem; border-top: 4px solid var(--pdu-cian); font-size: .9375rem; }
.pdu-footer .container { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; padding-block: 2rem; }
.pdu-footer strong { color: #fff; font-family: var(--pdu-font-titulo); }
.pdu-footer a { color: #fff; }
.pdu-footer a:hover { color: var(--pdu-cian); }

/* ---- 11. Inicio de sesión ----------------------------------------------- */
.pdu-login { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: var(--pdu-navy); }
.pdu-login .pdu-hero__bg { inset: -15% 0; }
.pdu-login::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(24, 29, 56, .93), rgba(34, 72, 151, .72)); }
.pdu-login__panel { width: min(100%, 28rem); background: #fff; border-top: 5px solid var(--pdu-cian); box-shadow: 0 30px 70px rgba(0, 0, 0, .4); padding: 2.5rem 2.25rem; text-align: center; animation: pdu-entrada .7s cubic-bezier(.2, .7, .2, 1) both; }
.pdu-login__panel img { height: 96px; width: auto; margin-bottom: 1.25rem; }
.pdu-login__panel h1 { font-size: 2.5rem; color: var(--pdu-azul); margin-bottom: .25rem; }
.pdu-login__panel h2 { font-size: 1.1rem; font-weight: 700; color: var(--pdu-texto-suave); margin-bottom: 1.75rem; }
.pdu-login__panel .btn { width: 100%; padding: .8rem 1rem; font-size: 1.05rem; }
.pdu-login__ayuda { margin: 1.5rem 0 0; font-size: .9rem; color: var(--pdu-texto-suave); }

/* ---- 12. Error 404 ------------------------------------------------------- */
.pdu-404 { text-align: center; padding-block: 6rem; }
.pdu-404 .pdu-404__codigo { font-family: var(--pdu-font-titulo); font-weight: 800; font-size: clamp(5rem, 16vw, 9rem); line-height: 1; color: var(--pdu-azul); }
.pdu-404 p { max-width: 44ch; margin-inline: auto; color: var(--pdu-texto-suave); }

/* ---- 13. Spinner de carga ------------------------------------------------ */
#spinner .spinner-border { color: var(--pdu-azul) !important; }
#spinner { font-family: var(--pdu-font-titulo); font-weight: 700; color: var(--pdu-azul); }

/* ---- 14. SweetAlert2 ------------------------------------------------------ */
.swal2-popup { border-radius: 0; border-top: 5px solid var(--pdu-azul); font-family: var(--pdu-font-cuerpo); }
.swal2-title { font-family: var(--pdu-font-titulo); font-weight: 800; color: var(--pdu-navy); }
.swal2-styled.swal2-confirm { background-color: var(--pdu-azul) !important; border-radius: var(--pdu-radio-boton); font-family: var(--pdu-font-titulo); font-weight: 700; }
.swal2-styled.swal2-cancel, .swal2-styled.swal2-deny { border-radius: var(--pdu-radio-boton); font-family: var(--pdu-font-titulo); font-weight: 700; }

/* ---- 15. Responsive y movimiento reducido -------------------------------- */
@media (max-width: 991.98px) {
  .pdu-user { display: none; }
  .pdu-brand img { height: 52px; }
  .pdu-nav .nav-item:has(.pdu-nav__salir) { margin-left: 0; }
  .pdu-nav .nav-link { border-bottom: 0; border-left: 3px solid transparent; margin-bottom: 0; }
  .pdu-nav .nav-link:hover { border-left-color: var(--pdu-cian); }
}
@media (max-width: 575.98px) {
  .pdu-utilbar { display: none; }
  .pdu-brand__nombre { max-width: 18ch; font-size: .8125rem; }
  .pdu-hero__inner { padding-block: 3rem; }
  .pdu-band { padding-block: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pdu-hero__bg { transform: none !important; }
}

/* ==========================================================================
   16. Efectos de interfaz (adaptados de React Bits · MIT + Commons Clause)
   Lógica en view/assets/js/pdu-efectos.js
   ========================================================================== */

/* DotGrid: malla de puntos sobre el hero */
.pdu-dotgrid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.pdu-hero__inner, .pdu-login__panel { position: relative; z-index: 1; }

/* BlurText: palabras que entran desenfocadas */
.pdu-hero__inner > h1 { animation: none; }
.pdu-blur-palabra { display: inline-block; animation: pdu-blur-entrada .85s cubic-bezier(.22, 1, .36, 1) both; will-change: transform, filter, opacity; }
@keyframes pdu-blur-entrada {
  0%   { opacity: 0; filter: blur(10px); transform: translateY(-.35em); }
  55%  { opacity: .65; filter: blur(4px); transform: translateY(.05em); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}

/* Reveal al hacer scroll */
.pdu-reveal { opacity: 0; filter: blur(6px); transform: translateY(16px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), filter .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0ms); }
.pdu-reveal.is-in { opacity: 1; filter: none; transform: none; }

/* SpotlightCard: foco de luz que sigue al puntero */
.card { --mx: 50%; --my: 50%; }
.card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle 320px at var(--mx) var(--my), rgba(29, 167, 217, .13), transparent 70%);
  transition: opacity .35s;
}
.card:hover::before { opacity: 1; }

/* GlareHover: destello diagonal al pasar el puntero */
.pdu-circulo, .pdu-login__panel { position: relative; overflow: hidden; }
.pdu-circulo::after, .pdu-login__panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(-45deg, transparent 58%, rgba(255, 255, 255, .5) 70%, transparent 82%) -100% -100% / 250% 250% no-repeat;
  transition: background-position .8s cubic-bezier(.22, 1, .36, 1);
}
.pdu-circulo:hover::after, .pdu-lin-enlace:hover .pdu-circulo::after,
.pdu-login__panel:hover::after { background-position: 100% 100%; }

/* ShinyText: brillo suave que cruza la etiqueta de portada */
.pdu-etiqueta { position: relative; overflow: hidden; }
.pdu-etiqueta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: pdu-brillo 5.5s ease-in-out 1.5s infinite;
}
@keyframes pdu-brillo { 0%, 70% { background-position: -150% 0; } 100% { background-position: 150% 0; } }

@media (prefers-reduced-motion: reduce) {
  .pdu-reveal { opacity: 1; filter: none; transform: none; }
  .pdu-dotgrid { display: none; }
}

/* ==========================================================================
   17. Lineamiento: matriz de resultados esperados e iniciativas
   Cada fila (.contenedor-hover) se distribuye en columnas alineadas:
   Resultado esperado | Iniciativa | Información a registrar | Metas | Plazos
   ========================================================================== */
section.container-fluid:has(> #accordionOE) { max-width: 120rem; margin-inline: auto; padding-inline: clamp(.75rem, 2vw, 2rem); }

#accordionOE .accordion-button { font-size: 1.05rem; line-height: 1.35; padding: 1.1rem 1.35rem; }
#accordionOE .accordion-body { padding: 1.5rem clamp(.75rem, 1.5vw, 1.5rem); }

/* Responsables del objetivo: en varias columnas en pantallas anchas */
#accordionOE [id^="listaResponsablesOE"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .5rem 1rem; }
#accordionOE [id^="listaResponsablesOE"] > div { margin-bottom: 0 !important; }

/* Contenedor de resultados: sin scroll horizontal, la grilla se adapta */
#accordionOE [id^="contenedorObjetivo"] { overflow-x: visible !important; }

/* Columnas con mínimo 0: la fila nunca se sale de la tarjeta */
#accordionOE .contenedor-hover {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
  gap: 1rem 1.25rem;
  align-items: stretch;
  width: 100%;
  margin: 0 !important;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--pdu-linea);
  border-left: 4px solid var(--pdu-azul);
  transition: background-color .2s;
}
/* Iniciativas adicionales del mismo resultado: fila continua, acento cian */
#accordionOE .contenedor-hover[id*="_"] { border-top: 0; border-left-color: var(--pdu-cian); background: #fbfdff; }
#accordionOE .contenedor-hover:hover { background: var(--pdu-cielo); }

/* Neutraliza anchos fijos y márgenes en línea de la plantilla JS */
#accordionOE .contenedor-hover > div { width: auto !important; min-width: 0; margin: 0 !important; flex: none !important; display: flex; flex-direction: column; }
#accordionOE .contenedor-hover > div > div[style*="width:350px"] { width: auto !important; }
#accordionOE .contenedor-hover > div[style*="0 0 350px"] { visibility: hidden; }

#accordionOE .contenedor-hover .form-label { font-size: .875rem; line-height: 1.3; color: var(--pdu-azul); margin-bottom: .35rem; }
/* Misma altura en todas las columnas (ignora rows="3/4/5" de la plantilla) */
#accordionOE .contenedor-hover textarea.form-control { height: 7.5rem; min-height: 4.5rem; resize: vertical; font-size: .9375rem; line-height: 1.45; }
#accordionOE .contenedor-hover .input-group + .input-group { margin-top: .5rem; }
#accordionOE .contenedor-hover .input-group-text { font-size: .8125rem; padding-inline: .6rem; background: var(--pdu-hielo); color: var(--pdu-navy); }

/* Textos largos: el campo ocupa todo el ancho y sus botones quedan como barra bajo él */
#accordionOE .contenedor-hover .input-group:has(> textarea) { flex-wrap: wrap; }
#accordionOE .contenedor-hover .input-group > textarea { flex: 1 1 100%; width: 100%; border-radius: var(--pdu-radio-campo) var(--pdu-radio-campo) 0 0 !important; }
#accordionOE .contenedor-hover .input-group > textarea ~ .btn { flex: 0 0 auto; margin-top: -1px; border-radius: 0 !important; padding: .3rem .7rem; }
#accordionOE .contenedor-hover .input-group > textarea + .btn { margin-left: auto !important; }
#accordionOE .contenedor-hover .input-group > textarea ~ .btn:last-child { border-bottom-right-radius: var(--pdu-radio-campo) !important; }
#accordionOE .contenedor-hover input[type="month"], #accordionOE .contenedor-hover input[type="number"] { min-width: 0; font-size: .875rem; padding-inline: .5rem; }
#accordionOE .contenedor-hover .btn-sm.w-100 { margin-top: .5rem; }
#accordionOE .contenedor-hover .form-switch .form-check-label { font-size: .8125rem; letter-spacing: .02em; }

/* Selector de archivo compacto: botón y nombre legibles en columnas angostas */
#accordionOE .contenedor-hover input[type="file"] { font-size: .8125rem; min-width: 0; }
#accordionOE .contenedor-hover input[type="file"]::file-selector-button { padding-inline: .6rem; margin-inline-end: .6rem; }
#accordionOE .contenedor-hover input[type="file"]::-webkit-file-upload-button { padding-inline: .6rem; margin-inline-end: .6rem; }

/* Interruptor "REALIZADO" y "Rendición anual": al pie de su columna, alineados entre sí */
#accordionOE .contenedor-hover > div > .d-flex:last-child,
#accordionOE .contenedor-hover > div > .form-check:last-child { margin-top: auto !important; padding-top: .75rem; justify-content: flex-start !important; }
#accordionOE .contenedor-hover > div > .d-flex:last-child > .form-check { padding-left: 0; margin-bottom: 0; }
#accordionOE .contenedor-hover > div > .form-check:last-child { margin-bottom: 0; font-size: .875rem; }

/* Separación entre resultados esperados */
#accordionOE .divider { height: 0; background: none; margin: 0 0 1.5rem; }

/* Etiquetas de una o dos líneas: reservan dos líneas para que los campos queden alineados */
#accordionOE .contenedor-hover > div > .form-label { min-height: 2.6em; display: flex; align-items: flex-end; }
@media (max-width: 575.98px) {
  #accordionOE .contenedor-hover > div > .form-label { min-height: 0; }
}

/* Bajo 1600 px el resultado esperado pasa a ocupar su propia fila */
@media (max-width: 1599.98px) {
  #accordionOE .contenedor-hover > div:first-child { grid-column: 1 / -1; }
  #accordionOE .contenedor-hover > div:first-child > .form-label { min-height: 0; }
  #accordionOE .contenedor-hover > div:first-child textarea.form-control { height: 4.5rem; }
  #accordionOE .contenedor-hover > div[style*="0 0 350px"] { display: none; }
}
/* Escritorio y tablet horizontal: la iniciativa sigue en una sola fila de 4 columnas */
@media (min-width: 992px) and (max-width: 1599.98px) {
  #accordionOE .contenedor-hover { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.2fr); }
}
/* Teléfono horizontal y tablet vertical: 2 columnas */
@media (max-width: 991.98px) {
  #accordionOE .contenedor-hover { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Teléfono vertical: una columna */
@media (max-width: 575.98px) {
  #accordionOE .contenedor-hover { grid-template-columns: 1fr; padding: .9rem; }
}

/* Teléfono o tablet en horizontal con poca altura: cabecera y portada compactas */
@media (orientation: landscape) and (max-height: 540px) {
  .pdu-utilbar { display: none; }
  .pdu-brandbar .container { padding-block: .4rem; }
  .pdu-brand img { height: 40px; }
  .pdu-brand__sigla { font-size: 1.35rem; }
  .pdu-nav .nav-link { padding-block: .55rem; }
  .pdu-hero, .pdu-hero--compacto { min-height: 0; }
  .pdu-hero__inner, .pdu-hero--compacto .pdu-hero__inner { padding-block: 1.5rem; }
  .pdu-hero .pdu-circulo { width: 4rem; height: 4rem; font-size: 1.6rem; }
}