/* Panel de Casas de Varadero. Primero el móvil. Sin estilos en línea (la CSP los prohíbe).
   Clases para las vistas:
   .tarjeta  .campo (label + input/textarea/select)  .casilla  .ayuda  .error / .aviso / .ok
   .boton (.primario por defecto, .secundario, .peligro, .pequeno)  .acciones  .oculto  .trampa
   .lista-conv > .conv (a) con .conv-nombre .conv-meta .conv-previa .insignia  .estado-vacio
   .hilo > .burbuja.usuario / .burbuja.equipo (.burbuja-meta, .burbuja img)  .nota-segura
   .barra-escribir (form fijo) con textarea + .boton  .filtros (.filtro .activo)  .datos-cliente  .plantillas */

@font-face { font-family: "Clash"; src: url("/fuentes/clash-display-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fuentes/satoshi-variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Clash-respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"); font-weight: 600; size-adjust: 101%; }
@font-face { font-family: "Satoshi-respaldo"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 300 900; size-adjust: 99%; }

:root {
  color-scheme: light;
  --fondo: #FFFBF3;
  --superficie: #FBF1E2;
  --tinta: #191C22;
  --tinta-2: #565C6B;
  --acento: #B4461F;
  --acento-hondo: #8E3414;
  --acento-claro: #FCE6D6;
  --mar: #0B7285;
  --borde: #A99886;
  --linea: #EFE3D0;
  --error: #9B1C1C;
  --error-fondo: #FDECEC;
  --r-control: 12px;
  --r-tarjeta: 20px;
  --ancho: 760px;
  --barra: 76px;
  --t: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 18px/1.5 "Satoshi", "Satoshi-respaldo", system-ui, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: "Clash", "Clash-respaldo", system-ui, sans-serif; font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--acento-hondo); text-underline-offset: 3px; }
a:hover { color: var(--acento); }

:focus-visible { outline: 3px solid var(--mar); outline-offset: 3px; border-radius: 6px; }

/* Cabecera y página */
.cabecera { background: var(--fondo); border-bottom: 1px solid var(--linea); padding-top: env(safe-area-inset-top); }
.cabecera-in { max-width: var(--ancho); margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font-family: "Clash", "Clash-respaldo", sans-serif; font-weight: 600; font-size: 1.05rem; min-height: 44px; }
.cabecera-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-control); color: var(--acento-hondo); font-weight: 700; text-decoration: none; }
.cabecera-nav a:hover { background: var(--acento-claro); }
.pagina { max-width: var(--ancho); margin: 0 auto; padding: 20px 16px calc(32px + env(safe-area-inset-bottom)); }
.pagina.con-barra { padding-bottom: calc(var(--barra) + 24px + env(safe-area-inset-bottom)); }

/* Tarjetas */
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: 20px; margin: 0 0 16px; }
.tarjeta.suave { background: var(--superficie); }
.tarjeta.destacada { background: var(--acento-claro); border-color: #F0C8AC; }

/* Formularios */
.campo { margin: 0 0 18px; }
.campo label, .campo .etiqueta { display: block; font-weight: 700; margin: 0 0 6px; }
.ayuda { color: var(--tinta-2); font-size: 1rem; margin: 6px 0 0; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font: inherit;
  color: var(--tinta);
  background: #fff;
  border: 1.5px solid var(--borde);
  border-radius: var(--r-control);
  transition: border-color var(--t), box-shadow var(--t);
}
textarea { min-height: 120px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--mar); outline-offset: 1px; border-color: var(--mar); }
.casilla { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; min-height: 44px; }
.casilla input { width: 28px; height: 28px; flex: none; margin: 8px 0 0; accent-color: var(--acento); }
.casilla label { font-weight: 400; margin: 0; padding: 6px 0; }
.oculto { display: none !important; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; width: 100%;
  font: 700 1rem/1 "Satoshi", "Satoshi-respaldo", system-ui, sans-serif;
  color: #fff; background: var(--acento); border: 2px solid var(--acento);
  border-radius: var(--r-control); cursor: pointer; text-decoration: none;
  transition: background-color var(--t), border-color var(--t), transform var(--t);
}
.boton:hover { background: var(--acento-hondo); border-color: var(--acento-hondo); color: #fff; }
.boton:active { transform: translateY(1px); }
.boton.secundario { background: transparent; color: var(--acento-hondo); border-color: var(--acento-hondo); }
.boton.secundario:hover { background: var(--acento-claro); color: var(--acento-hondo); }
.boton.peligro { background: var(--error); border-color: var(--error); }
.boton.pequeno { min-height: 44px; padding: 0 16px; width: auto; }
.boton[disabled] { opacity: .55; cursor: not-allowed; }
.acciones { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

/* Avisos */
.error, .aviso, .ok { border-radius: var(--r-control); padding: 12px 16px; margin: 0 0 16px; font-weight: 500; }
.error { background: var(--error-fondo); color: var(--error); border: 1.5px solid #E7B4B4; }
.aviso { background: var(--acento-claro); color: var(--acento-hondo); border: 1.5px solid #F0C8AC; }
.ok { background: #E4F3F5; color: #07505E; border: 1.5px solid #A9D6DC; }
.nota-segura { background: var(--superficie); border-left: 4px solid var(--mar); border-radius: 8px; padding: 12px 14px; font-size: 1rem; color: var(--tinta); margin: 0 0 16px; }

/* Lista de conversaciones */
.lista-conv { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.conv { display: block; background: #fff; border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: 14px 18px; text-decoration: none; color: var(--tinta); min-height: 72px; transition: border-color var(--t), background-color var(--t); }
.conv:hover { border-color: var(--acento); background: var(--fondo); color: var(--tinta); }
.conv-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.conv-nombre { font-weight: 700; }
.conv-meta { color: var(--tinta-2); font-size: 1rem; }
.conv-previa { color: var(--tinta-2); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insignia { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; background: var(--acento); color: #fff; font-weight: 700; font-size: 1rem; }
.insignia.estado { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.filtro { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1.5px solid var(--borde); color: var(--tinta); text-decoration: none; font-weight: 500; }
.filtro.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.estado-vacio { text-align: center; padding: 40px 20px; color: var(--tinta-2); }
.estado-vacio h2 { color: var(--tinta); }

/* Hilo de chat */
.hilo { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.burbuja { max-width: 86%; padding: 10px 14px; border-radius: 18px; overflow-wrap: anywhere; white-space: pre-wrap; }
.burbuja.usuario { align-self: flex-end; background: var(--acento); color: #fff; border-bottom-right-radius: 6px; }
.burbuja.equipo { align-self: flex-start; background: #fff; color: var(--tinta); border: 1px solid var(--linea); border-bottom-left-radius: 6px; }
.burbuja-meta { display: block; font-size: 1rem; opacity: .85; margin-top: 4px; }
.burbuja img { display: block; border-radius: 12px; margin-top: 8px; max-height: 320px; }
.datos-cliente { font-size: 1rem; }
.plantillas { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }

/* Barra de escribir fija */
.barra-escribir {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--fondo); border-top: 1px solid var(--linea);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.barra-escribir-in { max-width: var(--ancho); margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; }
.barra-escribir textarea { min-height: 52px; max-height: 140px; flex: 1; resize: none; }
.barra-escribir .boton { width: auto; flex: none; }

@media (min-width: 640px) {
  .acciones { flex-direction: row; }
  .acciones .boton { width: auto; }
  .boton { width: auto; }
  h1 { font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- Vistas del panel (2026-10-27) ---- */
.burbuja-mia { align-self: flex-end; background: var(--acento); color: #fff; border-bottom-right-radius: 6px; }
.burbuja-otra { align-self: flex-start; background: #fff; color: var(--tinta); border: 1px solid var(--linea); border-bottom-left-radius: 6px; }
.burbuja-texto { margin: 0; }
.burbuja-hora { display: block; font-size: 1rem; opacity: .8; margin-top: 4px; text-align: right; }
.burbuja-foto img { max-height: 320px; border-radius: 12px; }
.hilo-cab { margin: 0 0 12px; }
.hilo-cab h1 { margin: 0 0 4px; }
.pagina:has(.barra-escribir) { padding-bottom: calc(var(--barra) + 120px + env(safe-area-inset-bottom)); }
.previas { display: flex; gap: 8px; flex-wrap: wrap; max-width: var(--ancho); margin: 0 auto 8px; }
.previas:empty { display: none; }
.previa { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.previa img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.previa-quitar, .boton-reintento { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--borde); background: #fff; border-radius: var(--r-control); font: inherit; color: var(--tinta); }
.barra-escribir #estado-envio { max-width: var(--ancho); margin: 4px auto 0; }
.barra-escribir .plantillas { max-width: var(--ancho); margin: 0 auto 8px; overflow-x: auto; flex-wrap: nowrap; }
.barra-escribir .plantillas .boton { white-space: nowrap; }
.prerreserva { border-left: 6px solid var(--acento); }
.prerreserva.estado-pagada { border-left-color: var(--mar); }
.prerreserva.estado-anulada, .prerreserva.estado-devuelta { border-left-color: var(--borde); opacity: .8; }
.prerreserva-importe { font-family: "Clash", "Clash-respaldo", sans-serif; font-weight: 600; font-size: 1.8rem; margin: 0 0 4px; }
details.tarjeta summary { cursor: pointer; list-style: none; }
details.tarjeta[open] summary { margin-bottom: 16px; }
input.oculto, label.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); display: block !important; white-space: nowrap; }

/* Selector de fotos con el aspecto de la casa (antes salía el botón gris del sistema) */
input[type="file"] { font: inherit; font-size: 1rem; color: var(--tinta-2); max-width: 100%; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: 12px; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--tinta); cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
input[type="file"]::file-selector-button:hover { background: var(--acento-claro); border-color: var(--acento); }

/* El espacio del marcado no se pinta: solo el texto del mensaje respeta sus saltos de línea */
.burbuja { white-space: normal; }
.burbuja-texto { white-space: pre-wrap; }

/* Alta de dueños, negocios y socios */
[hidden] { display: none !important; }
.opciones { border: 0; margin: 0 0 18px; padding: 0; }
.opciones legend { font-weight: 700; margin: 0 0 8px; padding: 0; }
.opcion { position: relative; margin: 0 0 10px; }
.opcion input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion label { display: flex; align-items: center; min-height: 56px; padding: 10px 16px 10px 52px; border: 1.5px solid var(--borde); border-radius: 12px; font-weight: 500; position: relative; }
.opcion label::before { content: ""; position: absolute; left: 16px; width: 20px; height: 20px; border: 2px solid var(--borde); border-radius: 50%; background: transparent; }
.opcion input:checked + label { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.opcion input:checked + label::before { border-color: var(--acento); background: var(--acento); box-shadow: inset 0 0 0 4px #fff; }
.opcion input:focus-visible + label { outline: 3px solid var(--acento); outline-offset: 2px; }

/* Reservas por WhatsApp (27-10): una tarjeta plegada por código; se abre solo la que se toca */
.cabecera-nav { display: flex; gap: 2px; align-items: center; }
/* Si los enlaces no caben (el equipo tiene 7 en el teléfono), se desliza la fila del menú y no la página (28-10) */
.cabecera-in .marca { flex: none; }
.cabecera-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cabecera-nav::-webkit-scrollbar { display: none; }
.cabecera-nav a { flex: none; }
/* Con el menú del equipo (3 enlaces) en el teléfono: solo el logo, enlaces más juntos */
@media (max-width: 480px) {
  .cabecera-nav:has(a + a + a) a { padding: 0 9px; }
  .cabecera-in:has(.cabecera-nav a + a + a) .marca span { display: none; }
}
.cabecera-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.enlace-reservas { display: flex; justify-content: space-between; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.buscar-reserva { display: flex; gap: 8px; margin: 0 0 16px; }
.buscar-reserva input { flex: 1; min-width: 0; }
.lista-reservas { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.reserva { margin: 0; }
.reserva > summary { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; cursor: pointer; list-style: none; min-height: 48px; }
.reserva > summary::-webkit-details-marker { display: none; }
.reserva > summary .suave, .reserva > summary .insignia { grid-column: 2; justify-self: start; }
.reserva-codigo { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; }
.reserva.estado-confirmada { border-left: 4px solid #2E7D4F; }
.reserva.estado-cancelada { opacity: .7; }
.mas-datos { margin: 0 0 14px; }
.mas-datos > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }

/* Altas (#302): lo que mandó la persona, sus fotos y las casas del certificador */
.alta > summary strong { grid-column: 1 / -1; }
.alta > summary > span:not(.insignia) { grid-column: 1 / -1; }
.alta > summary .insignia { grid-column: 1 / -1; }
.reserva.estado-aprobada { border-left: 4px solid #2E7D4F; }
.reserva.estado-rechazada { opacity: .7; }
.resumen-alta { white-space: pre-line; background: var(--superficie); border-radius: var(--r-control); padding: 12px 14px; margin: 12px 0; overflow-wrap: anywhere; }
.fotos-alta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.fotos-alta img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-control); display: block; }
.contacto-alta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; }
.contacto-alta a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.casas-cert { border-top: 1px solid var(--linea); margin: 12px 0; padding-top: 12px; }
.casas-cert h3 { margin: 0 0 8px; font-size: 1.05rem; }
.casas-cert ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.casas-cert li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.casas-cert li form { margin: 0; }
.alta .suave strong { overflow-wrap: anywhere; }

/* «Hoy», el centro de control (28-10): en el ordenador, la bandeja a la izquierda y lo demás a la derecha */
.pagina-ancha { max-width: 1180px; }
.hoy-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 12px; }
.hoy-cabeza h1 { margin: 0; }
.hoy { display: grid; gap: 16px; }
.hoy h2 { margin-top: 0; }
.lista-hoy { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cosa { margin: 0; border-left: 6px solid var(--acento); }
.cosa-alta { border-left-color: var(--mar); }
.cosa h3 { margin: 2px 0 4px; font-size: 1.15rem; }
.cosa-tipo { margin: 0; font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-2); }
.cosa-form { margin-top: 12px; }
.campo-linea { margin-bottom: 10px; }
.campo-linea input { max-width: 220px; }
.acciones-fila { flex-direction: row; flex-wrap: wrap; align-items: center; }
.enlace-suave { color: var(--tinta-2); min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
.hecho-deshacer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.hecho-deshacer form { margin: 0; }
.todo-al-dia span { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #E4F3F5; color: #07505E; font-size: 2rem; font-weight: 700; }
.todo-al-dia h3 { color: var(--tinta); margin: 12px 0 4px; }
.cifra { font-family: "Clash", "Clash-respaldo", sans-serif; font-weight: 600; font-size: 2rem; margin: 0; }
.pendientes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.pendientes li { display: flex; align-items: flex-start; gap: 10px; }
.pendientes li span { padding-top: 10px; }
.pendientes form { margin: 0; }
.marca-hecho { width: 44px; height: 44px; flex: none; border: 0; background: transparent; cursor: pointer; position: relative; }
.marca-hecho::before { content: ""; position: absolute; inset: 11px; border: 2px solid var(--borde); border-radius: 7px; }
.marca-hecho:hover::before { border-color: var(--acento); }
.marca-hecho.hecho::before { content: "✓"; display: grid; place-items: center; background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 700; }
.pendientes.hechos span { text-decoration: line-through; color: var(--tinta-2); }
.pendiente-nuevo { display: flex; gap: 8px; }
.pendiente-nuevo input { flex: 1; min-width: 0; }
.casa-hoy { border-top: 1px solid var(--linea); padding: 10px 0; }
.casa-hoy summary { cursor: pointer; display: grid; gap: 2px; min-height: 44px; }
.casa-hoy form { margin-top: 10px; }
@media (min-width: 960px) {
  .hoy { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .hoy-lado { position: sticky; top: 16px; }
}

/* Panel del socio (28-10): cifras, gráfica en SVG del servidor (colores aquí, nada en línea) y lo que trajo */
.aviso-ganancias { display: grid; gap: 4px; text-decoration: none; color: var(--tinta); }
.aviso-ganancias:hover { color: var(--tinta); border-color: var(--acento); }
.ganancias-cifras { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 16px; }
.cifra-caja { margin: 0; }
.cifra-caja h2 { margin: 0 0 4px; }
.comparar { margin: 6px 0 0; font-weight: 700; font-size: 1rem; color: var(--tinta-2); }
.comparar.sube { color: #07505E; }
.comparar.baja { color: var(--acento-hondo); }
.grafica { display: block; width: 100%; height: 160px; margin: 8px 0 4px; }
.graf-barra { fill: #E9B597; }
.graf-barra.esta { fill: var(--acento); }
.graf-barra.vacia { fill: var(--linea); }
.graf-pie { display: flex; justify-content: space-between; margin: 0 0 12px; font-size: 1rem; color: var(--tinta-2); }
.lista-ganancias { list-style: none; margin: 0; padding: 0; }
.lista-ganancias li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--linea); }
.lista-ganancias li:first-child { border-top: 0; }
.gan-casa { font-weight: 700; }
.gan-meta { grid-column: 1; color: var(--tinta-2); font-size: 1rem; }
.gan-usd { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; color: #07505E; text-align: right; }
.gan-usd.terminada { color: var(--tinta-2); }

/* Fechas que eligió la web, no el cliente */
.aviso-propuestas { margin: 6px 0 0; padding: 6px 10px; border-left: 4px solid var(--acento); background: var(--acento-claro); color: var(--acento-hondo); font-weight: 700; border-radius: 4px; }

/* Face ID y huella (passkeys, 28-10) */
.faceid-entrar { display: grid; gap: 8px; margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--linea); }
.lista-passkeys { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.lista-passkeys li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.lista-passkeys span { display: grid; gap: 2px; }
.lista-passkeys small { color: var(--tinta-2); }
.lista-passkeys form { margin: 0; }
.altas-fallidas { margin: 12px 0 16px; }
.altas-fallidas ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.altas-fallidas li { padding: 8px 0; border-bottom: 1px solid var(--linea); }

/* v4 · Madera y palma (2026-11-02): el panel con el mismo aspecto que la web. Terracota = lo principal del equipo y reservar; verde = ganar. */
:root { --fondo: #FFFBF3; --superficie: #F9EBD3; --tinta: #1D2A22; --tinta-2: #4C5A50; --linea: rgba(29,42,34,.13); --acento-claro: #F4E4CD; }
body { background: #F6EBD6; }
.fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; contain: strict; pointer-events: none; }
.f { position: absolute; inset: -9%; background-position: center; background-size: cover; background-repeat: no-repeat; will-change: transform; }
.rafaga { position: absolute; inset: 0; will-change: transform; animation: rafaga 31s ease-in-out infinite alternate; }
.rafaga-2 { animation-duration: 37s; animation-direction: alternate-reverse; }
.f-lejos { background-image: url(/fondo/sombra-lejos.webp); animation: brisa1 23s ease-in-out infinite alternate; }
.f-cerca { background-image: url(/fondo/sombra-cerca.webp); animation: brisa2 13s ease-in-out infinite alternate; }
.f-sol { inset: 0; background: radial-gradient(70vmax 55vmax at 88% -6%, rgba(255,200,110,.55), rgba(255,200,110,0) 70%); animation: sol 15s ease-in-out infinite alternate; will-change: opacity; }
@keyframes brisa1 { from { transform: translate3d(-1.5%, .5%, 0); } to { transform: translate3d(1.5%, -.5%, 0); } }
@keyframes brisa2 { from { transform: translate3d(2.4%, -.7%, 0); } to { transform: translate3d(-2.4%, .7%, 0); } }
@keyframes rafaga { from { transform: translate3d(-.9%, 0, 0); } to { transform: translate3d(1.1%, 0, 0); } }
@keyframes sol { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .f, .rafaga { animation: none; } }
.cabecera { background: #E2B57F; border-bottom: 1px solid rgba(70,45,15,.28); box-shadow: 0 6px 18px rgba(60,40,15,.14); }
.cabecera-nav a { color: var(--tinta); }
.cabecera-nav a:hover { background: rgba(255,251,243,.6); }
.pagina { background: var(--fondo); border-radius: 24px; margin: 14px auto; width: calc(100% - 20px); box-shadow: 0 1px 2px rgba(60,40,15,.08), 0 12px 30px rgba(60,40,15,.14); }
.tarjeta { background: #FFFDF8; }
.tarjeta.destacada { background: #DDE8DA; border-color: rgba(31,91,66,.3); }
.boton { border-radius: 16px; }
.boton.ganar { background: linear-gradient(180deg, #27704F, #1B5039); border-color: #1B5039; color: #fff; }
.boton.ganar:hover { background: #143426; border-color: #143426; }
.puertas { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.puertas legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.puertas label strong { display: block; font-family: "Clash", "Clash-respaldo", sans-serif; font-weight: 600; font-size: 1.15rem; }
.puertas label small { display: block; color: var(--tinta-2); font-size: .92rem; line-height: 1.35; margin-top: 2px; }
.enlace-cambiar { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; font-weight: 700; color: var(--acento-hondo); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mas-datos { margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: var(--superficie); }
.mas-datos summary { min-height: 32px; font-weight: 700; cursor: pointer; }

/* v4b */
.puertas .opcion label { display: block; line-height: 1.3; }
.puertas .opcion { align-items: flex-start; }

/* Sin textura de madera (Stefan 02-11): cabecera crema lisa, línea color miel y pie liso */
.cabecera { background: var(--fondo); border-bottom: 2px solid #E2B57F; box-shadow: 0 6px 18px rgba(60,40,15,.1); }
.cabecera-nav a:hover { background: var(--acento-claro); }