/* GestoraHub · estilo definitivo (docs/15-planos/definitivo.md): ingeniería, del plano A, con la interfaz del plano B.
   Se carga al final: aplana las piezas del estilo anterior y arma el marco de la app (menú a la izquierda y barra arriba). */

/* ---------- piezas planas: sin bandejas, sin sombras, sin manchas de color ---------- */
.bisel { background: none; box-shadow: none; padding: 0; }
.nucleo { background: var(--nucleo); box-shadow: inset 0 0 0 1px var(--lino); }
.hero::before { display: none; }
.pill { background: #E2E4E0; color: var(--tinta); }
.pill.revisar { background: #FBEBC8; color: #6B4A00; }
.pill.atencion { background: #FBE1DE; color: #8A1C12; }
.pill.aldia { background: #E2F0E7; color: #1F6B43; }
.btn { font-weight: 600; }
.btn-suave { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--apagado); }
.btn:hover { background: #2B3036; }
.btn-suave:hover { background: #E2E4E0; }
.migas a, .marca-mini { color: #B8430A; }
h1, h2, h3 { letter-spacing: 0; }
.marca { font: 700 1.5rem/1 var(--f-display); text-transform: uppercase; color: var(--tinta); }
.marca svg { width: 30px; height: 30px; }
.isla nav { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--lino); }

/* luz y agua: tarjetas planas; gasoil en naranja, agua en cian, bajo en rojo */
.tono-salvia .nucleo, .tono-champan .nucleo, .tono-agua .nucleo { background: var(--nucleo); }
.deposito { border-radius: 3px; background: #F1F2F0; }
.deposito i { background: var(--laton); }
.col .palo i { border-radius: 2px 2px 0 0; background: #B7BCC2; }
.agua .deposito i { background: var(--agua); }
.bajo .deposito i { background: var(--atrasada); }

/* banda de obras: grafito con acento naranja */
.banda .nucleo { background: #2B3036; box-shadow: none; }
.banda .bisel { background: none; box-shadow: none; }
.banda p, .obra .sector, .obra-avance small, .etapas small, .obra-datos dt { color: #C3C8CE; }
.banda .pill { background: rgba(232, 89, 12, .18); color: #FFB27A; }
.banda .visible .dibujo .v.pagada, .banda .visible .dibujo .v.pendiente, .acceso-arte .visible .dibujo .v.pagada { fill: rgba(232, 89, 12, .5); }

/* ---------- marco de la app: menú a la izquierda y barra arriba ---------- */
.lateral { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 236px; display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1.1rem .9rem 1.5rem; overflow-y: auto; background: var(--verde); color: var(--marfil); }
.lateral .marca { color: var(--marfil); padding: .2rem .4rem; }
#menu { display: grid; gap: 1px; }
#menu .grupo { margin: .9rem .7rem .25rem; font-size: .78rem; color: #AEB4BB; }
#menu a { display: block; color: #C3C8CE; text-decoration: none; padding: .55rem .7rem; font-size: .93rem; border-left: 4px solid transparent; }
#menu a:hover { color: #FFFFFF; background: #2B3036; }
#menu a[aria-current="page"] { color: var(--marfil); background: #2B3036; border-left-color: var(--laton); }
body.con-lateral { padding-left: 236px; }
.barra-sup { position: sticky; top: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem clamp(1rem, 3vw, 2rem); background: #FFFFFF; border-bottom: 1px solid var(--lino); }
.barra-titulo { margin: 0; font: 600 1.5rem/1.1 var(--f-display); color: var(--tinta); }
.barra-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* la banda de obras ocupa el ancho del área de contenido, no el de la ventana */
.con-lateral .banda { margin-left: calc(50% - 50vw + 118px); margin-right: calc(50% - 50vw + 118px); }

@media (max-width: 1023px) {
  body.con-lateral { padding-left: 0; }
  .con-lateral .banda { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .lateral { position: static; width: auto; flex-direction: row; align-items: center; gap: .75rem; padding: .55rem 1rem; overflow-x: auto; overflow-y: visible; }
  .lateral .marca { flex: none; }
  #menu { display: flex; gap: .15rem; white-space: nowrap; }
  #menu .grupo { display: none; }
  #menu a { border-left: 0; border-bottom: 3px solid transparent; }
  #menu a[aria-current="page"] { border-bottom-color: var(--laton); }
}