/* Apertura centrada, disponibilidad real y espera de llamada. */
.dils-splash {
  position: fixed;
  inset: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash-halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, #71f0df22, transparent 42%);
}
.splash-wordmark { position: relative; width: 205px; max-width: 60vw; }

.app-layout.home-screen {
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 82px minmax(0, 1fr) 88px;
}
.home-screen .main-content { padding: 0 24px; min-height: 0; max-width: 1130px; }
.home-screen .consumer-home,
.home-screen .interpreter-wait-room { min-height: 0; height: 100%; width: 100%; position: relative; }
.home-screen .consumer-home { justify-content: center; }
.home-screen .home-intro { position: absolute; top: 20px; left: 0; right: 0; max-width: none; }
.home-screen .home-intro h1 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.home-screen .call-cta { min-height: 0; height: 100%; padding: 0; width: 100%; }
.home-screen .bottom-nav { align-self: start; margin-bottom: 20px; }
.home-screen .interpreter-wait-room { gap: 24px; }
.home-screen .turn-actions { margin-top: 4px; }
.home-screen .site-choice { position: absolute; top: 70px; z-index: 1; margin: 0; width: min(300px, 100%); }

.connection { padding: 7px 10px; border-radius: 20px; border: 1px solid #ffffff20; }
.connection.state-off { color: #dce6f4; background: #132c485c; }
.connection.state-off:before { background: #a6b7cd; }
.connection.state-paused { color: #ffe1a5; background: #4b391b59; }
.connection.state-paused:before { background: #ffd178; }
.connection.state-connected,
.connection.state-available { color: #c6ffed; background: #103d385e; }
.connection.state-connected:before,
.connection.state-available:before { background: #71f0df; }
.connection.state-busy { color: #ffe1ec; background: #54213b60; }
.connection.state-busy:before { background: #ffa6ce; }

.call-search { width: 152px; height: 152px; position: relative; flex-shrink: 0; }
.search-ring { position: absolute; border-radius: 50%; border: 3px solid #b6d4ff1c; }
.search-ring-outer { inset: 0; border-top-color: #71f0df; border-right-color: #a7ffe9; }
.search-ring-inner { inset: 18px; border-bottom-color: #b5cfff; border-left-color: #71f0df; border-width: 2px; }
.search-sign { position: absolute; inset: 30%; background: #71f0df; -webkit-mask: url('/compartido/assets/manos.png') center / contain no-repeat; mask: url('/compartido/assets/manos.png') center / contain no-repeat; }
.call-search.is-idle .search-ring { border-color: #c1dcf72b; }
.call-search.is-idle .search-sign { background: #b1becf; opacity: .8; }
.sign-call img { filter: brightness(0) invert(.74); }
.sign-call:disabled img { filter: brightness(0) saturate(100%) invert(90%) sepia(31%) saturate(686%) hue-rotate(103deg); }

.home-screen .waiting-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(370px, 100%);
  max-width: 370px;
  margin: 0;
  padding: 30px 26px;
  gap: 22px;
  background: radial-gradient(ellipse at 50% 0%, #62b8be69, transparent 66%), linear-gradient(140deg, #327ea3, #425893);
  border: 1px solid #a5fff47d;
  border-radius: 28px;
  box-shadow: 0 20px 70px #08122666, 0 0 0 6px #71f0df09;
  backdrop-filter: none;
}
.waiting-panel h2 { margin: 0; font-size: 1.35rem; font-weight: 500; }
.waiting-panel .wait-time { margin: 0; font-size: 1.35rem; font-variant-numeric: tabular-nums; color: #c4fff0; }
.waiting-panel > .button { margin: 0; }
.button.icon-only.danger {
  color: #fff;
  background: #d52f50;
  border: 1px solid #ff859b75;
  box-shadow: 0 7px 25px #ce244547;
}
.button.icon-only.danger:hover { background: #e23e5d; }
.button.icon-only.call-cancel { width: 64px; height: 64px; min-width: 64px; }
.call-cancel .icon { width: 30px; height: 30px; }

@media (prefers-reduced-motion: no-preference) {
  .call-search.is-running .search-ring-outer { animation: dils-search-orbit 2.6s linear infinite; }
  .call-search.is-running .search-ring-inner { animation: dils-search-orbit 3.8s linear infinite reverse; }
  .call-search.is-running .search-sign { animation: dils-sign-pulse 1.7s ease-in-out infinite alternate; }
  .incoming-symbol { animation: dils-bell-halo 1.8s ease-in-out infinite; }
  .incoming-symbol .icon { transform-origin: 50% 12%; animation: dils-bell-ring 1.8s ease-in-out infinite; }
  .call-controls .has-unread { animation: dils-chat-pulse 2s ease-in-out infinite; }
}
@keyframes dils-search-orbit { to { transform: rotate(360deg); } }
@keyframes dils-sign-pulse { from { transform: scale(.92); opacity: .72; } to { transform: scale(1.07); opacity: 1; } }
@keyframes dils-bell-ring { 0%,55%,100% { transform: rotate(0); } 8%,24%,40% { transform: rotate(18deg); } 16%,32%,48% { transform: rotate(-18deg); } }
@keyframes dils-bell-halo { 50% { box-shadow: 0 0 0 10px #71f0df20, 0 0 45px #71f0df55; } }
@keyframes dils-chat-pulse { 50% { box-shadow: 0 0 0 5px #71f0df24; } }

/* Una sola imagen principal, con cámara propia superpuesta y movible. */
.call-layout.layout-focus .video-area,
.call-layout.layout-wide .video-area { inset: 0; height: auto; border-radius: 0; box-shadow: none; }
.call-layout.layout-focus .call-aside,
.call-layout.layout-wide .call-aside { width: 160px; height: 120px; z-index: 12; cursor: grab; touch-action: none; user-select: none; }
.call-layout .call-aside.dragging { cursor: grabbing; }
.call-layout .call-aside:focus-visible { outline: 3px solid #ffdb80; outline-offset: 3px; border-radius: 16px; }
.call-layout.fit-cover .video-area video { object-fit: cover!important; }
.call-layout .call-topbar { pointer-events: none; }
.call-layout .video-placeholder { background: radial-gradient(ellipse at 50% 10%, #397eb726, transparent 70%), #10203a; }
.call-layout .self-area video { pointer-events: none; }
.call-layout #switch-camera { width: 100%; margin-bottom: 17px; }
.call-layout.chat-open.layout-focus .video-area,
.call-layout.chat-open.layout-wide .video-area { inset: 0 360px 0 0; }
.chat-message header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 12px; }
.chat-message header strong { min-width: 0; overflow-wrap: anywhere; }
.chat-message header time { white-space: nowrap; }
.chat-message p { margin: 4px 0 0; }
.chat-badge { position: absolute; right: -4px; top: -5px; min-width: 23px; height: 23px; border-radius: 20px; padding: 2px 5px; background: #71f0df; color: #14364d; border: 2px solid #27496b; font-size: .7rem; line-height: 16px; font-weight: 700; }
.call-controls .button.has-unread { border-color: #71f0df; color: #c8fff0; }
.stars label.filled { background: #71f0df24; border-color: #96ffe7; color: #b9ffdf; box-shadow: 0 0 20px #71f0df20; }
.profile-page .password-section { width: 100%; }
.profile-page .password-section > summary { justify-content: center; padding: 16px 22px; }
.profile-page .logout-button { min-height: 56px; margin-top: 20px; }
.profile-note { color: #ccdeed; font-size: .76rem; margin: 0 0 18px; }
.phone-rotate { display: none; }

@media (min-width: 700px) {
  .phone-rotate { position: absolute; display: block; top: 0; right: -130px; padding: 10px 14px; color: #d9fff4; background: #244b70; border: 1px solid #9fffe74d; border-radius: 12px; }
  .phone-shell.is-landscape#app { width: 691px; height: 443px; }
  .phone-shell.is-landscape .phone-rotate { top: -46px; right: 0; }
  .phone-shell.is-landscape .phone-screen { width: 667px; height: 375px; }
  .phone-shell.is-landscape .app-layout.home-screen { height: 375px; min-height: 375px; grid-template-rows: 58px minmax(0, 1fr) 74px; }
  .phone-shell.is-landscape .phone-screen .app-layout,
  .phone-shell.is-landscape .phone-screen .auth-screen { min-height: 375px; }
  .phone-shell.is-landscape .phone-screen .call-layout { height: 375px; min-height: 375px; }
  .phone-shell.is-landscape .home-screen .app-header { min-height: 58px; padding-block: 8px; }
  .phone-shell.is-landscape .home-intro { top: 0; }
  .phone-shell.is-landscape .home-intro h1 { font-size: 1.1rem; }
  .phone-shell.is-landscape .sign-call { width: 105px; height: 105px; margin-top: 30px; }
  .phone-shell.is-landscape .sign-call img { width: 55px; height: 55px; }
  .phone-shell.is-landscape .home-screen .waiting-panel { padding: 12px 22px; gap: 8px; }
  .phone-shell.is-landscape .waiting-panel .call-search { width: 62px; height: 62px; }
  .phone-shell.is-landscape .waiting-panel h2 { font-size: 1rem; }
  .phone-shell.is-landscape .waiting-panel .wait-time { font-size: 1rem; }
  .phone-shell.is-landscape .waiting-panel .call-cancel { width: 48px; height: 48px; min-width: 48px; }
  .phone-shell.is-landscape .phone-screen .call-topbar { min-height: 42px; padding-block: 8px; }
  .phone-shell.is-landscape .call-layout.layout-focus .call-aside,
  .phone-shell.is-landscape .call-layout.layout-wide .call-aside { width: 125px; height: 94px; }
  .phone-shell.is-landscape .call-controls { bottom: 10px; }
  .phone-shell.is-landscape .call-options-panel { bottom: 82px; max-height: calc(100% - 95px); }
  .phone-shell.is-landscape .chat-panel { top: 48px; bottom: 82px; left: 50%; right: 10px; width: auto; height: auto; }
  .phone-shell.is-landscape .call-layout.chat-open .video-area { inset: 0 calc(50% + 4px) 0 0; }
  .phone-shell.is-landscape .call-layout.layout-side .video-area { inset: 48px calc(50% + 4px) 83px 10px; }
  .phone-shell.is-landscape .call-layout.layout-side .call-aside { inset: 48px 10px 83px calc(50% + 4px); }
  .phone-shell.is-landscape .call-layout.layout-stack .video-area { inset: 48px 10px auto; height: 136px; }
  .phone-shell.is-landscape .call-layout.layout-stack .call-aside { inset: 191px 10px 83px; height: auto; }
  .phone-screen .call-layout.layout-focus .call-aside,
  .phone-screen .call-layout.layout-wide .call-aside { width: 108px; height: 132px; }
  .phone-screen .call-layout.chat-open.layout-focus .video-area,
  .phone-screen .call-layout.chat-open.layout-wide .video-area { inset: 0; }
}
@media (max-width: 699px), (pointer: coarse) and (max-height: 540px) {
  .call-controls .desktop-control { display: none; }
  .call-layout.layout-focus .call-aside,
  .call-layout.layout-wide .call-aside { width: 108px; height: 132px; }
  .call-layout.chat-open.layout-focus .video-area,
  .call-layout.chat-open.layout-wide .video-area { inset: 0; }
  .call-layout.chat-open .call-aside { display: none; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .call-layout.layout-focus .call-aside,
  .call-layout.layout-wide .call-aside { width: 125px; height: 94px; }
  .call-layout.chat-open.layout-focus .video-area,
  .call-layout.chat-open.layout-wide .video-area { inset: 0; }
  .call-layout .call-controls { bottom: max(10px, env(safe-area-inset-bottom)); }
}

@media (min-width: 700px) {
  .phone-screen .app-layout.home-screen { height: 667px; min-height: 667px; grid-template-rows: 75px minmax(0, 1fr) 86px; }
  .phone-screen .home-screen .main-content { padding: 0 22px; }
  .phone-screen .home-screen .consumer-home,
  .phone-screen .home-screen .interpreter-wait-room { min-height: 0; }
  .phone-screen .home-screen .call-cta { min-height: 0; }
  .phone-screen .home-screen .home-intro { top: 15px; }
  .phone-screen .home-screen .home-intro h1 { font-size: 1.5rem; }
  .phone-screen .home-screen .waiting-panel { padding: 25px 20px; gap: 19px; }
  .phone-screen .waiting-panel .call-search { width: 132px; height: 132px; }
}
@media (max-width: 699px) {
  .app-layout.home-screen { grid-template-rows: 75px minmax(0, 1fr) calc(86px + env(safe-area-inset-bottom)); }
  .home-screen .main-content { padding: 0 21px; }
  .home-screen .waiting-panel { padding: 25px 20px; gap: 19px; }
  .waiting-panel .call-search { width: 132px; height: 132px; }
  .home-screen .header-actions .connection { display: flex; font-size: .7rem; }
}
.phone-screen .notice {
  position: absolute;
  top: auto;
  bottom: 104px;
  left: 12px;
  right: 12px;
  margin: 0;
  max-width: calc(100% - 24px);
  transform: none;
  pointer-events: none;
}
@media (max-height: 580px) {
  .app-layout.home-screen { grid-template-rows: 58px minmax(0, 1fr) 74px; }
  .home-screen .app-header { min-height: 58px; padding-block: 8px; }
  .home-screen .waiting-panel { padding: 14px 22px; gap: 10px; }
  .waiting-panel .call-search { width: 72px; height: 72px; }
  .waiting-panel h2 { font-size: 1.05rem; }
  .waiting-panel .wait-time { font-size: 1rem; }
  .button.icon-only.call-cancel { width: 50px; height: 50px; min-width: 50px; }
  .home-screen .interpreter-wait-room { gap: 12px; }
  .interpreter-wait-room .call-search { width: 85px; height: 85px; }
}