/* Navegación oficial · Cristian Estrada · v1.0 (6 nov 2026)
   Norma: «Interfaz web: navegación» del sistema de diseño. Requiere interfaz/base/base.css.
   Dos variantes: pestañas arriba (.ce-pestanas) y menú lateral (.ce-lateral, con iconos o con números). */

/* ── Pestañas arriba: hasta 5 o 6 secciones sin subsecciones ─────────── */
.ce-pestanas { display: flex; gap: 4px; overflow-x: auto; padding: 8px 24px; border-bottom: 1px solid var(--line); background: var(--surface); }
.ce-pestana { position: relative; flex: none; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px; background: none; color: var(--muted);
  font: 600 14px var(--fuente-ui); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, transform .08s; }
.ce-pestana:hover { background: var(--tint); color: var(--teal-deep); }
.ce-pestana:active { transform: scale(.97); background: var(--pulsado-tarjeta); color: var(--orange-text); }
.ce-pestana[aria-selected="true"] { background: var(--teal); color: var(--on-teal); }
.ce-pestana .ce-punto { position: absolute; top: 8px; right: 8px; }

/* Punto de aviso (pendientes, vencidos) */
.ce-punto { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--orange); }

/* ── Menú lateral: más de 6 secciones o con subsecciones ─────────────── */
.ce-app { display: flex; min-height: 100vh; }
.ce-app__contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ce-lateral { position: sticky; top: 0; height: 100vh; height: 100dvh; width: 288px; flex: none; z-index: 30; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line); font-family: var(--fuente-ui); transition: width .28s cubic-bezier(.2, .8, .2, 1); }
.ce-lateral::before { content: ""; display: block; height: 5px; flex: none; background: linear-gradient(to right, var(--teal) 70%, var(--orange) 70%); }
.ce-lateral__marca { height: 76px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.ce-lateral__logo { height: 32px; width: auto; max-width: 200px; }
.ce-lateral__iso { width: 36px; height: 30px; }
/* Marca: un solo logo visible según el tema (claro: a color; oscuro: blanco y naranja) y el estado */
.ce-lateral__marca img { display: none; }
html:not([data-tema="oscuro"]) .ce-lateral .ce-lateral__logo.ce-tema-claro,
html[data-tema="oscuro"] .ce-lateral .ce-lateral__logo.ce-tema-oscuro { display: block; }
@media (min-width: 761px) {
  html .ce-lateral.ce-recogido .ce-lateral__marca .ce-lateral__logo { display: none; }
  html:not([data-tema="oscuro"]) .ce-lateral.ce-recogido .ce-lateral__marca .ce-lateral__iso.ce-tema-claro,
  html[data-tema="oscuro"] .ce-lateral.ce-recogido .ce-lateral__marca .ce-lateral__iso.ce-tema-oscuro { display: block; }
}
.ce-lateral__cerrar { display: none; margin-left: auto; }
.ce-lateral__herramientas { flex: none; padding: 12px 12px 4px; }
.ce-lateral__todo { width: 100%; }
.ce-lateral__lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.ce-lateral__pie { flex: none; border-top: 1px solid var(--line); padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 2px; }

.ce-lateral__opcion, .ce-lateral__item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 10px 14px;
  border: 0; border-radius: 999px; background: none; color: var(--ink); font: 600 14px var(--fuente-ui); text-align: left; text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, transform .08s; }
.ce-lateral__item { min-height: 38px; padding: 8px 14px; font-weight: 400; font-size: 13.5px; color: var(--muted); }
.ce-lateral__opcion:hover, .ce-lateral__item:hover { background: var(--tint); color: var(--teal-deep); }
.ce-lateral__opcion:active, .ce-lateral__item:active { transform: scale(.98); background: var(--pulsado-tarjeta); color: var(--orange-text); }
.ce-lateral__opcion[aria-current="page"], .ce-lateral__item[aria-current="page"] { background: var(--teal); color: var(--on-teal); font-weight: 600; }
.ce-lateral__grupo.ce-con-activo > .ce-lateral__opcion[aria-expanded="false"] { background: var(--tint); color: var(--teal-deep); }
.ce-lateral__ico { width: 21px; height: 21px; flex: none; display: grid; place-items: center; color: var(--teal); }
.ce-lateral__ico svg { width: 21px; height: 21px; }
.ce-lateral__num { width: 21px; flex: none; text-align: center; font: 700 13px var(--fuente-titulo); color: var(--orange-text); }
[aria-current="page"] .ce-lateral__ico, [aria-current="page"] .ce-lateral__num { color: var(--on-teal); }
.ce-lateral__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ce-lateral__flecha { width: 16px; height: 16px; flex: none; margin-left: auto; color: var(--muted); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.ce-lateral__opcion[aria-expanded="true"] .ce-lateral__flecha { transform: rotate(90deg); }
.ce-lateral__opcion .ce-punto, .ce-lateral__item .ce-punto { margin-left: auto; }
.ce-lateral__opcion .ce-punto + .ce-lateral__flecha { margin-left: 8px; }
[aria-current="page"] .ce-punto { background: #fff; }

/* Subopciones: apertura con altura animada */
.ce-lateral__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.2, .8, .2, 1); }
.ce-lateral__grupo.ce-abierto > .ce-lateral__sub { grid-template-rows: 1fr; }
.ce-lateral__subdentro { overflow: hidden; margin-left: 33px; padding-left: 9px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; visibility: hidden; transition: visibility 0s .3s; }
.ce-lateral__grupo.ce-abierto .ce-lateral__subdentro { padding-top: 4px; padding-bottom: 8px; visibility: visible; transition: visibility 0s; }

/* Accesibilidad dentro del pie del menú: el panel se abre a la derecha */
.ce-lateral .ce-a11y { display: block; }
.ce-lateral .ce-a11y__boton.ce-lateral__opcion { width: 100%; height: auto; border-radius: 999px; transform: none; }
.ce-lateral .ce-a11y__boton.ce-lateral__opcion svg { width: 21px; height: 21px; flex: none; color: var(--teal); }
.ce-lateral .ce-a11y__panel { top: auto; bottom: 0; right: auto; left: calc(100% + 14px); }

/* Franja recogida (escritorio): isotipo e iconos; nombre al pasar el ratón o con el foco */
.ce-lateral.ce-recogido { width: 76px; }
.ce-lateral.ce-recogido .ce-lateral__marca { padding: 0; justify-content: center; }
.ce-lateral.ce-recogido .ce-lateral__texto, .ce-lateral.ce-recogido .ce-lateral__flecha, .ce-lateral.ce-recogido .ce-lateral__sub { display: none; }
.ce-lateral.ce-recogido .ce-lateral__opcion, .ce-lateral.ce-recogido .ce-lateral__todo { justify-content: center; padding-left: 0; padding-right: 0; }
.ce-lateral.ce-recogido .ce-lateral__opcion .ce-punto { position: absolute; top: 9px; right: 14px; margin: 0; }
.ce-lateral.ce-recogido .ce-lateral__lista { overflow: visible; }
.ce-lateral.ce-recogido [data-tip]:hover::after, .ce-lateral.ce-recogido [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 40; pointer-events: none;
  padding: 5px 10px; border-radius: 8px; background: var(--teal-deep); color: var(--surface); font: 600 12px var(--fuente-ui); white-space: nowrap; }

/* Botón de menú (móvil) y velo */
.ce-abrir-menu { display: none; }
.ce-velo { display: none; }

/* ── Móvil: el menú se esconde y entra deslizándose ─────────────────── */
@media (max-width: 760px) {
  .ce-lateral, .ce-lateral.ce-recogido { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); transform: translateX(-105%);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 24px 50px -20px rgba(1, 79, 76, .6); }
  .ce-lateral.ce-recogido .ce-lateral__texto, .ce-lateral.ce-recogido .ce-lateral__flecha { display: initial; }
  .ce-lateral.ce-recogido .ce-lateral__sub { display: grid; }
  .ce-lateral.ce-movil-abierto { transform: none; }
  .ce-lateral__cerrar { display: grid; }
  .ce-lateral [data-ce-recoger] { display: none; }
  .ce-abrir-menu { display: grid; }
  .ce-velo { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(15, 23, 22, .45); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .ce-velo.ce-visible { opacity: 1; pointer-events: auto; }
  .ce-lateral .ce-a11y__panel { position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; }
}
/* En escritorio, el icono de accesibilidad de la cabecera solo se ve en móvil */
@media (min-width: 761px) { .ce-solo-movil { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .ce-lateral, .ce-lateral__sub, .ce-lateral__flecha, .ce-velo { transition: none !important; }
  .ce-lateral__opcion:active, .ce-lateral__item:active, .ce-pestana:active { transform: none; }
}
html.ce-quieto .ce-lateral, html.ce-quieto .ce-lateral__sub, html.ce-quieto .ce-lateral__flecha { transition: none !important; }