/* iPhone Pro — marco realista. Compartido por horario.css (.phone), inicio, control-de-horario y sos. */
.phone,.hm .phone{width:390px;height:844px;background:#2a2b2e;border-radius:56px;padding:14px;position:relative;flex:none;box-shadow:0 0 0 1.5px #5c5d61,0 0 0 3px #1b1c1e,0 0 0 4px #6d6e72,0 30px 70px -20px rgba(15,20,25,.55),0 12px 28px -12px rgba(15,20,25,.35)}
.phone::before,.hm .phone::before{content:"";position:absolute;inset:3px;border-radius:53px;background:linear-gradient(160deg,#3c3d41 0%,#1d1e21 40%,#141517 100%);pointer-events:none}
.phone .screen,.hm .phone .screen{width:100%;height:100%;background:var(--bg,#fff);border-radius:43px;overflow:hidden;position:relative;display:flex;flex-direction:column;z-index:1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.phone .notch,.hm .notch{position:absolute;top:calc(14px + 11px);left:50%;transform:translateX(-50%);width:124px;height:36px;background:#000;border-radius:24px;z-index:40}
.phone .notch::after,.hm .notch::after{content:"";position:absolute;right:11px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2e3a4a,#0a0d12 65%);box-shadow:0 0 0 1.5px #101215}
.phone .statusbar,.hm .statusbar{height:59px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:20px 30px 0;font-size:16px;font-weight:600;letter-spacing:-.02em;z-index:30;position:relative;font-family:var(--sans);font-variant-numeric:tabular-nums}
.phone .statusbar .num,.hm .statusbar .num{font-family:inherit}
.phone .statusbar .sb-r,.hm .statusbar .sb-r{display:flex;align-items:center;gap:6px;opacity:1;font-size:0}
.sb-r::before{content:"";width:18px;height:11px;background:linear-gradient(to right,currentColor 0 3px,transparent 3px 5px,currentColor 5px 8px,transparent 8px 10px,currentColor 10px 13px,transparent 13px 15px,currentColor 15px 18px);-webkit-mask:linear-gradient(to top,#000 40%,transparent 40%) 0 0/3px 100% no-repeat,linear-gradient(to top,#000 60%,transparent 60%) 5px 0/3px 100% no-repeat,linear-gradient(to top,#000 80%,transparent 80%) 10px 0/3px 100% no-repeat,linear-gradient(to top,#000 100%,transparent 100%) 15px 0/3px 100% no-repeat;mask:linear-gradient(to top,#000 40%,transparent 40%) 0 0/3px 100% no-repeat,linear-gradient(to top,#000 60%,transparent 60%) 5px 0/3px 100% no-repeat,linear-gradient(to top,#000 80%,transparent 80%) 10px 0/3px 100% no-repeat,linear-gradient(to top,#000 100%,transparent 100%) 15px 0/3px 100% no-repeat}
.sb-r::after{content:"";width:27px;height:13px;border:1.5px solid currentColor;border-radius:4.5px;opacity:.95;background:linear-gradient(to right,currentColor 0 78%,transparent 78%) content-box;padding:1.5px;box-sizing:border-box;position:relative}
.sb-wifi{width:16px;height:12px;display:inline-block;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M8 12a1.6 1.6 0 1 1 0-3.2A1.6 1.6 0 0 1 8 12zM4.3 7.6a5.3 5.3 0 0 1 7.4 0l-1.3 1.3a3.5 3.5 0 0 0-4.8 0zM1.5 4.8a9.3 9.3 0 0 1 13 0l-1.3 1.3a7.5 7.5 0 0 0-10.4 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M8 12a1.6 1.6 0 1 1 0-3.2A1.6 1.6 0 0 1 8 12zM4.3 7.6a5.3 5.3 0 0 1 7.4 0l-1.3 1.3a3.5 3.5 0 0 0-4.8 0zM1.5 4.8a9.3 9.3 0 0 1 13 0l-1.3 1.3a7.5 7.5 0 0 0-10.4 0z'/%3E%3C/svg%3E") center/contain no-repeat}
/* indicador de inicio */
.phone .screen::after,.hm .phone .screen::after{content:"";position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:99px;background:currentColor;opacity:.85;z-index:70;color:#0f1419;pointer-events:none}
.phone .screen.dark::after{color:#fff}
/* botones laterales */
.phone .btn-side,.phone .btn-side::before,.phone .btn-side::after{position:absolute;background:linear-gradient(to right,#4a4b4f,#26272a);border-radius:2px}
.phone .btn-side{left:-6px;top:170px;width:4px;height:32px}
.phone .btn-side::before{content:"";left:0;top:56px;width:4px;height:62px}
.phone .btn-side::after{content:"";left:0;top:132px;width:4px;height:62px}
.phone .btn-power{position:absolute;right:-6px;top:222px;width:4px;height:96px;background:linear-gradient(to left,#4a4b4f,#26272a);border-radius:2px}
/* la barra de pestañas respeta el indicador */
.tabbar,.hm .tabbar{padding-bottom:26px}
.sheet,.hm .sheet{padding-bottom:34px}
.camview .cam-ft{padding-bottom:40px}