/* Ajustes del panel sobre el sistema de diseño (design/bundle.css y css/tokens.css, que no se tocan a mano).
   Solo lo que el HTML real necesita y las maquetas no cubren: enlaces en vez de botones, formularios, capas. */
body { margin: 0; }
[hidden] { display: none !important; } /* el diseño da display a muchos bloques: hidden debe ganar */
.bh a { color: var(--brand); }
.bh-actions form, .bh-toast form, .bh-local__foot form { display: contents; }
.app-h1-badge { display: flex; align-items: center; gap: var(--space-3); }

/* Pestañas y filtros que son enlaces (cada pestaña es su propia página) */
a.bh-tab { text-decoration: none; }
.bh-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }
.bh-tab[aria-current="page"] .bh-tab__count { background: var(--brand-soft); color: var(--brand); }
a.bh-btn { text-decoration: none; }
a.bh-btn--primary { color: var(--on-brand); }
a.bh-btn--secondary { color: var(--ink); }

/* Selector de local: el aspecto del diseño con un <select> nativo encima (teclado, lector de pantalla y móvil sin JS extra) */
.app-localpicker { position: relative; }
.app-localpicker select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.app-localpicker:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.app-localpicker--fixed { cursor: default; }

/* Toast abajo al centro, se va a los 5 s (se queda mientras el ratón o el foco están encima) */
.app-toast { position: fixed; left: 50%; bottom: var(--space-5); z-index: 20; transform: translateX(-50%); animation: app-toast-out .3s 5s forwards; }
.app-toast:hover, .app-toast:focus-within { animation-play-state: paused; }
.app-toast--error [data-icon] { color: var(--danger-soft); }
@keyframes app-toast-out { to { opacity: 0; visibility: hidden; } }
@media (max-width: 640px) { .app-toast { bottom: 80px; width: max-content; max-width: calc(100% - var(--space-6)); } }

/* Diálogo de confirmación (<dialog> nativo) */
.app-confirm { border: 0; color: var(--ink); }
.app-confirm::backdrop { background: var(--scrim); }

/* Drawer lateral sobre la lista */
.app-drawer { position: fixed; inset: 0; z-index: 10; display: flex; justify-content: flex-end; }
.app-drawer .bh-scrim { display: block; }
.app-drawer form.bh-drawer { height: 100%; }
body:has(.app-drawer) { overflow: hidden; }

/* Botón de subir archivo: el input va dentro de la etiqueta */
.app-file { position: relative; }
.app-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.app-file:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.bh-upload .bh-thumb [data-icon] { color: var(--ink-muted); }
.bh-upload .bh-error { margin-top: 2px; }


/* Drawer del grifo: número y nombre en la misma fila */
.app-grid--no { grid-template-columns: 96px minmax(0, 1fr); }

/* bh-seg con radios (el diseño usa botones con aria-checked; aquí se envían en el formulario) */
.bh-seg label { display: inline-flex; align-items: center; height: 34px; padding: 0 var(--space-4); border-radius: 2px; color: var(--ink-muted); font-weight: 500; cursor: pointer; white-space: nowrap; }
.bh-seg label:hover { color: var(--ink); background: var(--surface-200); }
.bh-seg label:has(input:checked) { background: var(--brand); color: var(--on-brand); font-weight: 600; }
.bh-seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.bh-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Editor de diapositivas: campos según lo elegido, sin JavaScript */
.bh-pl__edit:has([name="content"][value="offers"]:checked) .app-not-offers,
.bh-pl__edit:not(:has([name="content"][value="offers"]:checked)) .app-only-offers,
.bh-pl__edit:has([name="schedule"][value="always"]:checked) .app-schedule { display: none !important; }
.app-help-tight { margin-top: calc(var(--space-4) * -1 + 6px); }
.bh-screen__scale iframe { display: block; border: 0; pointer-events: none; }
.app-slide__link { color: inherit; text-decoration: none; }
.app-rot180 .bh-ic { transform: rotate(180deg); }
.bh-actions .app-touch-only { display: none; }
@media (pointer: coarse) { .bh-actions .app-touch-only { display: contents; } }
.bh-slide .bh-actions { align-items: center; }
.app-types[open]:not(:modal) { position: static; margin: var(--space-5) auto; width: 720px; max-width: 100%; }
.app-types { width: 720px; }
.bh-pl > * { min-width: 0; }

/* Configuración */
.app-btn-danger { color: var(--danger); border-color: var(--danger); }
.app-remove input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.app-remove:has(input:checked) { background: var(--danger-soft); color: var(--danger); text-decoration: line-through; }
.app-remove:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.bh-setrow__ctl.bh-field--error .bh-input { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.app-formats { margin-bottom: var(--space-2); }
.bh-settings__main > form[data-savebar] { display: flex; flex-direction: column; gap: var(--space-5); }
@media (max-width: 640px) { .app-savebar { z-index: 7; } }

/* Ficha del local: un ajuste propio de la TV solo se edita si no hereda el general */
.app-override:has(.bh-check input:checked) .app-override__ctl { display: none; }
.app-override__ctl { margin-top: var(--space-1); }
.bh-local__logo img { object-fit: contain; }

/* Estados de página completa (error, sección restringida) */
.app-state { max-width: 560px; padding-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); align-items: center; }
.app-state .bh-panel { width: 100%; }

/* Imagen ampliada (carteles de ofertas) */
.app-zoom { cursor: zoom-in; }
.app-zoom:hover img { opacity: .9; }
.app-lightbox { max-width: min(92vw, 1080px); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; overflow: visible; }
.app-lightbox::backdrop { background: rgba(14, 11, 8, .85); }
.app-lightbox img { display: block; max-width: min(92vw, 1080px); max-height: 92vh; object-fit: contain; border-radius: var(--radius-md); }
.app-lightbox form { position: absolute; top: var(--space-2); right: var(--space-2); }
.app-lightbox .bh-iconbtn { background: rgba(14, 11, 8, .7); color: #F3ECE3; width: 40px; height: 40px; }
a.bh-media__i { text-decoration: none; }
a.bh-media__i:hover { text-decoration: underline; text-underline-offset: 3px; }