/* =====================================================================
   El Orienta · hoja de estilos de la web nueva (curso 2026-27)
   Usa los mismos nombres que la web de siempre:
     #pagewrap  → toda la página
     #header    → la cabecera con la cara del Orienta y el título
     #main-nav  → el menú azul
     #content   → la columna de la izquierda
     #derecha   → la columna de la derecha
     .content2  → cada caja
     h4.title   → el título de una caja      img.foto → su dibujo
     h5.title   → un subtítulo dentro de la caja
     #footer    → el pie
   Los colores están todos juntos aquí abajo, para cambiarlos en un solo sitio.
   ===================================================================== */
:root{
  --fondo:#f7f1e6;      /* color crema del fondo */
  --caja:#ffffff;       /* fondo de las cajas */
  --texto:#2a2730;
  --suave:#5f5a63;      /* texto gris */
  --borde:#eadfcd;
  --azul:#1f4f8f;       /* menú, enlaces y botones */
  --azul-osc:#163a6c;   /* títulos y pie */
  --azul-claro:#e7eef8; /* fondo del botón «Seguir leyendo» */
  --mostaza:#c9962f;    /* rayitas de los subtítulos */
  --mostaza-claro:#fbf1dc;
  --rojo:#b8512c;       /* título del aviso del curso */
  --letra:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --letra-titulo:"Fraunces",Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font:400 17px/1.6 var(--letra)}
img{max-width:100%;height:auto}
a{color:var(--azul)}
a:hover{color:var(--rojo)}
p{margin:0 0 .8em}

/* ---------- Toda la página: dos columnas ---------- */
#pagewrap{width:min(1180px,100% - 32px);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
/* la cabecera, el menú y el pie ocupan todo el ancho de la pantalla */
#header,nav,#footer{grid-column:1/-1;margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}

/* ---------- Cabecera ---------- */
#header{background:linear-gradient(180deg,#fff8ea,#f7ecd6);border-bottom:1px solid var(--borde);display:flex;align-items:center;justify-content:center;gap:16px;padding-block:18px}
#header a{display:flex;align-items:center;gap:16px;text-decoration:none}
#header img{width:76px;height:76px;border-radius:50%;box-shadow:0 0 0 4px #fff,0 4px 14px rgba(120,80,10,.25)}
#header .titulo{font:700 clamp(1.8rem,4.4vw,2.8rem)/1.05 var(--letra-titulo);color:var(--azul-osc)}
#header .titulo small{display:block;font:600 .9rem/1.4 var(--letra);color:var(--suave);margin-top:4px}

/* ---------- Menú azul ---------- */
nav{background:var(--azul);position:sticky;top:0;z-index:20;margin-top:-24px;margin-bottom:4px}
#main-nav{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap}
#main-nav a{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;padding:10px 18px;border-bottom:3px solid transparent}
#main-nav a:hover{background:var(--azul-osc)}
#main-nav a.activo{border-bottom-color:var(--mostaza);background:rgba(255,255,255,.08)}
#main-nav img{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.28))}
#main-nav img.cara{border-radius:50%;filter:none;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
#boton-menu{display:none}

/* ---------- Columnas ---------- */
#content,#derecha{display:grid;gap:24px;padding-bottom:16px}
#content.solo{grid-column:1/-1;width:100%;max-width:720px;margin:0 auto}   /* páginas de una sola columna */

/* ---------- Cajas ---------- */
.content2{background:var(--caja);border:1px solid var(--borde);border-radius:18px;padding:22px 24px;box-shadow:0 1px 2px rgba(60,40,10,.06),0 6px 20px rgba(60,40,10,.07)}
h4.title{display:flex;align-items:center;gap:12px;margin:0 0 .7em;font:800 1.25rem/1.25 var(--letra);color:var(--azul-osc)}
img.foto{width:46px;height:46px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 3px rgba(20,35,70,.22))}
img.foto.cara{border-radius:50%;filter:none}
h5.title{font:800 1.02rem/1.3 var(--letra);margin:1.1em 0 .4em;padding-left:12px;border-left:4px solid var(--mostaza)}
h4.title + h5.title{margin-top:0}
/* caja del aviso del curso (arriba a la izquierda) */
.content2.destacado{background:linear-gradient(135deg,var(--mostaza-claro),#fff 70%);border-color:#efd8a6}
.content2.destacado h4.title{font:700 1.45rem/1.2 var(--letra-titulo);color:var(--rojo)}

.lista{margin:0 0 .8em;padding-left:1.2em}
.lista li{margin:.35em 0}
.lista li::marker{color:var(--mostaza)}
.lista ol{padding-left:1.2em;margin:.3em 0}
.etiqueta{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--rojo);margin:1em 0 .2em}

/* ---------- «(Seguir leyendo)» y «(Cerrar)» ---------- */
a.seguir,a.cerrar{display:inline-block;font-weight:800;color:var(--azul);background:var(--azul-claro);padding:4px 14px;border-radius:999px;font-size:.92rem;text-decoration:none;margin:.2em 0 .6em}
a.seguir:hover,a.cerrar:hover{background:#d6e3f4;color:var(--azul)}
p.derecha{text-align:right;margin:.4em 0 0}

/* ---------- Botones y etiquetas ---------- */
.boton{display:inline-block;background:var(--azul);color:#fff !important;text-decoration:none;font-weight:800;padding:11px 20px;border-radius:999px;border:0;font-size:1rem;font-family:inherit;cursor:pointer}
.boton:hover{background:var(--azul-osc)}
.boton-pequeno{padding:8px 16px;font-size:.92rem}
.chips{list-style:none;padding:0;margin:0 0 .8em;display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-block;text-decoration:none;font-weight:700;padding:6px 14px;border-radius:999px;background:var(--mostaza-claro);color:var(--texto)}
.chips a:hover{background:var(--azul);color:#fff}

/* ---------- Formularios ---------- */
.formulario{display:grid;gap:16px;margin-top:8px}
.formulario .fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:grid;gap:5px}
.campo label{font-weight:800;font-size:.95rem}
.campo small{color:var(--suave);font-size:.85rem}
.campo input,.campo textarea{width:100%;font:inherit;font-size:1rem;color:var(--texto);background:#fffdf9;border:1.5px solid #d9ccb6;border-radius:12px;padding:11px 14px}
.campo textarea{min-height:170px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-claro)}
.formulario .acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between}
.aviso-caja{background:var(--mostaza-claro);border:1px solid #efd8a6;border-radius:12px;padding:12px 16px;font-size:.95rem}
.aviso-caja p:last-child{margin:0}
.precio{display:inline-block;font-weight:800;color:var(--rojo);background:var(--mostaza-claro);border-radius:999px;padding:4px 14px}

/* ---------- Tablas (facturas pendientes) ---------- */
.tabla_sencilla{width:100%;border-collapse:collapse;font-size:.95rem}
.tabla_sencilla th{text-align:left;background:var(--azul);color:#fff;padding:10px 12px;font-weight:800}
.tabla_sencilla td{padding:9px 12px;border-bottom:1px solid var(--borde)}
.tabla_sencilla tr:nth-child(even) td{background:#fcf8f0}

/* ---------- Ayuda paso a paso (tutor) ---------- */
.menu2 h4.title{margin:0}
.menu2 h4.title a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--azul-osc);width:100%}
.menu2 h4.title a::after{content:"Ver";margin-left:auto;font-size:.85rem;background:var(--azul-claro);color:var(--azul);padding:4px 12px;border-radius:999px}
.menu2 .paso{padding-top:14px}
.menu2 .paso img{display:block;margin:12px auto;border-radius:10px;border:1px solid var(--borde)}
.menu2 ol{padding-left:1.3em}
.menu2 ol li{margin:.45em 0}

/* ---------- Pie ---------- */
#footer{background:var(--azul-osc);color:#d8e1ef;padding-block:22px;text-align:center;font-size:.92rem;margin-top:16px}
#footer p{margin:0}
#footer a{color:#fff}

/* ---------- Tableta y móvil (lo que antes iba en media-queries.css) ---------- */
@media (max-width:1180px){
  #main-nav a{padding:10px 10px;gap:7px;font-size:.93rem}
  #main-nav img{width:28px;height:28px}
}
@media (max-width:900px){
  #pagewrap{grid-template-columns:1fr}
  #main-nav a{padding:10px 12px;font-size:.95rem}
}
@media (max-width:720px){
  body{font-size:16px}
  #header{justify-content:flex-start;padding-block:12px}
  #header img{width:56px;height:56px}
  #header .titulo small{font-size:.78rem}
  #boton-menu{display:block;width:100%;background:none;border:0;color:#fff;font:800 1rem var(--letra);text-align:left;padding:12px 0;cursor:pointer}
  #main-nav{display:none;flex-direction:column;padding-bottom:10px}
  #main-nav.abierto{display:flex}
  .content2{padding:18px}
  .formulario .fila{grid-template-columns:1fr}
}