/* Panel en el teléfono (vertical) como app web. Se carga al final (panel_response) y solo
   actúa en pantallas de teléfono: el escritorio y las tabletas quedan igual.
   - botones del mismo tamaño en todas las páginas (44-48 px, sin mayúsculas forzadas)
   - varios botones seguidos a lo ancho → cuadrícula de 2 columnas (js/panel-app.js)
   - listas en tarjetas compactas con las acciones en una sola fila
   - formularios, tarjetas y títulos con el mismo estilo; sin el fondo de partículas */

@media (max-width:767.98px) {
  html[data-panel-ui] { -webkit-text-size-adjust:100%; }
  html[data-panel-ui] body { font-size:15px; line-height:1.45; -webkit-tap-highlight-color:transparent; background:#000b1d!important; }
  html[data-panel-ui] :is(#js-particles,#particles-js) { display:none!important; }
  html[data-panel-ui] #page-content-wrapper { background:radial-gradient(120% 60% at 50% 0,rgba(0,40,90,.55),rgba(0,11,29,0) 70%)!important; }

  /* cabecera fija y compacta */
  /* solid bar: the page scrolls under it, and a blur only cost GPU work on every scroll frame */
  html[data-panel-ui] #page-content-wrapper>.navbar { position:sticky; top:0; z-index:900; min-height:56px; background:#000815!important; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid rgba(255,255,255,.06); }
  html[data-panel-ui] #page-content-wrapper>.navbar .owner-as-form select { min-height:40px!important; height:40px!important; padding:6px 12px!important; border-radius:12px!important; font-size:15px!important; }

  /* contenido */
  html[data-panel-ui] :is(.container-fluid,.container,.main-content) { padding:12px 12px 4px!important; }
  html[data-panel-ui] :is(.card-custom,.card,.sp-card,.box,.panel-card,.stat-card) { border-radius:16px!important; box-shadow:0 6px 22px rgba(0,0,0,.25)!important; margin-bottom:12px!important; }
  html[data-panel-ui] :is(.card-body,.modal-body) { padding:14px!important; }
  html[data-panel-ui] :is(.card-header,.card-header-warning) { padding:12px 14px!important; }
  html[data-panel-ui] :is(.card-header-warning h2,.card-header-warning h3,.card-header-warning h4,.card-header h2,.card-header h3,.card-header h4,.card-header h5) { font-size:1.1rem!important; line-height:1.35!important; margin:0!important; text-shadow:none!important; letter-spacing:0!important; }
  html[data-panel-ui] :is(#page-content-wrapper h1,#page-content-wrapper .page-title) { font-size:1.3rem!important; line-height:1.3!important; }
  html[data-panel-ui] #page-content-wrapper h2:not(.card-header-warning h2) { font-size:1.15rem; }
  html[data-panel-ui] #page-content-wrapper h3 { font-size:1.05rem; }
  html[data-panel-ui] #page-content-wrapper :is(p,small,.text-muted,.form-text,.help-text) { overflow-wrap:anywhere; }

  /* formularios */
  html[data-panel-ui] :is(.form-control,.custom-select,select,input[type=text],input[type=password],input[type=number],input[type=email],input[type=url],input[type=date],input[type=search],input[type=tel]):not([type=checkbox]):not([type=radio]) { min-height:46px; height:auto!important; padding:10px 14px!important; border-radius:12px!important; font-size:16px!important; }
  /* one dropdown look on every page (some pages had the native iOS one, others a gold arrow) */
  html[data-panel-ui] select:not([multiple]):not([size]) { -webkit-appearance:none!important; appearance:none!important; padding-right:40px!important; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFD700' viewBox='0 0 24 24'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e")!important; background-repeat:no-repeat!important; background-position:right 12px center!important; background-size:20px!important; }
  html[data-panel-ui] textarea.form-control, html[data-panel-ui] textarea { min-height:96px; border-radius:12px!important; }
  html[data-panel-ui] :is(.form-group,.mb-3) { margin-bottom:14px!important; }
  /* stacked columns (Configurar Demo): one 14px gap between all fields, inside a row and between rows */
  html[data-panel-ui] .row-custom { gap:14px!important; margin-bottom:14px; }
  html[data-panel-ui] .row-custom .form-group { margin-bottom:0!important; }
  html[data-panel-ui] :is(label,.form-label) { font-size:.85rem; margin-bottom:6px; }
  html[data-panel-ui] input[type=file] { width:100%; max-width:100%; font-size:14px!important; padding:8px!important; border-radius:12px; border:1px dashed rgba(255,255,255,.22); background:rgba(0,16,42,.6); color:#cfd8e3; }
  html[data-panel-ui] input[type=file]::file-selector-button { border:0; border-radius:10px; padding:9px 14px; margin-right:10px; background:rgba(255,215,0,.15); color:#FFD700; font-weight:600; }
  html[data-panel-ui] :is(input[type=checkbox],input[type=radio]) { width:20px; height:20px; flex:0 0 auto; }

  /* botones: un solo tamaño en todo el panel */
  html[data-panel-ui] #page-content-wrapper :is(.btn,.btn-custom,.sp-btn,.btn-modal,.btn-cancel,.btn-submit,.btn-verify,.btn-update,.btn-search,.btn-top,.col-btn,input[type=submit],input[type=button]):not(.panel-icon-button):not(.close):not(.navbar *) {
    height:auto!important; min-height:44px; max-width:100%; padding:10px 14px!important; margin-bottom:0!important;
    font-size:.9rem!important; line-height:1.25!important; letter-spacing:.01em!important; text-transform:none!important;
    border-radius:12px!important; white-space:normal; text-align:center;
    box-shadow:none!important;
  }
  html[data-panel-ui] #page-content-wrapper :is(.btn-lg,.btn-block) { min-height:48px; }
  html[data-panel-ui] #page-content-wrapper :is(.btn-action-sm,.btn-sm,.edit-btn,.btn-danger-sm,.btn-info-sm,.btn-ok-sm,.btn-warn-sm) { min-height:40px!important; min-width:40px; padding:8px 12px!important; font-size:.85rem!important; border-radius:10px!important; }
  html[data-panel-ui] #page-content-wrapper :is(.btn,.btn-custom,.sp-btn):active { transform:scale(.98); }
  /* contenedores que la capa móvil apila: sus hijos no se estiran en altura (Deportes: 200 px) */
  html[data-panel-ui] :is(.owner-tools,.filter-container,.search-container,.sp-row)>* { flex:0 0 auto!important; }
  html[data-panel-ui] .sp-row { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px!important; }
  html[data-panel-ui] .sp-row>* { width:100%!important; }

  /* botones seguidos a lo ancho → 2 columnas (los agrupa js/panel-app.js) */
  html[data-panel-ui] .pa-btn-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 12px; width:100%; }
  html[data-panel-ui] .pa-btn-grid>* { width:100%!important; min-width:0; margin:0!important; }
  html[data-panel-ui] .pa-btn-grid>.pa-wide, html[data-panel-ui] .pa-btn-grid>:last-child:nth-child(odd) { grid-column:1/-1; }
  html[data-panel-ui] .pa-btn-grid>form { display:contents; }

  /* páginas con tarjetas y campos de Bootstrap sin estilo propio (Guía EPG…): mismo aspecto oscuro */
  html[data-panel-ui] #page-content-wrapper .card:not(.card-custom) { background:rgba(0,27,58,.92)!important; border:1px solid rgba(204,85,0,.3)!important; color:#fff; }
  html[data-panel-ui] #page-content-wrapper :is(textarea,select,.form-control):not([type=color]) { background-color:rgba(0,16,42,.85)!important; color:#fff!important; border:1px solid rgba(204,85,0,.35)!important; }
  html[data-panel-ui] #page-content-wrapper :is(textarea,.form-control)[readonly] { opacity:.8; }

  /* Distribuidores: acciones de cada tarjeta en 2 columnas */
  html[data-panel-ui] .pu-actions { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px!important; }
  html[data-panel-ui] .pu-actions form.inline { display:contents!important; }
  html[data-panel-ui] .pu-actions :is(button,.btn-action-sm) { width:100%!important; margin:0!important; }

  /* listas en tarjetas compactas */
  html[data-panel-ui] table.table-cards tbody tr { position:relative; padding:12px 14px!important; margin:0 0 10px!important; border-radius:16px!important; background:rgba(0,27,58,.92)!important; }
  html[data-panel-ui] table.table-cards td { align-items:center!important; padding:7px 0!important; gap:10px!important; font-size:.92rem; }
  html[data-panel-ui] table.table-cards td::before { flex:0 0 38%!important; max-width:38%!important; font-size:.72rem!important; font-weight:600!important; letter-spacing:.04em; text-transform:uppercase; opacity:.85; }
  html[data-panel-ui] table.table-cards .panel-cell-value { text-align:right; }
  html[data-panel-ui] table.table-cards .panel-cell-value :is(.badge,[class*=badge]) { white-space:normal; }
  /* casilla de selección: arriba a la derecha, sin fila propia */
  html[data-panel-ui] table.table-cards td:has(>.panel-cell-value>input[type=checkbox]:only-child) { position:absolute!important; top:8px; right:10px; width:auto!important; padding:0!important; border:0!important; z-index:2; }
  html[data-panel-ui] table.table-cards td:has(>.panel-cell-value>input[type=checkbox]:only-child)::before { display:none; }
  html[data-panel-ui] table.table-cards tr:has(td>.panel-cell-value>input[type=checkbox]:only-child)>td:nth-child(2) { padding-right:34px!important; }
  /* acciones: una fila de botones al pie de la tarjeta */
  html[data-panel-ui] table.table-cards td:last-child:has(:is(.btn,button,a.btn,form)) { border-top:1px solid rgba(255,255,255,.07)!important; margin-top:4px; padding-top:10px!important; }
  html[data-panel-ui] table.table-cards td:last-child:has(:is(.btn,button,a.btn,form))::before { align-self:center; }
  html[data-panel-ui] table.table-cards td:last-child .panel-cell-value, html[data-panel-ui] table.table-cards td:last-child .panel-cell-value>:is(div,span,form) { display:flex!important; flex-direction:row!important; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; }
  html[data-panel-ui] table.table-cards td:last-child .panel-cell-value :is(.btn,button,a.btn) { margin:0!important; }
  html[data-panel-ui] table.table-cards td:last-child .panel-cell-value form { margin:0!important; }
  /* "no hay datos" rows span the whole card: centered, not pushed right like the action buttons */
  html[data-panel-ui] table.table-cards td[colspan] .panel-cell-value { text-align:center; justify-content:center!important; }

  /* tablas que no son tarjetas: desplazamiento horizontal suave */
  html[data-panel-ui] .table-responsive { -webkit-overflow-scrolling:touch; }

  /* hojas (modales) */
  html[data-panel-ui] .modal-content { border:0!important; }
  html[data-panel-ui] .modal-header { padding:14px 16px!important; position:relative; }
  html[data-panel-ui] .modal-header::before { content:""; position:absolute; top:6px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:rgba(255,255,255,.25); }
  html[data-panel-ui] .modal-footer { gap:8px; padding:12px 16px!important; flex-wrap:nowrap; }
  html[data-panel-ui] .modal-footer>* { margin:0!important; }
  html[data-panel-ui] .modal-body { max-height:calc(100dvh - 180px); overflow-y:auto; -webkit-overflow-scrolling:touch; }

  /* avisos */
  html[data-panel-ui] .alert { border-radius:14px; padding:12px 14px; font-size:.92rem; }
}

@media (max-width:359px) {
  html[data-panel-ui] .pa-btn-grid { grid-template-columns:1fr; }
  html[data-panel-ui] .sp-row { grid-template-columns:1fr; }
  html[data-panel-ui] table.table-cards td::before { flex-basis:42%!important; max-width:42%!important; }
}