/* Ajustes globales de la intranet sobre slim.css.
 * Se carga desde include/head.php, por lo que aplica a todas las páginas que usan ese head.
 * 2026-10-11: footer con texto más legible (Slim trae 13px). */
:root{--intranet-footer-font-size:15px;--intranet-footer-height:48px}
.slim-footer .container,
.slim-footer .container-fluid{font-size:var(--intranet-footer-font-size)}
/* 2026-10-11: footer ~20% más angosto (Slim trae 60px de alto en escritorio). */
@media (min-width: 768px){
  .slim-footer .container,
  .slim-footer .container-fluid{height:var(--intranet-footer-height)}
}

/* =============================================================================================
   ESTÁNDAR INTRANET (piloto: Control Pagos, 2026-10-11). Prefijo pr- = componente global.
   ============================================================================================= */

/* Botón de ayuda / "Cómo funciona": usar SIEMPRE este para botones de consulta de ayuda.
   Markup: <button class="pr-help-btn" type="button"><span class="pr-help-btn-icon" aria-hidden="true">
   <i class="fa-duotone fa-circle-question" style="--fa-primary-color:#ffffff;--fa-secondary-color:#e59a00;--fa-secondary-opacity:1;"></i>
   </span><span>Cómo funciona</span></button> */
.pr-help-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px 0 6px;border:1px solid #f1d08a;border-radius:999px;background:linear-gradient(180deg,#fffaf0 0%,#fff1cf 100%);color:#7a5300;font-size:14px;font-weight:700;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;vertical-align:middle;box-shadow:0 2px 6px rgba(229,154,0,.18);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.pr-help-btn-icon{display:inline-flex;align-items:center;justify-content:center;font-size:24px;line-height:1}
.pr-help-btn:hover,.pr-help-btn:focus{background:linear-gradient(180deg,#fff6e0 0%,#ffe7ad 100%);color:#5e4000;transform:translateY(-1px);box-shadow:0 5px 12px rgba(229,154,0,.28);outline:none}
.pr-help-btn:focus-visible{outline:3px solid #ffe2a3;outline-offset:2px}

/* Encabezado de página con ícono del módulo. Se usa junto a .slim-pageheader (migas a la derecha).
   Markup: <div class="slim-pageheader pr-pagehead"><ol class="breadcrumb slim-breadcrumb">…</ol>
   <div class="pr-pagehead-main"><span class="pr-pagehead-icon"><i class="fa-duotone fa-…"></i></span>
   <div class="pr-pagehead-text"><h1 class="pr-pagehead-title">Título [botón ayuda]</h1><p class="pr-pagehead-sub">Bajada</p></div></div></div> */
:root{--pr-pagehead-icon-box:56px;--pr-pagehead-icon-size:32px;--pr-pagehead-title-size:24px;--pr-pagehead-sub-size:14px}
.slim-pageheader.pr-pagehead{padding:18px 0 14px;align-items:center}
.pr-pagehead-main{display:flex;align-items:center;gap:14px;min-width:0}
.pr-pagehead-icon{width:var(--pr-pagehead-icon-box);height:var(--pr-pagehead-icon-box);min-width:var(--pr-pagehead-icon-box);display:flex;align-items:center;justify-content:center;border-radius:16px;background:#fff;border:1px solid #e3eaf1;box-shadow:0 3px 10px rgba(28,59,83,.08);font-size:var(--pr-pagehead-icon-size);line-height:1}
.pr-pagehead-text{min-width:0}
.pr-pagehead-title{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0;font-size:var(--pr-pagehead-title-size);font-weight:800;line-height:1.15;letter-spacing:-.3px;color:#1f2d3d;text-transform:none}
.pr-pagehead-sub{margin:3px 0 0;font-size:var(--pr-pagehead-sub-size);line-height:1.3;color:#607487}
.pr-pagehead .slim-breadcrumb{align-self:center}
@media (max-width:575px){:root{--pr-pagehead-icon-box:46px;--pr-pagehead-icon-size:26px;--pr-pagehead-title-size:20px}.pr-pagehead .slim-breadcrumb{margin-bottom:10px}}

/* --- v2 (2026-10-11): ícono con contraste, submódulo destacado y migas estándar --- */
:root{
  --pr-pagehead-icon-box:68px;
  --pr-pagehead-icon-size:38px;
  --pr-pagehead-title-size:26px;
  --pr-pagehead-sub-size:14.5px;
  --pr-accent:#0b5d78;          /* color institucional del módulo (cambiar por módulo si se quiere) */
  --pr-accent-2:#0597c4;
}
.pr-pagehead-icon{border:0;border-radius:18px;background:linear-gradient(135deg,var(--pr-accent) 0%,var(--pr-accent-2) 100%);box-shadow:0 6px 16px rgba(11,93,120,.30)}
.pr-pagehead-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px}
.pr-pagehead-title{display:block}
.pr-pagehead-submodule{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:999px;background:#e3f4fa;border:1px solid #b9e0ed;color:var(--pr-accent);font-size:16px;font-weight:800;line-height:1;white-space:nowrap}
.pr-pagehead-submodule i,.pr-pagehead-submodule svg{font-size:17px;--fa-primary-color:var(--pr-accent);--fa-secondary-color:#38b27a;--fa-secondary-opacity:1}
.pr-pagehead-sub{margin-top:5px}

/* Migas de pan estándar: cápsula blanca, íconos y nivel actual destacado. Usar .pr-breadcrumb en el <ol>. */
.pr-breadcrumb{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px;margin:0;padding:5px 6px 5px 12px;list-style:none;background:#fff;border:1px solid #e3eaf1;border-radius:999px;box-shadow:0 2px 8px rgba(28,59,83,.06);font-size:13.5px}
.pr-breadcrumb .breadcrumb-item{display:inline-flex;align-items:center;padding:0;color:#607487}
.pr-breadcrumb .breadcrumb-item + .breadcrumb-item{padding-left:0}
.pr-breadcrumb .breadcrumb-item + .breadcrumb-item::before{content:"\203A";float:none;padding:0 8px;color:#b5c2cf;font-size:18px;line-height:1}
.pr-breadcrumb .breadcrumb-item a,.pr-breadcrumb .breadcrumb-item > span{display:inline-flex;align-items:center;gap:6px;color:#607487;text-decoration:none;border-radius:999px;padding:4px 6px;transition:background .15s ease,color .15s ease}
.pr-breadcrumb .breadcrumb-item a:hover,.pr-breadcrumb .breadcrumb-item a:focus{background:#f1f6f9;color:var(--pr-accent);outline:none}
.pr-breadcrumb .breadcrumb-item i,.pr-breadcrumb .breadcrumb-item svg{font-size:15px;--fa-primary-color:#607487;--fa-secondary-color:#b9d3e0;--fa-secondary-opacity:1}
.pr-breadcrumb .breadcrumb-item.active > span{background:var(--pr-accent);color:#fff;font-weight:700;padding:5px 12px}
.pr-breadcrumb .breadcrumb-item.active i,.pr-breadcrumb .breadcrumb-item.active svg{--fa-primary-color:#ffffff;--fa-secondary-color:#7ff0bd}
@media (max-width:575px){:root{--pr-pagehead-icon-box:52px;--pr-pagehead-icon-size:28px;--pr-pagehead-title-size:21px}.pr-pagehead-submodule{font-size:14px;height:28px}}

/* --- v3 (2026-10-11): ícono sobre fondo claro, paleta del módulo verde dinero + dorado, migas grises --- */
:root{
  --pr-accent:#17643c;          /* verde dinero (texto/ícono principal) */
  --pr-accent-2:#e0a100;        /* dorado (segundo tono del ícono) */
  --pr-accent-soft:#eaf6ef;     /* fondo suave */
  --pr-accent-border:#c3e6d0;   /* borde suave */
  --pr-neutral:#6b7a89;         /* migas no vigentes */
}
.pr-pagehead-icon{background:#fff;border:1px solid #dfe8ef;box-shadow:0 4px 14px rgba(28,59,83,.10)}
.pr-pagehead-icon i,.pr-pagehead-icon svg{--fa-primary-color:var(--pr-accent);--fa-secondary-color:var(--pr-accent-2);--fa-secondary-opacity:1}
.pr-pagehead-submodule{background:var(--pr-accent-soft);border-color:var(--pr-accent-border);color:var(--pr-accent)}
.pr-pagehead-submodule i,.pr-pagehead-submodule svg{--fa-primary-color:var(--pr-accent);--fa-secondary-color:var(--pr-accent-2)}
/* Migas: todo gris; solo la sección vigente con el color del módulo, en fondo suave */
.pr-breadcrumb .breadcrumb-item a,.pr-breadcrumb .breadcrumb-item > span{color:var(--pr-neutral)}
.pr-breadcrumb .breadcrumb-item i,.pr-breadcrumb .breadcrumb-item svg{--fa-primary-color:var(--pr-neutral);--fa-secondary-color:#c9d3dc}
.pr-breadcrumb .breadcrumb-item a:hover,.pr-breadcrumb .breadcrumb-item a:focus{background:#f2f5f8;color:#3f4d5b}
.pr-breadcrumb .breadcrumb-item.active > span{background:var(--pr-accent-soft);color:var(--pr-accent);border:1px solid var(--pr-accent-border);font-weight:700;padding:4px 12px}
.pr-breadcrumb .breadcrumb-item.active i,.pr-breadcrumb .breadcrumb-item.active svg{--fa-primary-color:var(--pr-accent);--fa-secondary-color:var(--pr-accent-2)}

/* --- v4 (2026-10-11): mismos íconos y colores que el menú Herramientas › Control Pagos ---
   Módulo (tile)      : fa-money-check-dollar  · Submódulo (chip y miga vigente): fa-file-invoice-dollar
   Colores de ícono   : azul intranet #0384AD + dorado #F0B44D (idénticos en menú, chip y migas)        */
:root{
  --pr-accent:#035f7d;          /* texto sobre fondo suave (contraste AA) */
  --pr-accent-icon:#0384AD;     /* tono principal del ícono (igual al menú) */
  --pr-accent-2:#F0B44D;        /* tono secundario del ícono (igual al menú) */
  --pr-accent-soft:#eaf6fb;
  --pr-accent-border:#bfe3ef;
}
.pr-pagehead-icon i,.pr-pagehead-icon svg,
.pr-pagehead-submodule i,.pr-pagehead-submodule svg,
.pr-breadcrumb .breadcrumb-item.active i,.pr-breadcrumb .breadcrumb-item.active svg{--fa-primary-color:var(--pr-accent-icon);--fa-secondary-color:var(--pr-accent-2);--fa-secondary-opacity:1}
/* Migas en una sola línea en escritorio (en celular pueden bajar de línea) */
@media (min-width:992px){.pr-breadcrumb{flex-wrap:nowrap;white-space:nowrap}}
.slim-pageheader.pr-pagehead{gap:16px}
/* Migas compactas en iPad/celular: los niveles anteriores muestran solo su ícono, el vigente conserva el texto */
@media (max-width:991px){
  .pr-breadcrumb{flex-wrap:nowrap;white-space:nowrap;max-width:100%}
  .pr-breadcrumb .breadcrumb-item:not(.active) > a,.pr-breadcrumb .breadcrumb-item:not(.active) > span{font-size:0;gap:0;padding:6px}
  .pr-breadcrumb .breadcrumb-item + .breadcrumb-item::before{padding:0 4px}
}
/* Footer: "Prorenta" solo como marca visual (sin link) */
.slim-footer-brand{color:#1b84e7;font-weight:500}