/* Marco del panel del piscinero (barra lateral y cabecera) igual al diseño. Se carga después de pro-home.css.
   El diseño de escritorio solo rige desde 901px; en pantallas menores se mantiene la barra móvil de panel-home.css. */
@media (min-width:901px){
 body[data-page="panel"] .portal-shell.cp2-shell.pro-shell{grid-template-columns:260px minmax(0,1fr);gap:0;padding:0}
 .pro-shell .cp2-body{padding:14px 18px 10px}

 /* Barra lateral: pegada al borde, a toda la altura y fija al desplazar la página */
 .pro-shell .pro-side{position:sticky;top:0;align-self:start;height:100vh;min-height:0;overflow:visible;border-radius:0;padding:16px 12px 12px;gap:10px;box-shadow:none;background:linear-gradient(180deg,#0b2a6f 0,#09235f 100%)}
 .pro-shell .pro-side>*{flex:none}
 .pro-shell .pro-side>.pro-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;margin:0 -6px;padding:0 6px;scrollbar-width:none}
 .pro-nav::-webkit-scrollbar{display:none}
 .pro-shell .pro-side .cp2-brand{padding:4px 10px 10px}
 .pro-shell .pro-side .cp2-brand{gap:6px;font-size:21px}
 .pro-shell .pro-side .cp2-nav.panel-menu{gap:3px}
 body[data-page="panel"] .pro-side .cp2-nav>button{min-height:46px;padding:0 14px!important;gap:15px;font-size:16px!important;border-radius:11px!important}
 body[data-page="panel"] .pro-side .cp2-nav>button .icon{width:24px;height:24px;flex:none}
 body[data-page="panel"] .pro-side .cp2-nav>button.active{background:#1c6cf2;box-shadow:0 8px 20px rgba(28,108,242,.4)}
 body[data-page="panel"] .pro-side .cp2-nav>button.is-sub{min-height:38px;padding-left:22px!important;font-size:14.5px!important;color:#cfdbf3}
 body[data-page="panel"] .pro-side .cp2-nav>button.is-sub .icon{width:19px;height:19px}
 body[data-page="panel"] .pro-side .cp2-nav>button.is-sub.active{color:#fff}
 .pro-side .cp2-nav em{min-width:25px;height:24px;border-radius:7px;font-size:13px;background:#ef3b3b}
 .pro-nav .pro-more-toggle{margin:6px 0 0;padding:9px 14px;font-size:11.5px}

 /* Buscador y accesos directos */
 .pro-sidetop{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
 .pro-sidetop>*{min-width:0}
 .pro-search-wrap{position:relative}
 .pro-search{display:flex;align-items:center;gap:8px;height:42px;padding:0 10px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(255,255,255,.1);color:#cfdbf3;transition:background .15s,border-color .15s}
 .pro-search:focus-within{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.55)}
 .pro-search .pro-ico{width:18px;height:18px;flex:none}
 .pro-side .pro-search input[type=search]{flex:1;min-width:0;width:auto;height:100%;margin:0;padding:0!important;border:0!important;border-radius:0;background:transparent!important;color:#fff!important;font:500 13px Inter,sans-serif;outline:none;box-shadow:none!important;-webkit-appearance:none;appearance:none}
 .pro-side .pro-search input::placeholder{color:#a9bcdf!important;opacity:1}
 .pro-search input::-webkit-search-cancel-button{display:none}
 .pro-search kbd{flex:none;padding:1px 6px;border:1px solid rgba(255,255,255,.28);border-radius:5px;color:#a9bcdf;font:600 11px Inter,sans-serif}
 .pro-search:focus-within kbd{display:none}
 .pro-search-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;max-height:min(62vh,430px);overflow-y:auto;padding:6px;border-radius:12px;background:#fff;color:#0b1f4d;box-shadow:0 18px 40px rgba(7,26,71,.4)}
 .pro-sr-group h4{margin:6px 8px 4px;font:700 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b7a95}
 .pro-sr-item{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:5px 8px;border:0;border-radius:9px;background:none;color:#0b1f4d;text-align:left;cursor:pointer}
 .pro-sr-item:hover,.pro-sr-item:focus-visible{background:#eaf3ff;outline:none}
 .pro-sr-ico{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#eaf3ff;color:#1665f2}
 .pro-sr-ico .pro-ico{width:17px;height:17px}
 .pro-sr-txt{display:grid;min-width:0}.pro-sr-txt b{font:600 13.5px Inter,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pro-sr-txt small{font-size:12px;color:#6b7a95}
 .pro-sr-note{margin:0;padding:12px 10px;font-size:13px;color:#6b7a95}
 .pro-quick header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
 .pro-side .pro-quick h3{margin:0;font:700 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#b5c7e8!important}
 .pro-q-edit{display:grid;place-items:center;height:26px;min-width:26px;padding:0 8px;border:0;border-radius:7px;background:none;color:#9fb4d9;font:600 12px Inter,sans-serif;cursor:pointer}
 .pro-q-edit:hover,.pro-q-edit.is-on{background:rgba(255,255,255,.14);color:#fff}
 .pro-q-edit .pro-ico{width:15px;height:15px}
 .pro-q-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .pro-q-cell{position:relative;min-width:0}
 .pro-q-tile{display:grid;justify-items:center;align-content:center;gap:4px;width:100%;height:66px;padding:6px 2px;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.08);color:#e8eefc;cursor:pointer;transition:background .15s}
 .pro-q-tile:hover{background:rgba(255,255,255,.16)}
 .pro-q-tile.is-current{background:rgba(28,108,242,.6);border-color:rgba(255,255,255,.35)}
 .pro-q-tile>span{display:grid;place-items:center;height:22px;font-size:20px;line-height:1}
 .pro-q-tile .pro-ico{width:21px;height:21px}
 .pro-q-tile b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;font:600 10.5px/1.15 Inter,sans-serif;letter-spacing:-.01em;text-align:center;color:inherit}
 .pro-q-tile.is-empty{border:1px dashed rgba(255,255,255,.3);background:none;color:#a9bcdf}
 .pro-q-x{position:absolute;top:-6px;right:-6px;z-index:2;display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:#ef3b3b;color:#fff;cursor:pointer}
 .pro-q-x .pro-ico{width:11px;height:11px;stroke-width:3}
 .pro-sidefoot{display:grid;gap:8px}

 /* Tarjeta del plan y ayuda */
 .pro-side .pro-promo{margin-top:6px;padding:16px!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:14px;background:linear-gradient(165deg,#0e3380,#0a2766)!important;box-shadow:none}
 .pro-side .pro-promo h3{align-items:center;gap:10px;margin-bottom:12px!important;font-size:21px!important;line-height:1.1;color:#f7b733!important}
 .pro-side .pro-promo .pro-crown{width:34px;height:34px;color:#f7b733}
 .pro-side .pro-promo li{font-size:14px;line-height:1.3}
 .pro-side .pro-promo li .icon{flex:none;width:19px;height:19px}
 .pro-side .pro-promo.is-paid{box-shadow:none}
 .pro-side .cp2-promo-btn{height:42px;border-radius:9px;color:#1c6cf2;font-weight:600;font-size:15px}
 .pro-side .cp2-help{margin-top:2px;border:1px solid rgba(255,255,255,.2);background:none}
 .pro-side .cp2-help-btn{border-color:rgba(255,255,255,.6);border-radius:9px}

 /* Cabecera: saludo sobre el fondo de la página y tres botones blancos a la derecha */
 body[data-page="panel"] .portal-shell .portal-topbar.cp2-top.pro-top{min-height:0;padding:2px 2px 0;border:0;border-radius:0;background:none;box-shadow:none;gap:14px}
 .pro-top .cp2-greeting h1{font-size:31px;letter-spacing:-.035em}
 .pro-top .cp2-greeting p{font-size:15.5px}
 .pro-top .pro-commune,.pro-top .portal-notifications,.pro-top .pro-account summary{height:50px;border:1px solid #dfe8f4;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(11,27,61,.04)}
 .pro-top .pro-commune select{height:48px;font-size:15px}
 .pro-top .portal-notifications{width:50px;display:grid;place-items:center;color:#0b2a6b}
 .pro-top .portal-notifications .pro-ico{width:22px;height:22px}
 .pro-top .pro-account summary{padding:4px 14px 4px 5px;border-radius:12px}
 .pro-top .cp-account .avatar{width:40px!important;height:40px!important;border-radius:50%}
 .pro-top .pro-who b{font-size:15px}
 .pro-top .pro-who small{font-size:12.5px}
 .pro-top .pro-bell-count{top:-6px;right:-6px}
}

/* Pantallas de poca altura: la barra no se descuadra; el menú se desplaza y las tarjetas de abajo se compactan. */
@media (min-width:901px) and (max-height:1000px){
 .pro-side .pro-promo{padding:12px!important}
 .pro-side .pro-promo ul{display:none}
 .pro-side .pro-promo h3{margin-bottom:8px!important;font-size:18px!important}
 .pro-side .pro-promo .pro-crown{width:28px;height:28px}
 .pro-side .cp2-help{padding:10px 12px;gap:2px}
 .pro-side .cp2-help>.icon,.pro-side .cp2-help p{display:none}
 .pro-side .cp2-help h3{margin:0 0 6px;font-size:14px}
 .pro-side .cp2-help-btn,.pro-side .cp2-promo-btn{height:36px}
 body[data-page="panel"] .pro-side .cp2-nav>button{min-height:40px}
 .pro-q-tile{height:58px}
}
@media (min-width:901px) and (max-height:720px){
 .pro-side .pro-promo{display:none}
 .pro-shell .pro-side .cp2-brand{padding-bottom:4px}
}

/* Ventana para elegir un acceso directo */
.pro-q-picker{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pro-q-picker button{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:6px 10px;border:1px solid #e1e8f2;border-radius:11px;background:#fff;color:#0b1f4d;text-align:left;cursor:pointer;font:inherit}
.pro-q-picker button:hover:not(:disabled){background:#eaf3ff;border-color:#bcd3fb}
.pro-q-picker button:disabled{opacity:.55;cursor:not-allowed}
.pro-q-picker span{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#eaf3ff;color:#1665f2}
.pro-q-picker .pro-ico{width:17px;height:17px}
.pro-q-picker b{flex:1;min-width:0;font:600 13.5px Inter,sans-serif}
.pro-q-picker em{font-style:normal;font-size:11px;color:#6b7a95}
@media (max-width:520px){.pro-q-picker{grid-template-columns:minmax(0,1fr)}}
/* Etapa 262: mientras el panel carga, el pie no se ve y queda al fondo de la pantalla (antes quedaba pegado al aviso «cargando» y bajaba de golpe cuando llegaban los datos: era el único desplazamiento de diseño medible en el laboratorio). */
.pro-shell .cp2-body{min-height:100vh;min-height:100svh}
.pro-shell .cp2-main{flex:1 0 auto}
.pro-shell .cp2-body:has(.ps-loading) .portal-footer{visibility:hidden}
