/* CazaRentas — azul marino y naranja solar.
 *
 * Móvil primero: la mayoría va a mirar una oportunidad desde el teléfono, en el
 * metro, con 30 segundos. Si en esa pantalla no se entiende, no se entiende.
 *
 * DOS TEMAS. El claro manda por defecto; el oscuro se elige.
 *
 * Las variables se llaman por su PAPEL (--fondo, --superficie, --texto), no por su
 * pigmento. Cuando se llamaban --marino y --tinta el tema no se podía cambiar: el
 * nombre ya decidía el color, y cambiarlo dejaba la hoja mintiendo. Con papeles,
 * cambiar de tema es redefinir el bloque de abajo y nada más.
 *
 * El marino y el naranja son la MARCA: valen igual en los dos temas y por eso
 * viven fuera del juego de tema. */

:root {
  /* Marca — no cambian con el tema. */
  --naranja: #f97316;
  --naranja-hondo: #ea580c;

  /* Papeles — tema claro. */
  --fondo: #f4f7fb;
  --superficie: #ffffff;
  --hueco: #eef3f9;          /* lo que se hunde: campos, fotos, botones de demo */
  --borde: #dde5f0;
  --borde-fuerte: #b6c4d8;
  --texto: #0d1b2e;
  --texto-suave: #475b74;
  --texto-tenue: #6b7f99;

  /* Los semánticos se oscurecen en claro: los tonos pastel del modo oscuro sobre
     blanco no llegan al contraste mínimo y se leen mal al sol, que es justo donde
     se va a mirar esto. */
  --verde: #047857;
  --ambar: #b45309;
  --rojo:  #dc2626;
  --azul:  #1d4ed8;

  --barra: rgba(255, 255, 255, .85);
  --resplandor: rgba(249, 115, 22, .07);
  --sombra: 0 1px 2px rgba(13,27,46,.06), 0 10px 28px rgba(13,27,46,.09);

  --radio: 14px;
}

/* El oscuro de antes, intacto: un mercado cerrado y por invitación se siente como
   una sala privada. Pero se entra a la sala queriendo, no por sorpresa. */
:root[data-tema="oscuro"] {
  --fondo: #0d1b2e;
  --superficie: #16263f;
  --hueco: #0d1b2e;
  --borde: #23354f;
  --borde-fuerte: #64748b;
  --texto: #eef2f7;
  --texto-suave: #93a4bb;
  --texto-tenue: #64748b;

  --verde: #34d399;
  --ambar: #fbbf24;
  --rojo:  #f87171;
  --azul:  #60a5fa;

  --barra: rgba(13, 27, 46, .88);
  --resplandor: rgba(249, 115, 22, .10);
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* Un resplandor naranja muy tenue arriba: da profundidad sin gritar. */
  background-image: radial-gradient(120% 55% at 50% -10%, var(--resplandor), transparent 70%);
  background-attachment: fixed;
}

.caja { width: 100%; max-width: 940px; margin: 0 auto; padding: 0 16px 64px; }
.caja.ancho { max-width: 1180px; }

/* ── Barra ─────────────────────────────────────────────────────────────────── */

.barra {
  background: var(--barra);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20;
}
.barra-in {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; max-width: 1180px; margin: 0 auto;
}
.marca {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--texto); text-decoration: none;
  font-weight: 800; letter-spacing: -.2px; font-size: 1.05rem;
}
.logo { width: 26px; height: 26px; color: var(--texto-suave); flex: none; }

.mnu { display: flex; gap: 4px; margin-left: auto; }
.mnu a {
  color: var(--texto-suave); text-decoration: none;
  padding: 7px 11px; border-radius: 9px; font-size: .92rem; white-space: nowrap;
  transition: background .15s, color .15s;
}
.mnu a:hover { background: var(--hueco); color: var(--texto); }
.mnu a[aria-current] { background: color-mix(in oklab, var(--naranja) 11%, transparent); color: var(--naranja); font-weight: 600; }

.yo { display: flex; align-items: center; gap: 10px; }
.quien { color: var(--texto-tenue); font-size: .85rem; white-space: nowrap; }

.mnu-tog, .mnu-btn { display: none; }

@media (max-width: 860px) {
  .mnu-btn {
    display: block; margin-left: auto; font-size: 1.5rem;
    cursor: pointer; color: var(--texto-suave); line-height: 1; padding: 2px 6px;
  }
  .mnu { display: none; width: 100%; flex-direction: column; gap: 2px; order: 3; }
  .mnu-tog:checked ~ .mnu { display: flex; }
  .barra-in { flex-wrap: wrap; }
  .quien { display: none; }
}

/* ── Piezas ────────────────────────────────────────────────────────────────── */

h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); font-weight: 800; margin: 28px 0 6px; letter-spacing: -.5px; }
h2 { font-size: 1.15rem; font-weight: 700; margin: 30px 0 12px; }
h3 { font-size: 1rem; font-weight: 650; margin: 0 0 8px; }
.entradilla { color: var(--texto-suave); margin: 0 0 22px; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
}

.rejilla { display: grid; gap: 14px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
/* Los escenarios piden más aire: dentro llevan una tabla, no una cifra suelta. */
.rejilla-esc { grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); }

.etiqueta {
  display: block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--texto-tenue); font-weight: 650;
}
.cifra {
  font-size: 1.6rem; font-weight: 800; margin: 3px 0 0;
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.cifra.naranja { color: var(--naranja); }
.cifra.verde   { color: var(--verde); }
.cifra.rojo    { color: var(--rojo); }
.menudo { font-size: .85rem; }
.apagado { color: var(--texto-tenue); }
.euros { font-variant-numeric: tabular-nums; }

/* ── Pastillas de estado ───────────────────────────────────────────────────── */

.pastilla {
  display: inline-block; padding: 2.5px 9px; border-radius: 999px;
  font-size: .73rem; font-weight: 650; white-space: nowrap;
  border: 1px solid transparent;
}
.pastilla.azul { background: color-mix(in oklab, var(--azul) 13%, transparent); color: var(--azul); border-color: color-mix(in oklab, var(--azul) 32%, transparent); }
.pastilla.verde { background: color-mix(in oklab, var(--verde) 13%, transparent); color: var(--verde); border-color: color-mix(in oklab, var(--verde) 32%, transparent); }
.pastilla.ambar { background: color-mix(in oklab, var(--ambar) 13%, transparent); color: var(--ambar); border-color: color-mix(in oklab, var(--ambar) 32%, transparent); }
.pastilla.gris { background: color-mix(in oklab, var(--texto-suave) 12%, transparent); color: var(--texto-suave); border-color: var(--borde-fuerte); }
.pastilla.naranja { background: color-mix(in oklab, var(--naranja) 13%, transparent); color: var(--naranja); border-color: color-mix(in oklab, var(--naranja) 32%, transparent); }

/* ── Botones y formularios ─────────────────────────────────────────────────── */

.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--naranja); color: #fff; border: 0;
  padding: 11px 19px; border-radius: 11px;
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: background .15s, transform .08s;
}
.btn:hover { background: var(--naranja-hondo); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-plano {
  background: transparent; color: var(--texto-suave);
  border: 1px solid var(--borde); padding: 8px 14px; border-radius: 10px;
  font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-plano:hover { color: var(--texto); border-color: var(--borde-fuerte); }

label { display: block; font-size: .85rem; font-weight: 600; margin: 0 0 5px; color: var(--texto-suave); }
input, select, textarea {
  width: 100%; background: var(--hueco); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 10px;
  padding: 11px 13px; font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--naranja); outline-offset: 1px; border-color: transparent;
}
.campos { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ayuda { font-size: .8rem; color: var(--texto-tenue); margin: 5px 0 0; }

/* ── Avisos ────────────────────────────────────────────────────────────────── */

.aviso {
  border-radius: 11px; padding: 12px 15px; margin: 18px 0 0;
  font-size: .92rem; border: 1px solid;
}
.aviso.ok  { background: color-mix(in oklab, var(--verde) 10%, transparent); border-color: color-mix(in oklab, var(--verde) 30%, transparent); color: var(--verde); }
.aviso.mal { background: color-mix(in oklab, var(--rojo) 10%, transparent); border-color: color-mix(in oklab, var(--rojo) 30%, transparent); color: var(--rojo); }
.nota {
  background: color-mix(in oklab, var(--naranja) 11%, transparent); border-left: 3px solid var(--naranja);
  padding: 13px 16px; border-radius: 0 10px 10px 0; margin: 0 0 18px; font-size: .92rem;
}

/* ── Vacío ─────────────────────────────────────────────────────────────────── */

.vacio { text-align: center; padding: 54px 20px; }
.vacio-icono { font-size: 2.4rem; display: block; margin-bottom: 10px; opacity: .55; }
.vacio-titulo { font-weight: 700; margin: 0 0 5px; }
.vacio-texto { color: var(--texto-tenue); margin: 0 auto; max-width: 380px; font-size: .93rem; }

/* ── Acceso ────────────────────────────────────────────────────────────────── */

.acceso { max-width: 420px; margin: 0 auto; padding-top: 56px; }
.acceso-marca {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  font-size: 1.5rem; font-weight: 800; margin: 0 0 6px;
}
.acceso-marca .logo { width: 34px; height: 34px; color: var(--naranja); }
.acceso-lema { text-align: center; color: var(--texto-tenue); margin: 0 0 32px; font-size: .93rem; }
.acceso .tarjeta + .tarjeta { margin-top: 16px; }

/* El selector de demos: se ve que es una herramienta de pruebas, no parte del
   producto. Si se confundiera con el acceso normal, alguien lo dejaría encendido. */
.demo { border-style: dashed; border-color: var(--naranja); background: transparent; }
.demo-titulo { color: var(--naranja); font-size: .78rem; text-transform: uppercase;
               letter-spacing: .09em; font-weight: 700; margin: 0 0 4px; }
.demo-lista { display: grid; gap: 8px; margin-top: 13px; }
.demo-lista form { display: contents; }
.demo-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; background: var(--hueco);
  border: 1px solid var(--borde); color: var(--texto);
  padding: 11px 13px; border-radius: 10px; font: inherit; cursor: pointer;
}
.demo-btn:hover { border-color: var(--naranja); }
.demo-btn small { color: var(--texto-tenue); font-size: .8rem; }

/* ── Lista de oportunidades ────────────────────────────────────────────────── */

.lotes { display: grid; gap: 14px; }
@media (min-width: 720px) { .lotes { grid-template-columns: repeat(2, 1fr); } }

.lote {
  display: block; text-decoration: none; color: inherit;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
  transition: border-color .15s, transform .12s;
}
.lote:hover { border-color: var(--naranja); transform: translateY(-2px); }
.lote-foto { aspect-ratio: 16/9; background: var(--hueco); overflow: hidden; }
.lote-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lote-cuerpo { padding: 15px 16px 17px; }
.lote-alto { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.lote-titulo { font-weight: 700; margin: 0 0 3px; line-height: 1.35; }
.lote-sitio { color: var(--texto-tenue); font-size: .85rem; margin: 0 0 13px; }
.lote-pie {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--borde); padding-top: 12px;
}
.lote-puja { font-size: 1.28rem; font-weight: 800; color: var(--naranja);
             font-variant-numeric: tabular-nums; }

.reloj { font-variant-numeric: tabular-nums; font-weight: 650; font-size: .88rem; }
.reloj.urge { color: var(--rojo); }

/* ── Ficha ─────────────────────────────────────────────────────────────────── */

.galeria { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 22px; }
.galeria img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; }

table.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.tabla th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-tenue); font-weight: 650; padding: 0 8px 7px;
}
table.tabla td { padding: 7px 8px; border-top: 1px solid var(--borde); }
table.tabla td.derecha, table.tabla th.derecha { text-align: right; }

.envoltorio-tabla { overflow-x: auto; }
/* Con cuatro columnas de números no se negocia el ancho: o cabe, o se
   desplaza. Encogerla parte las palabras y no se lee nada. */
.tabla-ancha { min-width: 460px; }

/* ── Pujar ─────────────────────────────────────────────────────────────────── */

.pujar { position: sticky; bottom: 0; z-index: 10;
         background: linear-gradient(to top, var(--fondo) 72%, transparent);
         padding: 18px 0 14px; margin-top: 26px; }
.pujar-caja { background: var(--superficie); border: 1px solid var(--naranja);
              border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); }
.pujar-fila { display: flex; gap: 10px; align-items: flex-end; }
.pujar-fila > div { flex: 1; }
.pujar-fila .btn { flex: none; height: 45px; }

/* El efecto de la puja sobre tus propios números. Es la función que justifica la
   plataforma, así que se ve, no se esconde en un desplegable. */
.efecto { margin-top: 13px; padding-top: 13px; border-top: 1px dashed var(--borde);
          font-size: .89rem; display: grid; gap: 5px; }
.efecto div { display: flex; justify-content: space-between; gap: 12px; }
.efecto .peor { color: var(--ambar); }

.pujas { display: grid; gap: 7px; }
.puja-fila { display: flex; justify-content: space-between; gap: 12px;
             padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: .9rem; }
.puja-fila:last-child { border-bottom: 0; }
.puja-fila.mia { color: var(--naranja); font-weight: 600; }

/* ── Interruptor de tema ───────────────────────────────────────────────────── */

.tema {
  background: transparent; border: 1px solid var(--borde); color: var(--texto-suave);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; flex: none;
  font-size: 1rem; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
}
.tema:hover { border-color: var(--naranja); color: var(--naranja); }
/* Cada tema enseña el icono de al que te LLEVA, no en el que estás: un botón dice
   qué va a pasar si lo pulsas. */
.tema-claro { display: none; }
:root[data-tema="oscuro"] .tema-claro { display: inline; }
:root[data-tema="oscuro"] .tema-oscuro { display: none; }
.tema-suelto { position: fixed; top: 14px; right: 14px; z-index: 30;
               background: var(--superficie); }

/* ── Utilidades ────────────────────────────────────────────────────────────── */

/* Esto estaba escrito como atributos style= en las vistas y NO SE APLICABA NINGUNO:
   la política de seguridad de la página es `style-src 'self'`, que bloquea el
   atributo style igual que bloquea el JavaScript en línea. La web llevaba desde el
   principio renderizando sin estos estilos y encima no avisaba de nada.
   La salida no es añadir 'unsafe-inline' —eso abre justo el agujero que la política
   cierra— sino sacar el estilo del HTML, que es donde no debía estar. */

.sin-margen   { margin: 0; }
.bloque       { display: block; }
.centrado     { text-align: center; }
.ancho-total  { width: 100%; }
.en-naranja   { color: var(--naranja); }
.tabla-menuda { font-size: .85rem; }

.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-13 { margin-top: 13px; }
.mt-16 { margin-top: 16px; }
.mb-4  { margin: 0 0 4px; }
.mb-8  { margin: 0 0 8px; }
.mb-9  { margin: 0 0 9px; }
.mb-13 { margin: 0 0 13px; }
.mb-14 { margin: 0 0 14px; }
.mb-24 { margin-bottom: 24px; }

.volver       { margin: 22px 0 0; }
.ficha-alto   { margin: 14px 0 8px; }
.ficha-titulo { margin: 0 0 4px; }
/* Una oportunidad de otra sala se ve apagada: existe, pero no es tuya. */
.lote.ajena   { opacity: .6; }

/* ── Menú lateral (solo escritorio) ────────────────────────────────────────── */

/* En móvil la barra se queda arriba con su desplegable: un lateral en 430 px se
   come media pantalla. A partir de 861 px sobra ancho y falta alto, así que el
   menú se va al costado y la ficha —que es larguísima— gana pantalla vertical.
   No hace falta marcado nuevo: es la misma barra puesta en columna. */

@media (min-width: 861px) {
  .con-lateral { padding-left: 236px; }

  .con-lateral .barra {
    position: fixed; inset: 0 auto 0 0; width: 236px;
    background: var(--superficie);
    backdrop-filter: none;
    border-bottom: 0; border-right: 1px solid var(--borde);
  }

  .con-lateral .barra-in {
    flex-direction: column; align-items: stretch; gap: 0;
    height: 100%; max-width: none; margin: 0; padding: 22px 14px 18px;
  }

  .con-lateral .marca { margin: 0 0 24px; padding: 0 9px; }

  .con-lateral .mnu { flex-direction: column; gap: 3px; margin-left: 0; }
  .con-lateral .mnu a { padding: 10px 11px; font-size: .95rem; }

  /* Abajo del todo, separado: quién eres y cómo sales no compiten con navegar. */
  .con-lateral .yo {
    margin-top: auto; flex-wrap: wrap; gap: 8px;
    border-top: 1px solid var(--borde); padding-top: 14px;
  }
  .con-lateral .quien {
    flex-basis: 100%; white-space: normal; line-height: 1.4; padding: 0 3px;
  }
  .con-lateral .yo form { flex: 1; }
  .con-lateral .yo .btn-plano { width: 100%; justify-content: center; }
}

/* Mis pujas. Los tres estados se distinguen por color porque es lo primero que se
   mira al abrir la pantalla: no se viene aquí a leer, se viene a ver si sigues. */
.enlace-plano { color: inherit; }
.a-derecha    { text-align: right; }
.puja-fila .adjudicada { color: var(--verde); }
.puja-fila .ganando    { color: var(--naranja); }
.puja-fila .superado   { color: var(--texto-tenue); }

/* El tope va plegado bajo la puja normal: es la opción de quien no va a estar
   mirando el reloj, no la principal. Abierto de golpe competiría con «Pujar». */
.tope { margin-top: 13px; border-top: 1px dashed var(--borde); padding-top: 11px; }
.tope > summary {
  cursor: pointer; font-size: .9rem; color: var(--texto-suave);
  font-weight: 600; list-style: none; padding: 3px 0;
}
.tope > summary::-webkit-details-marker { display: none; }
.tope > summary::before { content: '▸ '; color: var(--naranja); }
.tope[open] > summary::before { content: '▾ '; }
.tope > summary:hover { color: var(--naranja); }
.tope .pujar-fila { margin-top: 9px; }
.tope .btn-plano { height: 45px; }
/* CazaRentas — fragmento de «Publicar» y «Mis operaciones».
 *
 * Para fusionar en public/cazarentas.css. Usa solo las variables que ya define la
 * hoja principal, así que los dos temas salen gratis y no hay ningún color suelto.
 *
 * Por qué existe este fichero y no atributos `style=`: la política de la página es
 * `style-src 'self'`, que bloquea el atributo style igual que bloquea el JavaScript
 * en línea, Y NO AVISA DE NADA. Un `style=` aquí no queda feo: queda sin aplicar.
 *
 * Móvil primero. El formulario de alta es larguísimo y casi siempre se rellena de
 * pie, con una mano, recién salido de ver el piso. Todas las filas se apilan por
 * defecto y solo se abren en columnas cuando hay ancho para que los números se
 * puedan comparar de un vistazo. */

/* ── Formulario de alta ─────────────────────────────────────────────────────── */

.pub-form { margin-bottom: 96px; }          /* hueco para la barra de acciones */
.pub-campo + .pub-campo { margin-top: 13px; }
.pub-mt { margin-top: 13px; }
.pub-sin-alto { margin-top: 0; }

/* Los importes se leen en columna y se comparan entre sí: cifras de ancho fijo y
   alineadas a la derecha, como en la ficha. */
.pub-euros { text-align: right; font-variant-numeric: tabular-nums; }

/* Etiqueta para quien usa lector de pantalla, invisible para quien ve la pantalla.
   Las filas repetidas llevan su rótulo en la cabecera de la tabla, pero una fila
   suelta leída en voz alta sin rótulo no se entiende. */
.pub-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.pub-menudo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-tenue); font-weight: 650; margin: 0 0 4px;
}

/* La cabecera de columnas sobra en el móvil, donde cada campo ya lleva su
   marcador de posición dentro y las dos cajas van una encima de otra. */
.pub-cabeza { display: none; }

/* ── Filas de partidas ──────────────────────────────────────────────────────── */

.pub-fila { display: grid; gap: 8px; margin-bottom: 10px; }

@media (min-width: 620px) {
  .pub-cabeza {
    display: grid; grid-template-columns: 1fr 180px; gap: 10px;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--texto-tenue); font-weight: 650;
    padding-bottom: 7px; margin-bottom: 10px;
    border-bottom: 1px solid var(--borde);
  }
  .pub-cabeza span:last-child { text-align: right; }
  .pub-fila { grid-template-columns: 1fr 180px; gap: 10px; }
}

/* ── Filas de habitación ────────────────────────────────────────────────────── */

.pub-fila-hab {
  display: grid; gap: 9px;
  padding: 13px 0; border-top: 1px solid var(--borde);
}
.pub-fila-hab:first-of-type { border-top: 0; }
.pub-hab-quien { display: grid; gap: 8px; }
/* Tres precios caben en una línea hasta en un móvil estrecho si se les quita el
   rótulo largo: por eso los rótulos van en versalitas menudas encima. */
.pub-hab-precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pub-hab-precios input { padding-left: 8px; padding-right: 8px; }

@media (min-width: 760px) {
  .pub-fila-hab { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: end; }
  .pub-hab-quien { grid-template-columns: 1fr 1fr; }
}

/* ── Filas de medios ────────────────────────────────────────────────────────── */

.pub-fila-medio {
  display: grid; gap: 8px;
  padding: 11px 0; border-top: 1px solid var(--borde);
}
.pub-fila-medio:first-of-type { border-top: 0; }

@media (min-width: 620px) {
  .pub-fila-medio { grid-template-columns: 130px minmax(0, 2fr) minmax(0, 1fr); }
}

/* ── Casillas ───────────────────────────────────────────────────────────────── */

/* `input { width: 100% }` de la hoja general convierte una casilla en una barra de
   400 px. Aquí se le devuelve su tamaño y se pone el texto al lado, que además hace
   del rótulo entero zona de toque: en un móvil es la diferencia entre marcarla a la
   primera y fallar tres veces. */
.pub-casilla {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: .95rem; font-weight: 400; color: var(--texto);
  cursor: pointer; margin: 0;
}
.pub-casilla input[type="checkbox"] {
  width: 22px; height: 22px; flex: none; margin: 1px 0 0;
  accent-color: var(--naranja); cursor: pointer; padding: 0;
}
.pub-casilla span { line-height: 1.45; }

/* La declaración responsable es lo único que de verdad bloquea publicar, así que
   se distingue del resto de tarjetas en vez de perderse entre ellas. */
.pub-declaracion { border-color: var(--naranja); }

/* ── Recorrido de salas ─────────────────────────────────────────────────────── */

.pub-salas { display: grid; gap: 11px; }
.pub-sala {
  display: grid; gap: 7px;
  background: var(--hueco); border: 1px solid var(--borde);
  border-radius: 11px; padding: 11px 13px;
}
.pub-sala label { margin: 0; display: flex; align-items: center; gap: 8px; }
.pub-sala select { background: var(--superficie); }

@media (min-width: 620px) {
  .pub-salas { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ── Barra de acciones ──────────────────────────────────────────────────────── */

/* Pegada abajo. Un formulario de este largo con el botón solo al final es un
   formulario que se abandona a media página: se guarda cuando se decide, no cuando
   se llega al fondo. */
.pub-acciones {
  position: sticky; bottom: 0; z-index: 10;
  background: linear-gradient(to top, var(--fondo) 68%, transparent);
  padding: 18px 0 14px; margin-top: 24px;
}
.pub-acciones-in {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 13px; box-shadow: var(--sombra);
}
.pub-acciones-in .btn, .pub-acciones-in .btn-plano { justify-content: center; }

@media (min-width: 620px) {
  .pub-acciones-in { flex-direction: row; justify-content: flex-end; align-items: center; }
}

/* ── Mis operaciones ────────────────────────────────────────────────────────── */

.mias-lista { display: grid; gap: 14px; margin-top: 18px; }

@media (min-width: 860px) {
  .mias-lista { grid-template-columns: repeat(2, 1fr); }
}

.mias-item {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px 17px 17px;
}
.mias-alto { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.mias-titulo { font-weight: 700; margin: 0 0 3px; line-height: 1.35; }
.mias-titulo a { color: inherit; text-decoration: none; }
.mias-titulo a:hover { color: var(--naranja); }
.mias-sitio { color: var(--texto-tenue); font-size: .85rem; margin: 0 0 13px; }

/* Cuatro datos que contestan sin abrir nada: por cuánto va, cuánta gente puja,
   si llega al mínimo y cuánto queda. */
.mias-cifras {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px;
  border-top: 1px solid var(--borde); padding-top: 12px;
}
.mias-dato { display: grid; gap: 1px; font-size: .92rem; }
.mias-dato .euros { font-weight: 700; }

@media (min-width: 420px) {
  .mias-cifras { grid-template-columns: repeat(4, 1fr); }
}

/* ── Retirar ────────────────────────────────────────────────────────────────── */

/* Plegado, y sin JavaScript: `details` lo hace el navegador. Que haya que abrirlo
   es parte del diseño — retirar con pujas vivas se permite, pero no de un dedazo. */
.pub-retirar { margin-top: 13px; border-top: 1px solid var(--borde); padding-top: 11px; }
.pub-retirar summary {
  cursor: pointer; font-size: .85rem; color: var(--texto-tenue);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.pub-retirar summary::-webkit-details-marker { display: none; }
.pub-retirar summary::before { content: '↩'; }
.pub-retirar summary:hover { color: var(--rojo); }
.pub-retirar[open] summary { color: var(--rojo); font-weight: 650; margin-bottom: 10px; }
.pub-retirar .btn-plano:hover { color: var(--rojo); border-color: var(--rojo); }
/* ── Panel de empresa ─────────────────────────────────────────────────────────
 *
 * Fragmento para fusionar en cazarentas.css. Usa sus variables de papel (--fondo,
 * --superficie, --texto…) y no define ninguna nueva: el panel tiene que cambiar de
 * tema con el resto sin que nadie se acuerde de esta hoja.
 *
 * Todas las clases van con prefijo `emp-` menos las que ya existían (.tarjeta,
 * .pastilla, .tabla, .btn, .nota), que se reutilizan tal cual.
 *
 * Móvil primero: cada fila de persona es una columna que se convierte en fila a
 * partir de 520px. El dueño de una empresa mira esto desde el teléfono tanto como
 * desde el escritorio, y las acciones (sacar, vetar) tienen que ser tocables con
 * el pulgar sin ampliar. */

/* La barra de secciones. Se queda pegada arriba al desplazar porque las tres
   secciones son largas y perder la navegación a mitad de la lista de salas
   obligaría a subir del todo.

   El `top` no es 0 en móvil: ahí la barra de CazaRentas también está pegada
   arriba y con z-index 20, así que una barra a 0 se metería DEBAJO y
   desaparecería justo cuando hace falta. 57px es su alto. A partir de 861px la
   barra se va al lateral y entonces sí manda el 0. */
.emp-nav {
  position: sticky; top: 57px; z-index: 5;
  display: flex; gap: 6px; overflow-x: auto;
  margin: 0 0 22px; padding: 8px 0;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}
.emp-nav a {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto-suave);
  font-size: .88rem; font-weight: 650;
}
.emp-nav a:hover { border-color: var(--naranja); color: var(--naranja); }

/* scroll-margin y no padding: el ancla tiene que parar POR DEBAJO de las dos
   barras pegadas arriba, y con padding el título quedaría tapado al saltar. */
.emp-seccion { margin: 0 0 38px; scroll-margin-top: 120px; }

/* En escritorio la barra de CazaRentas es un lateral y ya no roba alto. */
@media (min-width: 861px) {
  .emp-nav { top: 0; }
  .emp-seccion { scroll-margin-top: 62px; }
}
.emp-seccion > h2 { margin: 0 0 12px; }

.emp-sala { margin: 0 0 14px; }
.emp-cab {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: baseline; justify-content: space-between;
  margin: 0 0 12px;
}
.emp-titulo { margin: 0; font-size: 1.1rem; }
.emp-pastillas { display: flex; flex-wrap: wrap; gap: 5px; }
.emp-apartado { margin-top: 16px; }

/* ── Gente ─────────────────────────────────────────────────────────────────── */

.emp-gente { list-style: none; margin: 8px 0 0; padding: 0; }
.emp-persona {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 0; border-top: 1px solid var(--borde);
}
.emp-quien { font-size: .94rem; }
.emp-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }

/* «Sacar» y «Vetar» tienen que quedar a la MISMA altura, y no lo estaban.
   «Sacar» es un botón dentro de un .emp-mini, que lleva `margin: 8px 0 0` porque
   los formularios sueltos de esta pantalla lo necesitan; «Vetar» es un <summary>
   dentro de un <details>, que no lo lleva. Resultado: uno 8 px más abajo que el
   otro, justo lo que se veía. Aquí dentro ese margen sobra. */
.emp-acciones .emp-mini { margin-top: 0; }

/* Y se igualan las dos cajas a mano: un <button> y un <summary> no heredan lo
   mismo del navegador, así que parecerse no basta, hay que decirlo. */
.emp-acciones .emp-btn,
.emp-acciones > .emp-desplegar > summary {
  min-height: 38px; box-sizing: border-box; line-height: 1.2;
  justify-content: center;
}

/* El vetado se marca con una banda ámbar a la izquierda y no con el fondo entero:
   esta lista se mira de un vistazo y hay que distinguir de lejos quién está dentro
   de quién está vetado sin leer. */
.emp-vetado {
  border-left: 3px solid var(--ambar);
  padding-left: 10px;
  background: color-mix(in oklab, var(--ambar) 7%, transparent);
  border-radius: 0 8px 8px 0;
}

@media (min-width: 520px) {
  .emp-persona { flex-direction: row; align-items: center; justify-content: space-between; }
  .emp-acciones { justify-content: flex-end; }
}

/* ── Formularios pequeños ──────────────────────────────────────────────────── */

.emp-mini {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 8px 0 0;
}
.emp-mini-col { flex-direction: column; align-items: stretch; }
.emp-mini input, .emp-mini select { margin: 0; font-size: .88rem; padding: 8px 10px; }
.emp-ancho { flex: 1 1 150px; min-width: 0; }
.emp-corto { flex: 0 0 76px; width: 76px; }

.emp-btn {
  padding: 8px 13px; font-size: .84rem; white-space: nowrap;
  min-height: 38px;           /* tocable con el pulgar sin ampliar */
}
.emp-peligro { color: var(--rojo); border-color: color-mix(in oklab, var(--rojo) 35%, transparent); }
.emp-peligro:hover { border-color: var(--rojo); background: color-mix(in oklab, var(--rojo) 10%, transparent); }

/* Vetar despliega su motivo en vez de enseñar un campo de texto por cada persona:
   con diez miembros, diez cajas de texto abiertas convierten la lista en un
   formulario ilegible. <details> lo hace sin una línea de JavaScript. */
.emp-desplegar { display: inline-block; }
.emp-desplegar > summary {
  display: inline-flex; align-items: center; cursor: pointer; list-style: none;
  border: 1px solid var(--borde-fuerte); border-radius: 10px;
  background: var(--superficie); font-weight: 650;
}
.emp-desplegar > summary::-webkit-details-marker { display: none; }
.emp-desplegar[open] > summary { border-color: var(--rojo); }
.emp-desplegar > form { min-width: 210px; padding-top: 6px; }

.emp-nueva { margin: 0 0 16px; }
.emp-form { margin: 0 0 16px; }
.emp-form h3 { margin: 0 0 6px; }
.emp-rejilla {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.emp-casillas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.emp-casilla {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 13px; border-radius: 10px;
  border: 1px solid var(--borde); background: var(--hueco);
  font-size: .9rem; font-weight: 600; margin: 0;
}
.emp-casilla input { width: auto; margin: 0; accent-color: var(--naranja); }
.emp-casilla:hover { border-color: var(--naranja); }

/* Etiqueta que solo leen los lectores de pantalla. Los formularios en línea no
   pueden enseñar el rótulo sin partirse, pero un campo sin nombre es un campo que
   no se puede usar sin ver la pantalla. */
.emp-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Códigos ───────────────────────────────────────────────────────────────── */

/* Los apellidos y los códigos se dictan por teléfono: monoespaciada y con las
   letras separadas para que MRD02-7K3Q no se lea como una palabra. */
.emp-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem; letter-spacing: .06em; font-weight: 650;
  padding: 1px 6px; border-radius: 6px;
  background: var(--hueco); border: 1px solid var(--borde);
  white-space: nowrap;
}
.emp-codigo-grande { font-size: .95rem; padding: 3px 9px; }

.emp-inactiva { opacity: .55; }
/* Administración → Configuración.
 *
 * Fragmento para fusionar en cazarentas.css. Todo va aquí porque la política de la
 * página (`style-src 'self'`) descarta EN SILENCIO cualquier `style="…"`: no falla,
 * simplemente no se aplica.
 *
 * Solo variables que ya existen en :root, para que el tema oscuro salga gratis y no
 * haya que acordarse de esta pantalla cuando se retoque la paleta.
 *
 * Móvil primero: esta pantalla se va a mirar de pie, y un interruptor que no se
 * acierta con el pulgar es un interruptor que se deja como estaba. */

/* ── Pestañas ──────────────────────────────────────────────────────────────── */

/* Se quedan pegadas bajo la barra: en la pestaña de Pujas hay que bajar bastante y
   perder de vista dónde estás es perder de vista qué estás cambiando. */
.adm-pestanas {
  position: sticky; top: 57px; z-index: 5;
  display: flex; gap: 6px; overflow-x: auto;
  margin: 0 0 22px; padding: 8px 0;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}
.adm-pestanas a {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto-suave);
  font-size: .9rem; font-weight: 650;
  transition: border-color .15s, color .15s, background .15s;
}
.adm-pestanas a:hover { border-color: var(--naranja); color: var(--naranja); }
.adm-pestanas a[aria-current] {
  background: color-mix(in oklab, var(--naranja) 12%, transparent);
  border-color: color-mix(in oklab, var(--naranja) 40%, transparent);
  color: var(--naranja);
}

/* En escritorio la barra de CazaRentas es un lateral y ya no roba alto arriba. */
@media (min-width: 861px) {
  .adm-pestanas { top: 0; }
}

/* ── La lista de ajustes ───────────────────────────────────────────────────── */

.adm-seccion { margin: 0 0 8px; }
.adm-seccion > h2 { margin: 0 0 12px; }

.adm-ajuste {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 17px;
  margin: 0 0 12px;
}

/* Lo que no está construido se distingue del resto por el borde, no solo por la
   pastilla: de un vistazo se tiene que ver cuántos canales son humo. */
.adm-ajuste.adm-pendiente {
  border-color: color-mix(in oklab, var(--ambar) 45%, transparent);
  background: color-mix(in oklab, var(--ambar) 4%, var(--superficie));
}

.adm-dicho { flex: 1 1 auto; min-width: 0; }

.adm-titulo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 5px; font-weight: 700; line-height: 1.35;
}
.adm-porque { margin: 0; color: var(--texto-suave); font-size: .9rem; }

/* ── Las tres clases de letra pequeña, cada una con su papel ───────────────── */

/* Lo que falta para que un canal apagado exista. Va en ámbar porque es una promesa
   incumplida, no un consejo. */
.adm-falta {
  margin: 10px 0 0; padding: 9px 11px;
  border-left: 3px solid var(--ambar);
  border-radius: 0 9px 9px 0;
  background: color-mix(in oklab, var(--ambar) 9%, transparent);
  color: var(--texto); font-size: .85rem; line-height: 1.5;
}

/* La consecuencia que no se ve venir al mover el interruptor. */
.adm-ojo {
  margin: 10px 0 0; font-size: .85rem; line-height: 1.5;
  color: var(--texto-suave);
}

/* La cuenta calculada con los valores puestos. Se distingue del resto porque es un
   número que cambia solo, y conviene que se note que no es un texto fijo. */
.adm-cuenta {
  margin: 10px 0 0; padding: 10px 12px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: 10px;
  background: var(--hueco);
  color: var(--texto); font-size: .85rem; line-height: 1.55;
}
.adm-cuenta strong { color: var(--naranja); }

.adm-cuando { margin: 9px 0 0; font-size: .78rem; color: var(--texto-tenue); }

/* ── Los mandos ────────────────────────────────────────────────────────────── */

.adm-mando { flex: 0 0 auto; display: flex; align-items: center; padding-top: 2px; }

.adm-palanca { display: block; margin: 0; cursor: pointer; }

/* La casilla se dibuja entera: un interruptor se entiende de lejos y se acierta
   con el pulgar, una casilla de 13 px del sistema no. Sigue siendo un checkbox de
   verdad, así que el teclado y los lectores de pantalla no pierden nada. */
.adm-palanca input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative; display: block;
  width: 54px; height: 31px; flex: none;
  margin: 0; padding: 0;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--hueco);
  cursor: pointer;
  transition: background .16s, border-color .16s;
}
.adm-palanca input[type="checkbox"]::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--texto-tenue);
  transition: transform .16s, background .16s;
}
.adm-palanca input[type="checkbox"]:checked {
  background: var(--naranja);
  border-color: var(--naranja);
}
.adm-palanca input[type="checkbox"]:checked::after {
  transform: translateX(23px);
  background: #fff;
}
.adm-palanca:hover input[type="checkbox"] { border-color: var(--naranja); }

/* Un canal sin construir se puede encender, pero el interruptor no debe gritar
   «listo»: se queda en ámbar para no prometer lo que no hay. */
.adm-pendiente .adm-palanca input[type="checkbox"]:checked {
  background: var(--ambar);
  border-color: var(--ambar);
}

.adm-numero { display: flex; align-items: center; gap: 7px; margin: 0; }
.adm-numero input {
  width: 88px; text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 10px 11px;
}
.adm-unidad { color: var(--texto-tenue); font-size: .88rem; font-weight: 600; }

/* ── Guardar ───────────────────────────────────────────────────────────────── */

/* Pegado abajo: la pestaña de Pujas no cabe de una vez en un móvil y el botón al
   final de un scroll es el botón que no se pulsa. */
.adm-pie {
  position: sticky; bottom: 0;
  margin: 18px 0 0; padding: 12px 0 14px;
  background: linear-gradient(to top, var(--fondo) 74%, transparent);
}
.adm-guardar { width: 100%; }
.adm-alcance { text-align: center; }

@media (min-width: 620px) {
  .adm-ajuste { padding: 18px 20px; }
  .adm-guardar { width: auto; min-width: 220px; }
  .adm-pie { display: flex; align-items: center; gap: 14px; }
  .adm-alcance { text-align: left; margin: 0; }
}

/* El resumen franco de la pestaña de Avisos usa .aviso.mal, que por defecto pinta
   TODO en rojo; aquí el rojo tiene que quedarse en el borde y en el «solo avisa
   uno», porque el resto es explicación y en rojo no se lee. */
.adm-franca { color: var(--texto); margin: 0 0 16px; line-height: 1.55; }
.adm-franca strong { color: var(--rojo); }

/* ── Avisos ────────────────────────────────────────────────────────────────── */

.chincheta {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px;
  background: var(--naranja); color: #fff; border-radius: 999px;
  font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}
.avisos { display: grid; gap: 9px; }
.av {
  display: flex; gap: 11px; align-items: flex-start; text-decoration: none;
  color: inherit; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 13px 15px;
  transition: border-color .15s;
}
a.av:hover { border-color: var(--naranja); }
/* Lo no visto se marca con una barra al canto, no con el fondo entero: un bloque
   de color por cada aviso nuevo convierte la pantalla en un semáforo. */
.av-nuevo { border-left: 3px solid var(--naranja); }
.av-icono { font-size: 1.15rem; line-height: 1.4; flex: none; }
.av-texto { flex: 1; }
.av.aviso-malo  .av-texto { color: var(--texto); }
.av.aviso-bueno .av-texto strong { color: var(--verde); }
/* Segundo fragmento del formulario de publicar: lo que trajeron los nueve cambios
 * de Iván del 23/09/2026 (conceptos de serie no renombrables, filas que se añaden
 * y se quitan, subida de fotos y vídeos, y los campos de subasta que desaparecen a
 * precio fijo).
 *
 * Va aquí y no en un `style=` por lo de siempre: la política de la página es
 * `style-src 'self'`, que bloquea el atributo style EN SILENCIO. Un `style=` no
 * queda feo, queda sin aplicar.
 *
 * Móvil primero, como el resto de la hoja. */

/* ── `hidden` gana SIEMPRE ───────────────────────────────────────────────────── */

/* La regla del navegador para [hidden] es `display: none`, pero viene de la hoja
 * de USUARIO-AGENTE y la pierde contra cualquier `display` escrito aquí. Como el
 * JavaScript esconde campos que son rejilla (`.campos`, `.pub-soltar`), sin esto
 * «esconder» no escondería nada y nadie se enteraría hasta verlo en producción. */
[hidden] { display: none !important; }

/* ── Conceptos de serie ──────────────────────────────────────────────────────── */

/* El nombre de un concepto de serie es texto, no una casilla: no se renombra. Se le
 * da el alto de una casilla para que la columna no baile entre las filas fijas y
 * las libres, y para que en el móvil el nombre y su importe se lean como pareja. */
.pub-concepto {
  display: flex; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--texto);
  padding: 0 2px;
}

/* ── Filas que se quitan ─────────────────────────────────────────────────────── */

/* Una equis, no un botón de texto: hay una por fila y un «Quitar» repetido doce
 * veces convierte el formulario en una lista de botones. 44 px de lado porque es
 * el dedo de alguien de pie en la calle. */
.pub-quitar {
  justify-self: end; align-self: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  background: transparent; color: var(--texto-tenue);
  border: 1px solid var(--borde); border-radius: 10px;
  font: inherit; line-height: 1; cursor: pointer;
}
.pub-quitar:hover { color: var(--rojo); border-color: var(--rojo); }

.pub-anadir { margin: 4px 0 2px; }

/* La fila libre lleva una columna más que la de serie: la de su equis. Sin
 * JavaScript esa tercera columna se queda vacía y mide cero. */
@media (min-width: 620px) {
  .pub-fila-libre { grid-template-columns: 1fr 180px auto; }
}

/* El pie de la habitación ocupa su propia línea en vez de pelearse por la tercera
 * columna con los precios. */
.pub-hab-pie { display: flex; justify-content: flex-end; }

@media (min-width: 760px) {
  .pub-hab-pie { grid-column: 1 / -1; }
}

/* ── Subir fotos y vídeos ────────────────────────────────────────────────────── */

/* La zona de soltar nace con `hidden` y la enseña public/publicar.js. Sin
 * JavaScript no se puede subir nada, y una zona que no hace nada es peor que no
 * tenerla: por eso hace falta que [hidden] gane, arriba del todo de este fichero. */
.pub-soltar {
  display: grid; justify-items: center; gap: 9px;
  margin-top: 13px; padding: 22px 16px;
  border: 2px dashed var(--borde-fuerte); border-radius: 13px;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.pub-soltar-encima { border-color: var(--naranja); background: var(--hueco); }
.pub-soltar-txt { margin: 0; font-weight: 650; color: var(--texto-suave); }
/* Es un `label` que abre el selector de ficheros: se comporta como botón y tiene
 * que parecerlo, incluido el cursor. */
.pub-soltar-btn { cursor: pointer; }
.pub-soltar .ayuda { margin: 0; }

.pub-subidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pub-subidos:empty { display: none; }

.pub-medio {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center; gap: 11px;
  padding: 8px; border: 1px solid var(--borde); border-radius: 11px;
}
.pub-medio-mini {
  width: 64px; height: 64px; border-radius: 9px;
  object-fit: cover; background: var(--hueco);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.pub-medio-nombre {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .9rem; font-weight: 600;
}
.pub-medio-estado { font-size: .8rem; color: var(--texto-tenue); }

/* Un fichero rechazado se queda a la vista con el motivo del servidor escrito al
 * lado. Desaparecer y dejar un hueco haría pensar que se subió. */
.pub-medio-mal { border-color: var(--rojo); }
.pub-medio-mal .pub-medio-estado { color: var(--rojo); }

/* En el móvil el nombre del fichero y su estado no caben en la misma línea, así
 * que el estado baja debajo del nombre y la equis se queda a la derecha. */
@media (max-width: 479px) {
  .pub-medio { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .pub-medio-mini { width: 48px; height: 48px; }
  .pub-medio-nombre { grid-column: 2; }
  .pub-medio-estado { grid-column: 2; grid-row: 2; }
  .pub-medio .pub-quitar { grid-column: 3; grid-row: 1 / span 2; }
}
/* ─────────────────────────────────────────────────────────────────────────────
   Fragmento 2 del panel de empresa: los dos interruptores por sala.

   Para fusionar en cazarentas.css, justo detrás del bloque «Formularios
   pequeños» de .emp-*. No usa ninguna variable nueva: todo sale de las que ya
   están en :root, así que el tema oscuro se pinta solo.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Lo que hay que leer antes de tocar un interruptor ─────────────────────── */

/* Las dos consecuencias que no se ven venir —enterrar un lote, y que el que
   publica nunca puja— se dicen UNA vez arriba de la sección y no dentro de cada
   sala: repetidas en cinco tarjetas se convierten en un muro que no lee nadie, y
   justo entonces dejan de avisar. */
.emp-claves { display: grid; gap: 10px; margin: 0 0 18px; }

.emp-clave {
  margin: 0; padding: 11px 14px;
  border-left: 3px solid var(--borde-fuerte);
  border-radius: 0 10px 10px 0;
  background: var(--hueco);
  color: var(--texto-suave);
  font-size: .88rem; line-height: 1.55;
}
.emp-clave strong { color: var(--texto); }

/* ── El formulario de la sala ──────────────────────────────────────────────── */

/* En bloque y no en línea: dentro caben la fila de nombre + orden, los dos
   interruptores y el botón, y en un móvil eso no es una fila.
   El margen se pone SOLO dentro de la tarjeta de una sala, y no en `.emp-ajustes`
   a secas, porque el formulario de crear lleva además `.emp-nueva` —que se define
   más arriba en este mismo fichero— y una regla general aquí le pisaría su
   separación de abajo sin que nadie lo viera venir. */
.emp-ajustes { display: block; }
.emp-sala .emp-ajustes { margin: 8px 0 0; }
.emp-ajustes .emp-mini { margin: 0; }
.emp-guardar { margin-top: 12px; }

/* ── Los interruptores ─────────────────────────────────────────────────────── */

.emp-palancas { display: grid; gap: 8px; margin: 12px 0 0; }

.emp-palanca {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0; padding: 11px 12px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 11px;
  background: var(--hueco);
  transition: border-color .16s, background .16s;
}
.emp-palanca:hover { border-color: var(--naranja); }

/* La casilla se dibuja entera en vez de dejar la de 13 px del sistema: esto se
   mira y se toca con el pulgar en un móvil, y un interruptor se entiende de lejos.
   Sigue siendo un checkbox de verdad, así que el teclado y los lectores de
   pantalla no pierden nada. */
.emp-palanca input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none;
  width: 48px; height: 28px;
  margin: 1px 0 0; padding: 0;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  cursor: pointer;
  transition: background .16s, border-color .16s;
}
.emp-palanca input[type="checkbox"]::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--texto-tenue);
  transition: transform .16s, background .16s;
}
.emp-palanca input[type="checkbox"]:checked {
  background: var(--naranja);
  border-color: var(--naranja);
}
.emp-palanca input[type="checkbox"]:checked::after {
  transform: translateX(20px);
  background: #fff;
}
/* El foco se marca aparte del :hover porque quien va con el teclado no tiene
   ratón que le diga dónde está. */
.emp-palanca input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--naranja); outline-offset: 2px;
}

.emp-palanca-texto { display: block; min-width: 0; }
.emp-palanca-titulo {
  display: block; font-weight: 650; font-size: .92rem; line-height: 1.35;
  color: var(--texto);
}
.emp-palanca-porque {
  display: block; margin-top: 3px;
  color: var(--texto-suave); font-size: .82rem; line-height: 1.5;
}
.emp-palanca-porque strong { color: var(--texto); font-weight: 650; }

/* Encendida, la fila se tiñe: el estado de una sala secreta tiene que notarse al
   pasar la vista por la tarjeta, no solo mirando la posición del botón. */
.emp-palanca:has(input[type="checkbox"]:checked) {
  border-color: color-mix(in oklab, var(--naranja) 40%, transparent);
  background: color-mix(in oklab, var(--naranja) 7%, transparent);
}
/* ── Fragmento para public/cazarentas.css ──────────────────────────────────────
 *
 * Tres piezas nuevas, todas con variables que ya existen:
 *
 *   1. .ficha-admin      · la franja de quien administra la operación (ficha)
 *   2. .no-pujar         · por qué esta persona no puede pujar (ficha)
 *   3. .pub-congelado    · el aviso de lo que ya no se puede cambiar (publicar)
 *
 * La tercera va al bloque de «Publicar» de la hoja; las dos primeras, al de la
 * ficha, justo antes de `.pujar`.
 * ────────────────────────────────────────────────────────────────────────────── */

/* ── La franja de quien administra ─────────────────────────────────────────── */

/* Va arriba del todo y se distingue del resto de la ficha a propósito: lo que hay
   dentro son herramientas del vendedor, no información de la operación. Si
   pareciera una tarjeta más, alguien acabaría leyendo el anuncio de WhatsApp como
   si fuera parte de lo que se subasta. */
.ficha-admin {
  background: color-mix(in oklab, var(--naranja) 7%, var(--superficie));
  border: 1px dashed color-mix(in oklab, var(--naranja) 45%, transparent);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin: 0 0 18px;
}
.ficha-admin-quien {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--naranja);
  margin: 0 0 10px;
}
/* Los botones se apilan en el móvil y se ponen en fila en cuanto hay ancho: es la
   misma franja que se va a tocar de pie, en la calle, recién salido del piso. */
.ficha-admin-botones { display: flex; flex-wrap: wrap; gap: 9px; }
.ficha-admin-botones:empty { display: none; }
.ficha-admin-botones .btn-plano { background: var(--superficie); }

/* ── Compartir ─────────────────────────────────────────────────────────────── */

/* <details> y no un diálogo: sin JavaScript se abre y se copia igual, que es el
   requisito. El navegador lo hace solo. */
.ficha-compartir { margin-top: 12px; }
.ficha-compartir > summary {
  cursor: pointer; font-weight: 650; font-size: .92rem;
  color: var(--texto-suave); list-style: none;
  padding: 7px 0;
}
.ficha-compartir > summary::-webkit-details-marker { display: none; }
.ficha-compartir > summary::before { content: '▸ '; color: var(--naranja); }
.ficha-compartir[open] > summary::before { content: '▾ '; }
.ficha-compartir > summary:hover { color: var(--naranja); }

/* El rótulo del textarea existe para el lector de pantalla, pero se ve: quien
   llega a esta caja tiene que saber que ese bloque de texto es el mensaje y no
   una descripción de la operación. */
.ficha-compartir-rotulo { margin: 12px 0 5px; }

/* Monoespaciada y con los saltos de línea intactos: lo que se ve aquí es
   EXACTAMENTE lo que se va a pegar en el grupo. Una tipografía proporcional haría
   que los emojis y las líneas cortas parecieran otra cosa al enviarlo.
   `field-sizing` crece con el contenido donde exista y se ignora donde no, que es
   justo el comportamiento que se quiere: mejora, no requisito. */
.ficha-compartir-texto {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem; line-height: 1.55;
  background: var(--superficie);
  white-space: pre-wrap;
  resize: vertical;
  field-sizing: content;
  min-height: 11lh;
}
.ficha-compartir-ir { margin: 12px 0 0; }

/* ── Por qué no puedes pujar ───────────────────────────────────────────────── */

/* Ocupa el sitio de la caja de pujar, y por eso NO va pegada abajo como ella: una
   explicación que persigue al lector mientras baja es un estorbo. Se lee una vez
   y se sigue mirando la operación. */
.no-pujar {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--texto-tenue);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 15px 17px;
  margin: 22px 0 0;
}
.no-pujar-titulo {
  font-weight: 700; margin: 0 0 5px; font-size: .97rem; color: var(--texto);
}
.no-pujar-texto {
  margin: 0; font-size: .89rem; color: var(--texto-suave); max-width: 62ch;
}

/* ── Lo que ya no se puede cambiar (formulario de editar) ──────────────────── */

/* En ámbar y no en rojo: no es un error de quien edita, es una regla de la
   subasta. El rojo diría «has hecho algo mal» a quien solo ha entrado a corregir
   una errata. */
.pub-congelado {
  background: color-mix(in oklab, var(--ambar) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--ambar) 32%, transparent);
  color: var(--ambar);
  border-radius: 11px;
  padding: 11px 14px;
  margin: 0 0 14px;
  font-size: .86rem;
  max-width: 70ch;
}
/* Un campo bloqueado tiene que PARECER bloqueado. Con el mismo aspecto que uno
   editable, la única pista de que no se puede escribir sería intentarlo. */
.pub-form input[readonly] {
  background: color-mix(in oklab, var(--texto-tenue) 9%, transparent);
  color: var(--texto-suave);
  border-style: dashed;
  cursor: not-allowed;
}

/* ── Ganadas ───────────────────────────────────────────────────────────────── */

/* Más aire que una tarjeta del listado: aquí no se ojea, se actúa. Cada una es
   una tarea pendiente, no una fila de un histórico. */
.ganadas { display: grid; gap: 16px; }
@media (min-width: 860px) { .ganadas { grid-template-columns: repeat(2, 1fr); } }

.ganada {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--verde);
  border-radius: var(--radio);
  overflow: hidden;
}
.ganada-foto { aspect-ratio: 16/9; background: var(--hueco); }
.ganada-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ganada-cuerpo { padding: 16px 17px 18px; }

.ganada-datos {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  border-top: 1px solid var(--borde); margin-top: 13px; padding-top: 12px;
}

/* Lo que falta por hacer, separado de lo que ya pasó. */
.ganada-pasos {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px dashed var(--borde);
}
.ganada-pasos .btn { margin-top: 10px; width: 100%; }

/* La comisión, separada de lo demás con su propia caja: es dinero que sale, y
   mezclarlo con el resto de datos de la operación invita a pasarlo por alto. */
.ganada-cobro {
  margin-top: 14px; padding: 13px 14px;
  background: var(--hueco); border-radius: 11px;
}
.ganada-cobro table { margin: 6px 0 10px; }
.ganada-cobro .btn { width: 100%; }
.ganada-cobro.pagado { background: color-mix(in oklab, var(--verde) 10%, transparent); }
/* ── Fragmento 3 del panel de empresa: las cinco pantallas ────────────────────
 *
 * Para fusionar en public/cazarentas.css detrás del fragmento 2 (los
 * interruptores). No define NINGUNA variable nueva: todo sale de las que ya están
 * en :root, así que el tema oscuro se pinta solo y nadie tiene que acordarse de
 * esta hoja al cambiar un color.
 *
 * Lo que trae:
 *
 *   1. .emp-nav a[aria-current]   · la barra, ahora con enlaces de verdad
 *   2. .emp-barra                 · la fila del botón «Crear nueva sala»
 *   3. .emp-lista / .emp-fila     · la lista plegada de salas
 *   4. .emp-volver, .emp-titulo-pagina, .emp-pastillas-sala · la página de una sala
 *   5. .emp-dialogo               · la ventana flotante de crear sala
 *
 * Móvil primero: la fila de una sala es una columna hasta 520px y una fila a
 * partir de ahí. El blanco que se toca con el pulgar es la FILA ENTERA, no una
 * palabra suelta.
 * ────────────────────────────────────────────────────────────────────────────── */

/* ── 1. La barra de las tres pantallas ─────────────────────────────────────── */

/* Antes eran anclas dentro de una misma página y ninguna era «la actual». Ahora
   son tres páginas, así que la que se está mirando tiene que decirlo: si no, la
   barra parece un menú que no responde. */
.emp-nav a[aria-current="page"] {
  border-color: var(--naranja);
  background: color-mix(in oklab, var(--naranja) 12%, var(--superficie));
  color: var(--naranja);
}

/* ── 2. La fila del botón de crear ─────────────────────────────────────────── */

.emp-barra {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: flex-end;
  margin: 0 0 14px;
}

/* Es un <a>, no un <button>: sin JavaScript navega a /salas/nueva. Pero tiene que
   PARECER el botón que es, y un enlace no hereda ni el alto ni el centrado de
   .btn cuando lleva texto largo que se parte. */
.emp-btn-nueva {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; text-align: center;
}
@media (max-width: 519px) {
  /* En el móvil ocupa el ancho: es la única acción de esta pantalla y buscarla en
     una esquina con el pulgar no tiene ninguna gracia. */
  .emp-barra { justify-content: stretch; }
  .emp-btn-nueva { flex: 1 1 100%; }
}

/* ── 3. La lista plegada de salas ──────────────────────────────────────────── */

.emp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.emp-fila { margin: 0; }

/* El enlace envuelve TODA la fila y no solo el nombre. En un móvil, el blanco que
   se acierta sin mirar es el rectángulo entero; un enlace del tamaño de una
   palabra obliga a apuntar, y esto se usa con una mano en el metro. */
.emp-fila-ir {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 13px 15px;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  color: var(--texto); text-decoration: none;
  transition: border-color .16s, transform .16s;
}
.emp-fila-ir:hover { border-color: var(--naranja); }
/* Un pelín hacia la derecha al pulsar: dice «esto te lleva a otro sitio» sin
   escribirlo. Solo transform, que no recalcula el hueco de nadie. */
.emp-fila-ir:active { transform: translateX(2px); }
.emp-fila-ir:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }

/* Al vendedor la fila no se le hace enlace: la ruta de una sala le devuelve un 403
   y un enlace a una puerta cerrada es una trampa, no información. Sin sombra de
   pulsable y sin cursor de mano. */
.emp-fila-quieta { box-shadow: none; background: var(--hueco); }
.emp-fila-quieta:hover { border-color: var(--borde); }

.emp-fila-nombre {
  flex: 1 1 200px; min-width: 0;
  font-weight: 650; font-size: 1.02rem;
  /* Un nombre largo se parte en vez de estirar la fila y sacar barra horizontal. */
  overflow-wrap: anywhere;
}
.emp-fila-pastillas { display: flex; flex-wrap: wrap; gap: 5px; }

.emp-fila-flecha {
  flex: none; margin-left: auto;
  font-size: 1.4rem; line-height: 1; color: var(--texto-tenue);
}

/* ── 4. La página de una sala ──────────────────────────────────────────────── */

.emp-volver { margin: 0 0 6px; font-size: .88rem; }
.emp-volver a { color: var(--texto-suave); text-decoration: none; }
.emp-volver a:hover { color: var(--naranja); }

.emp-titulo-pagina { margin: 0 0 8px; overflow-wrap: anywhere; }

/* .emp-pastillas ya es un flex; aquí solo se le da aire por debajo cuando va
   colgando de un <h1> en lugar de dentro de la cabecera de una tarjeta. */
.emp-pastillas-sala { margin: 0 0 26px; }

/* ── 5. La ventana flotante de crear sala ──────────────────────────────────── */

/* El <dialog> sin `open` ya lo esconde la hoja del navegador, así que aquí no hay
   nada que ocultar: sin JavaScript esto sencillamente no aparece y el botón lleva
   a /salas/nueva, que es la misma pantalla con su URL. */
.emp-dialogo {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra);
}
.emp-dialogo::backdrop {
  /* Sin var(): ::backdrop no siempre hereda las custom properties del documento
     en todos los navegadores, y un fondo que a veces no se pinta deja la ventana
     flotando sobre un texto legible, que es peor que no tener fondo. */
  background: rgba(13, 27, 46, .55);
}

.emp-dialogo-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin: 0 0 14px;
}
.emp-dialogo-titulo { margin: 0; font-size: 1.15rem; }

.emp-cerrar {
  flex: none;
  padding: 4px 10px;
  font-size: 1rem; line-height: 1.2;
}

/* En el móvil la ventana se pega abajo: es donde llega el pulgar. */
@media (max-width: 519px) {
  .emp-dialogo {
    width: 100vw; max-width: 100vw;
    margin: auto 0 0;
    border-radius: var(--radio) var(--radio) 0 0;
    border-bottom: none;
  }
}