/* Panel del box como app (/panel/) */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.pa{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;color:#1C1D21;background:#F2F3F5;-webkit-text-size-adjust:100%}
.pa h1,.pa h2,.pa h3{font-family:'Inter',system-ui,sans-serif;font-weight:800;letter-spacing:.005em}
.pa .pt h3{font-family:'Inter',system-ui,sans-serif;font-weight:800}

/* Acceso */
body.pa-fuera{background:radial-gradient(900px 500px at 80% 0%,#1A2A23 0,#0D0D10 60%) fixed;min-height:100vh}
.pa-login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}
.pa-login .pt{width:100%;max-width:460px}
.pa-login .pt-login-caja{box-shadow:0 30px 60px rgba(0,0,0,.4)}
.pa-pie{margin:18px 0 0;font-size:.9rem}.pa-pie a{color:#80E5B7;text-decoration:none;font-weight:700}

/* Estructura */
.pa-dentro{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.pa-lado{position:sticky;top:0;height:100vh;background:#0D0D10;color:#D9DCE1;display:flex;flex-direction:column;padding:22px 16px}
.pa-marca{display:flex;align-items:center;gap:12px;padding:0 6px 22px;border-bottom:1px solid #2A2C33}
.pa-marca img{width:52px;height:52px;object-fit:contain}
.pa-marca b{display:block;font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:1.15rem;color:#fff;line-height:1.1}
.pa-marca small{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#80E5B7;font-weight:800}
.pa-nav{display:flex;flex-direction:column;gap:4px;margin-top:18px}
.pa-nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;color:#D9DCE1;text-decoration:none;font-weight:800}
.pa-nav a svg{width:21px;height:21px;flex:none}
.pa-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.pa-nav a.on{background:#80E5B7;color:#0D0D10}
.pa-abajo{margin-top:auto;display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.pa-abajo>a{color:#9BA0A8;text-decoration:none;padding:8px 14px;border-radius:10px;font-weight:700}
.pa-abajo>a:hover{color:#fff;background:rgba(255,255,255,.06)}
.pa-usuario{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding:12px 14px;background:#17181C;border-radius:12px}
.pa-usuario span{font-weight:800;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-usuario a{color:#80E5B7;font-weight:800;text-decoration:none;font-size:.85rem}

.pa-main{min-width:0;padding:26px 32px 60px}
.pa-barra{display:flex;align-items:baseline;justify-content:space-between;gap:16px;max-width:1100px;margin:0 auto 18px}
.pa-barra h1{font-size:2.2rem;margin:0;color:#0D0D10}
.pa-fecha{color:#62666E;font-weight:700}
.pa-main .pt{max-width:1100px}
/* Dentro de la app no hacen falta la cabecera ni las pestañas del panel web */
.pa-main .pt-panel-cab,.pa-main .pt-secciones{display:none}
.pa-main .pt-caja{box-shadow:0 6px 18px rgba(13,13,16,.05)}

.pa-tabbar{display:none}

@media (max-width:900px){
	.pa-dentro{display:block;padding-bottom:calc(74px + env(safe-area-inset-bottom))}
	.pa-lado{position:static;height:auto;padding:12px 16px calc(12px);flex-direction:row;align-items:center;justify-content:space-between;padding-top:calc(12px + env(safe-area-inset-top))}
	.pa-marca{border:0;padding:0}
	.pa-marca img{width:42px;height:42px}
	.pa-nav{display:none}
	.pa-abajo{margin:0;flex-direction:row;align-items:center}
	.pa-abajo>a{display:none}
	.pa-usuario{margin:0;padding:8px 12px}
	.pa-usuario span{display:none}
	.pa-main{padding:18px 14px 30px}
	.pa-barra h1{font-size:1.8rem}
	.pa-tabbar{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:50;background:#0D0D10;padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(0,0,0,.2)}
	.pa-tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:12px;color:#9BA0A8;text-decoration:none;font-size:.72rem;font-weight:800}
	.pa-tabbar a svg{width:23px;height:23px}
	.pa-tabbar a.on{color:#0D0D10;background:#80E5B7}
	.pa-main .pt-total{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* Aviso / botón de instalar la app */
.pa [hidden]{display:none!important}
.pa-aviso-app{display:flex;align-items:center;gap:14px;max-width:1100px;margin:0 auto 18px;background:#0D0D10;color:#D9DCE1;border-radius:18px;padding:14px 16px;box-shadow:0 12px 28px rgba(13,13,16,.25)}
.pa-aviso-ico img{display:block;border-radius:12px}
.pa-aviso-txt{flex:1;font-size:.92rem;line-height:1.45}
.pa-aviso-txt b:first-child{display:block;color:#fff;font-size:1rem}
.pa-aviso-txt span b{color:#80E5B7}
.pa-cerrar{background:none;border:0;color:#9BA0A8;font-size:1.1rem;cursor:pointer;padding:6px}
.pa-abajo .pa-instalar{background:#80E5B7;color:#0D0D10;border:0;border-radius:10px;padding:10px 12px;font:inherit;font-weight:800;cursor:pointer;margin-bottom:8px;text-align:left}
@media (max-width:900px){.pa-abajo .pa-instalar{display:none!important}.pa-aviso-app{flex-wrap:wrap}.pa-aviso-txt{min-width:200px}}
@media (max-width:900px){.pa-tabbar a{font-size:.68rem}.pa-tabbar a svg{width:22px;height:22px}}
.pa-main .tbb-panel{max-width:1100px}
@media (max-width:900px){.pa-tabbar a{font-size:.62rem;padding:7px 1px;min-width:0}.pa-tabbar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pa-tabbar a svg{width:21px;height:21px}}
.pa-main .tbb-panel{max-width:1200px}

/* Toque de barbería: poste bajo la marca */
.pa-marca{position:relative}
.pa-marca::after{content:"";position:absolute;left:6px;right:6px;bottom:10px;height:5px;border-radius:9px;background:repeating-linear-gradient(-45deg,#C0392B 0 8px,#F4EFE6 8px 14px,#1F3A5F 14px 20px,#F4EFE6 20px 26px)}
@media (max-width:900px){.pa-marca::after{display:none}}
.pa h1{font-family:'Big Shoulders Display','Inter',system-ui,sans-serif!important;text-transform:uppercase;letter-spacing:.01em}