/* dir-telefono.css: la piel del móvil, común a todas las páginas; el tamaño lo pone cada una */
.phone-wrap,.phone-frame{--mt:linear-gradient(90deg,#4b4e54,#a4a7ad 50%,#454850)}
.phone-frame{
  background:linear-gradient(#08080a,#08080a) padding-box,linear-gradient(145deg,#e3e5e9,#7d8087 38%,#4a4c52 62%,#a0a3a9) border-box;
  border:3px solid transparent;position:relative;overflow:hidden;
  box-shadow:0 2px 5px rgba(0,0,0,.5),0 34px 70px -12px rgba(0,0,0,.42)}
:root:not([data-theme=dark]) .phone-frame{box-shadow:0 2px 5px rgba(30,38,56,.3),0 30px 60px -14px rgba(30,38,56,.3)}
/* bisel, filo claro y destello del cristal */
.phone-frame::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 6px #08080a,inset 0 0 0 7px rgba(255,255,255,.1);
  background:linear-gradient(115deg,rgba(255,255,255,.09),transparent 40%)}
/* botones laterales: tres a la izquierda, uno a la derecha */
.phone-wrap::before,.phone-frame::after{content:"";position:absolute;inset:0 -4px;pointer-events:none;
  background:var(--mt) 0 14%/4px 4% no-repeat,var(--mt) 0 24%/4px 8% no-repeat,var(--mt) 0 36%/4px 8% no-repeat,var(--mt) 100% 30%/4px 13% no-repeat}
.phone-frame::after{inset:0 -7px}
.phone-wrap>.phone-frame::after{content:none}
@supports (overflow-clip-margin:1px){.phone-frame{overflow:clip;overflow-clip-margin:4px}.phone-wrap>.phone-frame{overflow:hidden}}
/* isla, wifi y batería */
.phone-statusbar{padding:12px 22px 8px}
.phone-statusbar::before{content:"";position:absolute;top:9px;left:50%;margin-left:-42px;width:84px;height:24px;border-radius:14px;z-index:4;
  background:radial-gradient(circle at 80% 50%,#26394f 0 2px,#0d1118 3px 5px,transparent 6px),#000}
.phone-signal span{display:none}
.phone-signal{display:flex;align-items:center;gap:5px}
.phone-signal::before,.phone-signal::after{content:"";height:11px;background:center/contain no-repeat}
.phone-signal::before{width:15px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3E%3Cpath d='M1.5 4.2a8.5 8.5 0 0 1 12 0M4 6.8a5 5 0 0 1 7 0' fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='7.5' cy='9.2' r='1.3' fill='%23fff' fill-opacity='.8'/%3E%3C/svg%3E")}
.phone-signal::after{width:24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 11'%3E%3Crect x='.5' y='.5' width='20' height='10' rx='3' fill='none' stroke='%23fff' stroke-opacity='.5'/%3E%3Crect x='2' y='2' width='14' height='7' rx='1.6' fill='%23fff' fill-opacity='.8'/%3E%3Cpath d='M22.5 4v3' stroke='%23fff' stroke-opacity='.5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
/* chat más real */
.phone-avatar,.phone-avatar img{border-radius:50%}
.phone-back-icon{color:rgba(255,255,255,.4);flex-shrink:0}
.phone-appbar::after{content:"";margin-left:auto;width:30px;height:16px;opacity:.55;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Crect x='1' y='3.5' width='11' height='9' rx='2.5'/%3E%3Cpath d='M12 7l4-2v6l-4-2'/%3E%3Cg fill='%23fff' stroke='none'%3E%3Ccircle cx='28' cy='3.5' r='1.4'/%3E%3Ccircle cx='28' cy='8' r='1.4'/%3E%3Ccircle cx='28' cy='12.5' r='1.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.phone-messages{background:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1.5px) 0 0/14px 14px}
.phone-msg{box-shadow:0 1px 1px rgba(0,0,0,.22)}
.phone-msg--out::after{content:"\2713\2713";float:right;margin:4px 0 -3px 8px;font-size:11px;line-height:1;color:#7cc4ea;opacity:.8}
@media(forced-colors:active){.phone-frame{border-color:CanvasText}.phone-frame::before,.phone-frame::after,.phone-wrap::before{display:none}}