/* Admin panel reutiliza clases de ui.css, home.css y reservas.css */
@media (prefers-color-scheme: dark) {
  #modal-nav-inner { background: var(--dk-surface-opaque) !important; }
  #modal-nav-titulo { color: var(--dk-modal-text) !important; }
  #modal-nav-texto { color: var(--dk-modal-btn-text) !important; }
}

/* Nuevo dashboard admin (rediseño — ver MANIFEST.md "Cambios recientes").
   Sin saludo/escudo de encabezado a propósito (corrección de diseño: se
   sacó tras revisión visual, el dashboard arranca directo con banners/tiles). */
.admin-dash-banners:empty { display:none; }

/* Corrección de diseño (ver MANIFEST.md "Cambios recientes"): el grid 2x2
   de la Tanda 1/2 se separa en 2 filas independientes (.admin-dash-row),
   cada una seguida de sus propias burbujas embebidas (.admin-tile-bubble) —
   así cada burbuja queda anclada justo debajo de la fila que la abrió, en
   vez de al final de toda la grilla. */
.admin-dash-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.admin-dash-row:last-of-type { margin-bottom:16px; }
.admin-dash-tile { position:relative; background:var(--surface-2); border:1px solid var(--border-light); border-radius:14px; padding:18px 12px; text-align:center; cursor:pointer; transition:background 0.15s, transform 0.15s, box-shadow 0.15s; }
.admin-dash-tile:hover { transform:translateY(-2px); background:var(--surface-light); }
.admin-dash-tile:active { background:var(--brand-20); }
.admin-dash-tile-icon { font-size:1.8rem; margin-bottom:8px; }
.admin-dash-tile-icon .material-symbols-outlined { font-size:inherit; color:var(--brand); }
.admin-dash-tile-label { font-size:0.82rem; font-weight:700; color:var(--text); line-height:1.3; transition:color 0.15s; }

/* "Color"/"Precios de clases" (Tanda 6, ver MANIFEST.md "Cambios recientes"
   — corrección sobre la Tanda 5, que las había dejado siempre visibles sin
   acordeón): mismo mecanismo de acordeón/burbuja que las 4 tiles grandes
   (`.admin-dash-tile` base sin cambios, incluida la mecánica de
   `.admin-tile-activa`/rombo de más abajo) — `.admin-dash-pill` es solo un
   modificador visual que las achica al tamaño/forma de `.aj-pill`
   (css/perfil.css, mismo componente de chip que ya usa el resto de la app)
   en vez de duplicar esa clase (evita arrastrar modificadores propios de
   `.aj-pill` que no aplican acá, como `.aj-pill-otro-*`/`.no-disponible`). */
.admin-dash-pills-row { display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 16px; }
.admin-dash-tile.admin-dash-pill { display:inline-flex; flex-direction:row; align-items:center; gap:6px; width:auto; padding:7px 16px; border-radius:20px; }
.admin-dash-tile.admin-dash-pill .admin-dash-tile-icon { font-size:1rem; margin-bottom:0; }
.admin-dash-tile.admin-dash-pill .admin-dash-tile-label { font-size:0.78rem; }

/* Mecánica única de "burbuja embebida" para las 4 tiles del dashboard —
   Notificación, Revisar reservas, Equipamiento y Qué llevar comparten el
   MISMO componente visual y la misma función JS (adminToggleBurbuja(),
   js/admin.js), sin importar cuán largo sea el contenido de cada una:
   nunca pantalla completa, nunca navegación. Reemplaza el "container
   transform" de la Tanda 2 (ver MANIFEST.md "Cambios recientes" — corrección
   de diseño, no solo para Notificación desde ahora). */
.admin-dash-tile.admin-tile-activa { background:var(--danger); }
.admin-dash-tile.admin-tile-activa .admin-dash-tile-label { color:var(--white); }
.admin-dash-tile.admin-tile-activa .admin-dash-tile-icon .material-symbols-outlined { color:var(--white); }
.admin-dash-tile.admin-tile-activa::after {
  content:''; position:absolute; left:50%; bottom:-7px; width:14px; height:14px;
  background:var(--danger); transform:translateX(-50%) rotate(45deg); border-radius:2px; z-index:2;
}

.admin-tile-bubble { position:relative; margin:0 0 16px; padding:16px; background:var(--error-lightest); border:2px solid var(--danger); border-radius:14px; animation:fadeIn 0.25s ease; }
.admin-tile-bubble-header { display:flex; align-items:center; gap:8px; font-weight:800; font-size:0.9rem; color:var(--danger-dark); margin-bottom:12px; }
.admin-tile-bubble-header .material-symbols-outlined { font-size:1.2rem; }

/* Banners condicionales (reservas pendientes / equipamiento hoy-mañana) —
   mismo idioma visual que .aj-group/.aj-row (css/perfil.css). */
.admin-dash-banner { background:var(--surface-2); border:1px solid var(--border-light); border-radius:14px; margin-bottom:10px; overflow:hidden; }
.admin-dash-banner-header { display:flex; align-items:center; gap:10px; padding:14px; cursor:pointer; }
.admin-dash-banner-icon { font-size:1.3rem; color:var(--brand); flex-shrink:0; }
.admin-dash-banner-texto { flex:1; font-size:0.85rem; font-weight:700; color:var(--text); }
.admin-dash-banner-chevron { color:var(--muted); font-size:1.1rem; transition:transform 0.3s; flex-shrink:0; }
.admin-dash-banner-body { max-height:0; overflow:hidden; transition:max-height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease; opacity:0; }
.admin-dash-banner-body-inner { padding:0 14px 14px; }

.admin-banner-res-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--border-light); }
.admin-banner-res-info { min-width:0; }
.admin-banner-res-nombre { font-weight:800; font-size:0.86rem; color:var(--text); }
.admin-banner-res-fecha { font-size:0.76rem; color:var(--muted); margin-top:2px; }
.admin-banner-res-actions { display:flex; gap:16px; flex-shrink:0; }
.admin-banner-btn { width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--white); }
.admin-banner-btn .material-symbols-outlined { font-size:1.2rem; }
.admin-banner-btn-ok { background:var(--success-dark); }
.admin-banner-btn-no { background:var(--danger); }
.admin-banner-btn:disabled { opacity:0.5; cursor:default; }
.admin-dash-banner-link { display:block; text-align:center; padding:10px 0 2px; font-size:0.8rem; font-weight:700; color:var(--brand); cursor:pointer; }

/* Selector de color de énfasis. Tanda 5 (ver MANIFEST.md "Cambios
   recientes"): grid fijo de 7 columnas -- fila 1 = 7 presets, fila 2 = 6
   presets + el eyedropper (14º ítem, cae solo en la última columna de la
   fila 2). `grid-template-columns:repeat(7,1fr)` en vez de `flex-wrap`
   garantiza siempre 7 por fila sin importar el ancho del viewport.
   `.admin-color-enfasis` (wrapper con el borde/margen de "sección") sigue
   usándose en Mi Liga ("Personalización") -- la burbuja del dashboard
   (Tanda 6) ya no la usa, `.admin-tile-bubble` le da su propio chrome. */
.admin-color-enfasis { margin:20px 0; padding-top:16px; border-top:1px solid var(--border-light); text-align:left; }
.admin-color-swatches { display:grid; grid-template-columns:repeat(7, 1fr); justify-items:center; align-items:center; gap:8px; margin-bottom:14px; }
.admin-color-swatch { width:34px; height:34px; border-radius:50%; border:2px solid transparent; padding:0; cursor:pointer; }
.admin-color-swatch.sel { border-color:var(--text); box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--text); }

/* Eyedropper — 14º ítem del grid, reemplaza al botón "Personalizado" +
   círculo de color visible que había antes (Tanda 4, ver MANIFEST.md
   "Cambios recientes"): mismo tamaño/forma que un swatch, ícono Material
   Symbols `colorize`. El <input type="color"> real queda invisible pero
   clickeable adentro (position:absolute, 1x1px, opacity:0) — el click
   nativo del <label> lo dispara igual. */
.admin-color-eyedropper { background:var(--surface-2); border:1.5px dashed var(--border-light); color:var(--brand); display:flex; align-items:center; justify-content:center; position:relative; }
.admin-color-eyedropper .material-symbols-outlined { font-size:1.05rem; pointer-events:none; }
.admin-color-eyedropper input[type="color"] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

/* Skeleton de #admin-quellevar-lista (adminIrQueLlevar(), js/admin.js) —
   mismo shimmer que .fi-skel-block/.equip-skel (css/reservas.css). */
.ql-skel-line { background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%); background-size: 200% 100%; animation: skeletonShimmer 1.2s ease-in-out infinite; border-radius: 4px; height: 14px; }
.ql-skel-line-title { width: 45%; margin-bottom: 10px; }
.ql-skel-line-sub { width: 70%; height: 12px; }

/* ── Tanda 4 (rediseño panel admin) — ver MANIFEST.md "Cambios recientes" ── */

/* Acordeón de mes en "Reservas" (reemplaza el <select> nativo, roto en
   mobile, por pills .mes-item/.meses-grid-pills — mismo componente que ya
   usa el flujo de pago mensual, js/ui.js generarMeses()). */
.admin-mes-acordeon { border: 1.5px solid var(--border-light); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.admin-mes-trigger { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; font-size: 0.88rem; font-weight: 700; color: var(--text); }
.admin-mes-chevron { color: var(--brand); transition: transform 0.3s; }
.admin-mes-acordeon-body { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.16,1,0.3,1); }
.admin-mes-acordeon-body.abierto { max-height: 340px; }
.admin-mes-acordeon-body .meses-grid-pills { padding: 4px 12px 14px; }
.mes-item.mes-item-sel { background: var(--brand); border-color: var(--brand); color: var(--white); }

/* Selector de hora tipo rueda/scroll (Notificación) — reemplaza la parte de
   hora del <input type="datetime-local"> nativo, la fecha sigue siendo
   <input type="date"> nativo (ese ya se ve bien). 2 columnas con scroll-snap,
   ítem centrado = seleccionado. */
.time-wheel-wrap { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; height: 160px; background: var(--surface-2); border-radius: 12px; overflow: hidden; }
/* Ocultamiento de scrollbar ya no hace falta acá -- universal (`*`,
   css/global.css, ver "Cambios recientes"). */
.time-wheel { height: 160px; width: 64px; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; }
.time-wheel-item { height: 40px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-size: 1.05rem; font-weight: 600; color: var(--muted); transition: color 0.15s; user-select: none; cursor: pointer; }
.time-wheel-item.time-wheel-sel { color: var(--brand); font-size: 1.3rem; font-weight: 800; }
.time-wheel-sep { font-size: 1.3rem; font-weight: 800; color: var(--brand); flex-shrink: 0; }
.time-wheel-highlight { position: absolute; left: 8px; right: 8px; top: 50%; height: 40px; transform: translateY(-50%); border-top: 2px solid var(--brand-20); border-bottom: 2px solid var(--brand-20); pointer-events: none; z-index: 1; }

/* Trigger del bottom sheet de Destinatarix — mismo look que un select. */
.admin-destino-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 12px; font-size: 0.88rem; color: var(--text); background: var(--surface-2); border: 0px solid var(--border); font-family: inherit; cursor: pointer; text-align: left; }
.admin-destino-trigger .material-symbols-outlined { color: var(--brand); font-size: 1.3rem; flex-shrink: 0; }

/* Stepper +/- genérico (cantidad de talla, protecciones, precios) —
   ver adminStepperChange() (js/admin.js). Tanda 5 (ver MANIFEST.md "Cambios
   recientes" — bug de overflow con 4 cifras): `.qty-stepper` pasa de 120px a
   140px y `.qty-value` gana `min-width:0` (sin esto, un flex item con
   contenido de texto no se achica por debajo de su ancho intrínseco, lo que
   empujaba a los botones afuera del recuadro en vez de recortar el texto) +
   `overflow:hidden` como resguardo — "1000" ya no se sale del contenedor. */
.qty-stepper { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--surface-2); border: 1.5px solid var(--border-light); border-radius: 10px; padding: 4px 6px; width: 140px; flex-shrink: 0; overflow: hidden; }
.qty-btn { width: 30px; height: 30px; border-radius: 8px; border: none; background: var(--brand-20); color: var(--brand); font-size: 1.1rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qty-btn:hover { background: var(--brand-30); }
.qty-btn:active { transform: scale(0.94); }
.qty-value { flex: 1; min-width: 0; text-align: center; font-weight: 800; font-size: 0.88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: clip; }

/* Fila de talla (Equipamiento) — label fija (viene de una pill, ya no es
   texto libre) + stepper de cantidad + quitar. */
.adm-fila-talla { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.adm-talla-label { flex: 1; font-weight: 700; font-size: 0.88rem; color: var(--text); }
.adm-talla-quitar { width: 42px; height: 42px; border: 2px solid var(--error-light-border); background: var(--error-lightest); color: var(--error); border-radius: 10px; cursor: pointer; font-weight: 800; flex-shrink: 0; }

/* Precios de clases: stepper + selector de moneda al lado (USD por
   defecto) — puramente de visualización, el valor numérico guardado no
   cambia de unidad según la moneda elegida. `.admin-precio-stepper` ensancha
   el stepper base (Tanda 5, bug de overflow) porque acá el valor puede tener
   decimales ("1000.00", 7 caracteres) — más ancho que un entero simple. */
.admin-precio-row { display: flex; gap: 10px; align-items: center; }
.admin-precio-stepper { width: 172px; }
.admin-moneda-select { width: auto; min-width: 76px; }