/* Estructura: riel lateral, cabecera, área de trabajo, pantalla de acceso. */
.app { display: flex; min-height: 100%; }
.lateral {
  width: var(--ancho-lateral); flex: none; background: var(--lateral-fondo); color: var(--lateral-texto);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  padding-left: env(safe-area-inset-left, 0px);
}
.marca { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-5) var(--e-4) var(--e-4); border-bottom: 1px solid rgb(255 255 255 / .08); }
.marca-txt { display: flex; flex-direction: column; line-height: 1.2; }
.marca-txt strong { color: #fff; font-size: var(--t-sm); letter-spacing: .06em; }
.marca-txt span { font-size: var(--t-xs); opacity: .75; }
.menu { padding: var(--e-3) var(--e-2); display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .55; padding: var(--e-4) var(--e-3) var(--e-1); }
.menu-item { display: flex; align-items: center; gap: var(--e-3); padding: 9px var(--e-3); border-radius: var(--radio); color: inherit; text-decoration: none; font-size: var(--t-sm); position: relative; }
.menu-item:hover { background: rgb(255 255 255 / .06); color: #fff; }
.menu-item.activo { background: var(--lateral-activo); color: #fff; font-weight: 500; }
.menu-item.activo::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--logo-acento); }
.menu-fase { margin-left: auto; font-style: normal; font-family: var(--f-datos); font-size: 10px; padding: 1px 5px; border: 1px solid rgb(255 255 255 / .25); border-radius: 3px; opacity: .7; }
.lateral-pie { padding: var(--e-4); font-size: 11px; display: flex; flex-direction: column; gap: var(--e-2); border-top: 1px solid rgb(255 255 255 / .08); opacity: .8; }
.aviso-local { display: flex; gap: 6px; align-items: flex-start; }
.aviso-local .ico { width: 14px; height: 14px; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cabecera {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--superficie); border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: var(--e-4); min-height: 60px;
  padding-block: var(--e-2); padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.migas { flex: 1; min-width: 0; display: flex; gap: var(--e-2); align-items: center; font-size: var(--t-sm); color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.migas a { color: var(--texto-2); text-decoration: none; } .migas a:hover { color: var(--acento); }
.migas i { font-style: normal; color: var(--texto-3); }
.migas span:last-child { color: var(--texto); font-weight: 500; }
.estado-guardado { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); color: var(--texto-3); white-space: nowrap; }
.estado-guardado .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--linea-fuerte); }
.estado-guardado[data-estado="guardado"] .punto { background: var(--ok); }
.estado-guardado[data-estado="guardando"] .punto { background: var(--aviso); }
.estado-guardado[data-estado="error"] { color: var(--critico); } .estado-guardado[data-estado="error"] .punto { background: var(--critico); }
.usuario { display: flex; align-items: center; gap: var(--e-2); background: none; border: 1px solid transparent; border-radius: var(--radio); padding: 4px 8px; cursor: pointer; text-align: left; }
.usuario:hover { border-color: var(--linea); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--azul-800); color: #fff; display: grid; place-items: center; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; }
.usuario-txt { display: flex; flex-direction: column; line-height: 1.2; }
.usuario-txt strong { font-size: var(--t-sm); } .usuario-txt span { font-size: var(--t-xs); color: var(--texto-3); }
.cabecera .menu-movil { display: none; }

.vista { padding-block: var(--e-6) var(--e-7); padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: var(--e-5); max-width: 1320px; width: 100%; outline: none; }
.titulo-vista { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-4); flex-wrap: wrap; }
.titulo-vista > div:first-child { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.titulo-vista p { color: var(--texto-2); max-width: 70ch; }
.acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); }
.rejilla-1 { display: grid; gap: var(--e-3); }
.velo { position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 29; }
.cargando { color: var(--texto-3); padding: var(--e-6) 0; }
.fallo-arranque { max-width: 640px; margin: 10vh auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: var(--e-4); }

/* Acceso */
.acceso { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.acceso-marca { background: var(--azul-900); color: #d6e2ef; padding-block: var(--e-7); padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: 48px; display: flex; flex-direction: column; justify-content: center; gap: var(--e-5); }
.acceso-logo { display: flex; gap: var(--e-3); align-items: center; }
.acceso-logo div { display: flex; flex-direction: column; } .acceso-logo strong { color: #fff; letter-spacing: .08em; } .acceso-logo span { font-size: var(--t-sm); opacity: .75; }
.acceso-marca h1 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.8rem); max-width: 16ch; }
.acceso-marca p { max-width: 48ch; color: #b9cadc; }
.acceso-campos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); max-width: 520px; }
.acceso-campos li { border: 1px solid rgb(255 255 255 / .14); border-radius: var(--radio); padding: var(--e-3); font-size: var(--t-sm); display: flex; flex-direction: column; gap: 2px; }
.acceso-campos b { font-family: var(--f-datos); color: #7fb6ea; font-size: var(--t-xs); letter-spacing: .1em; }
.acceso-panel { display: grid; place-items: center; padding-block: var(--e-7); padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.acceso-panel .tarjeta { width: min(420px, 100%); display: flex; flex-direction: column; gap: var(--e-4); }
.acceso-panel h2 { font: 600 var(--t-lg) var(--f-titulo); }

@media (max-width: 960px) {
  .rejilla-2 { grid-template-columns: minmax(0, 1fr); }
  .acceso { grid-template-columns: minmax(0, 1fr); }
  .acceso-marca { padding-block: var(--e-6); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .acceso-panel { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 820px) {
  .lateral { position: fixed; left: 0; top: 0; z-index: 30; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 40px rgb(0 0 0 / .3); }
  .lateral.abierto { transform: none; }
  .cabecera .menu-movil { display: inline-grid; }
  .cabecera, .vista { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .usuario-txt, .estado-guardado .txt { display: none; }
  .vista { padding-block: var(--e-5) var(--e-6); }
}