/* ============================================================
   TIME OUT · WATCH ATELIER PLATFORM — hoja de estilos
   Separado de index.html para poder iterar configuraciones visuales
   (paleta, tipografía, efectos) sin tocar el marcado.
   ============================================================ */

/* ------------------------------------------------------------
   1) TOKENS DE DISEÑO — paleta "Atelier Quiet" (Propuesta A)
   Cambia estos valores para probar otra configuración de color.
   ------------------------------------------------------------ */
:root {
  --paper: #ECE8E1;          /* fondo general de la página */
  --paper-raised: #F8F6F2;   /* tarjetas/superficies "blancas" */
  --ink: #24211D;            /* texto principal */
  --ink-soft: #6B6459;       /* texto secundario/etiquetas */
  --brass: #8a6d3f;          /* acento latón (monogramas, glifos, hairlines de marca) */
  --brass-strong: #6e5730;   /* acento latón, variante oscura (hover, texto sobre --paper-raised) */
  --hairline: #e7e5e4;       /* bordes/divisores discretos */

  --dorado: #b8860b;         /* color dorado sólido — títulos de sección y botones fantasma al pasar el ratón */
  --dorado-suave: #9c7a2e;   /* variante para bordes/hover secundarios */
}

/* ------------------------------------------------------------
   2) BASE
   ------------------------------------------------------------ */
body { font-family: 'Helvetica Neue', Arial, sans-serif; background: var(--paper); }
.font-serif { font-family: Didot, Georgia, 'Times New Roman', serif; }
input, select, textarea { width: 100%; border: 1px solid #e7e5e4; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
/* v136: combos del selector "Ver" en Relojes (Fuente/Dealer/Inventario/Venta) —
   se ajustan a su texto en vez de ocupar 100% para que, al aparecer uno nuevo
   tras elegir una fuente, quede a la derecha del anterior y no debajo. */
.relojes-fuente-select { width: auto; min-width: 100px; max-width: 220px; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 1px #b45309; }
button { cursor: pointer; }
.gold-gradient { background: linear-gradient(135deg, #b45309, #92400e); }
.nav-btn.active { background: #fef3e2; color: #92400e; }
.nav-btn.active .nav-dot { background: #b45309; }
.tab-section { display: none; }
.tab-section.active { display: block; }
.subtab-content.hidden { display: none; }
.subtab-btn.active { color: #92400e; border-color: #b45309; }
.mode-section { display: none; }
/* min-height aquí (no en un <div> envoltorio externo): antes vivía como
   min-h-[calc(100vh-57px)] en un wrapper que solo envolvía mode-interno/
   mode-cliente. Ese wrapper reservaba esa altura SIEMPRE, aunque sus dos
   modos estuvieran display:none (mode-publico/profesional/divulgador
   viven fuera de él) — dejaba un hueco en blanco de ~altura de pantalla
   ANTES del panel realmente activo, empujándolo fuera de la vista. Al
   aplicarlo solo al panel que de verdad está activo, cualquier modo (los
   5) reserva su propia altura mínima y ninguno deja hueco fantasma. */
.mode-section.active { display: flex; min-height: calc(100vh - 57px); }
.block-card { background: var(--paper-raised); border: 1px solid #e7e5e4; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.block-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #fafaf9; font-size: 13px; font-weight: 600; color: #44403c; }
.block-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; padding: 14px 16px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; color: #78716c; }
.estado-badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; }

/* Superficies "blancas" de toda la app pasan al tono papel de la Propuesta
   A. Se usa la clase de Tailwind ya presente en cientos de sitios (tarjetas,
   modales, tablas): así no hace falta tocar el marcado. */
.bg-white { background-color: var(--paper-raised) !important; }

/* v41: Modo Oculto (Anti-Esposas) — oculta precios de compra y valor de colección */
body.modo-oculto .dato-oculto { filter: blur(6px); user-select: none; }

/* ------------------------------------------------------------
   3) CAMPOS DE FECHA (dd/MM/yyyy forzado + icono de calendario)
   ------------------------------------------------------------ */
.dfmt-wrap { position: relative; display: block; width: 100%; cursor: pointer; }
.dfmt-wrap input[type="date"] { position: relative; color: transparent; background: transparent; cursor: pointer; padding-right: 30px; }
.dfmt-wrap input[type="date"]::-webkit-datetime-edit,
.dfmt-wrap input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.dfmt-wrap input[type="date"]::-webkit-datetime-edit-text,
.dfmt-wrap input[type="date"]::-webkit-datetime-edit-month-field,
.dfmt-wrap input[type="date"]::-webkit-datetime-edit-day-field,
.dfmt-wrap input[type="date"]::-webkit-datetime-edit-year-field { color: transparent; }
.dfmt-wrap input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; pointer-events: none; position: absolute; right: 0; }
.dfmt-display { position: absolute; left: 11px; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; font-size: 13px; color: #1c1917; }
.dfmt-display.dfmt-placeholder { color: #a8a29e; }
.dfmt-icon { position: absolute; right: 9px; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; color: #b45309; }
.dfmt-wrap:hover .dfmt-icon { color: #92400e; }

/* ------------------------------------------------------------
   4) MENÚ LATERAL PLEGABLE (Propuesta A)
   El propio <aside> ya trae w-full md:w-64 de Tailwind; en plegado
   forzamos un ancho estrecho solo a partir del breakpoint md (en móvil
   el menú va apilado a pantalla completa, plegarlo no aporta nada ahí).
   ------------------------------------------------------------ */
aside { transition: width .28s cubic-bezier(.4,0,.2,1); }
@media (min-width: 768px) {
  aside.sidebar-collapsed { width: 72px !important; }
}
aside.sidebar-collapsed .nav-label,
aside.sidebar-collapsed .nav-group-label,
aside.sidebar-collapsed .nav-dot { display: none; }
aside.sidebar-collapsed .nav-btn { justify-content: center; }
aside.sidebar-collapsed .nav-btn > span.flex { justify-content: center; }
.nav-glyph {
  display: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--brass); align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--brass); flex-shrink: 0;
  font-family: Didot, Georgia, serif;
}
aside.sidebar-collapsed .nav-glyph { display: flex; }
aside.sidebar-collapsed #nombreRelojeriaSidebar { display: none; }
aside.sidebar-collapsed div:has(#clientSessionName) { display: none; }

/* Menú plegado: al pasar el ratón por un icono se muestra el nombre
   completo de la sección en una etiqueta flotante. No se puede resolver
   con un ::after posicionado dentro del <aside> porque overflow-y:auto
   fuerza a los navegadores a recortar también el eje X (regla de la spec:
   si un eje no es "visible" el otro deja de serlo aunque se declare
   "visible" explícitamente) — de ahí que sea un único elemento en <body>
   con position:fixed, gestionado desde iniciarTooltipSidebar() en app.js. */
.nav-tooltip {
  position: fixed;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--paper-raised);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
}
.nav-tooltip.visible { opacity: 1; visibility: visible; }
.sidebar-toggle {
  display: none; align-items: center; justify-content: center; gap: 10px; width: 100%;
  border: 1px solid #e7e5e4; background: #fafaf9; border-radius: 6px;
  padding: 9px 12px; font-size: 12px; color: #78716c; cursor: pointer;
  margin-top: 4px; font-family: inherit;
}
@media (min-width: 768px) { .sidebar-toggle { display: flex; } }
.sidebar-toggle:hover { color: var(--brass-strong); border-color: var(--brass); }

/* El <main> de cada modo trae un max-w-5xl/6xl de Tailwind que lo limita
   siempre al mismo ancho, sin importar el menú lateral. Al plegar el menú
   quitamos ese límite para que el contenido (tablas, grids auto-fit...)
   aproveche el ancho liberado. <main> es siempre el siguiente hermano del
   <aside> en el marcado de las 3 áreas (interno/cliente/público). */
@media (min-width: 768px) {
  aside.sidebar-collapsed + main { max-width: none; }
}

/* v212: antes era table-layout:fixed + width:100% (anchos calculados como
   100/N% por columna en renderMisRelojes()) para que la tabla "cupiera sin
   scroll" siempre — pero eso forzaba a las columnas fijas (Marca/Modelo,
   Acciones) a estirarse con hueco vacío en medio cuando había pocas
   columnas de datos seleccionadas. Con columnas redimensionables
   (hacerColumnasRedimensionables en app.js) el ancho lo decide el usuario
   columna a columna; table-layout:auto deja que la tabla se ajuste a su
   contenido real (compacta con pocas columnas) y el wrap ya tiene
   overflow-x-auto para cuando hay muchas. */
#misRelojesTableWrap table { table-layout: auto; }
.col-resize-handle:hover, .col-resize-handle:active { background: rgba(217, 119, 6, 0.35); }

/* Vista ampliada de la miniatura de un reloj al pasar el ratón por encima
   (tabla y tarjetas de "Mis relojes"). Mismo patrón mecánico que
   .nav-tooltip: un único elemento flotante, gestionado desde
   iniciarZoomImagenMisRelojes() en app.js. */
/* "Lupa" de zoom en la foto de un reloj en modo cromo (tarjetaColeccionCard)
   — la propia imagen se amplía y se desplaza en función de la posición del
   cursor, como el zoom de producto de Chrono24. Gestionado desde
   lupaCromoMove()/lupaCromoLeave() en app.js; el recorte lo hace el
   overflow-hidden ya existente en el hueco de la foto. */
.mis-reloj-img { transition: transform .1s linear; cursor: zoom-in; }

.img-zoom-preview {
  position: fixed;
  z-index: 9999;
  width: 240px;
  height: 240px;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
}
.img-zoom-preview.visible { opacity: 1; visibility: visible; }
.img-zoom-preview img { width: 100%; height: 100%; object-fit: contain; }

/* v105: "cromo" — vista previa flotante de la tarjeta de Colección al pasar
   el ratón por un reloj en Cajas/Agrupaciones (los huecos son círculos
   demasiado pequeños para ver ningún detalle). Mismo patrón mecánico que
   .img-zoom-preview, gestionado desde iniciarCromoRelojesCajas() en app.js. */
.cromo-reloj-preview {
  position: fixed;
  z-index: 9999;
  width: 300px;
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
}
.cromo-reloj-preview.visible { opacity: 1; visibility: visible; }

/* v78: "Cajas" — resalta el hueco de destino mientras se arrastra un reloj
   sobre él (ver iniciarArrastreCaja/moverArrastreCaja en app.js). */
.caja-hueco.caja-hueco-activo { outline: 2px dashed #c9a227; outline-offset: 4px; border-radius: 50%; }

/* v116: "Combinaciones" — resalta el reloj de destino mientras se arrastra
   una pulsera sobre él (ver iniciarArrastreCombinacion en app.js). */
.combinacion-reloj-target.combinacion-reloj-target-activo { outline: 2px dashed #c9a227; outline-offset: 4px; border-radius: 50%; }

/* v177: "¿Cuándo quieres que te avisemos?" — resalta la fila de canal de
   destino mientras se arrastra una plantilla sobre ella (ver
   iniciarArrastrePlantilla en app.js), mismo criterio que combinaciones. */
.notif-canal-target.notif-canal-target-activo { outline: 2px dashed #c9a227; outline-offset: 2px; border-radius: 6px; }

/* v80: resalta el día de destino mientras se arrastra un reloj sobre el
   calendario de "Tiempo en Muñeca" (ver iniciarArrastreWrist en app.js). */
.dia-tiempo-muneca.dia-tiempo-muneca-activo { outline: 2px dashed #c9a227; outline-offset: -2px; }

/* ------------------------------------------------------------
   5) CABECERA PERSONALIZADA (Propuesta A)
   ------------------------------------------------------------ */
header.app-header { position: relative; overflow: hidden; }
#headerGearCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .3; }
.header-monogram {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--brass);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: Didot, Georgia, serif; font-size: 15px; color: var(--brass-strong); background: var(--paper-raised);
}
.header-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: #a8a29e; }

/* ------------------------------------------------------------
   6) TEXTO DORADO — títulos de sección y botones fantasma
   (sustituye al efecto "bordado" anterior: color dorado sólido, sin
   textura ni sombra, más legible).
   ------------------------------------------------------------ */
.titulo-dorado {
  color: var(--dorado) !important; /* vence a utilidades de Tailwind como .text-stone-800, misma especificidad */
}

/* Botones "ghost" (Excel, Importar, PDF...): mismo fondo que la página en
   reposo, sin caja de color propia; solo el texto pasa a dorado al pasar
   el ratón. Selectores compuestos con la clase de Tailwind original para
   ganar especificidad sin usar !important. */
/* :not(.hidden) — sin esto, la mayor especificidad de este selector
   compuesto (pensada para ganar a las utilidades de Tailwind) también
   vencía a la utilidad .hidden en cualquier botón bg-stone-700/emerald-700/
   bg-stone-600 que un script oculte/muestre dinámicamente (display:
   inline-flex ganaba a display:none) — encontrado con el botón "Enviar
   mensaje de prueba" de Telegram, oculto hasta que hay vinculación. */
button.btn-ghost-dorado.bg-emerald-700:not(.hidden),
button.btn-ghost-dorado.bg-stone-700:not(.hidden),
button.btn-ghost-dorado.bg-stone-600:not(.hidden) {
  background-color: transparent; /* longhand: "background" resetearía también background-image */
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
button.btn-ghost-dorado:hover {
  color: var(--dorado);
  border-color: var(--dorado-suave);
}
.btn-ghost-dorado .btn-icon { flex-shrink: 0; }

/* ------------------------------------------------------------
   7) CABECERAS DE SECCIÓN EN 3 FILAS (título / descripción / botones)
   El marcado ya trae título y descripción apilados dentro del mismo div
   (h2 seguido de p); lo único que hace falta es forzar en columna el
   contenedor exterior, que Tailwind trae en fila (flex items-center
   justify-between). Con !important porque la carga de Tailwind (CDN) no
   tiene un orden de cascada fiable frente a esta hoja externa.
   ------------------------------------------------------------ */
.seccion-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 12px;
}

/* ------------------------------------------------------------
   8) RUEDA DE HORA (selector HH:MM) — Recordatorios
   Dos columnas desplazables con scroll-snap (00–23 / 00–59), sustituyen
   al <input type="time"> nativo. Altura de item (32px) fijada también en
   RUEDA_HORA_ITEM_ALTO (app.js) — si se cambia aquí, cambiar allí también.
   ------------------------------------------------------------ */
.rueda-hora {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 4px; height: 96px; background: #fafaf9; border: 1px solid #e7e5e4;
  border-radius: 8px; padding: 0 8px;
}
.rueda-hora-col {
  height: 96px; width: 44px; overflow-y: scroll; scroll-snap-type: y mandatory;
  -ms-overflow-style: none; scrollbar-width: none;
}
.rueda-hora-col::-webkit-scrollbar { display: none; }
.rueda-hora-pad { height: 32px; }
.rueda-hora-item {
  height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #a8a29e; scroll-snap-align: center; font-variant-numeric: tabular-nums;
}
.rueda-hora-item-activo { color: #1c1917; font-weight: 700; font-size: 16px; }
.rueda-hora-sep { font-size: 16px; font-weight: 700; color: #a8a29e; }
.rueda-hora-marco {
  position: absolute; left: 4px; right: 4px; top: 32px; height: 32px;
  border-top: 1px solid #d6d3d1; border-bottom: 1px solid #d6d3d1;
  pointer-events: none; background: rgba(180,83,9,.05);
}

/* ------------------------------------------------------------
   9) MENÚ LATERAL EN MÓVIL — panel deslizante (drawer)
   Por debajo de md (768px) el <aside> dejaba de apilarse a ancho
   completo ANTES del contenido — hasta 29 botones de navegación seguidos
   antes de llegar a nada útil. Ahora, por debajo de ese breakpoint, el
   aside del modo activo (".mode-section.active aside" — solo uno de los
   5 existe visible a la vez, ver switchMode() en app.js) vive oculto
   fuera de pantalla y se abre como panel superpuesto al pulsar el botón
   hamburguesa de la cabecera (#mobileNavToggle → toggleMobileNav() en
   app.js). Reutiliza el mismo <aside>/los mismos <button class="nav-btn">
   que ya existen en escritorio — cero marcado duplicado, cero cambio de
   comportamiento por encima de 768px.
   57px = alto real de la cabecera, mismo valor que min-h-[calc(100vh-57px)]
   ya usado en este archivo (sección 4) y en .mode-section.active.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .mode-section.active aside {
    position: fixed;
    top: 57px;
    bottom: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    z-index: 60;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.2);
  }
  .mode-section.active aside.mobile-nav-open { transform: translateX(0); }
  /* el plegado a solo-iconos (sidebar-toggle/.sidebar-collapsed) es un
     concepto de escritorio — en móvil el drawer ya se cierra del todo,
     no tiene sentido ofrecer también un estado "plegado a iconos". */
  .sidebar-toggle { display: none !important; }
}

/* v290 — cabecera en móvil: el bloque derecho (reloj, campana, botones
   de modo Panel interno/Área cliente/etc., Salir/Acceder) tiene muchos
   elementos seguidos en una sola fila sin ajuste — en pantallas
   estrechas los últimos (incluido "Salir") quedaban fuera del viewport,
   inalcanzables (bug real: un relojero logueado no podía cerrar sesión
   en el móvil). Solo afecta a los perfiles que siguen con esta cabecera
   clásica (Relojero/Profesional/Divulgador/Admin/Público) — Cliente ya
   tiene su "Salir" propio en el menú móvil nuevo (Sobre mí), con la
   cabecera oculta del todo en su caso. */
@media (max-width: 767px) {
  header.app-header > div.flex.items-center.gap-4 {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    row-gap: 0.375rem;
  }
  #liveClock { display: none; }
}

#mobileNavBackdrop {
  display: none;
  position: fixed;
  top: 57px; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,.4);
  z-index: 55;
}
#mobileNavBackdrop.visible { display: block; }

/* ------------------------------------------------------------
   10) DENSIDAD DE TARJETAS EN MÓVIL (1 / 2 columnas), estilo Chrono24
   Toggle manual — alternarDensidadCards() en app.js. El grid-template-
   columns real se fija por JS como estilo EN LÍNEA con 'important'
   (máxima prioridad posible, sin depender del orden de carga de
   Tailwind); esta clase solo queda para el ajuste visual de abajo, que
   sí puede vivir en la hoja de estilos porque no compite con nada.
   ------------------------------------------------------------ */
@media (max-width: 639px) {
  /* Con 2 columnas la tarjeta apenas mide ~160px de ancho — la foto no
     puede ser tan alta como con 1 sola sin verse desproporcionada. */
  .grid-densidad-2 .mis-reloj-card [data-parte="imagen"] { height: 8rem !important; }
}

/* ------------------------------------------------------------
   11) NAVEGACIÓN MÓVIL DEL CLIENTE (barra inferior + hoja emergente),
   estilo Chrono24 — ver el bloque de marcado junto a #mobileNavBackdrop
   en index.html y las funciones clienteBottomNavTap()/switchClientTab()
   en app.js. Por encima de 768px esto no existe visualmente en ningún
   caso (aunque JS le quite "hidden"), aquí es donde se garantiza.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  #clienteBottomNav, #clienteBottomSheetBackdrop, #clienteBottomSheet { display: none !important; }
}
@media (max-width: 767px) {
  /* Reemplaza al aside apilado — su navegación es la barra de abajo. */
  #asideCliente { display: none !important; }
  #mode-cliente main { padding-bottom: 76px; }
  #clienteBottomNav button[data-bottom-nav] { -webkit-tap-highlight-color: transparent; }
  #clienteBottomSheet { max-height: 70vh; overflow-y: auto; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  /* v283 — la cabecera desaparece del todo: sus funciones (notificaciones,
     cerrar sesión) se movieron a la barra inferior/hoja "Sobre mí" (ver
     app.js, actualizarNavMovilCliente/CLIENTE_BOTTOM_NAV_GRUPOS). La marca
     "modo-cliente-activo" la pone switchMode() en <body>. */
  body.modo-cliente-activo header.app-header { display: none; }
  /* Ya no hay cabecera empujando el contenido hacia abajo en el flujo
     normal — la barra de pestañas de arriba (sección 12) es fixed (fuera
     de flujo), así que este padding es lo único que reserva su hueco.
     v284 — el título (h2, primer hijo de la section) quedaba TAPADO
     ligeramente: la barra fija de la sección 12 mide su alto por el
     padding de sus botones (variable según fuente/renderizado real del
     dispositivo), y el cálculo aproximado se quedaba corto. Ahora la
     barra tiene una altura explícita (sección 12, --barra-superior-alto)
     y este padding usa esa misma variable + margen, así los dos números
     no pueden desincronizarse. */
  body.modo-cliente-activo #mode-cliente main { padding-top: calc(var(--barra-superior-alto) + 10px); }
}

/* ------------------------------------------------------------
   12) BARRA SUPERIOR DE PESTAÑAS EN MÓVIL (Cliente) — mismo tipo que la
   barra inferior (fija, un hueco por opción), pedido explícitamente.
   No es marcado nuevo: cada sección del Cliente YA trae, como hijo
   directo de su <section class="tab-section">, la fila de pestañas
   propia de esa sección (".flex.border-b", ver switchSubtab() en app.js
   — los botones de la barra inferior ya llaman a switchClientTab(), que
   activa la section correcta); esa fila, ya existente, es la que aquí se
   fija en la parte de arriba de la pantalla (top:0, ya sin cabecera por
   encima) y se restyla para parecerse a la barra de abajo — así "la
   barra superior cambia según la selección" sin duplicar ni un botón.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* v284 — altura FIJA explícita (no solo padding) en una variable propia,
     reutilizada por el padding-top de <main> de arriba: así los dos
     números viven en un solo sitio y no pueden desincronizarse otra vez. */
  :root { --barra-superior-alto: 46px; }
  #mode-cliente .tab-section.active > div.flex.border-b {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--barra-superior-alto);
    display: flex;
    align-items: center;
    background: #fff;
    z-index: 45;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #e7e5e4;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    padding: 0 8px !important;
    gap: 6px !important;
    box-sizing: border-box;
  }
  #mode-cliente .tab-section.active > div.flex.border-b::-webkit-scrollbar { display: none; }
  /* Mismo aire que los botones de la barra de abajo: más grandes, sin
     encogerse (scroll horizontal en vez de apretarse en varias líneas). */
  #mode-cliente .tab-section.active > div.flex.border-b > * { flex-shrink: 0; }
  #mode-cliente .tab-section.active > div.flex.border-b .subtab-btn {
    padding: 9px 14px !important;
    border-radius: 10px;
    border-bottom: none !important;
    font-size: 11px;
  }
  #mode-cliente .tab-section.active > div.flex.border-b .subtab-btn.active {
    background: #fef3e2;
    color: #92400e !important;
  }

  /* v296 — SEGUNDO nivel de pestañas (p.ej. Inventario personal → Valoración
     → Costes de colección/Stock): esa fila NO es hija directa de
     ".tab-section", vive un nivel más adentro (".subtab-content.active >
     div.flex.border-b"), así que la regla de arriba no la alcanzaba — se
     quedaba en flujo normal, sin fijar y sin el mismo estilo, y por eso el
     "menú de arriba" parecía cambiar de tamaño/comportamiento según la
     pestaña. Se fija igual, apilada justo debajo de la de primer nivel. */
  #mode-cliente .subtab-content.active > div.flex.border-b {
    position: fixed;
    top: var(--barra-superior-alto);
    left: 0;
    right: 0;
    height: var(--barra-superior-alto);
    display: flex;
    align-items: center;
    background: #fff;
    z-index: 44;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #e7e5e4;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    padding: 0 8px !important;
    gap: 6px !important;
    box-sizing: border-box;
  }
  #mode-cliente .subtab-content.active > div.flex.border-b::-webkit-scrollbar { display: none; }
  #mode-cliente .subtab-content.active > div.flex.border-b > * { flex-shrink: 0; }
  #mode-cliente .subtab-content.active > div.flex.border-b .subtab-btn {
    padding: 9px 14px !important;
    border-radius: 10px;
    border-bottom: none !important;
    font-size: 11px;
  }
  #mode-cliente .subtab-content.active > div.flex.border-b .subtab-btn.active {
    background: #fef3e2;
    color: #92400e !important;
  }
  /* Empuja el contenido real de esa subpestaña (todo lo que va DESPUÉS de
     su propia barra de segundo nivel) para que no quede tapado por ella —
     solo cuando de verdad tiene esa barra anidada (:has soportado en todos
     los navegadores móviles actuales), el resto de subpestañas sin este
     segundo nivel no se ven afectadas. */
  #mode-cliente .subtab-content.active:has(> div.flex.border-b) {
    padding-top: calc(var(--barra-superior-alto) + 6px);
  }
}

/* ------------------------------------------------------------
   13) FICHA DE RELOJ A PANTALLA COMPLETA — doble toque, deslizar fotos,
   lupa. touch-action:manipulation en la tarjeta evita que el navegador
   trate un doble toque rápido como "zoom nativo de la página" (gesto que
   compite con nuestro propio ondblclick) — sin tocar nada de escritorio,
   donde touch-action no tiene efecto (no hay eventos táctiles).
   ------------------------------------------------------------ */
.mis-reloj-card { touch-action: manipulation; }

/* v287 — la foto de la ficha a pantalla completa ocupa TODO el ancho de
   su columna (sin recuadro de altura fija que la centre y deje bandas en
   blanco a los lados): la propia imagen marca la altura. Especificidad
   alta a propósito (ID + clase) para pisar los w-full/h-full/object-contain
   que trae clonada de la tarjeta de origen. */
#vistaCompletaRelojImagen .mis-reloj-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Lupa (toggleLupaVistaCompleta en app.js): la imagen crece y el
   contenedor pasa a desplazable — sin JS de arrastre a mano, el propio
   dedo la recorre con scroll táctil nativo. Aquí SÍ hace falta acotar la
   altura (si no, "crecer" no tendría límite ni sentido de scroll) — solo
   mientras la lupa está activa, nunca en la vista normal de arriba. */
#vistaCompletaRelojImagen [data-imagenes].vista-completa-zoom {
  overflow: auto;
  touch-action: pan-x pan-y;
  max-height: 70vh;
}
#vistaCompletaRelojImagen [data-imagenes].vista-completa-zoom .mis-reloj-img {
  width: 220%;
  height: 220%;
  max-width: none;
  object-fit: cover;
}

/* ------------------------------------------------------------
   14) "LISTADO" COMPACTO EN MÓVIL, ESTILO CHRONO24
   La tabla (muchas columnas, pensada para escritorio con ratón) y la
   lista de filas compactas (filaListadoMovil en app.js: foto izquierda,
   marca+iconos derecha) EXISTEN LAS DOS A LA VEZ en el HTML — el propio
   modo "Listado" (setVistaMisRelojes/setVistaRelojesPublicos) decide si
   se ven o no (hidden), y esto de aquí decide CUÁL de las dos, según el
   ancho. Así en escritorio no cambia nada.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .lista-tabla-escritorio { display: none !important; }
  .fila-listado-movil { touch-action: manipulation; }
  .fila-listado-movil:last-child { border-bottom: none; }
}
@media (min-width: 768px) {
  .lista-filas-movil { display: none !important; }
}

/* ------------------------------------------------------------
   15) TARJETA "CON FOTO" — GRID CON ÁREAS NOMBRADAS (v289)
   tarjetaColeccionCard ya no coloca imagen/acciones/chips/estado con flex
   + order-* (ese truco no llega a reordenar "chips", que vive fuera de la
   fila imagen/acciones/estado) — usa CSS Grid con grid-template-areas,
   que SÍ puede recolocar los 4 bloques por completo entre breakpoints sin
   mover nada en el DOM. Escritorio: 3 columnas (acciones|imagen|estado),
   chips debajo — igual que siempre. Móvil: una columna, orden imagen →
   chips (frecuencia/material...) → estado (caja/papeles/condición/
   revisión); acciones (Modificar/Compartir/etc) se oculta con las propias
   utilidades Tailwind "hidden sm:flex" del marcado — sigue disponible al
   hacer doble toque, que abre la ficha completa con esos mismos botones
   (misma fuente, data-parte="acciones").
   ------------------------------------------------------------ */
.tarjeta-cromo-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "imagen"
    "acciones"
    "chips"
    "estado";
}
.tcg-imagen { grid-area: imagen; }
.tcg-acciones { grid-area: acciones; }
.tcg-chips { grid-area: chips; }
.tcg-estado { grid-area: estado; }
@media (min-width: 640px) {
  .tarjeta-cromo-grid {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "acciones imagen estado";
    align-items: stretch;
  }
  .tcg-chips { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   16) LISTADO Y TARJETA "CON FOTO" — ICONOS DE ESTADO EN HORIZONTAL (v290)
   calcularPiezasTarjetaColeccion() genera los 3 recuadros de estado
   (caja/papeles, caja/dial/pulsera, revisión) con los iconos apilados en
   columna dentro de cada recuadro por defecto — la fila de "Listado" Y la
   tarjeta "Con foto" (modo cromo) los quieren en horizontal, una tira
   plana; la ficha completa (doble toque) es la única que se queda con el
   apilado en columna. Se sobreescribe aquí, con el mismo HTML compartido
   (marcado con .estado-grupo), sin tocar la ficha completa.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .fila-listado-movil .estado-grupo,
  .tcg-estado .estado-grupo {
    flex-direction: row;
  }
}

/* ------------------------------------------------------------
   17) TARJETA "CON FOTO" — FOTO SIN ESPACIO EN BLANCO (v290)
   Igual que en la ficha completa (ver #vistaCompletaRelojImagen
   .mis-reloj-img más arriba): sin altura fija, la foto ocupa todo el
   ancho y su propia proporción decide la altura — antes un recuadro de
   192px con object-contain centraba la foto y dejaba bandas en blanco
   cuando el encuadre no encajaba exacto. Solo en móvil — en escritorio
   la rejilla de tarjetas necesita alturas parejas entre columnas, así
   que ahí se queda el recuadro fijo de siempre.
   ------------------------------------------------------------ */
@media (max-width: 639px) {
  .tcg-imagen [data-parte="imagen"] {
    height: auto !important;
  }
  .tcg-imagen [data-parte="imagen"] .mis-reloj-img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ------------------------------------------------------------
   18) NAVEGACIÓN MÓVIL DEL ADMINISTRADOR (v295) — mismo patrón que
   Cliente (secciones 11/12), con una diferencia clave: aquí la cabecera
   NO se oculta (Admin sigue necesitando el hamburguesa y el selector de
   modo Interno/Público, ver comentario junto a #adminBottomNav en
   index.html) — así que la barra superior de pestañas va DEBAJO de la
   cabecera (top: 57px), no en top: 0 como en Cliente, y el padding-top
   de <main> suma las dos alturas en vez de solo una.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
  #adminBottomNav { display: none !important; }
}
@media (max-width: 767px) {
  #mode-interno main { padding-bottom: 76px; }
  #adminBottomNav button[data-admin-bottom-nav] { -webkit-tap-highlight-color: transparent; }

  body.modo-admin-activo #mode-interno .tab-section.active > div.flex.border-b {
    position: fixed;
    top: 57px;
    left: 0;
    right: 0;
    height: var(--barra-superior-alto);
    display: flex;
    align-items: center;
    background: #fff;
    z-index: 45;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #e7e5e4;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    padding: 0 8px !important;
    gap: 6px !important;
    box-sizing: border-box;
  }
  body.modo-admin-activo #mode-interno .tab-section.active > div.flex.border-b::-webkit-scrollbar { display: none; }
  body.modo-admin-activo #mode-interno .tab-section.active > div.flex.border-b > * { flex-shrink: 0; }
  body.modo-admin-activo #mode-interno .tab-section.active > div.flex.border-b .subtab-btn {
    padding: 9px 14px !important;
    border-radius: 10px;
    border-bottom: none !important;
    font-size: 11px;
  }
  body.modo-admin-activo #mode-interno .tab-section.active > div.flex.border-b .subtab-btn.active {
    background: #fef3e2;
    color: #92400e !important;
  }
  body.modo-admin-activo #mode-interno main { padding-top: calc(57px + var(--barra-superior-alto) + 10px); }
}

/* ------------------------------------------------------------
   19) CHAT CON EL TALLER (CLIENTE) EN MÓVIL (v297)
   La ventana de chat medía 55vh fijo pensado para escritorio; en móvil,
   con la barra superior fija (secciones 11/12) restando espacio real de
   viewport, se veía desproporcionada (demasiado alta o el input casi
   pegado al borde inferior según el dispositivo). Se acota a un rango
   más cómodo en pantallas pequeñas y se afinan los tamaños de fuente/
   padding del cabecero y del formulario de nueva conversación para que
   quepan sin desbordar — nada de esto toca escritorio.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  #csrv-chat h2 { font-size: 1.15rem; }
  #chatClienteContenedor {
    height: min(55vh, 420px) !important;
    min-height: 320px;
  }
  #chatClienteNuevaForm { padding: 10px !important; }
  #chatMensajesCliente { padding: 10px; }
  #chatInputCliente { font-size: 16px; }
}

/* ------------------------------------------------------------
   20) COSTES DE COLECCIÓN (CLIENTE) — INFO DE CABECERA EN MÓVIL (v298)
   La tabla en sí gana su propia versión compacta aparte
   (#coleccionTableWrapMovil, ver index.html/app.js) — esto solo afina el
   bloque de información que va ENCIMA de la tabla (nota + Excel, "Calcular
   coste de" y los checkboxes de columnas), que ya usa flex-wrap y no
   desborda, pero quedaba con demasiado aire en pantallas estrechas.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  #valsub-costes .grid.grid-cols-1.md\:grid-cols-4 { gap: 0.5rem; }
  #valsub-costes .grid.grid-cols-1.md\:grid-cols-4 > div { padding: 0.75rem; }
  #valsub-costes .flex.items-center.gap-4.flex-wrap.text-xs { gap: 0.5rem 0.75rem; }
}