/* Streaminator 1.15.13 · adaptación móvil global */

@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    html,
    body { overflow-x: clip; }
  }

  body.mobile-nav-open,
  body.modal-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  img,
  svg,
  video,
  canvas,
  iframe { max-width: 100%; }

  main,
  section,
  article,
  form,
  fieldset,
  .container,
  .card,
  .page-head,
  .head-actions,
  .toolbar,
  .responsive-table,
  .grid-wrap,
  .mapping-table-wrap,
  .preview-table-wrap,
  .options-layout,
  .options-content,
  .automation-editor,
  .playlist-import-form,
  .native-tool,
  .tool-shell {
    min-width: 0;
    max-width: 100%;
  }

  input,
  textarea,
  select,
  button { max-width: 100%; }

  pre,
  code,
  .download-url,
  .endpoint-cell,
  .task-message {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* El drawer permanece realmente fuera de la interacción y del lienzo hasta pulsar el botón. */
  .mobile-nav-toggle {
    right: max(14px, env(safe-area-inset-right));
    touch-action: manipulation;
  }

  .nav[data-mobile-nav] {
    right: 0;
    max-width: calc(100vw - 42px);
    overflow-x: hidden;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(100%, 0, 0);
    transition: transform .24s ease, visibility 0s linear .24s;
    contain: layout paint;
  }

  .nav[data-mobile-nav].mobile-open {
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .mobile-nav-backdrop {
    touch-action: manipulation;
  }

  .responsive-table,
  .grid-wrap,
  .mapping-table-wrap,
  .preview-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .user-action-box,
  .delete-task-box {
    width: min(310px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 700px) {
  :root { --mobile-page-gap: 10px; }

  .topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(66px, calc(env(safe-area-inset-right) + 58px));
  }

  .container {
    width: 100%;
    padding: var(--mobile-page-gap);
  }

  .card {
    width: 100%;
    padding: 14px;
    overflow-wrap: anywhere;
  }

  .page-head,
  .head-actions,
  .toolbar,
  .download-actions,
  .telegram-inline-actions,
  .permission-toolbar,
  .mapping-actions,
  .result-heading,
  .condition-heading,
  .copy-line,
  .api-key-copy-row {
    min-width: 0;
    max-width: 100%;
  }

  .page-head h1,
  .page-head h2,
  .card h1,
  .card h2,
  .card h3 {
    overflow-wrap: anywhere;
  }

  /* Modales tipo hoja móvil: nunca superan el viewport y desplazan solo su contenido. */
  .modal {
    width: 100%;
    max-width: 100%;
    padding: max(8px, env(safe-area-inset-top)) 8px max(0px, env(safe-area-inset-bottom));
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
  }

  .modal-panel,
  .modal-panel.wide,
  .modal-panel.extra-wide {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top))) !important;
    margin: 0;
    padding: 20px 14px calc(16px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  @supports not (height: 100dvh) {
    .modal-panel,
    .modal-panel.wide,
    .modal-panel.extra-wide { max-height: calc(100vh - 16px) !important; }
  }

  .modal-panel > h1,
  .modal-panel > h2,
  .modal-panel > h3,
  .download-modal-head {
    min-width: 0;
    padding-right: 44px;
    overflow-wrap: anywhere;
  }

  .modal-close {
    top: 10px;
    right: 10px;
    z-index: 6;
    width: 38px;
    height: 38px;
    touch-action: manipulation;
  }

  .record-form,
  .provider-edit-form,
  .stream-normal-form,
  .telegram-settings-form,
  .general-settings-form,
  .form-grid,
  .form-grid.two,
  .permissions-grid,
  .custom-download-options,
  .download-format-grid,
  .provider-mode-panel,
  .playlist-options-grid,
  .playlist-source-grid,
  .mapping-grid,
  .condition-row {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .record-form > *,
  .provider-edit-form > *,
  .stream-normal-form > *,
  .telegram-settings-form > *,
  .general-settings-form > *,
  .form-grid > *,
  .permissions-grid > *,
  .custom-download-options > *,
  .download-format-grid > *,
  .provider-mode-panel > *,
  .playlist-options-grid > *,
  .playlist-source-grid > *,
  .mapping-grid > * {
    min-width: 0;
    max-width: 100%;
    grid-column: 1 !important;
  }

  .record-form label,
  .provider-edit-form label,
  .stream-normal-form label,
  .telegram-settings-form label,
  .general-settings-form label {
    display: block;
    width: 100%;
    min-width: 0;
  }

  input,
  textarea,
  select {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }

  textarea { min-height: 94px; }

  fieldset,
  .visibility-permissions,
  .permissions-fieldset,
  .download-format-grid {
    width: 100%;
    min-width: 0;
    padding: 12px;
  }

  legend { max-width: calc(100% - 12px); }

  .check-row,
  .permission-check,
  .radio-card {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    white-space: normal;
  }

  .modal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 8px;
    justify-content: stretch;
  }

  .modal-actions .btn,
  .download-actions .btn,
  .telegram-inline-actions .btn,
  .permission-toolbar .btn,
  .mapping-actions .btn,
  .copy-line .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .readonly-record-list {
    width: 100%;
    min-width: 0;
    margin-top: 10px;
  }

  .readonly-record-row {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .readonly-record-value-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    width: 100%;
    min-width: 0;
    gap: 8px;
  }

  .readonly-record-value {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .readonly-record-copy {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
  }

  .download-row,
  .access-log-list > span {
    width: 100%;
    min-width: 0;
    align-items: stretch;
    flex-direction: column;
  }

  .download-info,
  .download-url,
  .download-note,
  .download-access-log { min-width: 0; max-width: 100%; }

  .normal-stream-toolbar form,
  .provider-filter-form,
  .provider-search-controls,
  .provider-display-controls {
    width: 100%;
    min-width: 0;
  }

  .normal-stream-toolbar form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .normal-stream-toolbar form > *,
  .normal-stream-toolbar .search {
    grid-column: 1 !important;
    width: 100%;
  }

  .provider-search-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .provider-search-controls .search { grid-column: 1 / -1; }
  .provider-search-controls .btn { width: 100%; min-width: 0; }

  .provider-display-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 8px;
  }

  .provider-display-controls label,
  .provider-display-controls .pagination-summary {
    width: 100%;
    min-width: 0;
  }

  .provider-display-controls .pagination-summary {
    text-align: right;
    overflow-wrap: anywhere;
  }

  .mobile-card-table td {
    grid-template-columns: minmax(78px, 31%) minmax(0, 1fr);
  }

  .mobile-card-table td > *,
  .stream-url-cell,
  .normal-copy-cell,
  .stream-url-preview,
  .normal-cell-subtext {
    min-width: 0;
    max-width: 100%;
  }

  .table-pagination,
  .grid-pagination {
    width: 100%;
    min-width: 0;
  }

  .pagination-buttons {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination-buttons > span,
  .pagination-buttons [data-page-info] {
    min-width: 0;
    flex: 1 1 110px;
  }

  .spreadsheet-card {
    width: calc(100% + 8px);
    max-width: calc(100% + 8px);
  }

  .spreadsheet-card .toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .spreadsheet-card .toolbar > * {
    grid-column: 1 !important;
    width: 100%;
    min-width: 0;
  }

  .grid-wrap {
    width: 100%;
    max-width: 100%;
    min-height: 52dvh;
    max-height: calc(100dvh - 230px);
  }

  .options-sidebar,
  .options-content,
  .automation-section {
    width: 100%;
    min-width: 0;
  }

  .options-sidebar nav { grid-template-columns: minmax(0, 1fr) !important; }
  .automation-section { padding: 16px 12px; }
  .sticky-actions { padding: 12px; }

  .api-key-list-value,
  .api-key-copy-row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .user-download-logs-table,
  .automation-table,
  .mapping-table,
  .compact-table {
    max-width: none;
  }
}

@media (max-width: 420px) {
  .brand span { max-width: calc(100vw - 116px); }
  .nav[data-mobile-nav] { width: min(90vw, 326px); max-width: calc(100vw - 34px); }
  .modal { padding-left: 0; padding-right: 0; padding-bottom: 0; }
  .modal-panel,
  .modal-panel.wide,
  .modal-panel.extra-wide { border-radius: 18px 18px 0 0; }
  .mobile-card-table td { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .provider-display-controls { grid-template-columns: minmax(0, 1fr); }
  .provider-display-controls .pagination-summary { text-align: left; }
}

/* Streaminator 1.15.13 · modales de entidades en móvil */
@media (max-width: 900px) {
  .entity-modal-panel {
    border-radius: 22px 22px 0 0 !important;
    background: #fff;
  }
  .entity-modal-head {
    position: sticky;
    min-height: 88px;
    gap: 12px;
    padding: 16px 56px 14px 15px;
  }
  .entity-modal-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .entity-modal-icon svg { width: 23px; height: 23px; }
  .entity-modal-heading h2 { font-size: 1.18rem; }
  .entity-modal-heading p { margin-top: 3px; font-size: .78rem; line-height: 1.35; }
  .entity-modal-kicker { font-size: .65rem; }
  .entity-modal-panel .modal-close { top: 8px; right: 8px; margin: 0; }
  .entity-form { padding: 14px 12px 2px; gap: 10px; }
  .entity-form > label { padding: 11px 11px 12px; border-radius: 12px; }
  .entity-form > label:focus-within { transform: none; }
  .entity-form > label textarea { min-height: 86px; }
  .entity-form fieldset { padding: 12px; border-radius: 13px; }
  .entity-modal-panel .modal-actions {
    margin: 10px -12px 0;
    padding: 11px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .entity-modal-panel > .readonly-record-list { margin: 14px 12px 0; }
  .entity-modal-panel > .readonly-record-actions { margin-top: 12px; padding-inline: 12px; }
  .entity-preview-card {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 14px 12px 0;
    padding: 11px;
  }
  .entity-preview-stage { min-height: 82px; }
  .record-name-button { margin-left: -4px; }
}
@media (max-width: 900px) {
  .entity-form-section { margin-top: 4px; }
  .entity-form-section small { line-height: 1.3; }
}


/* Streaminator 1.15.13 · formularios compactos y tema por usuario */
@media (max-width: 1100px) and (min-width: 701px) {
  .entity-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .entity-form { grid-template-columns: minmax(0, 1fr); }
  .entity-form > .entity-span-2,
  .provider-edit-form .visibility-permissions { grid-column: 1; }
  .entity-form > label textarea { min-height: 58px; max-height: 130px; }
  .entity-modal-head .modal-close { top: 50%; right: 10px; }
  .personalization-theme-row { align-items: flex-start; flex-direction: column; }
  .theme-toggle-control { width: 100%; justify-content: space-between; }
  .logo-image-panel { width: calc(100vw - 20px) !important; border-radius: 18px !important; }
  .logo-image-stage { min-height: 190px; padding: 18px; }
  .stream-inline-play { display: none; }
}

/* El archivo mobile.css se carga el último; estas reglas consolidan el tema oscuro también en módulos con CSS propio. */
body.theme-dark .delete-task-box,
body.theme-dark .sticky-actions,
body.theme-dark .backup-card,
body.theme-dark .backup-block-option,
body.theme-dark .backup-select-all,
body.theme-dark .api-key-reveal,
body.theme-dark .warnings-box { background: #0e1929; color: var(--text); border-color: var(--line); }
body.theme-dark .mapping-help code,
body.theme-dark .backup-security-note,
body.theme-dark .role-badge.admin,
body.theme-dark .key-status.expired,
body.theme-dark .key-status.revoked { background: #18263a; color: #d8e7fb; border-color: #33465e; }
body.theme-dark .backup-form input[type="file"] { background: #0d1727; }
body.theme-dark .status-chip { background: #1a293d; color: #c2d1e3; }
body.theme-dark .status-chip.success { background: #153626; color: #8ce0b8; }
body.theme-dark .status-chip.error { background: #3a1c22; color: #ffb4bb; }


/* Streaminator 1.15.13 · tema oscuro completo */
body.theme-dark .brand-logo {
  background: transparent !important;
  filter: invert(1) !important;
}
body.theme-dark .mobile-nav-brand {
  background-color: #0e1929 !important;
}
body.theme-dark .mobile-nav-brand img {
  background: transparent !important;
  filter: invert(1) !important;
}
body.theme-dark .app-version-footer,
body.theme-dark .floating-theme-label {
  background: rgba(13,23,39,.92);
  color: #b7c5d8;
  border-color: #33465e;
  box-shadow: 0 5px 18px rgba(0,0,0,.32);
}
body.theme-dark .floating-theme-icon.moon { color: #c7d7f3; }
body.theme-dark .view-mode-switch,
body.theme-dark .normal-stream-toolbar,
body.theme-dark .grid-pagination,
body.theme-dark .table-pagination,
body.theme-dark .provider-list-toolbar,
body.theme-dark .user-action-box,
body.theme-dark .delete-task-box,
body.theme-dark .webhook-status-grid div,
body.theme-dark .mobile-card-table tbody tr {
  background: #0e1929;
  color: var(--text);
  border-color: var(--line);
}
body.theme-dark .modern-stream-table th,
body.theme-dark .plain-table thead th {
  background: #17263b;
  color: #b9c9dd;
}
body.theme-dark .modern-stream-table tbody tr:hover td { background: #142137; }
body.theme-dark .stream-type-badge,
body.theme-dark .status-badge.inactive,
body.theme-dark .role-badge.viewer,
body.theme-dark .status-chip { background: #1a293d; color: #c2d1e3; }
body.theme-dark .status-badge.active,
body.theme-dark .key-status.active { background: #153626; color: #8ce0b8; }
body.theme-dark .stream-url-copy,
body.theme-dark .empty-filter-toggle span { background: #152237; border-color: #34465e; color: #91b5f4; }
body.theme-dark .stream-url-copy:hover,
body.theme-dark .empty-filter-toggle input:checked + span { background: #20385e; border-color: #4d70a4; color: #c7dbff; }
body.theme-dark .column-filter:disabled,
body.theme-dark .data-grid select:disabled { background: #162236; color: #9eacbf; }
body.theme-dark .data-grid.streams-grid .name-col,
body.theme-dark .data-grid.streams-grid tbody tr:nth-child(even) .name-col { background: #101c2e; }
body.theme-dark .data-grid.streams-grid .grid-heading-row .name-col { background: #1a2a40; }
body.theme-dark .data-grid.streams-grid .grid-filter-row .name-col { background: #142238; }
body.theme-dark .data-grid tr.dirty td,
body.theme-dark .data-grid.streams-grid tr.dirty .name-col { background: #302815 !important; }
body.theme-dark .data-grid tr.to-delete td,
body.theme-dark .data-grid.streams-grid tr.to-delete .name-col { background: #341b22 !important; }
body.theme-dark .token-expiry-clock.token-warning,
body.theme-dark .backup-security-note.warning,
body.theme-dark .api-key-reveal { background: #342b16; color: #f0ca72; border-color: #66522b; }
body.theme-dark .token-expiry-clock.token-invalid,
body.theme-dark .token-expiry-clock.token-expired { background: #1a293d; color: #b7c5d8; }
body.theme-dark .condition-row,
body.theme-dark .mapping-help code,
body.theme-dark .sticky-actions { background: #0e1929; color: var(--text); border-color: var(--line); }
body.theme-dark .condition-row input[readonly] { background: #162236; }
body.theme-dark .native-link-tool {
  --surface: #111b2b; --surface2: #0d1727; --border: #2a3a50; --border-active: #42556f;
  --text: #e7eef9; --text-muted: #9cacbf; --text-secondary: #c4d1e2; --accent: #75a7ff;
}
body.theme-dark .native-link-tool input[type="text"],
body.theme-dark .native-link-tool input[type="url"],
body.theme-dark .native-link-tool .output-box,
body.theme-dark .native-link-tool .pssh-kid-hex,
body.theme-dark .native-link-tool .pssh-value { background: #0d1727; color: #e7eef9; border-color: #2a3a50; }
body.theme-dark .native-pssh-tool {
  --panel: #111b2b; --border: #2a3a50; --accent: #75a7ff; --text: #e7eef9; --muted: #9cacbf;
}
body.theme-dark .native-pssh-tool .panel,
body.theme-dark .native-pssh-tool textarea,
body.theme-dark .native-pssh-tool input[type=text],
body.theme-dark .native-pssh-tool select,
body.theme-dark .native-pssh-tool .result-box,
body.theme-dark .native-pssh-tool .raw-details summary { background: #0d1727; color: #e7eef9; border-color: #2a3a50; }
body.theme-dark .native-pssh-tool .tab-btn.active { background: #20385e; color: #d8e7ff; }
body.theme-dark .native-pssh-tool .result-note { background: #342515; color: #ffc27d; }
body.theme-dark .warnings-box,
body.theme-dark .badge.warn { background: #342b16; color: #f0ca72; border-color: #66522b; }
body.theme-dark input[type="file"]::file-selector-button { background: #1a293d; color: #e7eef9; border-color: #3a4c64; }


/* Streaminator 1.15.13 · revisión integral del modo oscuro móvil */
@media (max-width: 900px) {
  body.theme-dark {
    background: #09111f !important;
    color: var(--text);
  }
  body.theme-dark .topbar {
    background: rgba(9,17,31,.97) !important;
    border-bottom-color: #2a3a50;
  }
  body.theme-dark .container,
  body.theme-dark main {
    background: transparent !important;
  }
  body.theme-dark .card,
  body.theme-dark .hero,
  body.theme-dark .stat,
  body.theme-dark .normal-streams-card,
  body.theme-dark .spreadsheet-card,
  body.theme-dark .options-layout,
  body.theme-dark .options-sidebar,
  body.theme-dark .options-content,
  body.theme-dark .automation-section,
  body.theme-dark .provider-list-card,
  body.theme-dark .readonly-record-list {
    background: #111b2b !important;
    color: #e7eef9;
    border-color: #2a3a50;
  }
  body.theme-dark .mobile-card-table tbody,
  body.theme-dark .normal-stream-toolbar,
  body.theme-dark .provider-list-toolbar,
  body.theme-dark .table-pagination,
  body.theme-dark .grid-pagination {
    background: #0e1929 !important;
    border-color: #2a3a50;
  }
  body.theme-dark .mobile-card-table tbody tr {
    background: #0e1929 !important;
    border-color: #2a3a50;
    box-shadow: 0 7px 22px rgba(0,0,0,.22);
  }
  body.theme-dark .mobile-card-table td {
    border-bottom-color: #26364b !important;
    background: transparent !important;
  }
  body.theme-dark .page-head,
  body.theme-dark .page-head h1,
  body.theme-dark .page-head h2,
  body.theme-dark .card h1,
  body.theme-dark .card h2,
  body.theme-dark .card h3 { color: #edf4fd; }
  body.theme-dark .modal-panel,
  body.theme-dark .entity-modal-panel {
    background-color: #101a2a !important;
    border-color: #2a3a50;
  }
  body.theme-dark .logo-image-head,
  body.theme-dark .download-modal-head,
  body.theme-dark .entity-modal-head {
    background: rgba(14,25,41,.97) !important;
    border-color: #2a3a50;
  }
  body.theme-dark .modal-close {
    background: #17253a;
    color: #f1f6fd;
    border: 1px solid #35465d;
  }
  body.theme-dark .responsive-table,
  body.theme-dark .grid-wrap,
  body.theme-dark .preview-table-wrap,
  body.theme-dark .mapping-table-wrap { background: #0d1727; }
  body.theme-dark .brand,
  body.theme-dark .brand span { color: #f3f7fd; }
  body.theme-dark .brand-logo { background: transparent !important; filter: invert(1) !important; }
  body.theme-dark .mobile-nav-header { border-bottom-color: #2a3a50; }
}

@media (max-width: 700px) {
  body.theme-dark { background: #09111f !important; }
  body.theme-dark .container { background: #09111f !important; }
  body.theme-dark .card { box-shadow: 0 8px 26px rgba(0,0,0,.24); }
}

@media (max-width: 900px) {
  .topbar {
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }
  body.mobile-nav-open .mobile-header-theme-control {
    opacity: 0;
    pointer-events: none;
  }
}


/* Streaminator 1.15.13 · correcciones finales del tema oscuro móvil */
@media (max-width: 900px) {
  body.theme-dark .nav[data-mobile-nav],
  body.theme-dark .nav[data-mobile-nav] .mobile-nav-header,
  body.theme-dark .nav[data-mobile-nav] .mobile-nav-brand {
    background-color: #0e1929 !important;
  }
  body.theme-dark .nav[data-mobile-nav] .mobile-nav-header { border-bottom-color: #33465e !important; }
  body.theme-dark .nav[data-mobile-nav] .mobile-nav-brand {
    width: 100%;
    color: #f3f7fd !important;
  }
  body.theme-dark .duplicate-policy-option {
    background: #0e1929 !important;
    color: var(--text) !important;
    border-color: #33465e !important;
  }
  body.theme-dark .duplicate-policy-option:has(input:checked) {
    background: #142a47 !important;
    border-color: #6d9df2 !important;
  }
  .options-section-picker { width: 100%; max-width: none; }
}


/* Streaminator 1.15.13 · separación definitiva entre marca y SVG */
body.theme-dark .brand-logo,
body.theme-dark .mobile-nav-brand img {
  background: transparent !important;
  filter: invert(1) !important;
}
@media (max-width: 900px) {
  body.theme-dark .nav[data-mobile-nav],
  body.theme-dark .nav[data-mobile-nav] .mobile-nav-header,
  body.theme-dark .nav[data-mobile-nav] .mobile-nav-brand {
    background-color: #0e1929 !important;
  }
}