/* =========================================================================
   Libro de Orden - IREP Presbiterio Andino
   Hoja de estilos autónoma (sin CDN). Contiene únicamente las utilidades
   realmente usadas en el marcado (extraídas 1:1 del Tailwind original) más
   las reglas propias del sitio (header dinámico, notas al pie, etc).
   ========================================================================= */

/* --- 1. Fuentes locales (autohospedadas, cero Google Fonts) ------------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/lora-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Lora';
  font-style:italic;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/lora-italic-variable.woff2') format('woff2');
}

/* --- 2. Variables y reset base ------------------------------------------ */
:root{
  --header-h:64px; /* valor por defecto; JS lo corrige con ResizeObserver */
  --color-red-700:#b91c1c;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Lora',Georgia,serif;
  background-color:#f8f7f4;
  color:#1f2937;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font:inherit;cursor:pointer;}
ul,ol{margin:0;padding:0;}
h1,h2,h3,p{margin:0;}

#sidebar,header,footer{font-family:'Inter',system-ui,sans-serif;}

/* --- 3. Componentes propios del sitio ----------------------------------- */
.xref{color:#b91c1c;text-decoration:none;font-weight:500;border-bottom:1px dotted #b91c1c;transition:color .15s,border-color .15s;}
.xref:hover{color:#7f1d1d;border-bottom-style:solid;}

.sidebar-link.active{background-color:#fef2f2;color:#b91c1c;font-weight:600;}
.sidebar-link.active .font-mono{color:#b91c1c;}

.section-para:target{background-color:#fff7ed;border-left-color:#b91c1c !important;border-left-width:3px;}

#sidebar-nav::-webkit-scrollbar{width:4px;}
#sidebar-nav::-webkit-scrollbar-track{background:#f1f5f9;}
#sidebar-nav::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px;}
#sidebar-nav::-webkit-scrollbar-thumb:hover{background:#94a3b8;}

#main-content p,#main-content li{line-height:1.85;font-size:1rem;}
@media(min-width:1024px){#main-content p,#main-content li{font-size:1.0625rem;}}

.highlight-result{background-color:#fef08a;color:#713f12;border-radius:2px;padding:0 2px;}
.highlight-current{background-color:#f59e0b;color:#1c1917;}

/* Espacio en blanco para completar (fórmulas de ordenación/censura) */
.fill-blank{display:inline-block;min-width:5rem;border-bottom:2px solid #6b7280;margin:0 0.125rem;vertical-align:bottom;}

/* Títulos de capítulo/parte: nunca desbordan en pantallas de 320-430px */
.chapter-title,.part-title,.prefacio-title{
  overflow-wrap:break-word;word-break:break-word;hyphens:auto;
}
.chapter-title{line-height:1.25;}

/* Superíndices de notas al pie */
.footnote-ref{
  color:#b91c1c;text-decoration:none;font-weight:600;font-size:0.7em;
  vertical-align:super;line-height:0;margin-left:1px;
}
.footnote-ref:hover{text-decoration:underline;}
.chapter-footnotes{
  margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid #e5e7eb;
  font-family:'Inter',system-ui,sans-serif;
}
.chapter-footnotes p.footnotes-title{
  font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:#6b7280;margin-bottom:.75rem;
}
.chapter-footnotes ol{list-style:none;counter-reset:fn;margin:0;padding:0;}
.chapter-footnotes li{
  font-size:0.875rem;color:#4b5563;line-height:1.6;margin-bottom:.5rem;
  padding-left:1.5rem;position:relative;
}
.chapter-footnotes li::before{
  content:attr(data-num) ".";position:absolute;left:0;color:#b91c1c;font-weight:600;
}
.footnote-back{color:#9ca3af;text-decoration:none;margin-left:.25rem;}
.footnote-back:hover{color:#b91c1c;}

/* Lista continua "Principios Preliminares" (1 a 8) */
.principios-list{list-style:decimal;margin:0.5rem 0 0.5rem 1.5rem;padding:0;}
.principios-list>li{padding-left:0.25rem;margin-bottom:0.75rem;}
.principios-list>li>p{margin-bottom:0.5rem;}
.principios-list>li>p:last-child{margin-bottom:0;}

/* Prólogo temporal de Parte III */
.parte-prologo{font-style:italic;color:#6b7280;font-size:0.95em;}

/* --- 4. Utilidades (equivalentes exactos a las clases usadas) ----------- */
.block{display:block;}
.hidden{display:none;}
.flex{display:flex;}
.inline-block{display:inline-block;}
.flex-1{flex:1 1 0%;}
.flex-col{flex-direction:column;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.justify-center{justify-content:center;}
.shrink-0{flex-shrink:0;}
.min-w-0{min-width:0;}
.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.inset-0{top:0;right:0;bottom:0;left:0;}
.top-0{top:0;}
.top-2{top:0.5rem;}
.top-16{top:4rem;}
.left-0{left:0;}
.left-3{left:0.75rem;}
.right-0{right:0;}
.right-6{right:1.5rem;}
.bottom-0{bottom:0;}
.bottom-6{bottom:1.5rem;}
.z-30{z-index:30;}
.z-40{z-index:40;}
.z-50{z-index:50;}

.w-3\.5{width:0.875rem;}
.w-4{width:1rem;}
.w-5{width:1.25rem;}
.w-6{width:1.5rem;}
.w-8{width:2rem;}
.w-10{width:2.5rem;}
.w-28{width:7rem;}
.w-56{width:14rem;}
.w-72{width:18rem;}
.w-full{width:100%;}
.h-3\.5{height:0.875rem;}
.h-4{height:1rem;}
.h-5{height:1.25rem;}
.h-6{height:1.5rem;}
.h-8{height:2rem;}
.h-10{height:2.5rem;}
.h-16{height:4rem;}
.h-28{height:7rem;}
.min-h-screen{min-height:100vh;}
.max-w-3xl{max-width:48rem;}

.mx-auto{margin-left:auto;margin-right:auto;}
.mx-0\.5{margin-left:0.125rem;margin-right:0.125rem;}
.ml-auto{margin-left:auto;}
.ml-6{margin-left:1.5rem;}
.mr-2{margin-right:0.5rem;}
.mt-0\.5{margin-top:0.125rem;}
.mt-1{margin-top:0.25rem;}
.mt-3{margin-top:0.75rem;}
.mt-4{margin-top:1rem;}
.mt-7{margin-top:1.75rem;}
.mt-14{margin-top:3.5rem;}
.mt-16{margin-top:4rem;}
.mb-1{margin-bottom:0.25rem;}
.mb-2{margin-bottom:0.5rem;}
.mb-3{margin-bottom:0.75rem;}
.mb-4{margin-bottom:1rem;}
.mb-5{margin-bottom:1.25rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-12{margin-bottom:3rem;}
.my-2{margin-top:0.5rem;margin-bottom:0.5rem;}

.p-1{padding:0.25rem;}
.p-2{padding:0.5rem;}
.p-3{padding:0.75rem;}
.px-1{padding-left:0.25rem;padding-right:0.25rem;}
.px-3{padding-left:0.75rem;padding-right:0.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.pl-4{padding-left:1rem;}
.pl-7{padding-left:1.75rem;}
.pl-9{padding-left:2.25rem;}
.pr-3{padding-right:0.75rem;}
.pb-2{padding-bottom:0.5rem;}
.pb-3{padding-bottom:0.75rem;}
.pb-8{padding-bottom:2rem;}
.pt-3{padding-top:0.75rem;}
.pt-6{padding-top:1.5rem;}

.gap-1\.5{gap:0.375rem;}
.gap-2{gap:0.5rem;}
.gap-3{gap:0.75rem;}
.space-y-1>*+*{margin-top:0.25rem;}

.rounded{border-radius:0.25rem;}
.rounded-md{border-radius:0.375rem;}
.rounded-full{border-radius:9999px;}
.border{border-width:1px;border-style:solid;border-color:currentColor;}
.border-t{border-top-width:1px;border-top-style:solid;}
.border-b{border-bottom-width:1px;border-bottom-style:solid;}
.border-r{border-right-width:1px;border-right-style:solid;}
.border-t-2{border-top-width:2px;border-top-style:solid;}
.border-b-2{border-bottom-width:2px;border-bottom-style:solid;}
.border-l-2{border-left-width:2px;border-left-style:solid;}

.border-gray-100{border-color:#f3f4f6;}
.border-gray-200{border-color:#e5e7eb;}
.border-gray-300{border-color:#d1d5db;}
.border-gray-500{border-color:#6b7280;}
.border-red-200{border-color:#fecaca;}
.border-red-600{border-color:#dc2626;}

.bg-white{background-color:#ffffff;}
.bg-gray-50{background-color:#f9fafb;}
.bg-red-50{background-color:#fef2f2;}
.bg-red-700{background-color:#b91c1c;}
.bg-black\/40{background-color:rgba(0,0,0,.4);}

.text-white{color:#ffffff;}
.text-gray-400{color:#9ca3af;}
.text-gray-500{color:#6b7280;}
.text-gray-600{color:#4b5563;}
.text-gray-700{color:#374151;}
.text-gray-900{color:#111827;}
.text-red-600{color:#dc2626;}
.text-red-700{color:#b91c1c;}

.text-xs{font-size:0.75rem;line-height:1rem;}
.text-sm{font-size:0.875rem;line-height:1.25rem;}
.text-base{font-size:1rem;line-height:1.5rem;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}

.font-sans{font-family:'Inter',system-ui,sans-serif;}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.font-medium{font-weight:500;}
.font-semibold{font-weight:600;}
.font-bold{font-weight:700;}
.italic{font-style:italic;}
.leading-tight{line-height:1.25;}
.leading-snug{line-height:1.375;}
.leading-relaxed{line-height:1.625;}
.tracking-tight{letter-spacing:-0.025em;}
.tracking-wide{letter-spacing:0.025em;}
.tracking-wider{letter-spacing:0.05em;}
.tracking-widest{letter-spacing:0.1em;}
.uppercase{text-transform:uppercase;}
.text-center{text-align:center;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.select-none{user-select:none;}
.pointer-events-none{pointer-events:none;}
.opacity-0{opacity:0;}
.overflow-y-auto{overflow-y:auto;}
.object-contain{object-fit:contain;}
.align-bottom{vertical-align:bottom;}
.list-decimal{list-style-type:decimal;}
.list-disc{list-style-type:disc;}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05);}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}

.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;}
.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;}
.duration-300{transition-duration:.3s;}
.ease-in-out{transition-timing-function:cubic-bezier(.4,0,0,.2,1);}
.-translate-x-full{transform:translateX(-100%);}

/* interactivas */
.hover\:bg-red-50:hover{background-color:#fef2f2;}
.hover\:bg-red-100:hover{background-color:#fee2e2;}
.hover\:bg-red-800:hover{background-color:#991b1b;}
.hover\:border-red-300:hover{border-color:#fca5a5;}
.hover\:border-red-400:hover{border-color:#f87171;}
.hover\:text-red-600:hover{color:#dc2626;}
.hover\:text-red-700:hover{color:#b91c1c;}
.group:hover .group-hover\:text-red-500{color:#ef4444;}
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px;}
.focus\:border-red-400:focus{border-color:#f87171;}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--tw-ring-color,rgba(252,165,165,.6));}
.focus\:ring-red-300:focus{--tw-ring-color:#fca5a5;}

/* --- 5. Responsive (mobile-first; min-width como Tailwind) -------------- */
@media(min-width:640px){
  .sm\:flex{display:flex;}
  .sm\:hidden{display:none;}
  .sm\:px-10{padding-left:2.5rem;padding-right:2.5rem;}
  .sm\:text-base{font-size:1rem;line-height:1.5rem;}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem;}
}
@media(min-width:1024px){
  .lg\:hidden{display:none;}
  .lg\:ml-72{margin-left:18rem;}
  .lg\:px-12{padding-left:3rem;padding-right:3rem;}
  .lg\:translate-x-0{transform:translateX(0);}
}
@media(min-width:1280px){
  .xl\:hidden{display:none;}
  .xl\:inline{display:inline;}
  .xl\:px-16{padding-left:4rem;padding-right:4rem;}
  .xl\:w-72{width:18rem;}
}

/* --- 6. Header/sidebar dinámicos (fix definitivo de móvil) -------------- */
#main-area{padding-top:var(--header-h);}
#sidebar{top:var(--header-h);}
.scroll-anchor{scroll-margin-top:calc(var(--header-h) + 16px);}

/* --- 7. Impresión --------------------------------------------------------*/
@media print{
  #sidebar,header button,#mobile-overlay,#back-to-top{display:none !important;}
  #main-area{margin-left:0 !important;padding-top:0 !important;}
}