/* Situar MI Asignatura · ux.css · rama ux/situar-navegacion-simple
   Estilos de la capa de navegación simplificada (escritorio). Reutiliza los tokens de app.css
   (--verde, --hondo, --crema, --oro, --gris, --borde, --rojo). Lo responsivo, el foco visible y la impresión
   están en ux-movil.css (capa «móvil y accesibilidad»). */

/* ---------- cabecera compacta ---------- */
header.app.ux{ padding:12px 18px; }
header.app.ux .topbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; max-width:1180px; margin:0 auto; }
header.app.ux .ux-id{ display:flex; align-items:baseline; gap:12px; min-width:0; }
header.app.ux .ux-id h1{ font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:1.45rem; margin:0; color:#fff; letter-spacing:.01em; white-space:nowrap; }
header.app.ux .ux-id h1 span{ color:#E8C766; }
header.app.ux .ux-id small{ color:#C9D4CC; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
header.app.ux .ux-nav{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ux-nav-btn{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.28); border-radius:10px; min-height:44px; padding:9px 16px; font:inherit; font-size:.92rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.ux-nav-btn:hover{ background:rgba(255,255,255,.08); }
.ux-nav-btn[aria-current="page"]{ background:#fff; color:var(--hondo); border-color:#fff; }
.ux-menu{ position:relative; }
.ux-menu > summary{ list-style:none; cursor:pointer; }
.ux-menu > summary::-webkit-details-marker{ display:none; }
.ux-menu > .ux-menu-panel{ position:absolute; right:0; top:calc(100% + 6px); background:#fff; color:var(--tinta); border:1.5px solid var(--borde); border-radius:12px; min-width:260px; padding:8px; box-shadow:0 10px 30px rgba(10,46,32,.18); z-index:40; }
.ux-menu-panel .ux-quien{ padding:8px 10px 10px; border-bottom:1px solid var(--borde); margin-bottom:6px; font-size:.9rem; }
.ux-menu-panel .ux-quien b{ display:block; color:var(--hondo); }
.ux-menu-panel .ux-quien span{ color:var(--gris); font-size:.82rem; word-break:break-all; }
.ux-menu-panel button, .ux-menu-panel a{ display:block; width:100%; text-align:left; background:transparent; border:none; border-radius:8px; padding:10px 10px; font:inherit; font-size:.92rem; color:var(--hondo); cursor:pointer; text-decoration:none; min-height:44px; }
.ux-menu-panel button:hover, .ux-menu-panel a:hover{ background:var(--crema); }
.ux-menu-panel .ux-sep{ border-top:1px solid var(--borde); margin:6px 0; }
.ux-menu-panel .ux-peligro{ color:var(--rojo); }
body.consesion header.app.ux .ux-solo-sesion{ display:inline-flex; }
header.app.ux .ux-solo-sesion{ display:none; }

/* ---------- navegación del editor: etapas (preparación) o diaria (uso) ---------- */
#uxNav{ margin:4px 0 18px; }
.ux-etapas{ display:flex; gap:8px; list-style:none; padding:0; margin:0; counter-reset:etapa; }
.ux-etapas li{ flex:1; min-width:0; }
.ux-etapa{ width:100%; min-height:56px; display:flex; align-items:center; gap:10px; background:#fff; border:1.6px solid var(--borde); border-radius:12px; padding:8px 12px; cursor:pointer; font:inherit; text-align:left; color:var(--tinta); }
.ux-etapa .n{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--borde); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.ux-etapa .t{ display:flex; flex-direction:column; min-width:0; }
.ux-etapa .t b{ font-size:.92rem; color:var(--hondo); }
.ux-etapa .t small{ color:var(--gris); font-size:.76rem; }
.ux-etapa[aria-current="step"]{ border-color:var(--verde); box-shadow:0 2px 10px rgba(15,76,52,.12); }
.ux-etapa[aria-current="step"] .n{ background:var(--verde); }
.ux-etapa.hecha .n{ background:var(--oro); }
.ux-etapa[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
.ux-etapa[aria-disabled="true"] .t small::after{ content:' · todavía no'; }
.ux-compacta{ display:none; align-items:center; justify-content:space-between; gap:10px; background:#fff; border:1.6px solid var(--verde); border-radius:12px; padding:10px 14px; }
.ux-compacta b{ color:var(--hondo); }
.ux-compacta .ux-enl{ background:none; border:none; color:var(--verde); font:inherit; font-weight:600; cursor:pointer; padding:8px; min-height:44px; }
.ux-diaria{ display:flex; gap:6px; background:#fff; border:1.6px solid var(--borde); border-radius:12px; padding:6px; list-style:none; margin:0; }
.ux-diaria li{ flex:1; }
.ux-tab{ width:100%; min-height:44px; border:none; border-radius:9px; background:transparent; font:inherit; font-size:.95rem; font-weight:600; color:var(--verde); cursor:pointer; padding:10px 12px; }
.ux-tab[aria-current="page"]{ background:var(--verde); color:#fff; }
.ux-tab:hover:not([aria-current="page"]){ background:var(--crema); }
.ux-asig{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 10px; }
.ux-asig h2{ font-family:Georgia,serif; color:var(--verde); font-size:1.15rem; margin:0; font-weight:400; }
.ux-asig .ux-estado{ font-size:.82rem; color:var(--gris); }
.ux-asig .ux-estado b{ color:var(--hondo); }

/* ---------- Mis asignaturas ---------- */
.ux-retome{ color:var(--gris); margin:-2px 0 14px; }
.ux-tarjeta{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 16px; border:1.5px solid var(--borde); border-radius:12px; margin-bottom:10px; background:#fff; }
.ux-tarjeta.ux-destacada{ border-color:var(--verde); box-shadow:0 2px 12px rgba(15,76,52,.10); }
.ux-tarjeta .ux-nom{ font-weight:700; font-size:1rem; color:var(--hondo); }
.ux-tarjeta .ux-meta{ font-size:.82rem; color:var(--gris); margin-top:3px; }
.ux-tarjeta .ux-chip{ display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.03em; padding:2px 8px; border-radius:999px; margin-left:8px; vertical-align:middle; background:var(--crema); color:var(--hondo); border:1px solid var(--borde); }
.ux-tarjeta .ux-chip.firmada{ background:#E8F3EC; color:var(--verde); border-color:#BFD9C8; }
.ux-tarjeta .ux-acciones{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ux-tarjeta .ux-mas{ position:relative; }
.ux-tarjeta .ux-mas > summary{ list-style:none; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; }
.ux-tarjeta .ux-mas > summary::-webkit-details-marker{ display:none; }
.ux-tarjeta .ux-mas .ux-menu-panel{ min-width:200px; }
.ux-vacio{ text-align:center; padding:26px 12px 10px; }
.ux-vacio p{ color:var(--gris); margin-bottom:16px; }

/* ---------- acción principal por etapa ---------- */
.ux-acciones-etapa{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:18px; padding-top:14px; border-top:1px solid var(--borde); }
.ux-acciones-etapa .ux-sec{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.ux-nota-accion{ width:100%; color:var(--gris); font-size:.86rem; }
.ux-oculto{ display:none !important; }

/* ---------- Mi programa ---------- */
.ux-programa-cab h2{ margin-bottom:4px; }
.ux-programa-cab p.hint{ margin-bottom:14px; }
.ux-revise{ background:var(--crema); border-left:4px solid var(--oro); padding:10px 14px; border-radius:0 10px 10px 0; font-size:.9rem; margin:14px 0 6px; }
.ux-condiciones label{ font-weight:700; color:var(--hondo); }

/* ---------- Contenidos ---------- */
.ux-resumen{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin:12px 0 16px; }
.ux-resumen .ux-cifra{ background:#fff; border:1.5px solid var(--borde); border-radius:12px; padding:12px 14px; }
.ux-resumen .ux-cifra b{ display:block; font-size:1.5rem; color:var(--hondo); font-family:Georgia,serif; font-weight:400; line-height:1.1; }
.ux-resumen .ux-cifra span{ font-size:.8rem; color:var(--gris); }
.ux-resumen .ux-cifra.alerta{ border-color:var(--rojo); } .ux-resumen .ux-cifra.alerta b{ color:var(--rojo); }
.ux-pend{ border:1.6px solid var(--rojo); background:#FBF1F1; border-radius:12px; padding:12px 14px; margin:0 0 16px; }
.ux-pend h3{ margin:0 0 6px; font-size:1rem; color:var(--rojo); font-family:Georgia,serif; }
.ux-pend ul{ margin:0; padding-left:18px; font-size:.9rem; }
.ux-pend li{ margin:3px 0; }
.ux-pend button{ background:none; border:none; color:var(--verde); font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; padding:2px 4px; min-height:32px; }
.ux-seccion{ margin-top:22px; padding-top:10px; border-top:1px solid var(--borde); }
.ux-seccion > h3{ margin-top:0 !important; }

/* ---------- Mis clases ---------- */
.ux-vista{ display:inline-flex; border:1.6px solid var(--verde); border-radius:10px; overflow:hidden; margin:8px 0 12px; }
.ux-vista button{ min-height:44px; padding:8px 18px; border:none; background:#fff; color:var(--verde); font:inherit; font-weight:700; cursor:pointer; }
.ux-vista button[aria-pressed="true"]{ background:var(--verde); color:#fff; }
.ux-ajustes{ margin-top:22px; padding-top:12px; border-top:1px solid var(--borde); }
.ux-ajustes > h3{ margin:0 0 8px; }

/* ---------- Revisar y firmar · Mi plan ---------- */
.ux-planbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--crema); padding:10px 12px; border-radius:12px; margin-bottom:12px; position:sticky; top:0; z-index:9; }
.ux-planbar .doctabs{ margin-right:auto; }
.ux-planbar .ux-estado-plan{ font-size:.86rem; color:var(--gris); width:100%; }
.ux-planbar .ux-estado-plan b{ color:var(--hondo); }
.ux-planbar .ux-estado-plan.firmado b{ color:var(--verde); }
.ux-menu.ux-descargar > summary{ display:inline-flex; align-items:center; gap:6px; min-height:36px; }
.ux-desfase{ border-left:4px solid var(--oro); background:var(--crema); padding:10px 14px; border-radius:0 10px 10px 0; margin:0 0 12px; font-size:.9rem; }

/* ---------- Ayuda ---------- */
.ux-ayuda-links{ padding:8px 12px 10px; border-bottom:1px solid var(--borde); }
.ux-ayuda-links h4{ margin:0 0 6px; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gris); }
.ux-ayuda-links ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 10px; }
.ux-ayuda-links a, .ux-ayuda-links button{ display:block; width:100%; text-align:left; background:none; border:none; font:inherit; font-size:.88rem; color:var(--verde); text-decoration:none; padding:7px 4px; cursor:pointer; min-height:36px; }
.ux-ayuda-links a:hover, .ux-ayuda-links button:hover{ text-decoration:underline; }

/* ---------- pie ---------- */
footer.app.ux{ justify-content:space-between; }
footer.app.ux a{ color:var(--verde); }