:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0d12;
  color: #f6f7fb;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #0b0d12; }
button, input { font: inherit; }
button { border: 0; border-radius: 12px; padding: 11px 14px; cursor: pointer; background: #f5f7ff; color: #11141b; font-weight: 750; }
button.secondary { background: #202532; color: #f5f7ff; }
button.danger { background: #732b35; color: white; }
button:disabled { opacity: .45; cursor: not-allowed; }
input { width: 100%; border: 1px solid #343a49; border-radius: 12px; padding: 12px 13px; background: #121620; color: white; outline: none; }
input:focus { border-color: #7c8cff; }
label { display: block; margin: 14px 0 7px; font-size: .86rem; color: #b7bdca; }
.hidden { display: none !important; }
.eyebrow { letter-spacing: .14em; font-size: .68rem; font-weight: 850; color: #98a2b8; }
.muted { color: #9098a8; }
.error { color: #ff9ca8; }

.landing, .join-page { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.landing-card, .join-card, .dialog { width: min(100%, 520px); background: #141821; border: 1px solid #272c38; border-radius: 22px; padding: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.landing-card h1, .join-card h1, .dialog h1 { margin: 7px 0 10px; }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

.join-card { width: min(100%, 460px); }
.preview-shell { width: min(62vw, 260px); aspect-ratio: 9 / 16; margin: 18px auto; overflow: hidden; border-radius: 22px; background: #050607; border: 1px solid #303644; }
.preview-shell video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.join-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.join-card > .danger { width: 100%; margin-top: 10px; }
.status { min-height: 1.6em; color: #aeb6c7; font-size: .9rem; }

.control-page, .viewer-page { width: 100vw; height: 100dvh; overflow: hidden; background: #000; }
.obs-mode, .obs-mode body { background: transparent !important; }
.stage { position: fixed; inset: 0; overflow: hidden; background: #000; }
.obs-mode .stage { background: transparent; }
.camera-tile {
  position: absolute;
  overflow: hidden;
  background: #080a0f;
  border: 0 solid rgba(255,255,255,.15);
  transition: left 420ms cubic-bezier(.2,.8,.2,1), top 420ms cubic-bezier(.2,.8,.2,1), width 420ms cubic-bezier(.2,.8,.2,1), height 420ms cubic-bezier(.2,.8,.2,1);
  touch-action: none;
  user-select: none;
}
.camera-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  transform: scale(var(--zoom, 1)) translate(var(--pan-x, 0%), var(--pan-y, 0%));
  transition: transform 90ms linear;
  pointer-events: none;
}
.camera-shade { position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events: none; }
.camera-name { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-size: clamp(12px, 1.8vw, 20px); font-weight: 850; text-shadow: 0 2px 12px rgba(0,0,0,.85); }
.main-badge { display: none; position: absolute; top: 12px; left: 12px; z-index: 3; font-size: 10px; letter-spacing: .08em; font-weight: 900; background: rgba(0,0,0,.58); padding: 6px 8px; border-radius: 999px; }
.camera-tile.is-main .main-badge { display: block; }
.edit-badge { display: none; position: absolute; inset: 10px 10px auto auto; z-index: 4; background: rgba(255,255,255,.92); color: #111; border-radius: 999px; padding: 6px 9px; font-size: 10px; font-weight: 900; }
.camera-tile.editing { outline: 3px solid rgba(255,255,255,.9); outline-offset: -3px; cursor: grab; z-index: 20; }
.camera-tile.editing:active { cursor: grabbing; }
.camera-tile.editing .edit-badge { display: block; }

.viewer-page .camera-name, .obs-mode .camera-name { display: none; }
.viewer-page .main-badge, .obs-mode .main-badge { display: none !important; }

.control-panel {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 50;
  width: min(330px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: 16px;
  background: rgba(15,18,25,.92);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0,0,0,.32);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-button { width: 34px; height: 34px; padding: 0; border-radius: 10px; background: #242a36; color: white; }
.link-stack { display: grid; gap: 8px; margin: 15px 0; }
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.switch input { display: none; }
.switch span { display: block; width: 42px; height: 24px; background: #323846; border-radius: 99px; position: relative; }
.switch span::after { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .18s; }
.switch input:checked + span { background: #6774ff; }
.switch input:checked + span::after { transform: translateX(18px); }
.participants-panel { margin-top: 10px; }
.participant-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0; }
.participant-meta { display: flex; align-items: center; gap: 7px; min-width: 0; }
.participant-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #555d6d; }
.dot.online { background: #58dc96; box-shadow: 0 0 0 3px rgba(88,220,150,.12); }
.pin-button { padding: 7px 9px; font-size: .78rem; background: #282e3a; color: #e9edf6; }
.pin-button.active { background: #e9edf6; color: #111; }
.tiny-badge { font-size: .58rem; padding: 3px 5px; border-radius: 5px; background: #394154; color: #dce3f2; }
.panel-help { color: #8f98aa; font-size: .78rem; line-height: 1.4; }
.show-panel { position: fixed; right: 14px; top: 14px; z-index: 60; }

.start-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.76); backdrop-filter: blur(14px); }
.dialog button { width: 100%; margin-top: 12px; }
.edit-hud { position: fixed; z-index: 80; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: rgba(15,18,25,.94); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 10px 12px; backdrop-filter: blur(16px); white-space: nowrap; }
.edit-hud span { color: #a8b0c0; font-size: .82rem; }
.edit-hud button { padding: 8px 10px; }
.toast { position: fixed; z-index: 120; left: 50%; top: 18px; transform: translate(-50%, -16px); opacity: 0; pointer-events: none; background: #f3f5fb; color: #111; border-radius: 999px; padding: 9px 13px; font-weight: 800; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.connection-badge { position: fixed; z-index: 30; left: 12px; top: 12px; background: rgba(0,0,0,.65); border-radius: 999px; padding: 8px 10px; font-size: 12px; transition: .3s; }

@media (max-width: 680px) {
  .control-panel { width: calc(100vw - 20px); top: 10px; right: 10px; max-height: 48dvh; }
  .edit-hud { width: calc(100vw - 20px); white-space: normal; flex-wrap: wrap; justify-content: center; }
  .edit-hud span { width: 100%; text-align: center; }
  .camera-name { left: 9px; bottom: 8px; }
}

/* Cuenta propietaria, usuarios y moderación */
.control-panel { width: min(390px, calc(100vw - 28px)); }
.owner-badge { margin-top: 3px; font-size: .72rem; color: #aab2c4; }
.panel-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.09); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.full-button { width: 100%; margin-top: 12px; }
.mini-button { width: auto !important; padding: 7px 10px !important; margin: 0 !important; border-radius: 9px; font-size: .78rem; }
.compact-message { min-height: 1.1em; margin: 7px 0 0; font-size: .78rem; }
.empty-state { padding: 11px 0; color: #838da1; font-size: .82rem; }

.participant-row-stacked { display: grid; grid-template-columns: 1fr; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,.055); }
.participant-row-stacked:last-child { border-bottom: 0; }
.participant-meta-wide { width: 100%; }
.participant-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.participant-actions button { padding: 7px 8px; font-size: .74rem; border-radius: 9px; }
.muted-badge { background: #6e3e45; color: #ffe5e8; }

.mute-badge { display: none; position: absolute; top: 12px; right: 12px; z-index: 3; font-size: 10px; letter-spacing: .06em; font-weight: 900; background: rgba(139,45,57,.86); color: white; padding: 6px 8px; border-radius: 999px; }
.control-page .camera-tile.is-muted .mute-badge { display: block; }

.account-form { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.account-form input { padding: 9px 10px; border-radius: 9px; font-size: .82rem; }
.account-form #newPassword { grid-column: 1 / -1; }
.account-form button { grid-column: 1 / -1; padding: 9px 10px; border-radius: 9px; }
.users-panel { display: grid; gap: 5px; margin-top: 10px; }
.user-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 47px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.user-row:last-child { border-bottom: 0; }
.user-meta { min-width: 0; display: grid; gap: 2px; }
.user-name-line { min-width: 0; display: flex; align-items: center; gap: 7px; }
.user-display { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.user-handle { margin-left: 15px; color: #818a9d; font-size: .72rem; }
.owner-role { background: #4c4678; color: #e8e5ff; }
.signed-in-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }

@media (max-width: 680px) {
  .control-panel { width: calc(100vw - 20px); }
  .account-form { grid-template-columns: 1fr; }
  .account-form #newPassword, .account-form button { grid-column: auto; }
}

/* Controles tipo videollamada + edición propia */
.call-page { align-items: start; padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.call-card { width: min(100%, 520px); }
.call-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.call-header h1 { margin-bottom: 0; }
.live-pill { flex: 0 0 auto; margin-top: 4px; padding: 6px 9px; border-radius: 999px; background: #d83b4b; color: white; font-size: .65rem; font-weight: 900; letter-spacing: .08em; }

.participant-preview {
  position: relative;
  width: min(70vw, 290px);
  max-width: 100%;
  margin: 18px auto;
  touch-action: none;
  transition: aspect-ratio .24s ease, width .24s ease;
}
.participant-preview.crop-portrait { aspect-ratio: 9 / 16; width: min(68vw, 280px); }
.participant-preview.crop-landscape { aspect-ratio: 16 / 9; width: 100%; }
.participant-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
  transform: scale(var(--zoom, 1)) translate(var(--pan-x, 0%), var(--pan-y, 0%));
  transition: transform 90ms linear;
}
.participant-preview.editing-own-crop { outline: 3px solid rgba(255,255,255,.92); outline-offset: -3px; cursor: grab; }
.participant-preview.editing-own-crop:active { cursor: grabbing; }
.crop-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 20px); padding: 7px 10px; border-radius: 999px; background: rgba(0,0,0,.65); color: white; font-size: .72rem; font-weight: 750; text-align: center; pointer-events: none; }
.video-off-overlay { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; align-content: center; gap: 8px; background: #111620; color: #dce2ee; text-align: center; }
.video-off-avatar { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #242b38; font-size: 28px; }
.start-camera { margin-top: 6px; }

.call-controls { display: flex; justify-content: center; align-items: flex-start; gap: clamp(8px, 3vw, 16px); margin: 16px -4px 2px; padding: 4px; }
.call-control { width: 62px; min-width: 0; padding: 0; background: transparent; color: white; display: grid; justify-items: center; gap: 5px; border-radius: 16px; }
.call-control-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #262c38; font-size: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); transition: .18s ease; }
.call-control-label { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b8c0cf; font-size: .68rem; font-weight: 750; }
.call-control:hover .call-control-icon, .call-control.active .call-control-icon { background: #394354; }
.call-control.off .call-control-icon, .call-control.locked .call-control-icon { background: #7b303a; }
.call-control.locked { opacity: .7; cursor: not-allowed; }
.call-control.hangup .call-control-icon { background: #d83b4b; transform: rotate(135deg); }
.call-control.hangup .call-control-label { color: #f2c2c8; }
.call-control:disabled { opacity: .55; }

.crop-panel { margin-top: 14px; padding: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #10141d; }
.crop-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preset-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; padding: 4px; border-radius: 12px; background: #0b0e14; }
.preset-tab { padding: 9px 8px; background: transparent; color: #aab2c2; border-radius: 9px; font-size: .78rem; }
.preset-tab.active { background: #2b3341; color: white; }
.zoom-control { margin-top: 14px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.zoom-control span { font-size: .78rem; color: #aeb6c6; }
.zoom-control input[type="range"] { border: 0; padding: 0; background: transparent; }
.crop-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.media-lock-notice { margin-top: 12px; padding: 9px 11px; border-radius: 12px; background: rgba(123,48,58,.2); border: 1px solid rgba(255,126,141,.24); color: #ffc0c8; font-size: .78rem; line-height: 1.35; text-align: center; }

/* Estado de cámara apagada dentro del mosaico */
.camera-off-state { position: absolute; inset: 0; z-index: 2; display: none; place-items: center; align-content: center; gap: 7px; background: #111620; color: #dce2ee; text-align: center; pointer-events: none; }
.camera-off-state span { width: clamp(46px, 8vw, 76px); height: clamp(46px, 8vw, 76px); display: grid; place-items: center; border-radius: 50%; background: #242b38; font-size: clamp(20px, 3vw, 34px); }
.camera-off-state strong { font-size: clamp(10px, 1.5vw, 16px); }
.camera-tile.is-video-off .camera-off-state { display: grid; }
.camera-tile.is-video-off video { visibility: hidden; }
.camera-tile.is-video-off .camera-shade { display: none; }
.video-badge { background: #70424e; color: #ffe1e8; }
.self-badge { background: #3b4657; color: #dce4f1; }
.participant-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* Panel de Maullame con controles circulares de llamada */
.call-participant-row { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.call-participant-row:last-child { border-bottom: 0; }
.call-moderation-controls { display: flex; align-items: center; gap: 8px; }
.round-action { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border-radius: 50%; background: #252c38; color: #f1f4f9; font-size: 16px; line-height: 1; transition: .16s ease; }
.round-action:hover { background: #343d4d; transform: translateY(-1px); }
.round-action.active { background: #f2f4f8; color: #10131a; }
.round-action.danger-active { background: #80313d; color: white; }
.round-action.kick-action { margin-left: auto; background: #652b34; color: #ffdce1; }
.round-action.kick-action:hover { background: #813641; }

@media (max-width: 520px) {
  .call-card { padding: 18px 14px; border-radius: 18px; }
  .participant-preview.crop-portrait { width: min(72vw, 270px); }
  .call-controls { gap: 5px; justify-content: space-between; }
  .call-control { width: 56px; }
  .call-control-icon { width: 44px; height: 44px; font-size: 18px; }
  .call-control-label { max-width: 56px; font-size: .62rem; }
}
.camera-tile.is-video-off .camera-name { z-index: 3; }

/* Videollamada completa para participantes */
.participant-call-page {
  width: 100vw;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: #000;
}
.participant-stage { z-index: 1; }
.participant-camera-tile .camera-name { bottom: max(12px, env(safe-area-inset-bottom)); }
.participant-camera-tile.is-self { box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.participant-camera-tile.is-self .edit-badge { content: 'TU ENCUADRE'; }
.participant-call-page .camera-tile.is-muted .mute-badge { display: block; }
.participant-call-page .camera-tile.is-muted .mute-badge { font-size: 15px; letter-spacing: 0; padding: 7px 9px; }

.participant-topbar {
  position: fixed;
  z-index: 45;
  top: max(10px, env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
.call-room-chip,
.participant-account-chip {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(11,14,20,.7);
  color: #f6f7fb;
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
  font-size: .78rem;
  font-weight: 800;
  pointer-events: auto;
}
.participant-account-chip { max-width: 48vw; }
.participant-account-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #58dc96; box-shadow: 0 0 0 4px rgba(88,220,150,.12); }
.chip-button { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: white; font-size: .7rem; }

.call-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 20%, rgba(61,72,101,.28), transparent 42%), rgba(4,6,10,.94);
  backdrop-filter: blur(18px);
}
.call-gate-card {
  width: min(100%, 430px);
  padding: 24px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background: rgba(19,23,32,.95);
  box-shadow: 0 24px 80px rgba(0,0,0,.42);
}
.call-gate-card h1 { margin: 7px 0 9px; }
.prejoin-card { text-align: center; }
.prejoin-card .eyebrow { margin-bottom: 6px; }

.participant-call-controls {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(4px, 2vw, 14px);
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  background: rgba(12,15,21,.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 50px rgba(0,0,0,.38);
}
.participant-call-controls .call-control { margin: 0; }
.participant-call-controls .call-control-icon { background: rgba(53,60,74,.9); }

.participant-lock-notice {
  position: fixed;
  z-index: 65;
  left: 50%;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 86px);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 8px 11px;
  border: 1px solid rgba(255,126,141,.28);
  border-radius: 999px;
  background: rgba(92,31,41,.88);
  color: #ffd5da;
  font-size: .75rem;
  font-weight: 750;
  text-align: center;
  backdrop-filter: blur(12px);
}
.participant-status {
  position: fixed;
  z-index: 120;
  top: calc(max(10px, env(safe-area-inset-top)) + 54px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(13,17,24,.9);
  color: #f1f4f8;
  font-size: .78rem;
  font-weight: 750;
  text-align: center;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 36px rgba(0,0,0,.3);
}

.participant-crop-editor {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(14px);
}
.crop-editor-card {
  width: min(100%, 520px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: #10141d;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.crop-editor-card .participant-preview { margin: 14px auto; }
.crop-editor-card .crop-hint { display: block !important; }

@media (max-width: 560px) {
  .participant-topbar { left: 7px; right: 7px; top: max(7px, env(safe-area-inset-top)); }
  .call-room-chip, .participant-account-chip { padding: 7px 9px; font-size: .7rem; }
  .participant-call-controls {
    width: calc(100vw - 14px);
    bottom: max(7px, env(safe-area-inset-bottom));
    justify-content: space-around;
    gap: 2px;
    padding: 7px 5px;
    border-radius: 20px;
  }
  .participant-call-controls .call-control { width: 55px; }
  .participant-call-controls .call-control-icon { width: 43px; height: 43px; }
  .participant-lock-notice { bottom: calc(max(7px, env(safe-area-inset-bottom)) + 80px); }
  .camera-name { font-size: 12px; }
  .main-badge { top: 9px; left: 9px; font-size: 8px; }
  .mute-badge { top: 9px; right: 9px; }
}

/* v4: vídeo natural + fondos rellenos, iconografía SVG y freeze frame */
.ui-icon {
  width: 1em;
  height: 1em;
  display: block;
  fill: none;
  color: currentColor;
  pointer-events: none;
}
.icon-only { display: inline-grid; place-items: center; min-width: 34px; }
.icon-only .ui-icon { width: 17px; height: 17px; }
.call-control-icon .ui-icon { width: 22px; height: 22px; }
.round-action .ui-icon { width: 18px; height: 18px; }
.video-off-avatar .ui-icon { width: 28px; height: 28px; }
.mute-badge .ui-icon { width: 15px; height: 15px; }
.camera-off-icon .ui-icon { width: clamp(22px, 3vw, 34px); height: clamp(22px, 3vw, 34px); }

/*
  El vídeo principal usa contain para mostrar el encuadre completo por defecto.
  Detrás se dibuja una copia cover desenfocada, por lo que la celda sigue usando
  el 100% del espacio sin las bandas negras ni el zoom agresivo de object-fit: cover.
*/
.camera-tile .camera-backdrop {
  z-index: 0;
  object-fit: cover !important;
  transform: scale(1.12) !important;
  filter: blur(24px) saturate(.86) brightness(.58);
  opacity: .95;
  transition: opacity .2s ease;
}
.camera-tile .camera-video {
  z-index: 1;
  object-fit: contain !important;
  background: transparent;
}
.camera-tile .camera-shade { z-index: 3; }
.camera-tile .camera-name,
.camera-tile .main-badge,
.camera-tile .mute-badge,
.camera-tile .edit-badge { z-index: 5; }

/* Fotograma congelado cuando la cámara se apaga. */
.camera-off-state {
  z-index: 4;
  overflow: hidden;
  background: linear-gradient(145deg, #151923, #080a0f);
}
.camera-off-state .camera-freeze,
.video-off-overlay .video-off-freeze {
  position: absolute;
  inset: -9%;
  width: 118%;
  height: 118%;
  object-fit: cover;
  filter: blur(30px) saturate(.78) brightness(.48);
  transform: scale(1.04);
  opacity: 0;
}
.camera-off-state.has-freeze .camera-freeze,
.video-off-overlay.has-freeze .video-off-freeze { opacity: 1; }
.camera-off-state::after,
.video-off-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(5,7,11,.24);
  pointer-events: none;
}
.camera-off-content {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 8px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.camera-off-icon {
  width: clamp(46px, 8vw, 76px);
  height: clamp(46px, 8vw, 76px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(15,18,25,.6);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}
.camera-off-state > span { display: none; }
.camera-tile.is-video-off .camera-video,
.camera-tile.is-video-off .camera-backdrop { visibility: hidden; }
.camera-tile.is-video-off .camera-shade { display: block; }

/* Editor: misma representación que verá la sala. */
.participant-preview { background: #080a0f; }
.participant-preview .preview-backdrop,
.participant-preview .preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.participant-preview .preview-backdrop {
  object-fit: cover !important;
  transform: scale(1.12) !important;
  filter: blur(22px) saturate(.86) brightness(.58);
  opacity: .95;
}
.participant-preview .preview-video {
  object-fit: contain !important;
  transform: scale(var(--zoom, 1)) translate(var(--pan-x, 0%), var(--pan-y, 0%)) !important;
  z-index: 1;
}
.participant-preview .crop-hint { z-index: 5; }
.video-off-overlay { overflow: hidden; background: linear-gradient(145deg, #151923, #080a0f); }
.video-off-content { position: relative; z-index: 2; display: grid; place-items: center; gap: 8px; }

.call-control.hangup .call-control-icon { transform: none; }

@media (max-width: 560px) {
  .camera-tile .camera-backdrop { filter: blur(20px) saturate(.84) brightness(.56); }
  .camera-off-state .camera-freeze,
  .video-off-overlay .video-off-freeze { filter: blur(26px) saturate(.76) brightness(.46); }
}