/* =========================================================
   Documentación de Dijit.app — hoja de estilos común
   Un solo fichero para todas las páginas de /documentacion/
   ========================================================= */

:root{
  --blue:#1D4ED8; --blue-dk:#1E40AF; --blue-lt:#E8F0FE;
  --green:#10B981; --amber:#B45309; --amber-lt:#FEF6E7;
  --text-1:#111827; --text-2:#6B7280; --text-3:#374151;
  --border:#E5E7EB; --border-dk:#D1D5DB;
  --bg:#FFFFFF; --bg-soft:#F4F9FC; --bg-code:#F3F4F6;
  --sidebar:300px; --content:760px;
  --radius:12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text-1);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}

/* ---------- Estructura ---------- */
.docs{display:block; max-width:1240px; margin:0 auto; padding:0 1.25rem}
@media(min-width:1024px){
  .docs{display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); gap:3rem; align-items:start}
}

/* ---------- Menú lateral ---------- */
.docs-nav{padding:2rem 0 3rem; border-bottom:1px solid var(--border)}
@media(min-width:1024px){
  .docs-nav{position:sticky; top:0; max-height:100vh; overflow-y:auto;
            border-bottom:0; border-right:1px solid var(--border); padding-right:1.5rem}
}
.docs-nav__home{display:block; font-weight:700; font-size:1rem; color:var(--text-1);
                text-decoration:none; margin-bottom:1.5rem}
.docs-nav__home:hover{color:var(--blue)}
.docs-nav ol{list-style:none; margin:0; padding:0; counter-reset:area}
.docs-nav > ol > li{margin:0 0 .35rem}
.docs-nav a{color:var(--text-3); text-decoration:none; font-size:.95rem;
            display:block; padding:.3rem .55rem; border-radius:8px; line-height:1.45}
.docs-nav a:hover{background:var(--bg-soft); color:var(--blue)}
.docs-nav a[aria-current="page"]{background:var(--blue-lt); color:var(--blue-dk); font-weight:600}
.docs-nav .soon{color:#9CA3AF; font-size:.95rem; padding:.3rem .55rem; display:block; cursor:default}
.docs-nav ol ol{margin:.15rem 0 .6rem .7rem; border-left:1px solid var(--border); padding-left:.5rem}
.docs-nav ol ol a, .docs-nav ol ol .soon{font-size:.9rem; padding:.22rem .5rem}

/* ---------- Contenido ---------- */
.docs-main{padding:2rem 0 4rem; max-width:var(--content)}
.crumbs{font-size:.85rem; color:var(--text-2); margin:0 0 1.25rem}
.crumbs a{color:var(--text-2); text-decoration:none}
.crumbs a:hover{color:var(--blue); text-decoration:underline}
.crumbs span{margin:0 .4rem; color:var(--border-dk)}

h1{font-size:clamp(1.75rem,3.6vw,2.4rem); line-height:1.2; letter-spacing:-.02em; margin:0 0 .75rem}
h2{font-size:clamp(1.25rem,2.4vw,1.5rem); line-height:1.3; letter-spacing:-.01em;
   margin:2.75rem 0 .75rem; scroll-margin-top:1.5rem}
h3{font-size:1.075rem; margin:1.75rem 0 .5rem}
p{margin:0 0 1rem}
.lead{font-size:1.15rem; color:var(--text-3); margin:0 0 1.5rem}
a{color:var(--blue)}
ul,ol{margin:0 0 1rem; padding-left:1.35rem}
li{margin:0 0 .45rem}
strong{font-weight:600}
code{background:var(--bg-code); border:1px solid var(--border); border-radius:6px;
     padding:.08em .38em; font-size:.9em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- Piezas ---------- */
.toc{background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius);
     padding:1.1rem 1.35rem; margin:0 0 2rem}
.toc p{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
       color:var(--text-2); font-weight:600; margin:0 0 .5rem}
.toc ol{margin:0; padding-left:1.1rem}
.toc li{margin:0 0 .25rem; font-size:.95rem}

.note{border-left:3px solid var(--blue); background:var(--blue-lt);
      border-radius:0 var(--radius) var(--radius) 0; padding:1rem 1.25rem; margin:1.5rem 0}
.note p:last-child{margin:0}
.warn{border-left-color:var(--amber); background:var(--amber-lt)}

.table-wrap{overflow-x:auto; margin:1.5rem 0}
table{border-collapse:collapse; width:100%; font-size:.95rem}
th,td{text-align:left; padding:.7rem .85rem; border-bottom:1px solid var(--border); vertical-align:top}
th{font-weight:600; background:var(--bg-soft); white-space:nowrap}

.cards{display:grid; gap:1rem; margin:1.5rem 0}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{border:1px solid var(--border); border-radius:var(--radius); padding:1.15rem 1.35rem;
      text-decoration:none; color:inherit; display:block; transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--blue); box-shadow:0 2px 12px rgba(29,78,216,.08)}
.card h2, .card h3{margin:0 0 .35rem; font-size:1.05rem}
.card p{margin:0; font-size:.92rem; color:var(--text-2)}
.card .count{display:block; margin-top:.6rem; font-size:.8rem; color:var(--text-2)}

.related{border-top:1px solid var(--border); margin-top:3rem; padding-top:1.5rem}
.related h2{margin-top:0; font-size:1.1rem}
.related ul{list-style:none; padding:0}

.page-meta{border-top:1px solid var(--border); margin-top:2.5rem; padding-top:1.25rem;
           font-size:.85rem; color:var(--text-2)}

/* ---------- Barra superior ---------- */
.site-bar{position:sticky; top:0; z-index:50; background:#fff;
          border-bottom:1px solid var(--border)}
.site-bar__in{max-width:1240px; margin:0 auto; padding:.7rem 1.25rem;
              display:flex; align-items:center; justify-content:space-between; gap:1rem}
.site-bar__brand{display:flex; align-items:center; gap:.6rem;
                 text-decoration:none; color:var(--text-1); font-weight:700; font-size:1rem}
.site-bar__brand img{display:block; height:32px; width:auto}
.site-bar__tag{font-weight:500; font-size:.9rem; color:var(--text-2);
               border-left:1px solid var(--border-dk); padding-left:.6rem}
.site-bar__nav{display:flex; align-items:center; gap:.35rem}
.site-bar__nav a{color:var(--text-3); text-decoration:none; font-size:.9rem;
                 padding:.45rem .7rem; border-radius:8px}
.site-bar__nav a:hover{background:var(--bg-soft); color:var(--blue)}
.site-bar__cta{background:var(--blue); color:#fff !important; font-weight:600}
.site-bar__cta:hover{background:var(--blue-dk) !important; color:#fff !important}
@media(max-width:520px){
  .site-bar__tag{display:none}
  .site-bar__nav a{padding:.4rem .5rem; font-size:.85rem}
}

/* El menú lateral se pega por debajo de la barra */
@media(min-width:1024px){
  .docs-nav{top:64px; max-height:calc(100vh - 64px)}
}

/* ---------- Pie ---------- */
.site-foot{border-top:1px solid var(--border); background:var(--bg-soft); margin-top:2rem}
.site-foot__in{max-width:1240px; margin:0 auto; padding:1.5rem 1.25rem;
               display:flex; flex-wrap:wrap; align-items:center;
               justify-content:space-between; gap:.75rem}
.site-foot p{margin:0; font-size:.85rem; color:var(--text-2)}
.site-foot nav{display:flex; flex-wrap:wrap; gap:1rem}
.site-foot a{color:var(--text-2); text-decoration:none; font-size:.85rem}
.site-foot a:hover{color:var(--blue); text-decoration:underline}

/* ---------- Menú plegable en móvil ----------
   En pantallas estrechas el índice iba antes que el texto y obligaba a
   recorrerlo entero. Ahora se pliega tras una barra y el contenido queda
   arriba. En escritorio no cambia nada: la barra desaparece y el menú se
   muestra siempre. Sin JavaScript. */
.docs-nav-toggle{display:none}

.docs-nav-label{
  display:flex; align-items:center; gap:.6rem;
  margin:1rem 0 .25rem; padding:.7rem 1rem;
  border:1px solid var(--border); border-radius:10px;
  background:var(--bg-soft); color:var(--text-1);
  font-size:.92rem; font-weight:600; cursor:pointer;
  user-select:none;
}
.docs-nav-label:hover{border-color:var(--blue); color:var(--blue)}
.docs-nav-label__icon{
  width:16px; height:2px; background:currentColor; position:relative; flex:0 0 auto;
}
.docs-nav-label__icon::before,
.docs-nav-label__icon::after{
  content:""; position:absolute; left:0; width:16px; height:2px; background:currentColor;
}
.docs-nav-label__icon::before{top:-5px}
.docs-nav-label__icon::after{top:5px}

/* Cerrado por defecto en móvil: el texto queda inmediatamente debajo */
@media(max-width:1023px){
  .docs-nav{display:none; padding-top:.5rem}
  .docs-nav-toggle:checked ~ .docs-nav{display:block}
  .docs-nav-toggle:checked ~ .docs-nav-label{border-color:var(--blue); color:var(--blue)}
  .docs-nav-toggle:checked ~ .docs-nav-label .docs-nav-label__icon{background:transparent}
  .docs-nav-toggle:checked ~ .docs-nav-label .docs-nav-label__icon::before{top:0; transform:rotate(45deg)}
  .docs-nav-toggle:checked ~ .docs-nav-label .docs-nav-label__icon::after{top:0; transform:rotate(-45deg)}
  .docs-main{padding-top:1rem}
}

/* En escritorio, la barra no existe */
@media(min-width:1024px){
  .docs-nav-label{display:none}
}

/* =========================================================
   Ajustes de lectura y de acceso — 31/08/2026
   ========================================================= */

/* ---------- Ancho de contenido y tablas ---------- */
:root{--content:880px}

table{font-size:.875rem}
th,td{padding:.6rem .8rem}
th{line-height:1.35}
/* En pantallas anchas la tabla puede salirse del ancho del texto:
   una tabla de cinco columnas necesita más aire que un párrafo. */
@media(min-width:1180px){
  .table-wrap{margin-left:-2.5rem; margin-right:-2.5rem}
  .table-wrap table{width:calc(100% - 0px)}
  .table-wrap th:first-child,.table-wrap td:first-child{padding-left:2.5rem}
  .table-wrap th:last-child,.table-wrap td:last-child{padding-right:2.5rem}
}

/* ---------- Tamaño de letra en móvil ---------- */
@media(max-width:1023px){
  body{font-size:15.5px}
  .lead{font-size:1.02rem}
  table{font-size:.82rem}
  th,td{padding:.5rem .6rem}
  .toc li{font-size:.9rem}
  .docs-main{padding-bottom:3rem}
}

/* ---------- Tarjetas de acceso ---------- */
.card{position:relative; padding-right:2.75rem}
.card h2,.card h3{color:var(--blue); display:flex; align-items:center; gap:.4rem}
a.card::after{
  content:"→"; position:absolute; right:1.2rem; top:1.15rem;
  font-size:1.1rem; line-height:1; color:var(--blue);
  transition:transform .15s ease;
}
a.card:hover::after{transform:translateX(3px)}
a.card{background:#fff}
a.card:hover{background:var(--bg-soft)}
/* Las tarjetas sin enlace -secciones aún no publicadas- no deben parecer pulsables */
div.card{opacity:.72; background:var(--bg-soft)}
div.card h2,div.card h3{color:var(--text-2)}

/* ---------- Ruta de acceso ---------- */
.path{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  margin:1.25rem 0 1.5rem; padding:.75rem 1rem;
  background:var(--blue-lt); border-left:3px solid var(--blue);
  border-radius:0 10px 10px 0;
  font-size:.9rem; color:var(--blue-dk);
}
.path b{font-weight:600}
.path span{color:var(--blue); opacity:.6}
@media(max-width:1023px){
  .path{font-size:.85rem; padding:.6rem .8rem}
}

/* =========================================================
   Ajustes de móvil y ruta de acceso — 31/08/2026 (2)
   ========================================================= */

@media(max-width:1023px){
  /* Letra más contenida: en pantalla estrecha el texto largo cansa antes */
  body{font-size:14.5px; line-height:1.62}
  h1{font-size:1.55rem}
  h2{font-size:1.2rem; margin-top:2.25rem}
  h3{font-size:1rem}
  .lead{font-size:.98rem}
  .toc{padding:.9rem 1.1rem}
  .toc li{font-size:.86rem}
  .card p{font-size:.86rem}
  .page-meta{font-size:.78rem}

  /* Tablas: en lugar de comprimir las columnas hasta hacerlas ilegibles,
     la tabla mantiene un ancho mínimo y el bloque se desplaza en horizontal. */
  .table-wrap{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin-left:-1.25rem; margin-right:-1.25rem;
    padding-left:1.25rem; padding-right:1.25rem;
    border-radius:0;
  }
  .table-wrap table{min-width:640px; font-size:.8rem}
  .table-wrap th,.table-wrap td{padding:.5rem .7rem}
  .table-wrap th{white-space:nowrap}
  /* Aviso de que la tabla se desplaza */
  .table-wrap::after{
    content:"Desliza la tabla para ver el resto →";
    display:block; padding:.4rem 0 0;
    font-size:.72rem; color:var(--text-2); font-style:italic;
  }
}

/* ---------- Ruta de acceso, más visible ---------- */
.path{
  background:var(--blue-lt);
  border:1px solid rgba(29,78,216,.22);
  border-left:4px solid var(--blue);
  border-radius:0 12px 12px 0;
  padding:.85rem 1.1rem;
  margin:1.5rem 0;
  gap:.45rem;
}
.path::before{
  content:"Dónde está";
  display:block; width:100%;
  font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue); opacity:.85; margin-bottom:.15rem;
}
.path b{
  background:#fff; border:1px solid rgba(29,78,216,.25);
  padding:.2rem .5rem; border-radius:7px;
  color:var(--blue-dk); font-weight:600; white-space:nowrap;
}
.path span{font-size:1rem; opacity:.55}
@media(max-width:1023px){
  .path{padding:.75rem .85rem; font-size:.82rem}
  .path b{padding:.15rem .4rem}
}

/* ---------- Navegación entre páginas ---------- */
.pagenav{
  display:grid; gap:.75rem; margin:2.5rem 0 1rem;
  border-top:1px solid var(--border); padding-top:1.75rem;
}
@media(min-width:640px){ .pagenav{grid-template-columns:1fr 1fr} }
.pagenav__link{
  display:block; padding:.85rem 1.1rem;
  border:1px solid var(--border); border-radius:var(--radius);
  text-decoration:none; color:inherit; background:#fff;
  transition:border-color .15s, background .15s;
}
.pagenav__link:hover{border-color:var(--blue); background:var(--bg-soft)}
.pagenav__link span{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-2); margin-bottom:.2rem;
}
.pagenav__link b{display:block; font-size:.95rem; font-weight:600; color:var(--blue); line-height:1.35}
.pagenav__link--prev span::before{content:"← "}
.pagenav__link--next{text-align:right}
.pagenav__link--next span::after{content:" →"}
.pagenav__gap{display:none}
@media(min-width:640px){ .pagenav__gap{display:block} }

.totop{margin:0 0 .5rem; text-align:center}
.totop a{
  display:inline-block; padding:.5rem 1rem;
  font-size:.85rem; color:var(--text-2); text-decoration:none;
  border:1px solid var(--border); border-radius:999px; background:#fff;
}
.totop a:hover{color:var(--blue); border-color:var(--blue)}
@media(max-width:1023px){
  .pagenav{margin-top:2rem}
  .pagenav__link b{font-size:.9rem}
  .totop a{padding:.55rem 1.2rem}
}