/* Pantalla /portal (pages/b2b_portal.py): diseño de la maqueta portal.html (web lyseon sep26), manual de marca v1.2.
   Solo diseño. Todo acotado a .ly-portal; la barra vieja de la app (#menusup) se oculta solo cuando esta pantalla esta presente. */

body:has(.ly-portal) #menusup { display: none; }
body:has(.ly-portal) { background: #F4F6F8; }

.ly-portal {
  --ly-navy: #00205B; --ly-navy-deep: #001337; --ly-orange: #FF5722; --ly-orange-deep: #DF3500;
  --ly-ink: #333333; --ly-gray: #555555; --ly-line: #DDDDDD; --ly-soft: #F4F6F8; --ly-navy-10: #E6E9EF; --ly-navy-20: #CCD2DE;
  font-family: 'Open Sans', Arial, sans-serif; color: var(--ly-ink);
  background: var(--ly-soft); min-height: 100vh; display: flex; flex-direction: column;
  margin: 0;                    /* sin relleno lateral: assets/barra_marca.css quita el del contenedor de la app */
}
.ly-portal a { text-decoration: none; color: inherit; }
.ly-portal h1, .ly-portal h2 { font-family: 'Montserrat', Arial, sans-serif !important; font-weight: 700; color: var(--ly-navy) !important; line-height: 1.25; margin: 0; }

/* ---------- banner ---------- */
.ly-portal .lp-appbar { background: var(--ly-navy); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0, 19, 55, .25); }
.ly-portal .lp-appbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ly-orange); }
.ly-portal .lp-appbar-in { display: flex; align-items: center; height: 68px; padding: 0 24px; gap: 24px; max-width: 1440px; margin: 0 auto; position: relative; }
.ly-portal .lp-logo img { height: 30px; width: auto; display: block; }
.ly-portal .lp-menu { display: flex; align-items: stretch; height: 100%; margin-left: auto; }
.ly-portal .lp-menu-item { position: relative; display: flex; outline: none; }
.ly-portal .lp-menu-btn {
  display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 100%; background: none; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, .85); font: 700 14px/1 'Montserrat', Arial, sans-serif; border-bottom: 3px solid transparent;
  transition: color .2s, background .2s; white-space: nowrap;
}
.ly-portal .lp-menu-btn .lp-lead { color: var(--ly-orange); font-size: 14px; }
.ly-portal .lp-menu-btn .lp-caret { font-size: 11px; transition: transform .2s; }
.ly-portal .lp-menu-item:hover .lp-menu-btn, .ly-portal .lp-menu-item:focus-within .lp-menu-btn { color: #fff; background: rgba(255, 255, 255, .06); }
.ly-portal .lp-menu-item:hover .lp-caret, .ly-portal .lp-menu-item:focus-within .lp-caret { transform: rotate(180deg); }
.ly-portal .lp-hl .lp-menu-btn { color: #fff; }

.ly-portal .lp-dropdown {
  position: absolute; top: calc(100% + 2px); left: 0; min-width: 300px; background: #fff; border-radius: 0 0 8px 8px;
  box-shadow: 0 16px 40px rgba(0, 32, 91, .12); border: 1px solid var(--ly-line); border-top: 0; padding: 8px; display: none;
}
.ly-portal .lp-menu-item:hover .lp-dropdown, .ly-portal .lp-menu-item:focus-within .lp-dropdown { display: block; animation: lpdrop .15s ease; }
@keyframes lpdrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ly-portal .lp-dropdown--right { left: auto; right: 0; }
.ly-portal .lp-drop-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 4px; color: var(--ly-ink); }
.ly-portal .lp-drop-item:hover { background: var(--ly-soft); }
.ly-portal .lp-drop-item > i { color: var(--ly-orange); width: 18px; text-align: center; margin-top: 3px; }
.ly-portal .lp-drop-item b { display: block; font: 700 14px/1.3 'Montserrat', Arial, sans-serif; color: var(--ly-navy); }
.ly-portal .lp-drop-item span { display: block; font-size: 14px; color: var(--ly-gray); line-height: 1.4; }
.ly-portal .lp-dropdown hr { border: 0; border-top: 1px solid var(--ly-line); margin: 6px 4px; opacity: 1; }
.ly-portal .lp-acct { padding: 12px 12px 10px; }
.ly-portal .lp-acct b { display: block; font: 700 14px/1.3 'Montserrat', Arial, sans-serif; color: var(--ly-navy); }
.ly-portal .lp-acct span { font-size: 14px; color: var(--ly-gray); }
.ly-portal .lp-acct em {
  display: inline-block; margin-top: 8px; font: 700 12px/1 'Montserrat', Arial, sans-serif; font-style: normal; text-transform: uppercase;
  letter-spacing: .06em; background: var(--ly-navy-10); color: var(--ly-navy); padding: 5px 8px; border-radius: 4px;
}
.ly-portal .lp-user { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .2); height: 36px; align-self: center; }
.ly-portal .lp-user .lp-menu-btn { padding: 0 4px; gap: 10px; }
.ly-portal .lp-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ly-orange); color: var(--ly-navy); display: grid; place-items: center; font: 700 14px/1 'Montserrat', Arial, sans-serif; }

/* ---------- contenido ---------- */
.ly-portal .lp-page { max-width: 1440px; width: 100%; margin: 0 auto; padding: 40px 24px 64px; flex: 1; }
.ly-portal .lp-welcome { margin-bottom: 32px; }
.ly-portal .lp-kicker { font: 700 14px/1.4 'Montserrat', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--ly-orange-deep); display: inline-block; margin-bottom: 12px; }
.ly-portal .lp-welcome h1 { font-size: 30px; }
.ly-portal .lp-welcome p { color: var(--ly-gray); margin: 6px 0 0; }
.ly-portal .lp-areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ly-portal .lp-area { background: #fff; border: 1px solid var(--ly-line); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 32, 91, .06); padding: 24px; }
.ly-portal .lp-area--hl { border-top: 4px solid var(--ly-orange); }
.ly-portal .lp-area-ico { width: 48px; height: 48px; border-radius: 8px; background: var(--ly-navy); color: #fff; display: grid; place-items: center; font-size: 19px; margin-bottom: 16px; }
.ly-portal .lp-area--hl .lp-area-ico { background: var(--ly-orange); color: var(--ly-navy); }
.ly-portal .lp-area h2 { font-size: 18px; margin-bottom: 12px; }
.ly-portal .lp-area ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ly-portal .lp-area li a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; margin: 0 -12px;
  border-radius: 4px; font-size: 15px; color: var(--ly-ink);
}
.ly-portal .lp-area li a:hover { background: var(--ly-soft); color: var(--ly-navy); }
.ly-portal .lp-area li a i { color: var(--ly-navy-20); font-size: 12px; transition: color .2s; }
.ly-portal .lp-area li a:hover i { color: var(--ly-orange); }
.ly-portal .lp-foot { max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 24px 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ly-gray); }
.ly-portal .lp-foot a { color: var(--ly-navy); font-weight: 600; }

@media (max-width: 1180px) { .ly-portal .lp-areas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px) { .ly-portal .lp-menu, .ly-portal .lp-user { display: none; } }
@media (max-width: 640px) { .ly-portal .lp-areas { grid-template-columns: 1fr; } .ly-portal .lp-page { padding: 24px 16px 48px; } .ly-portal .lp-appbar-in { padding: 0 16px; } }