/* Marco del sistema Consta v2 (diseno/sistema_v2/SISTEMA_V2.md §3 y §4; maquetas Marco, Menu y
   BarraMovil): menú lateral de 248 px en la computadora (≥ 1024 px); en el celular, barra de 56 px
   arriba y barra fija abajo con la hoja «Obra». Solo variables de tokens.css. La plantilla es
   app/templates/_componentes/marco.html. */

/* --- Computadora: menú lateral ------------------------------------------------------------- */
.marco-menu { display: none; }
@media (min-width: 900px) {
    body.con-marco { padding-left: var(--ancho-menu); }
    .marco-menu {
        display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 20;
        width: var(--ancho-menu); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
        background: var(--blanco); border-right: 1px solid var(--linea); font-family: var(--fuente-texto); color: var(--texto);
    }
    body.con-marco .franja-entorno { margin-left: 0; }
}
.marco-menu__logo { height: 64px; flex: none; box-sizing: border-box; padding: 0 20px; display: flex; align-items: center; border-bottom: 1px solid var(--separador-fila); }
.marco-menu__inicio { display: inline-flex; align-items: center; min-height: var(--tamano-toque); }
.marco-menu__consta { height: 24px; width: auto; display: block; }
.marco-menu__ecoenergia { height: 26px; width: auto; display: block; }
.marco-menu__grupo { display: flex; flex-direction: column; padding: var(--espacio-8) var(--espacio-12) var(--espacio-4); }
.marco-menu__titulo { margin: 0; padding: 6px var(--espacio-8) var(--espacio-4); font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
/* Menú plegable (v17, A1): el grupo cerrado muestra su contador; nada urgente queda escondido. */
.marco-menu__plegable { border-top: 1px solid var(--separador-fila); }
.marco-menu__titulo--plegable { display: flex; align-items: center; gap: var(--espacio-8); min-height: var(--tamano-toque); padding-top: 0; padding-bottom: 0; cursor: pointer; list-style: none; border-radius: var(--radio-campo); }
.marco-menu__titulo--plegable::-webkit-details-marker { display: none; }
.marco-menu__titulo--plegable:hover { background: var(--fondo-seleccion); }
.marco-menu__contador { margin-left: auto; font-size: var(--letra-texto-chico); font-weight: 700; text-transform: none; color: var(--azul-marca); }
.marco-menu__contador--vencidas { color: var(--avance-negativo); }
.marco-menu__flecha { display: inline-flex; transform: rotate(-90deg); transition: transform 0.15s; }
.marco-menu__contador + .marco-menu__flecha { margin-left: 0; }
.marco-menu__titulo--plegable > span:first-child + .marco-menu__flecha { margin-left: auto; }
.marco-menu__plegable[open] .marco-menu__flecha { transform: none; }
.marco-menu__plegable[open] .marco-menu__contador { display: none; }
.marco-menu__plegable[open] .marco-menu__contador + .marco-menu__flecha { margin-left: auto; }
.marco-menu__item {
    min-height: var(--tamano-toque); box-sizing: border-box; padding: 0 10px; border-radius: var(--radio-campo);
    display: flex; align-items: center; gap: 10px; font-size: var(--letra-menu); font-weight: var(--peso-menu);
    color: var(--secundario); text-decoration: none;
}
.marco-menu__item:hover { background: var(--fondo-celular); color: var(--azul-marca); }
.marco-menu__item[aria-current="page"] { background: var(--fondo-seleccion); color: var(--azul-marca); font-weight: 700; }
.marco-menu__texto { flex: 1 1 auto; min-width: 0; }
.marco-menu__marca { font-size: var(--letra-texto-tabla); font-weight: 700; color: var(--azul-marca); white-space: nowrap; }
.marco-menu__marca--vencida { font-size: var(--letra-texto-chico); color: var(--avance-negativo); }
.marco-menu__relleno { flex: 1 1 auto; }
.marco-menu__empresa { flex: none; margin: 0 24px; padding: 10px 0; display: flex; align-items: center; }
.marco-menu__empresa-logo { height: 23px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
/* R6 · la persona (y el logo de la empresa) siempre a la vista: el pie queda pegado abajo del menú
   aunque la lista de opciones se deslice. */
.marco-menu__persona { position: sticky; background: var(--blanco); z-index: 1; box-shadow: 0 -8px 8px -8px var(--linea); }
.marco-menu__persona { bottom: 0; padding-bottom: var(--espacio-12) !important; margin-bottom: 0 !important; }
.marco-menu__persona { flex: none; margin: 0 var(--espacio-12) var(--espacio-12); padding: var(--espacio-12) var(--espacio-4) 0; border-top: 1px solid var(--separador-fila); display: flex; align-items: center; gap: 10px; }
.marco-menu__avatar { width: 36px; height: 36px; flex: none; border-radius: var(--radio-etiqueta); background: var(--fondo-resumen); color: var(--azul-marca); font-size: var(--letra-etiqueta-campo); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.marco-menu__cuenta { display: flex; flex-direction: column; justify-content: center; gap: 1px; flex: 1 1 auto; min-width: 0; min-height: var(--tamano-toque); padding: 0 var(--espacio-8); border-radius: var(--radio-campo); text-decoration: none; }
.marco-menu__cuenta:hover, .marco-menu__cuenta[aria-current="page"] { background: var(--fondo-seleccion); }
.marco-menu__nombre { font-size: var(--letra-texto); font-weight: 700; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marco-menu__puesto { font-size: var(--letra-etiqueta-campo); font-weight: 400; color: var(--secundario); }
.marco-menu__ajustes { width: var(--tamano-toque); height: var(--tamano-toque); flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--radio-campo); color: var(--secundario); }
.marco-menu__ajustes:hover, .marco-menu__ajustes[aria-current="page"] { background: var(--fondo-seleccion); color: var(--azul-marca); }

/* Selector de obra: botón con «OBRA» y el nombre, entre lo general y el grupo OBRA. */
.marco-obra { margin: 0 var(--espacio-12); padding: var(--espacio-12) 0 var(--espacio-4); border-top: 1px solid var(--separador-fila); position: relative; }
.marco-obra__desplegable > summary { list-style: none; }
.marco-obra__desplegable > summary::-webkit-details-marker { display: none; }
.marco-obra__boton {
    margin: 0; min-height: 48px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--borde-campo); border-radius: var(--radio-campo);
    background: var(--blanco); display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--secundario);
}
.marco-obra__boton--una { cursor: default; border-color: var(--linea); }
.marco-obra__iniciales { width: 26px; height: 26px; flex: none; border-radius: 6px; background: var(--azul-marca); color: var(--blanco); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.marco-obra__textos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.marco-obra__rotulo { font-size: var(--letra-rotulo); font-weight: var(--peso-rotulo); color: var(--secundario); }
.marco-obra__nombre { font-size: var(--letra-texto); font-weight: 700; color: var(--texto); overflow-wrap: anywhere; }
.marco-obra__lista { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-campo); padding: var(--espacio-4); display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.marco-obra__lista a { min-height: var(--tamano-toque); display: flex; align-items: center; padding: 0 10px; border-radius: 6px; font-size: var(--letra-texto); color: var(--texto); text-decoration: none; }
.marco-obra__lista a:hover { background: var(--fondo-celular); }
.marco-obra__lista a[aria-current="true"] { background: var(--fondo-seleccion); color: var(--azul-marca); font-weight: 700; }

/* --- Celular: barra de arriba (56 px) y barra fija abajo ----------------------------------- */
.marco-arriba {
    position: sticky; top: 0; z-index: 20; height: var(--alto-barra-celular); box-sizing: border-box;
    display: flex; align-items: center; gap: var(--espacio-12); padding: 0 var(--margen-celular);
    background: var(--blanco); border-bottom: 1px solid var(--linea);
}
.marco-arriba__marca { display: inline-flex; align-items: center; min-height: var(--tamano-toque); flex: none; }
.marco-arriba__simbolo { height: 28px; width: auto; display: block; }
.marco-arriba__ecoenergia { height: 26px; width: auto; display: block; }
.marco-arriba__obra {
    flex: 1 1 auto; min-width: 0; min-height: var(--tamano-toque); display: inline-flex; align-items: center; gap: 6px;
    padding: 0 10px; border: 1px solid var(--borde-campo); border-radius: var(--radio-campo); color: var(--texto);
    font-size: var(--letra-texto); font-weight: 700; text-decoration: none; box-sizing: border-box;
}
.marco-arriba__obra--una { border-color: transparent; padding: 0 var(--espacio-4); }
.marco-arriba__obra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.marco-arriba__empresa { height: 23px; width: auto; max-width: 110px; object-fit: contain; object-position: right center; margin-left: auto; flex: none; }

.marco-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box;
    background: var(--blanco); border-top: 1px solid var(--linea);
}
.marco-barra__boton {
    flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 12px; font-weight: 600; color: var(--secundario); text-decoration: none; position: relative;
}
.marco-barra__boton::after { content: ""; width: 20px; height: 3px; border-radius: var(--radio-etiqueta); background: transparent; }
.marco-barra__boton[aria-current="page"] { color: var(--azul-marca); font-weight: 700; }
.marco-barra__boton[aria-current="page"]::after { background: var(--amarillo-acento); }
.marco-barra__icono { position: relative; display: flex; }
.marco-barra__numero {
    position: absolute; top: -6px; left: 14px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--radio-etiqueta);
    background: var(--azul-marca); color: var(--blanco); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--blanco);
}
.marco-barra__texto { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.con-marco .contenido { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.s-hoja__salir { margin: 0; }
.s-hoja__opcion--boton { width: 100%; background: none; border: none; font-family: var(--fuente-texto); cursor: pointer; text-align: left; }

@media (min-width: 900px) {
    .marco-arriba, .marco-barra { display: none; }
    body.con-marco .contenido { padding-bottom: var(--espacio-32); max-width: var(--ancho-contenido); }
    .s-hoja { display: none; }
}

/* --- Mi cuenta (maqueta M9Perfil) ---------------------------------------------------------- */
.mi-cuenta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: 20px 22px; display: flex; flex-direction: column; gap: var(--espacio-16); max-width: 560px; }
.mi-cuenta__persona { display: flex; align-items: center; gap: var(--espacio-12); }
.mi-cuenta__avatar { width: 48px; height: 48px; flex: none; border-radius: var(--radio-etiqueta); background: var(--fondo-resumen); color: var(--azul-marca); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mi-cuenta__nombre { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); overflow-wrap: anywhere; }
.mi-cuenta__puesto { font-size: var(--letra-texto); font-weight: 400; color: var(--secundario); }
.mi-cuenta__datos { margin: 0; display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: var(--espacio-8) var(--espacio-16); font-size: var(--letra-texto); }
.mi-cuenta__datos dt { color: var(--secundario); }
.mi-cuenta__datos dd { margin: 0; overflow-wrap: anywhere; }
.mi-cuenta__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-8); align-items: center; }
.mi-cuenta__salir { margin: 0 0 0 auto; }

/* Con el menú lateral, los tableros ocupan el ancho del contenido (1.180 px como máximo, §3): ya no
   se ensanchan a lo ancho de la ventana (T9.2 era sin menú lateral). */
@media (min-width: 900px) {
    body.con-marco .tablero2 { width: auto; margin-inline: 0; }
}
/* Entre 1024 y 1279 px, al lado del menú, una tabla ancha (la Carga de la computadora) se desliza
   dentro de su lugar: la pantalla nunca se desliza de costado. */
@media (min-width: 900px) and (max-width: 1279px) {
    body.con-marco .contenido .tabla-datos { display: block; overflow-x: auto; max-width: 100%; }
}
.mi-cuenta__indicadores { margin-top: var(--espacio-24); display: flex; flex-direction: column; gap: var(--espacio-12); max-width: 900px; }
.mi-cuenta__titulo { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espacio-8) var(--espacio-12); font-size: var(--letra-texto-destacado); font-weight: var(--peso-texto-destacado); }
.mi-cuenta__dato { font-size: var(--letra-texto-chico); font-weight: 400; color: var(--secundario); }
.mi-cuenta__tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--espacio-12); }
.mi-cuenta__tarjetas:empty { display: none; }
.mi-cuenta__indicadores > .s-boton { align-self: flex-start; }

/* N1 (segunda vuelta de la revisión): en pantallas de poca altura el menú se compacta (sin bajar los
   44 px de cada opción) para que las 14 opciones de dirección entren en 900 px. */
@media (min-width: 900px) and (max-height: 960px) {
    .marco-menu__logo { height: 52px; }
    .marco-menu__grupo { padding-top: var(--espacio-4); padding-bottom: 0; }
    .marco-menu__titulo { padding-top: var(--espacio-4); padding-bottom: 2px; }
    .marco-obra { padding-top: var(--espacio-8); padding-bottom: 0; }
    .marco-obra__boton { min-height: var(--tamano-toque); }
    .marco-menu__empresa { padding: 6px 0; }
}