/* =============================================================================
   Accesos apartamentos — sistema de diseño
   -----------------------------------------------------------------------------
   Coral de marca (#ff5a5f) usado como ACENTO, no como fondo: manda el blanco y
   una escala de grises templada. El color se reserva para lo accionable y para
   los estados, que es lo que hay que ver de un vistazo.

   Dos disposiciones de verdad, no una estirada:
     · móvil  → app a pantalla completa con barra de pestañas abajo
     · ≥960px → barra lateral fija + cabecera de página + contenido ancho

   Índice
     1. Tokens (claro y oscuro)      6. Formularios
     2. Base y tipografía            7. Tablas y listas
     3. Disposición                  8. Avisos, vacíos y actividad
     4. Navegación                   9. Diálogos, toasts y cargas
     5. Tarjetas, botones, badges   10. Portal del huésped
   ============================================================================ */

/* ============================================================ 1. TOKENS ==== */
:root{
  /* Marca */
  --coral:#ff5a5f;
  --coral-fuerte:#f0353b;
  --coral-hondo:#c22026;
  --coral-tenue:#fff1f1;
  /* El coral de marca con texto BLANCO encima da 3,0:1, y los botones llenos llevan texto de
     12,5 px: por debajo del 4,5:1 que pide un texto normal. Este otro da 5,0:1 y sigue siendo
     el mismo rojo. Se usa SOLO donde hay letra blanca encima; los iconos, los bordes y los
     acentos siguen con --coral, que ahí no tiene ese problema. */
  --coral-boton:#d1303a;
  --coral-boton-2:#b3242c;

  /* Superficies y texto */
  --fondo:#f4f5f7;
  --superficie:#ffffff;
  --superficie-2:#fafbfc;
  --superficie-3:#f0f2f5;
  --tinta:#16181d;
  --tinta-2:#464d5c;
  /* Justo por encima del 4.5:1 también sobre --superficie-3, que es donde el texto
     secundario se quedaba corto (avisos, pistas de formulario, pies de tarjeta) */
  --tinta-3:#646b79;
  --linea:#e3e6ec;
  --linea-fuerte:#cfd4dd;

  /* Estados */
  --ok:#0f7c4a;        --ok-fondo:#e6f6ed;
  --warn:#9a5b06;      --warn-fondo:#fdf3e2;
  --bad:#c62828;       --bad-fondo:#fdecec;
  --blue:#1d4ed8;      --blue-fondo:#e8effd;

  /* Forma */
  --r-xs:6px; --r-sm:9px; --r:13px; --r-lg:18px; --r-full:999px;

  /* Profundidad: sombras muy suaves, casi solo para despegar del fondo */
  --s-1:0 1px 2px rgba(16,18,24,.05), 0 0 0 1px rgba(16,18,24,.04);
  --s-2:0 4px 12px rgba(16,18,24,.07), 0 0 0 1px rgba(16,18,24,.04);
  --s-3:0 16px 40px rgba(16,18,24,.14), 0 0 0 1px rgba(16,18,24,.06);

  /* Ritmo */
  --e:cubic-bezier(.2,.7,.3,1);
  --anchura-lateral:260px;
}

@media (prefers-color-scheme: dark){
  :root{
    --coral:#ff6b70;
    --coral-fuerte:#ff8085;
    --coral-hondo:#ffa5a8;
    --coral-tenue:#2b1a1c;

    --fondo:#101116;
    --superficie:#181A21;
    --superficie-2:#1E212A;
    --superficie-3:#242833;
    --tinta:#eceef3;
    --tinta-2:#b0b8c6;
    --tinta-3:#8b93a2;
    --linea:#282c37;
    --linea-fuerte:#3a4050;

    --ok:#4ade80;        --ok-fondo:#12261b;
    --warn:#fbbf24;      --warn-fondo:#2a2110;
    --bad:#f87171;       --bad-fondo:#2c1618;
    --blue:#7ea8ff;      --blue-fondo:#151d2f;

    --s-1:0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05);
    --s-2:0 6px 16px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
    --s-3:0 20px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
  }
}

/* =========================================== 2. BASE Y TIPOGRAFÍA ========= */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

/* El atributo `hidden` solo vale un `display:none` del navegador, así que CUALQUIER
   regla de aquí con display propio lo anula. Pasaba con los estados vacíos de los
   filtros (`.vacio{display:flex}`): se pintaban siempre, y bajo la lista de
   apartamentos se leía un «Ningún apartamento coincide» permanente aunque hubiera
   52. El JS los ocultaba con .hidden = true y no servía de nada. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
  background:var(--fondo);
  color:var(--tinta);
  font-size:14px;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{line-height:1.25;letter-spacing:-.012em;font-weight:650}
h1{font-size:22px} h2{font-size:17px} h3{font-size:15px} h4{font-size:13.5px}
a{color:inherit}
b,strong{font-weight:650}
:where(button,input,select,textarea){font:inherit;color:inherit}

/* Números siempre alineados: importes, códigos, contadores */
.num,.stat b,.codigo b,.tabla td.num,.importe{font-variant-numeric:tabular-nums}

.muted{color:var(--tinta-3);font-size:12.5px;line-height:1.55}
.mini{font-size:11.5px}
.centrado{text-align:center}
.nowrap{white-space:nowrap}
.romper{word-break:break-all}
.crece{flex:1;min-width:0}

/* Iconos: heredan color y se alinean con la línea de texto */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:18px;height:18px;flex:0 0 auto;vertical-align:-3.5px}
.ic-sm{width:15px;height:15px;vertical-align:-2.5px}
.ic-lg{width:22px;height:22px;vertical-align:-5px}
.ic-xl{width:30px;height:30px;vertical-align:0}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2.5px solid var(--coral);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ================================================== 3. DISPOSICIÓN ======== */
.marco{display:flex;flex-direction:column;min-height:100vh}
.lateral{display:none}

.cabecera{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linea);
  padding:11px 16px;
  display:flex;align-items:center;gap:12px;
}
.cabecera .titulo{font-size:16.5px;font-weight:680;letter-spacing:-.015em;line-height:1.2}
.cabecera .sub{font-size:11.5px;color:var(--tinta-3);margin-top:1px}
/* En el móvil la cabecera va fija arriba: un nombre largo en tres líneas se quedaba
   ocupando media pantalla todo el rato. Dos líneas como mucho. */
@media (max-width:959.98px){
  .cabecera .titulo{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}
.cabecera .acciones{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.volver{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-left:-6px;border-radius:var(--r-sm);
  color:var(--tinta-2);flex-shrink:0;text-decoration:none;
  transition:background .15s var(--e), color .15s var(--e);
}
.volver:hover{background:var(--superficie-3);color:var(--tinta)}

.principal{
  flex:1;padding:14px 14px calc(76px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:12px;
}

.seccion{
  font-size:11px;font-weight:700;color:var(--tinta-3);
  text-transform:uppercase;letter-spacing:.07em;
  margin:8px 2px -4px;display:flex;align-items:center;gap:9px;
}
.seccion::after{content:"";flex:1;height:1px;background:var(--linea)}

.fila{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fila-arriba{align-items:flex-start}
.pila{display:flex;flex-direction:column;gap:12px;min-width:0}
.duo{display:flex;flex-direction:column;gap:12px}
/* Dos columnas mientras quepan. A 380 px, dos columnas fijas dejaban 150 px por campo, y
   ahí caen «Importe» y «Motivo» de emitir un cargo, y «Ajustar horas» y «Por qué» de un
   bono, que lleva 300 caracteres y el botón dentro. Con auto-fit se apilan solas cuando no
   caben, sin media query y sin tocar las pantallas anchas. */
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.rejilla{display:grid;grid-template-columns:1fr;gap:12px}

/* ==================================================== 4. NAVEGACIÓN ======= */
.pestanas{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  display:flex;
  background:color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
}
.pestanas a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:9px 0 8px;font-size:10.5px;font-weight:560;
  color:var(--tinta-3);text-decoration:none;position:relative;
  transition:color .15s var(--e);
}
.pestanas a .ic{width:21px;height:21px;vertical-align:0}
/* El coral de marca sobre blanco da 3,0:1, y esto es la etiqueta de 10,5 px de la pestaña
   ACTIVA en el móvil: justo lo que hay que poder leer para saber dónde se está. El hondo da
   6,4:1 y en oscuro sigue siendo el aclarado de siempre. */
.pestanas a.on{color:var(--coral-hondo)}
.pestanas a.on::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2.5px;border-radius:0 0 3px 3px;background:var(--coral);
}

/* ========================= 5. TARJETAS, BOTONES, BADGES =================== */
.tarjeta{
  background:var(--superficie);
  border-radius:var(--r);
  padding:14px;
  box-shadow:var(--s-1);
}
.tarjeta.plana{box-shadow:none;border:1px solid var(--linea)}
.tarjeta.suave{background:var(--superficie-3);box-shadow:none}
.tarjeta.holgada{padding:18px}
a.tarjeta{display:block;text-decoration:none;color:inherit;
          transition:box-shadow .16s var(--e), transform .16s var(--e)}
a.tarjeta:hover{box-shadow:var(--s-2);transform:translateY(-1px)}
a.tarjeta:active{transform:translateY(0)}

.tarjeta.acento{border-left:3px solid var(--coral)}
.tarjeta.aviso{border-left:3px solid var(--warn)}
.tarjeta.peligro{border-left:3px solid var(--bad)}

.form-tarjeta{display:flex;flex-direction:column;gap:11px}

/* Titular de tarjeta: el patrón «icono + texto» que se repite por todo el panel */
.tit{font-size:13.5px;font-weight:650;display:flex;align-items:center;gap:8px;min-width:0}
.tit>.ic{color:var(--tinta-3)}

/* Espaciado suelto, para no repetir el mismo margin-top en cada plantilla */
.mt-xs{margin-top:4px} .mt-sm{margin-top:8px} .mt-md{margin-top:12px}
.auto{align-self:flex-start}
.ancho-auto{width:auto}

/* Botones ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 16px;border:1px solid transparent;border-radius:var(--r-sm);
  background:var(--coral-boton);color:#fff;
  font-size:13.5px;font-weight:620;letter-spacing:-.006em;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s var(--e), box-shadow .15s var(--e),
             transform .1s var(--e), opacity .15s var(--e);
}
.btn:hover{background:var(--coral-boton-2)}
.btn:active{transform:scale(.985)}
.btn.bloque{width:100%}
.btn.sm{padding:8px 12px;font-size:12.5px;border-radius:var(--r-xs);gap:6px}
.btn.lg{padding:13px 20px;font-size:15px}
/* El botón grande de abrir puede partir línea: con el nombre del aparato debajo —«BLANCA exterior
   LAXE 13», el nombre que le puso el cliente en Smart Life— no cabía en una y se salía del botón,
   llevándose el icono (22 sep). El icono no encoge nunca. */
.btn.lg{white-space:normal;text-align:center}
.btn > .ic{flex-shrink:0}
.btn-dos-lineas{display:flex;flex-direction:column;align-items:center;line-height:1.25;min-width:0}
.btn-dos-lineas small{font-size:12.5px;font-weight:520;opacity:.92;overflow-wrap:anywhere}

.btn.sec{background:var(--superficie);color:var(--tinta);
         border-color:var(--linea-fuerte);box-shadow:var(--s-1)}
.btn.sec:hover{background:var(--superficie-3)}

.btn.fantasma{background:transparent;color:var(--tinta-2);border-color:transparent}
.btn.fantasma:hover{background:var(--superficie-3);color:var(--tinta)}
/* Borrar, en fantasma. `.btn.mal` pinta además el borde, que aquí no se quiere: por eso
   estaba resuelto ocho veces con un style en línea. */
.btn.fantasma.mal{color:var(--bad);border-color:transparent}
.btn.fantasma.mal:hover{background:var(--bad-fondo);color:var(--bad)}

.btn.mal{background:transparent;color:var(--bad);
         border-color:color-mix(in srgb, var(--bad) 40%, transparent)}
.btn.mal:hover{background:var(--bad-fondo)}

.btn:disabled{
  background:var(--superficie-3);color:var(--tinta-3);border-color:transparent;
  cursor:not-allowed;box-shadow:none;
}
.btn:disabled:hover{background:var(--superficie-3);transform:none}

.btn-icono{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-sm);border:none;background:transparent;
  color:var(--tinta-2);cursor:pointer;
  transition:background .15s var(--e), color .15s var(--e);
}
.btn-icono:hover{background:var(--superficie-3);color:var(--tinta)}

.botonera{display:flex;gap:8px;flex-wrap:wrap}
.botonera>*{flex:1;min-width:max-content}
.botonera .btn{width:100%}

/* Badges ------------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:640;
  padding:3.5px 9px;border-radius:var(--r-full);white-space:nowrap;
  background:var(--superficie-3);color:var(--tinta-2);
}
.badge .ic{width:13px;height:13px;vertical-align:0}
.badge.ok{background:var(--ok-fondo);color:var(--ok)}
.badge.blue{background:var(--blue-fondo);color:var(--blue)}
.badge.warn{background:var(--warn-fondo);color:var(--warn)}
.badge.bad{background:var(--bad-fondo);color:var(--bad)}
.badge.grey{background:var(--superficie-3);color:var(--tinta-3)}
.badge.accent{background:var(--coral-boton);color:#fff}
.badge.contorno{background:transparent;border:1px solid var(--linea-fuerte);color:var(--tinta-2)}
a.badge{text-decoration:none;transition:background .15s var(--e)}

.punto{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* Tonos sueltos, para teñir un icono según el estado que venga del servidor */
.t-ok{color:var(--ok)} .t-bad{color:var(--bad)} .t-warn{color:var(--warn)}
.t-blue{color:var(--blue)} .t-accent{color:var(--coral)} .t-grey{color:var(--tinta-3)}

/* Estadísticas ------------------------------------------------------------- */
.estadisticas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{
  background:var(--superficie);border-radius:var(--r);padding:14px 12px;
  box-shadow:var(--s-1);display:flex;flex-direction:column;gap:2px;
}
.stat b{font-size:26px;font-weight:680;letter-spacing:-.03em;line-height:1.1;color:var(--tinta)}
.stat .et{font-size:11.5px;color:var(--tinta-3);font-weight:530}
.stat .ic{color:var(--coral);margin-bottom:5px}

/* Casillas de DATOS y no de cifras: un teléfono, una fecha, «Sin tarifa». Con la cifra
   grande se partían en tres líneas, y en el móvil la tercera se salía por la derecha. */
.estadisticas.datos{grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr))}
.estadisticas.datos .stat{min-width:0}
.estadisticas.datos .stat b{font-size:16px;font-weight:650;letter-spacing:-.012em;
                            line-height:1.3;overflow-wrap:anywhere}

/* Control segmentado (filtros) --------------------------------------------- */
.segmentado{
  /* relative para que el offsetLeft de la pestaña activa se mida contra la barra
     y no contra la página: es lo que usa app.js para traerla a la vista. */
  position:relative;
  display:inline-flex;gap:2px;padding:3px;background:var(--superficie-3);
  border-radius:var(--r-sm);overflow-x:auto;max-width:100%;scrollbar-width:none;
}
.segmentado::-webkit-scrollbar{display:none}
.segmentado a{
  padding:6px 13px;border-radius:var(--r-xs);font-size:12.5px;font-weight:590;
  color:var(--tinta-2);text-decoration:none;white-space:nowrap;
  transition:background .15s var(--e), color .15s var(--e);
}
.segmentado a:hover{color:var(--tinta)}
.segmentado a.on{background:var(--superficie);color:var(--tinta);box-shadow:var(--s-1)}

/* ================================================== 6. FORMULARIOS ======== */
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo>label,label.et{font-size:12px;font-weight:580;color:var(--tinta-2)}
/* La pista, esté donde esté: con «.campo .pista», las que van sueltas en un formulario —fuera de un
   .campo, como la de añadir un bono— salían en letra de texto normal */
.pista{font-size:11.5px;color:var(--tinta-3);line-height:1.5}

.f{
  width:100%;
  border:1px solid var(--linea-fuerte);border-radius:var(--r-sm);
  padding:10px 12px;font-size:14px;
  background:var(--superficie);color:var(--tinta);
  transition:border-color .15s var(--e), box-shadow .15s var(--e);
}
.f::placeholder{color:var(--tinta-3)}
.f:hover:not(:focus){border-color:var(--tinta-3)}
.f:focus{
  outline:none;border-color:var(--coral);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--coral) 18%, transparent);
}
textarea.f{min-height:150px;line-height:1.6;resize:vertical;font-family:inherit}
select.f{
  appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379808f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px;
}
.f.derecha{text-align:right}
.f.corto{max-width:120px}

/* Un campo que no se puede tocar tiene que parecerlo: el apartamento de una reserva ya
   hecha se veía como cualquier otro campo y parecía editable. */
.f:disabled{background:var(--superficie-3);color:var(--tinta-2);border-color:var(--linea);cursor:not-allowed}
.f:disabled:hover{border-color:var(--linea)}

/* Dos fechas con hora no caben lado a lado en un móvil: el campo nativo se comía los
   minutos («16:0»). Se apilan solo esas parejas; correo y teléfono siguen juntos. */
@media (max-width:519.98px){
  .dos:has(input[type="datetime-local"]){grid-template-columns:1fr}
}

/* Subir un archivo: el botón nativo, con la forma de un botón secundario */
input[type="file"].f{padding:6px;font-size:12.5px;color:var(--tinta-2);cursor:pointer}
input[type="file"].f::file-selector-button{
  margin-right:10px;padding:7px 12px;border:1px solid var(--linea-fuerte);border-radius:var(--r-xs);
  background:var(--superficie);color:var(--tinta);font:inherit;font-weight:600;cursor:pointer;
  transition:background .15s var(--e);
}
input[type="file"].f::file-selector-button:hover{background:var(--superficie-3)}

/* Buscador con lupa dentro */
.buscador{position:relative;flex:1;min-width:0}
.buscador>.ic{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--tinta-3);pointer-events:none;
}
.buscador .f{padding-left:36px}

/* Buscador y filtros de una lista. En el móvil van uno debajo de otro y con aire: el
   buscador se quedaba pegado al segmentado o al desplegable. En escritorio, en fila. */
@media (max-width:959.98px){
  .filtros{display:flex;flex-direction:column;gap:9px}
  .filtros>.buscador{flex:0 0 auto}
  .filtros>.segmentado{align-self:flex-start}
}

/* Grupo importe con símbolo */
.con-simbolo{display:flex;align-items:center;gap:6px}
.con-simbolo .simbolo{font-size:14px;color:var(--tinta-3);font-weight:560}

/* Interruptor: sustituye a los checkbox de configuración */
.interruptor{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  cursor:pointer;padding:2px 0;position:relative;
}
.interruptor .txt{min-width:0}
.interruptor .txt b{font-size:13.5px;display:block}
.interruptor .txt span{font-size:11.5px;color:var(--tinta-3);line-height:1.5;display:block;margin-top:2px}
.interruptor input{position:absolute;opacity:0;width:0;height:0}
.palanca{
  position:relative;flex:0 0 auto;width:42px;height:25px;border-radius:var(--r-full);
  background:var(--linea-fuerte);margin-top:2px;transition:background .2s var(--e);
}
.palanca::after{
  content:"";position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .2s var(--e);
}
.interruptor input:checked + .palanca{background:var(--coral)}
.interruptor input:checked + .palanca::after{transform:translateX(17px)}
.interruptor input:focus-visible + .palanca{outline:2.5px solid var(--coral);outline-offset:2px}

/* Casilla de consentimiento (portal) */
.casilla{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.casilla input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;
               accent-color:var(--coral);cursor:pointer}

/* Varias casillas seguidas —en qué distribuciones vale un bono—: en rejilla, para que se
   lean en columnas y no como una fila rota */
.casillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 16px}
/* Una lista de casillas larga (los apartamentos en Ajustes → Tuya), con su propio scroll para que
   la tarjeta no ocupe varias pantallas. El borde dice que hay más debajo. */
.casillas.desplazable{max-height:212px;overflow-y:auto;padding:10px 12px;border:1px solid var(--linea);
  border-radius:var(--r-sm);grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}

/* ============================================ 7. TABLAS Y LISTAS ========== */
.tabla-caja{background:var(--superficie);border-radius:var(--r);
            box-shadow:var(--s-1);overflow:hidden}
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{
  text-align:left;font-size:11px;font-weight:660;color:var(--tinta-3);
  text-transform:uppercase;letter-spacing:.06em;
  padding:11px 16px;background:var(--superficie-2);border-bottom:1px solid var(--linea);
  white-space:nowrap;
}
.tabla td{padding:12px 16px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla tr:last-child td{border-bottom:none}
.tabla tbody tr{transition:background .12s var(--e)}
.tabla tbody tr:hover{background:var(--superficie-2)}
.tabla a{text-decoration:none;color:inherit}
.tabla td.num{text-align:right}
.tabla td.encoge{width:1%;white-space:nowrap}
.tabla .principal-celda{font-weight:620;font-size:14px}

/*
  Tabla responsiva: el MISMO marcado se presenta como tabla en escritorio y como
  lista de tarjetas en móvil, sin duplicar los bucles de Thymeleaf. Cada celda
  lleva data-et con su etiqueta, que en móvil pasa a leerse delante del dato.
*/
@media (max-width:959.98px){
  .tabla-caja:has(.responsiva){background:none;box-shadow:none;border-radius:0;overflow:visible}
  .responsiva,.responsiva tbody,.responsiva tr,.responsiva td{display:block;width:auto}
  .responsiva thead{display:none}
  .responsiva tr{
    background:var(--superficie);border-radius:var(--r);box-shadow:var(--s-1);
    padding:13px;margin-bottom:10px;
  }
  .responsiva tr:last-child{margin-bottom:0}
  .responsiva tr:hover{background:var(--superficie)}
  .responsiva td{border:none;padding:0}
  .responsiva td+td{margin-top:5px}
  .responsiva td.encoge{width:auto}
  .responsiva td.num{text-align:left}
  /* La celda principal manda: título de la tarjeta */
  .responsiva td.principal-celda{font-size:14.5px;font-weight:640}
  /* Celdas secundarias con su etiqueta delante */
  .responsiva td[data-et]::before{
    content:attr(data-et) " · ";
    color:var(--tinta-3);font-size:11.5px;font-weight:560;
  }
  .responsiva td[data-et]{font-size:12.5px;color:var(--tinta-2)}
  /* Fila superior de la tarjeta: título a la izquierda, estado a la derecha */
  .responsiva td.cabeza{display:flex;justify-content:space-between;align-items:center;gap:10px}
}

/* Lista de navegación (ajustes) */
.lista-nav{display:flex;flex-direction:column;background:var(--superficie);
           border-radius:var(--r);box-shadow:var(--s-1);overflow:hidden}
.lista-nav a{
  display:flex;align-items:center;gap:12px;padding:14px 15px;
  text-decoration:none;color:inherit;border-bottom:1px solid var(--linea);
  transition:background .12s var(--e);
}
.lista-nav a:last-child{border-bottom:none}
.lista-nav a:hover{background:var(--superficie-2)}
.lista-nav>a>.ic:first-child{color:var(--tinta-3)}
.lista-nav .txt{flex:1;min-width:0}
.lista-nav .txt b{font-size:13.5px;display:block}
.lista-nav .txt span{font-size:11.5px;color:var(--tinta-3);display:block;margin-top:1px}
.lista-nav .flecha{color:var(--tinta-3);flex:0 0 auto}

/* Paginación: anterior, dónde estás y siguiente. Se envuelve en móvil. */
.paginacion{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;font-size:13px;
}

/* ================================ 8. AVISOS, VACÍOS Y ACTIVIDAD ========== */
/* El fondo neutro va en la BASE: los tonos de abajo lo pisan, y los ocho avisos que se usan
   sin tono —o con el tono en blanco, como el de un bono sin publicar— dejan de leerse como
   un párrafo suelto con un icono delante. */
.alerta{
  display:flex;gap:11px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--r-sm);font-size:13px;line-height:1.5;
  background:var(--superficie-3);color:var(--tinta-2);
}
.alerta>.ic{flex:0 0 auto;margin-top:1px}
.alerta.ok{background:var(--ok-fondo);color:var(--ok)}
.alerta.error,.alerta.bad{background:var(--bad-fondo);color:var(--bad)}
.alerta.warn{background:var(--warn-fondo);color:var(--warn)}
.alerta.info{background:var(--blue-fondo);color:var(--blue)}
.alerta b{font-weight:660}

.vacio{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:38px 20px;text-align:center;
  background:var(--superficie);border-radius:var(--r);box-shadow:var(--s-1);
}
.vacio>.ic{color:var(--tinta-3);opacity:.45}
.vacio b{font-size:14px;font-weight:620}
.vacio span{font-size:12.5px;color:var(--tinta-3);max-width:34ch;line-height:1.55}

.actividad{display:flex;flex-direction:column}
.actividad .ev{
  display:flex;gap:11px;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--linea);font-size:12.5px;line-height:1.5;
}
.actividad .ev:last-child{border-bottom:none;padding-bottom:0}
.actividad .ev:first-child{padding-top:0}
.actividad .ev>.ic{margin-top:1px;flex:0 0 auto}
.actividad .ic.ok{color:var(--ok)} .actividad .ic.bad{color:var(--bad)}
.actividad .ic.blue{color:var(--blue)} .actividad .ic.accent{color:var(--coral)}
.actividad .ic.grey{color:var(--tinta-3)}
.actividad .cuando{color:var(--tinta-3);font-size:11px;flex:0 0 auto;
                   white-space:nowrap;margin-top:1px}
/* Una línea de actividad que es entera un enlace —las reservas de un cliente—: sin subrayar
   la línea completa ni la etiqueta de estado que lleva dentro. Se subraya al pasar por encima. */
.actividad a.ev{text-decoration:none}
.actividad a.ev:hover .crece{text-decoration:underline}

/* Caja del código de acceso */
.codigo{
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--coral) 9%, var(--superficie)),
    var(--superficie) 70%);
  border:1px solid color-mix(in srgb, var(--coral) 28%, transparent);
  border-radius:var(--r-lg);padding:18px 16px;text-align:center;
}
.codigo .et{font-size:11.5px;font-weight:620;color:var(--coral-hondo);
            text-transform:uppercase;letter-spacing:.07em}
.codigo b{
  display:block;margin:9px 0 11px;
  font-size:38px;font-weight:700;letter-spacing:.16em;line-height:1;
  color:var(--tinta);user-select:all;-webkit-user-select:all;
}
.codigo.bloqueado{background:var(--superficie-3);border-color:var(--linea)}
.codigo.bloqueado .et{color:var(--tinta-3)}
.codigo.bloqueado b{color:var(--tinta-3);letter-spacing:.1em}

/* Enlace copiable */
.copiable{display:flex;align-items:center;gap:9px;
          background:var(--superficie-3);border-radius:var(--r-sm);padding:9px 11px}
.copiable code{
  flex:1;min-width:0;font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--tinta-2);word-break:break-all;line-height:1.45;
}

/* ==================================== 9. DIÁLOGOS, TOASTS Y CARGAS ======== */
.spinner{
  display:inline-block;width:15px;height:15px;flex:0 0 auto;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  opacity:.9;animation:girar .65s linear infinite;vertical-align:-2.5px;
}
.spinner.grande{width:30px;height:30px;border-width:2.5px;vertical-align:0}
@keyframes girar{to{transform:rotate(360deg)}}

/* Barra de progreso superior mientras se envía algo */
.progreso{
  position:fixed;top:0;left:0;height:2.5px;width:0;z-index:100;
  background:var(--coral);box-shadow:0 0 10px var(--coral);
  transition:width .25s var(--e), opacity .3s var(--e);
}

dialog{
  border:none;padding:0;background:transparent;color:inherit;
  max-width:min(420px, calc(100vw - 32px));width:100%;
  /* El reset de arriba pone margin:0 a todo y eso descentra los dialog nativos,
     que se colocan solos con margin:auto. Aquí se les devuelve. */
  margin:auto;
}
dialog::backdrop{
  background:rgba(10,11,15,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
dialog[open]{animation:entrar .22s var(--e)}
dialog[open]::backdrop{animation:aparecer .22s var(--e)}
@keyframes entrar{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes aparecer{from{opacity:0}}

.dlg{
  background:var(--superficie);border-radius:var(--r-lg);box-shadow:var(--s-3);
  padding:22px;display:flex;flex-direction:column;gap:14px;text-align:left;
}
.dlg .icono-dlg{
  width:44px;height:44px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  background:var(--coral-tenue);color:var(--coral-fuerte);
}
.dlg .icono-dlg.peligro{background:var(--bad-fondo);color:var(--bad)}
.dlg h3{font-size:16.5px;font-weight:670}
.dlg p{font-size:13.5px;color:var(--tinta-2);line-height:1.55}
.dlg .pie-dlg{display:flex;gap:9px;margin-top:2px}
.dlg .pie-dlg .btn{flex:1}
.dlg.espera{align-items:center;text-align:center;padding:32px 26px}
.dlg.espera .spinner{color:var(--coral)}

/* Toasts */
.toasts{
  position:fixed;z-index:90;display:flex;flex-direction:column;gap:9px;
  left:12px;right:12px;top:calc(10px + env(safe-area-inset-top));
  pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:11px;pointer-events:auto;
  background:var(--superficie);border-radius:var(--r);box-shadow:var(--s-3);
  padding:13px 14px;font-size:13.5px;line-height:1.45;font-weight:540;
  animation:toast-entra .3s var(--e);
  border-left:3px solid var(--tinta-3);
}
.toast.ok{border-left-color:var(--ok)} .toast.ok>.ic{color:var(--ok)}
.toast.error{border-left-color:var(--bad)} .toast.error>.ic{color:var(--bad)}
.toast>.ic{flex:0 0 auto;margin-top:1px}
.toast .cerrar{
  margin-left:auto;flex:0 0 auto;background:none;border:none;cursor:pointer;
  color:var(--tinta-3);padding:1px;border-radius:var(--r-xs);
}
.toast .cerrar:hover{color:var(--tinta)}
.toast.saliendo{animation:toast-sale .25s var(--e) forwards}
@keyframes toast-entra{from{opacity:0;transform:translateY(-14px)}}
@keyframes toast-sale{to{opacity:0;transform:translateY(-10px)}}

/* ============================================= 10. PORTAL DEL HUÉSPED ===== */
.portal .principal{padding-bottom:28px;max-width:520px;margin:0 auto;width:100%}
.portal .cabecera{justify-content:space-between}
.portal .marca{display:flex;align-items:center;gap:9px;font-weight:670;font-size:15.5px}
.portal .marca>.ic{color:var(--coral)}

.idiomas{display:inline-flex;gap:2px;padding:3px;background:var(--superficie-3);
         border-radius:var(--r-full)}
.idiomas a{
  padding:4px 11px;border-radius:var(--r-full);font-size:11.5px;font-weight:620;
  color:var(--tinta-3);text-decoration:none;transition:all .15s var(--e);
}
.idiomas a.on{background:var(--superficie);color:var(--tinta);box-shadow:var(--s-1)}

.estancia{display:flex;background:var(--superficie);border-radius:var(--r);
          box-shadow:var(--s-1);overflow:hidden}
.estancia>div{flex:1;padding:14px 12px;text-align:center;min-width:0}
.estancia>div+div{border-left:1px solid var(--linea)}
.estancia .et{font-size:11px;color:var(--tinta-3);font-weight:600;
              text-transform:uppercase;letter-spacing:.06em;
              display:flex;align-items:center;justify-content:center;gap:5px}
.estancia .dia{font-size:15px;font-weight:660;margin:5px 0 2px;display:block}

.pantalla-mensaje{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:15px;padding:44px 24px;min-height:62vh;
}
.pantalla-mensaje .emblema{
  width:70px;height:70px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--superficie-3);color:var(--tinta-3);
}
.pantalla-mensaje .emblema.acento{background:var(--coral-tenue);color:var(--coral-fuerte)}
.pantalla-mensaje h2{font-size:19px}
.pantalla-mensaje p{font-size:13.5px;color:var(--tinta-2);line-height:1.6;max-width:38ch}

.pie{
  font-size:11.5px;color:var(--tinta-3);text-align:center;line-height:1.7;
  margin-top:auto;padding-top:22px;
}

/* Acceso al panel */
.acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.acceso-caja{width:100%;max-width:390px;display:flex;flex-direction:column;gap:15px}
.acceso-logo{
  width:54px;height:54px;border-radius:var(--r);margin:0 auto 12px;
  background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px color-mix(in srgb, var(--coral) 35%, transparent);
}

/* =============================================================================
   ESCRITORIO (≥960px) — no es el móvil ensanchado: cambia la disposición.
   La barra lateral sustituye a las pestañas, la cabecera pasa a ser cabecera de
   página con sus acciones, y las listas de tarjetas se convierten en tablas.
   ============================================================================ */
@media (min-width:960px){
  .pestanas{display:none}

  .marco{margin-left:var(--anchura-lateral)}
  .principal{padding:22px 32px 44px;gap:16px;max-width:1180px;width:100%;margin:0 auto}

  /* --- Barra lateral fija --- */
  .lateral{
    display:flex;flex-direction:column;gap:5px;
    position:fixed;left:0;top:0;bottom:0;width:var(--anchura-lateral);z-index:50;
    background:var(--superficie);border-right:1px solid var(--linea);
    padding:20px 14px 16px;
  }
  .lateral .logo{
    display:flex;align-items:center;gap:11px;padding:2px 8px 20px;
    text-decoration:none;color:inherit;
  }
  .lateral .logo .marca-ic{
    width:36px;height:36px;border-radius:var(--r-sm);flex:0 0 auto;
    background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px color-mix(in srgb, var(--coral) 32%, transparent);
  }
  .lateral .logo b{font-size:14.5px;font-weight:670;letter-spacing:-.015em;
                   display:block;line-height:1.25}
  .lateral .logo span{font-size:11px;color:var(--tinta-3);display:block}

  .lateral nav{display:flex;flex-direction:column;gap:2px}

  /* Encabezado de grupo: separa los apartamentos turísticos de la sala de eventos.
     Son dos negocios en el mismo panel y sin la línea se leen como una lista sola. */
  .lateral nav .grupo{
    margin:14px 11px 5px;padding-top:13px;
    border-top:1px solid var(--linea);
    font-size:10.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--tinta-3);
  }

  .lateral nav a{
    display:flex;align-items:center;gap:11px;
    padding:9.5px 11px;border-radius:var(--r-sm);
    font-size:13.5px;font-weight:560;color:var(--tinta-2);text-decoration:none;
    transition:background .15s var(--e), color .15s var(--e);
  }
  .lateral nav a:hover{background:var(--superficie-3);color:var(--tinta)}
  .lateral nav a.on{background:var(--coral-tenue);color:var(--coral-hondo);font-weight:640}

  .lateral .abajo{margin-top:auto;display:flex;flex-direction:column;gap:2px;
                  padding-top:14px;border-top:1px solid var(--linea)}
  .lateral .abajo a,.lateral .abajo button{
    display:flex;align-items:center;gap:11px;width:100%;
    padding:9px 11px;border-radius:var(--r-sm);border:none;background:none;
    font-size:12.5px;color:var(--tinta-3);text-decoration:none;cursor:pointer;text-align:left;
    transition:background .15s var(--e), color .15s var(--e);
  }
  .lateral .abajo a:hover,.lateral .abajo button:hover{background:var(--superficie-3);color:var(--tinta)}

  /* --- Cabecera de página --- */
  .cabecera{
    position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:none;padding:30px 32px 2px;max-width:1180px;width:100%;margin:0 auto;
    align-items:flex-end;
  }
  .cabecera .titulo{font-size:26px;font-weight:690;letter-spacing:-.025em}
  .cabecera .sub{font-size:13px;margin-top:3px}
  .volver{margin-left:-8px;margin-bottom:3px}

  /* --- Rejillas --- */
  .duo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:start}
  .duo.parejo{grid-template-columns:1fr 1fr}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px}
  .estadisticas{gap:14px}
  .stat{padding:17px 16px}
  .stat b{font-size:30px}
  .estadisticas.datos .stat b{font-size:19px}

  .tarjeta{padding:16px 17px}
  .tarjeta.holgada{padding:22px}

  .filtros{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .filtros .buscador{max-width:340px;flex:0 1 340px}
  /* El desplegable del filtro, al lado del buscador: con el width:100% de un campo normal se
     iba a otra línea a ocupar todo el ancho. */
  .filtros select.f{width:auto;min-width:210px}

  .toasts{left:auto;right:22px;top:22px;width:360px}

  /* El portal del huésped no se ensancha: sigue siendo una columna cómoda */
  .portal.marco{margin-left:0}
  .portal .cabecera{max-width:520px;padding:22px 20px 6px}
  .portal .principal{padding:10px 20px 40px}
}

/* Solo móvil / solo escritorio */
@media (max-width:959.98px){
  .solo-escritorio{display:none !important}
}
@media (min-width:960px){
  .solo-movil{display:none !important}
}

/* ══════════════════════════════ navegador de día (agenda de El Uno)
   Una sola pieza: flecha · el día que se está viendo · flecha. El centro es
   además el selector de fecha, con el input nativo tapándolo, para que no haya
   dos sitios distintos donde elegir día.                                      */
.dia-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

.dia-nav .paso{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:var(--r-sm);
  background:var(--superficie);border:1px solid var(--linea);
  color:var(--tinta-2);text-decoration:none;
  transition:background .15s var(--e),color .15s var(--e),border-color .15s var(--e);
}
.dia-nav .paso:hover{background:var(--superficie-3);color:var(--tinta);border-color:var(--linea-fuerte)}

.dia-actual{
  /* Base 0 y no auto: con el ancho de su texto no cabía junto a las dos flechas y la de
     la derecha se caía sola a la línea de abajo. Así encoge y el texto se corta con «…». */
  position:relative;flex:1 1 0;min-width:0;
  display:flex;align-items:center;gap:9px;
  height:38px;padding:0 12px;
  border-radius:var(--r-sm);
  background:var(--superficie);border:1px solid var(--linea);
  cursor:pointer;
  transition:border-color .15s var(--e),background .15s var(--e);
}
.dia-actual:hover{background:var(--superficie-3);border-color:var(--linea-fuerte)}
/* El foco lo recibe el input, que es invisible: sin esto no se ve dónde estás */
.dia-actual:focus-within{border-color:var(--coral);box-shadow:0 0 0 3px var(--coral-tenue)}

.dia-actual .dia-texto{
  display:flex;align-items:baseline;gap:6px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dia-actual .dia-texto b{font-size:14.5px;font-weight:640;text-transform:capitalize}
.dia-actual .dia-resto{font-size:13px;color:var(--tinta-3)}
.dia-actual .chevron{margin-left:auto;flex:0 0 auto;color:var(--tinta-3);transform:rotate(90deg)}

/* El input tapa toda la pieza y abre el calendario nativo al pulsar en ella.
   opacity:0 y no display:none: escondido del todo no recibiría el clic ni el
   foco del teclado, y la fecha dejaría de poder elegirse sin ratón. */
.dia-actual input[type=date]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:none;padding:0;
}

.pastilla-dia{
  flex:0 0 auto;font-size:11px;font-weight:650;letter-spacing:.03em;
  text-transform:uppercase;padding:3px 8px;border-radius:var(--r-full);
  background:var(--coral-tenue);color:var(--coral-hondo);
}
.pastilla-dia.gris{background:var(--superficie-3);color:var(--tinta-3)}

/* «Volver a hoy» se lleva la línea entera en móvil, y así las dos flechas se
   quedan SIEMPRE pegadas a la fecha. Sin esto la de la derecha se descolgaba a
   la segunda línea, separada de su pareja y encima del texto. */
.dia-nav .volver-hoy{flex:1 0 100%;justify-content:center;margin-top:2px}

@media (min-width:960px){
  /* En escritorio no tiene que ocupar el ancho entero: con el día largo basta */
  .dia-actual{flex:0 1 340px}
  .dia-nav{gap:8px}
  .dia-nav .volver-hoy{flex:0 0 auto;margin-top:0;margin-left:4px}
}

/* Pantallas estrechas de verdad: el año sobra antes que el día de la semana */
@media (max-width:400px){
  .dia-actual{padding:0 10px;gap:7px}
  .dia-actual .dia-resto{font-size:12px}
}
/* Y el año se va antes de que el mes se corte a media palabra («de septiembre d») */
@media (max-width:430px){
  .dia-actual .dia-anyo{display:none}
}

/* ============================================================================
   MEDIOS DE UNA DISTRIBUCIÓN (30 sep)
   El vídeo y la foto del montaje en dos lienzos 16:9 —antes el vídeo iba a lo
   ancho de la página y se comía la pantalla— y ocho huecos para las fotos del
   carrusel. Todo se sube al elegirlo o al soltarlo encima (app.js).
   ============================================================================ */
.medios-dist,.fotos-dist{position:relative;display:flex;flex-direction:column;gap:10px}
/* Los formularios de subida no pintan nada: su <input> se abre desde los huecos */
.subida{display:contents}
.archivo-oculto{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;pointer-events:none}

.lienzos{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){ .lienzos{grid-template-columns:repeat(2,minmax(0,1fr))} }

.lienzo{
  position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;isolation:isolate;
  border-radius:var(--r-lg);background:#0d0f14;box-shadow:var(--s-2);
  transition:box-shadow .2s var(--e), border-color .2s var(--e), background .2s var(--e);
}
.lienzo video,.lienzo img{width:100%;height:100%;object-fit:cover;display:block}
/* Velo arriba y abajo: la etiqueta y los botones se leen sobre cualquier foto */
.lienzo.lleno::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.42),rgba(0,0,0,0) 34%,rgba(0,0,0,0) 62%,rgba(0,0,0,.5));
}
.lienzo-et{
  position:absolute;top:10px;left:10px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;
  border-radius:var(--r-full);font-size:11.5px;font-weight:620;color:#fff;
  background:rgba(12,14,18,.5);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
}
.lienzo-et .ic{width:14px;height:14px}
.lienzo-acciones{position:absolute;right:10px;bottom:10px;z-index:2;display:flex;gap:6px}

/* Botones de cristal para poner encima de una imagen */
.chip,.chip-ic{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 13px;border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;
  font-size:12px;font-weight:620;white-space:nowrap;
  background:rgba(18,20,26,.55);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  transition:background .16s var(--e), transform .16s var(--e), border-color .16s var(--e);
}
.chip .ic,.chip-ic .ic{width:15px;height:15px}
.chip:hover,.chip-ic:hover{background:rgba(18,20,26,.82)}
.chip:active,.chip-ic:active{transform:scale(.94)}
.chip.mal{width:32px;padding:0}
.chip.mal:hover,.chip-ic.mal:hover{background:var(--bad);border-color:transparent}
.chip-ic{width:30px;height:30px;padding:0}

/* Lienzo sin fichero: el hueco invita a subirlo */
.lienzo.vacio{background:var(--superficie);box-shadow:none;border:1.5px dashed var(--linea-fuerte)}
.lienzo.vacio:hover{border-color:var(--coral);background:var(--superficie-2)}
.lienzo-hueco{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:16px;text-align:center;cursor:pointer;color:var(--tinta-2);font-size:12.5px;
}
.lienzo-hueco b{font-size:14px;color:var(--tinta)}
.lienzo-hueco small{font-size:11px;color:var(--tinta-3)}
.hueco-icono{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:8px;border-radius:14px;
  background:var(--coral-tenue);color:var(--coral);transition:transform .2s var(--e);
}
.hueco-icono .ic{width:22px;height:22px}
.lienzo.vacio:hover .hueco-icono{transform:translateY(-2px)}
.medios-pista{margin:0 2px}

/* Arrastrando un fichero encima */
[data-soltar]{position:relative}
[data-soltar].soltando{outline:2px solid var(--coral);outline-offset:3px}
[data-soltar].soltando::before{
  content:"Suelta para subir";position:absolute;inset:0;z-index:5;pointer-events:none;
  display:grid;place-items:center;border-radius:inherit;
  font-size:14px;font-weight:650;color:#fff;background:rgba(209,48,58,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
/* El foco del teclado cae en el <input> escondido: se enseña en su hueco */
#medios:has(#subir-video:focus-visible) [data-soltar="#subir-video"],
#medios:has(#subir-portada:focus-visible) [data-soltar="#subir-portada"],
#fotos:has(#subir-fotos:focus-visible) .hueco.primero,
#fotos-sala:has(#subir-fotos-sala:focus-visible) .hueco.primero{outline:2.5px solid var(--coral);outline-offset:3px}

/* ── Fotos del carrusel ─────────────────────────────────────────────────── */
.seccion .contador{
  text-transform:none;letter-spacing:0;font-weight:650;font-size:11px;
  padding:2px 8px;border-radius:var(--r-full);background:var(--superficie-3);color:var(--tinta-2);
  font-variant-numeric:tabular-nums;
}
.fotos-tarjeta{display:flex;flex-direction:column;gap:12px}
.huecos{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:560px){ .huecos{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:820px){ .huecos{grid-template-columns:repeat(4,minmax(0,1fr))} }

.hueco{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;isolation:isolate}
.hueco.lleno{background:#0d0f14;box-shadow:var(--s-1)}
.hueco.lleno img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--e)}
.hueco.lleno:hover img{transform:scale(1.04)}
.hueco.lleno::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:55%;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55));opacity:0;transition:opacity .2s var(--e);
}
.hueco-num{
  position:absolute;top:8px;left:8px;z-index:2;display:grid;place-items:center;
  min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-full);
  font-size:11.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;
  background:rgba(12,14,18,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.hueco-acciones{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:2;display:flex;gap:6px;
  opacity:0;transform:translateY(4px);transition:opacity .2s var(--e), transform .2s var(--e);
}
.hueco-acciones form:last-child{margin-left:auto}
.hueco.lleno:hover::after,.hueco.lleno:focus-within::after,
.hueco.lleno:hover .hueco-acciones,.hueco.lleno:focus-within .hueco-acciones{opacity:1;transform:none}
/* En el móvil no hay «pasar por encima»: los botones, siempre a la vista */
@media (hover:none){
  .hueco.lleno::after,.hueco-acciones{opacity:1;transform:none}
}

.hueco.vacio{border:1.5px dashed var(--linea-fuerte);background:var(--superficie-2);
  transition:border-color .18s var(--e), background .18s var(--e)}
.hueco.vacio label{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;cursor:pointer;color:var(--tinta-3);font-size:12.5px;font-weight:620;
}
.hueco.vacio .ic{width:20px;height:20px}
.hueco.vacio.primero{border-color:var(--coral);background:var(--coral-tenue)}
.hueco.vacio.primero label{color:var(--coral-hondo)}
.hueco.vacio.primero .ic{width:24px;height:24px}
.hueco.vacio:hover{border-color:var(--coral);background:var(--coral-tenue)}
.hueco.vacio:hover label{color:var(--coral-hondo)}