/* style.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background: #000;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

/* HEADER */
#app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #111;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.header-title {
  color: #fff;
  font-size: 1.5rem;
}
.header-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.btn {
  background: transparent;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  padding: 0.5rem;
  font-size: 1rem;
  cursor: pointer;

  &.remote, &.settings, &.play {
    width: 60px;
    height: 60px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
    background-position: center;
  }

  &.remote {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h24v24H0V0z%22%2F%3E%3Cpath%20fill%3D%22%23CCC%22%20d%3D%22M14.705%209.826H9.303c-.496%200-.9.392-.9.87v10.435c0%20.478.404.869.9.869h5.402c.495%200%20.9-.392.9-.869V10.696c0-.479-.405-.87-.9-.87zm-2.701%205.217c-.99%200-1.801-.782-1.801-1.739%200-.956.811-1.739%201.801-1.739s1.8.783%201.8%201.739c.001.957-.81%201.739-1.8%201.739zM7.547%207.261l1.269%201.226a4.61%204.61%200%200%201%203.188-1.27c1.243%200%202.368.487%203.188%201.27l1.269-1.226a6.398%206.398%200%200%200-4.457-1.782%206.392%206.392%200%200%200-4.457%201.782zM12.004%202C9.268%202%206.791%203.069%205%204.8l1.269%201.226a8.26%208.26%200%200%201%205.736-2.287c2.242%200%204.269.878%205.725%202.296L19%204.809C17.217%203.069%2014.741%202%2012.004%202z%22%2F%3E%3Cpath%20fill%3D%22%23CCC%22%20d%3D%22M3.007%202L22%2020.993%2020.992%2022%202%203.008z%22%2F%3E%3C%2Fsvg%3E');
  }

  &.settings {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h24v24H0V0z%22%2F%3E%3Cpath%20fill%3D%22%23cccccc%22%20d%3D%22M19.43%2012.98c.04-.32.07-.64.07-.98%200-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06%200-.12.01-.17.03l-2.49%201c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.49.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17%200-.34.09-.43.25l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.07.65-.07.98%200%20.33.03.66.07.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.09.16.26.25.44.25.06%200%20.12-.01.17-.03l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.03.24.24.42.49.42h4c.25%200%20.46-.18.49-.42l.38-2.65c.61-.25%201.17-.59%201.69-.98l2.49%201c.06.02.12.03.18.03.17%200%20.34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73%200%20.21-.02.43-.05.73l-.14%201.13.89.7%201.08.84-.7%201.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16%201.13-.2%201.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21%201.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21%201.27.51%201.04.42.9-.68c.43-.32.84-.56%201.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19%201.35.16%201.13%201.06.43c.43.18.83.41%201.23.71l.91.7%201.06-.43%201.27-.51.7%201.21-1.07.85-.89.7.14%201.13zM12%208c-2.21%200-4%201.79-4%204s1.79%204%204%204%204-1.79%204-4-1.79-4-4-4zm0%206c-1.1%200-2-.9-2-2s.9-2%202-2%202%20.9%202%202-.9%202-2%202z%22%2F%3E%3C%2Fsvg%3E');
  }

  &.play {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20enable-background%3D%22new%200%200%2048%2024%22%20height%3D%2224%22%20viewBox%3D%220%200%2048%2024%22%20width%3D%2248%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23ccc%22%3E%3Cpath%20d%3D%22m7%205v14l11-7z%22%2F%3E%3Cpath%20d%3D%22m30%2019h4v-14h-4zm8-14v14h4v-14z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  }
}

#remotebtn > input[type=checkbox]:checked + .remote {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h24v24H0V0z%22%2F%3E%3Cpath%20fill%3D%22%23CCC%22%20d%3D%22M14.705%209.826H9.303c-.496%200-.9.392-.9.87v10.435c0%20.478.404.869.9.869h5.402c.495%200%20.9-.392.9-.869V10.696c0-.479-.405-.87-.9-.87zm-2.701%205.217c-.99%200-1.801-.782-1.801-1.739%200-.956.811-1.739%201.801-1.739s1.8.783%201.8%201.739c.001.957-.81%201.739-1.8%201.739zM7.547%207.261l1.269%201.226a4.61%204.61%200%200%201%203.188-1.27c1.243%200%202.368.487%203.188%201.27l1.269-1.226a6.398%206.398%200%200%200-4.457-1.782%206.392%206.392%200%200%200-4.457%201.782zM12.004%202C9.268%202%206.791%203.069%205%204.8l1.269%201.226a8.26%208.26%200%200%201%205.736-2.287c2.242%200%204.269.878%205.725%202.296L19%204.809C17.217%203.069%2014.741%202%2012.004%202z%22%2F%3E%3C%2Fsvg%3E');
}

.icon-btn {
  font-size: 1.5rem;
}

.btn.open-text {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-small {
  background: #222;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

/* COLLAPSE HEADER */
#app-header.collapsed .header-title,
#app-header.collapsed .header-controls .btn:not(#toggle-btn) {
  display: none;
}

/* CONFIG PANEL */
#configPanel {
  display: none;
  position: fixed;
  top: 3.5rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.8);
  padding: 1rem;
  border-radius: 0.25rem;
  color: #fff;
  z-index: 100;
  width: 270px;
}
.config-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.config-item span {
  flex: 1;
  color: #fff;
}

/* Toggle switch */
.switch {
  position: relative;
  width: 40px;
  height: 20px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #555;
  border-radius: 20px;
  transition: 0.4s;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.4s;
}
.switch input:checked + .slider {
  background: #2196f3;
}
.switch input:checked + .slider:before {
  transform: translateX(20px);
}

/* TEXT CONTAINER */
#text-container {
  position: absolute;
  top: 3.5rem;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  padding: 2rem;
}
#teleprompter-text {
  width: 100%;
  height: 100%;
  background: transparent;
  color: #fff;
  font-size: 50px;
  line-height: 1.4;
  border: none;
  resize: none;
  outline: none;
  white-space: pre-wrap;
  transform-origin: center;
}

/* HID debug (solo para diagnosticar en móvil) */
#hid-debug {
  position: fixed;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  padding: 0.35rem 0.5rem;
  max-width: calc(100vw - 1.5rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}