/* La oficina: la entrada, la barra lateral y cada sección. La forma sale de la maqueta v2. */

/* ── La entrada (sin sesión, pedido pendiente, sin acceso, baja) ── */
.entrada{min-height:100dvh;display:grid;place-items:center;padding:32px 16px}
.entrada-carta{width:min(440px,100%);display:flex;flex-direction:column;gap:20px;padding:32px 28px;border-radius:var(--r);background:var(--carta);border:1px solid var(--linea);box-shadow:var(--sombra-2)}
.entrada-carta h1{font-size:32px;line-height:1.08;margin:0}
.entrada-carta p{margin:0;color:var(--tinta2)}
.entrada-carta .mail{font-size:13px;color:var(--tinta3);overflow-wrap:anywhere}
.entrada-carta .acciones{display:flex;flex-wrap:wrap;gap:10px}
.entrada-carta .btn{flex:1 1 auto}
.entrada-carta .error{color:var(--peligro);font-size:13px}

.marca{display:flex;align-items:center;gap:10px}
.marca img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.marca b{display:block;font:600 16px/1.1 var(--display);letter-spacing:-.01em}
.marca span{display:block;font-size:12px;color:var(--tinta3);letter-spacing:.04em}

/* ── La cáscara: barra lateral + área principal ── */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100dvh}
.barra{background:var(--navy);border-right:1px solid var(--linea);display:flex;flex-direction:column;padding:20px 14px;gap:24px;position:sticky;top:0;height:100dvh}
.barra .marca{padding:4px 8px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;min-height:40px;padding:9px 10px;border-radius:var(--r-chico);color:var(--tinta2);text-decoration:none;font-weight:500;transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.nav a:hover{background:var(--carta);color:var(--tinta)}
.nav a[aria-current]{background:var(--carta-2);color:var(--tinta)}
.nav a[aria-current] svg{color:var(--accion)}
.nav svg{width:18px;height:18px;flex:none}
.nav .cuenta{margin-left:auto;font-size:12px;color:var(--tinta3)}
.nav .cuenta.aviso{color:var(--alerta)}
.nav .corto{display:none}
.nav .separa{height:1px;background:var(--linea);margin:10px 4px}
.pie{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 0;border-top:1px solid var(--linea);text-decoration:none;color:inherit;border-radius:var(--r-chico)}
.pie:hover b{color:var(--accion-hover)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--carta-2);border:1px solid var(--linea2);font:600 14px var(--display);color:var(--tinta)}
.pie b{display:block;font-weight:600;font-size:14px}
.pie span{display:block;font-size:12px;color:var(--tinta3)}
.pie .avatar{color:var(--tinta)}
.cabecera-movil{display:none}

.principal{padding:32px 36px 48px;display:flex;flex-direction:column;gap:20px;min-width:0;max-width:980px}
.principal:focus{outline:none}
.principal h1{font-size:40px;line-height:1.05;margin:0}
.principal .bajada{margin:0;color:var(--tinta2);max-width:62ch}

.panel{background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);padding:18px}
.panel h2{font:600 17px/1.2 var(--display);margin:0 0 4px;letter-spacing:-.01em}
.panel .sub{font-size:13px;color:var(--tinta3);margin:0 0 14px}
.vacio{display:flex;flex-direction:column;gap:6px;padding:22px 18px}
.vacio b{font:600 16px var(--display)}
.vacio p{margin:0;color:var(--tinta2);max-width:60ch}
.vacio a{color:var(--accion);font-weight:600}
.vacio a:hover{color:var(--accion-hover)}

/* En Hoy, el aviso de pedidos de acceso para el admin. */
.aviso-pedidos{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:48px;padding:12px 18px;border-radius:var(--r);border:1px solid rgba(242,200,107,.45);background:var(--alerta-bg);color:var(--tinta);font-weight:600;text-decoration:none;transition:border-color var(--dur) var(--ease-out)}
.aviso-pedidos:hover{border-color:var(--alerta)}
.aviso-pedidos .ir{color:var(--accion);white-space:nowrap}

/* ── Equipo (solo admin) ── */
.pedidos,.miembros{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pedido{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:var(--r);border:1px solid var(--linea2);background:var(--carta-2)}
.pedido .quien b{display:block;font-weight:600;font-size:15px}
.pedido .quien span{display:block;font-size:13px;color:var(--tinta3);overflow-wrap:anywhere}
.campos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.campo{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--tinta3)}
.campo input,.campo select{min-height:40px;padding:8px 10px;border-radius:var(--r-chico);border:1px solid var(--linea);background:var(--papel);font-size:14px;font-weight:500;color:var(--tinta);width:100%}
.campo input:focus-visible,.campo select:focus-visible{border-color:var(--accion)}
.pedido .acciones,.miembro .acciones{display:flex;flex-wrap:wrap;gap:8px}
.pedido .error{margin:0;color:var(--peligro);font-size:13px}
.miembro{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--linea-plata)}
.miembro:first-child{border-top:0;padding-top:0}
.miembro b{display:block;font-weight:600}
.miembro span{display:block;font-size:13px;color:var(--tinta3);overflow-wrap:anywhere}
.etiqueta{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px;border:1px solid var(--linea2);color:var(--tinta2);white-space:nowrap}
.etiqueta.ok{border-color:rgba(111,224,166,.5);color:var(--ok)}
.etiqueta.apagada{color:var(--tinta3);border-style:dashed}
.rechazados{margin-top:4px;font-size:13px;color:var(--tinta3)}
.rechazados summary{cursor:pointer;min-height:40px;display:flex;align-items:center}

/* ── Perfil ── */
.ficha-perfil{list-style:none;margin:0;padding:0}
.ficha-perfil li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--linea-plata)}
.ficha-perfil li:first-child{border-top:0;padding-top:0}
.ficha-perfil .que{font-size:13px;color:var(--tinta3)}
.ficha-perfil b{font-weight:600;overflow-wrap:anywhere}

/* ── El aviso que flota (lo que salió bien o mal) ── */
.aviso-flota{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(92vw,520px);padding:12px 16px;border-radius:var(--r-chico);background:var(--carta-2);border:1px solid var(--linea2);box-shadow:var(--sombra-2);font-size:14px;z-index:20}
.aviso-flota.mal{border-color:rgba(255,138,122,.5);color:var(--peligro)}

@media (max-width:1180px){
  .app{grid-template-columns:72px minmax(0,1fr)}
  .barra .marca div,.nav .texto,.nav .cuenta,.pie div,.nav .separa{display:none}
  .nav a{justify-content:center}
  .pie{justify-content:center;padding-left:0;padding-right:0}
  .campos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .cabecera-movil{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--linea);background:var(--navy);position:sticky;top:0;z-index:5}
  .cabecera-movil .marca img{width:32px;height:32px}
  .cabecera-movil .avatar{width:40px;height:40px;text-decoration:none}
  .barra{position:fixed;bottom:0;top:auto;left:0;right:0;height:auto;flex-direction:row;padding:6px 8px calc(6px + env(safe-area-inset-bottom));z-index:5;border-right:0;border-top:1px solid var(--linea);gap:0}
  .barra .marca,.pie{display:none}
  .nav{flex-direction:row;justify-content:space-around;width:100%;gap:0}
  .nav a{flex:1 1 0;min-width:0;flex-direction:column;gap:2px;padding:6px 2px;font-size:11px;line-height:1.2}
  .nav .corto{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .principal{padding:24px 16px 96px}
  .principal h1{font-size:32px}
  .campos{grid-template-columns:minmax(0,1fr)}
  .ficha-perfil li{grid-template-columns:minmax(0,1fr);gap:2px}
  .aviso-flota{bottom:84px}
}