:root{
  /* Paleta cálida (rojo vivo "Latido"). Los nombres --verde se conservan
     por comodidad, pero ahora son tonos rojizos. */
  --verde:#e23744; --verde-osc:#b21e2d; --fondo:#f6ece7; --barra:#e23744;
  --mio:#ffdcd4; --suyo:#ffffff; --texto:#2b2320; --gris:#8c7f79;
  --sombra:0 1px 1px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--texto)}
body{background:var(--fondo)}

/* --- Tarjetas de login / entrada --- */
.centro{display:flex;align-items:center;justify-content:center;min-height:100%;padding:16px;background:linear-gradient(160deg,#0b8457,#075e43)}
.tarjeta{background:#fff;border-radius:18px;padding:28px 24px;width:100%;max-width:360px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.logo{font-size:40px;margin:0}
.tarjeta h2{margin:.3em 0 .2em}
.gris{color:var(--gris)}
.pequeno{font-size:.82rem;margin-top:16px}
.error{color:#b00020;background:#fde7ea;border-radius:8px;padding:8px 10px;font-size:.9rem}
.campo{width:100%;padding:13px 14px;margin:10px 0;border:1px solid #d1d5db;border-radius:10px;font-size:1rem}
.boton{width:100%;padding:13px;border:0;border-radius:10px;background:var(--verde);color:#fff;font-size:1rem;font-weight:600;cursor:pointer}
.boton:hover{background:var(--verde-osc)}

/* --- Estructura de app (chat) --- */
.app{display:flex;flex-direction:column;height:100%}
.barra{display:flex;align-items:center;gap:8px;background:var(--barra);color:#fff;padding:10px 14px;min-height:52px}
.barra .titulo{font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.en-linea{display:inline;margin:0}
.icono{background:transparent;border:0;color:inherit;font-size:1.35rem;cursor:pointer;padding:4px 8px;line-height:1;border-radius:8px}
.icono:hover{background:rgba(0,0,0,.08)}

.mensajes{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:6px}
.msg{max-width:78%;padding:7px 10px;border-radius:10px;box-shadow:var(--sombra);word-wrap:break-word;position:relative}
.msg.suyo{align-self:flex-start;background:var(--suyo);border-top-left-radius:2px}
.msg.mio{align-self:flex-end;background:var(--mio);border-top-right-radius:2px}
.msg .hora{display:block;font-size:.68rem;color:var(--gris);text-align:right;margin-top:2px}
.msg img,.msg video{max-width:100%;border-radius:8px;display:block;margin-bottom:3px;cursor:pointer}
.msg audio{width:230px;max-width:100%}

.redactar{display:flex;align-items:center;gap:6px;padding:8px;background:rgba(243,241,236,.45);backdrop-filter:blur(4px);border-top:1px solid rgba(221,221,221,.5)}
.campo-msg{flex:1;padding:11px 14px;border:1px solid rgba(209,213,219,.6);border-radius:22px;font-size:1rem;background:rgba(255,255,255,.7)}
.enviar{background:var(--verde);color:#fff;border-radius:50%;width:42px;height:42px;font-size:1.1rem}
.enviar:hover{background:var(--verde-osc)}
.grabando{color:#b00020!important;animation:pulso 1s infinite}
@keyframes pulso{50%{opacity:.4}}

/* Barra de grabación estilo WhatsApp */
.grabacion{display:none;flex:1;align-items:center;gap:10px}
.redactar.rec > :not(#grabacion){display:none}
.redactar.rec #grabacion{display:flex}
.rec-dot{width:12px;height:12px;border-radius:50%;background:#e23744;flex-shrink:0;animation:pulso 1s infinite}
.rec-tiempo{font-variant-numeric:tabular-nums;font-weight:700;color:#e23744;min-width:42px}
.rec-label{flex:1;color:var(--gris)}

/* --- Previsualización de adjunto antes de enviar --- */
.previo{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;z-index:40}
.previo.oculto{display:none}
.previo img,.previo video{max-width:92vw;max-height:60vh;border-radius:10px}
.previo .fila{display:flex;gap:12px}

/* --- Admin: dos columnas --- */
.admin{height:100%}
.columnas{display:flex;height:100%}
.lista{width:340px;max-width:40%;border-right:1px solid #d9d4cc;background:#fff;display:flex;flex-direction:column}
.lista .barra{background:var(--verde-osc)}
.nueva{margin:10px;width:calc(100% - 20px);border-radius:10px}
#conversaciones{overflow-y:auto;flex:1}
.conv{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #eee;cursor:pointer}
.conv:hover,.conv.activa{background:#f0efe9}
.conv .avatar{width:42px;height:42px;border-radius:50%;background:var(--verde);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.conv .datos{flex:1;min-width:0}
.conv .nom{font-weight:600;display:flex;justify-content:space-between;gap:6px}
.conv .nom .t{font-size:.7rem;color:var(--gris);font-weight:400}
.conv .ult{color:var(--gris);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .badge{background:var(--verde);color:#fff;border-radius:11px;min-width:21px;height:21px;padding:0 6px;font-size:.75rem;display:flex;align-items:center;justify-content:center}
.conv.inactiva{opacity:.5}
.hilo{flex:1;display:flex;flex-direction:column;min-width:0}
.hilo .mensajes{background:transparent;position:relative;z-index:1}
.admin .columnas{position:relative;z-index:1}

/* --- Modal --- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal.oculto{display:none}
.modal-caja{background:#fff;border-radius:16px;padding:22px;max-width:380px;width:100%;text-align:center}
.modal-caja h3{margin-top:0}
.modal-caja img.qr{width:220px;height:220px;image-rendering:pixelated;border:1px solid #eee;border-radius:10px}
.modal-caja .enlace{word-break:break-all;background:#f3f1ec;border-radius:8px;padding:8px;font-size:.82rem;margin:8px 0}
.modal-caja .codigo{font-family:ui-monospace,monospace;font-size:1.1rem;letter-spacing:1px;background:#eef6f0;border:1px dashed var(--verde);border-radius:8px;padding:8px;margin:6px 0}
.fila-botones{display:flex;gap:8px;margin-top:12px}
.fila-botones .boton{flex:1}
.boton.gris2{background:#6b7280}
.boton.rojo{background:#b00020}
.cerrar-x{position:absolute}

.solo-movil{display:none}
.vacio{color:var(--gris);text-align:center;margin-top:40px}

/* --- Avatar / perfil --- */
.avatar-grande{width:100px;height:100px;border-radius:50%;object-fit:cover;background:#eef6f0;display:none;margin:0 auto 6px}
#avatar-zona{display:block;cursor:pointer;margin:6px 0 10px;color:var(--verde);font-weight:600}
.barra .avatar-mini{width:34px;height:34px;border-radius:50%;object-fit:cover;background:rgba(255,255,255,.3)}
.conv .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.conv .avatar{overflow:hidden}
.sub-nombre{font-size:.72rem;color:rgba(255,255,255,.85);font-weight:400}

/* --- Bienvenida --- */
.bienvenida .marca{font-size:1.7rem;margin:.1em 0 .1em;color:var(--verde-osc);letter-spacing:.5px}
.bienvenida .lema{color:var(--gris);margin:.2em 0 1.1em}
.privacidad{list-style:none;padding:0;margin:0 0 16px;text-align:left}
.privacidad li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:#374151;margin:9px 0;line-height:1.35}
.privacidad li span{font-size:1.1rem;flex-shrink:0}

/* --- Presentación de marca (intro) --- */
.intro{position:fixed;inset:0;z-index:100;background:#0a0a0c;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px;text-align:center}
.intro.oculto{display:none}
.intro.fundido{opacity:0;transition:opacity .6s ease;pointer-events:none}
.intro-fase{display:flex;flex-direction:column;align-items:center;max-width:380px;width:100%}
.intro-fase.oculto{display:none}
.intro-marca{font-size:2.4rem;letter-spacing:2px;margin:0 0 18px;color:#ff3b5c;text-shadow:0 0 22px rgba(255,59,92,.55)}
.intro-privacidad{list-style:none;padding:0;margin:0 0 24px;text-align:left}
.intro-privacidad li{font-size:.9rem;color:#c9c9d2;margin:11px 0;line-height:1.4}
.intro #intro-continuar{max-width:220px}
/* corazón */
.corazon-wrap{transform:scale(.45);transition:transform 3.2s cubic-bezier(.2,.7,.3,1)}
.corazon-wrap.crece{transform:scale(1.25)}
.corazon-svg{width:150px;height:auto;display:block;fill:#ff3b5c;filter:drop-shadow(0 0 26px rgba(255,59,92,.7))}
.corazon-wrap.late .corazon-svg{animation:latido .85s ease-in-out infinite}
@keyframes latido{
  0%{transform:scale(1)}
  12%{transform:scale(1.28)}
  24%{transform:scale(1.02)}
  36%{transform:scale(1.2)}
  55%{transform:scale(1)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .corazon-wrap,.corazon-wrap.late .corazon-svg{transition:none;animation:none}
}

/* --- Color de burbuja por SEXO (semitransparente para ver el fondo) --- */
.msg{backdrop-filter:blur(2px)}
.msg.sx-m{background:rgba(255,196,219,.78)}   /* mujer rosa */
.msg.sx-h{background:rgba(198,221,255,.78)}   /* hombre azul */
.msg.sx-x{background:rgba(255,255,255,.76)}   /* sin sexo */

/* --- Cielo animado según la hora real de Melilla --- */
/* En el chat del visitante el fondo de los mensajes se ve el cielo */
body.app:not(.admin){background:transparent}
/* contenido por encima del cielo (y el cielo visible también en móvil, por eso z-index 0 y no -1) */
body.app:not(.admin) .mensajes{background:transparent;position:relative;z-index:1}
body.app:not(.admin) .barra,body.app:not(.admin) .redactar{position:relative;z-index:2}
.cielo{position:fixed;inset:0;z-index:0;overflow:hidden;transition:background 2.5s ease;background:#87cefa}
/* Fondo LISO (escena animada aparcada): degradado suave y romántico */
.cielo.plano{background:linear-gradient(160deg,#fcebef 0%,#f7dbe3 55%,#f1cdda 100%)}
@media (prefers-color-scheme: dark){.cielo.plano{background:linear-gradient(160deg,#241824 0%,#2c1f33 60%,#1c1622 100%)}}
.cielo.sky-amanecer{background:linear-gradient(to bottom,#ff9a76 0%,#ffd194 45%,#a1c4fd 100%)}
.cielo.sky-dia{background:linear-gradient(to bottom,#3a8ddb 0%,#87cefa 55%,#d6f0ff 100%)}
.cielo.sky-atardecer{background:linear-gradient(to bottom,#ff5e62 0%,#ff9966 35%,#6a3a8c 100%)}
.cielo.sky-noche{background:linear-gradient(to bottom,#070b1e 0%,#172350 60%,#2b3a74 100%)}
.cielo.nublado{filter:saturate(.6) brightness(.9)}
.cielo.nublado::after{content:"";position:absolute;inset:0;background:rgba(150,160,170,.38)}

/* Sol / Luna */
.astro{position:absolute;left:50%;top:22%;width:72px;height:72px;border-radius:50%;transform:translate(-50%,-50%);transition:left 2s ease,top 2s ease,background 2.5s ease,box-shadow 2.5s ease;z-index:1}
.sky-amanecer .astro,.sky-dia .astro,.sky-atardecer .astro{
  background:radial-gradient(circle,#fff7cf,#ffd84a);box-shadow:0 0 60px 16px rgba(255,214,74,.65)}
.sky-amanecer .astro{background:radial-gradient(circle,#fff0cf,#ff9a56);box-shadow:0 0 55px 14px rgba(255,140,80,.5)}
.sky-atardecer .astro{background:radial-gradient(circle,#ffe6c0,#ff7a4a);box-shadow:0 0 55px 16px rgba(255,100,70,.5)}
.sky-noche .astro{background:radial-gradient(circle at 64% 38%,#f6f4e8,#c9cdd8);box-shadow:0 0 34px 8px rgba(220,225,255,.45)}

/* Estrellas (solo de noche) */
.estrellas{position:absolute;inset:0;opacity:0;transition:opacity 2.5s ease;
  background-image:radial-gradient(1.4px 1.4px at 15% 20%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 70% 15%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 40% 35%,#fff,transparent),
  radial-gradient(1.1px 1.1px at 85% 40%,#fff,transparent),
  radial-gradient(1.3px 1.3px at 25% 55%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 60% 60%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 90% 70%,#fff,transparent);
  animation:titila 4s ease-in-out infinite}
.sky-noche .estrellas{opacity:.9}
@keyframes titila{50%{opacity:.5}}

/* Nubes (solo si está nublado) */
.nubes{position:absolute;inset:0;opacity:.5;transition:opacity 2s ease}
.cielo.nublado .nubes{opacity:1}
.sky-noche .nubes{opacity:.28}
.nubes span{position:absolute;background:rgba(255,255,255,.9);border-radius:60px;filter:blur(3px);
  width:160px;height:46px;animation:nube linear infinite}
.nubes span::before{content:"";position:absolute;top:-24px;left:34px;width:80px;height:70px;
  background:inherit;border-radius:50%}
.nubes span:nth-child(1){top:70px;transform:scale(1);animation-duration:70s}
.nubes span:nth-child(2){top:140px;transform:scale(.7);animation-duration:95s;animation-delay:-30s;opacity:.8}
.nubes span:nth-child(3){top:40px;transform:scale(1.3);animation-duration:120s;animation-delay:-60s;opacity:.7}
.nubes span:nth-child(4){top:30%;transform:scale(.85);animation-duration:105s;animation-delay:-15s;opacity:.75}
.nubes span:nth-child(5){top:45%;transform:scale(.6);animation-duration:135s;animation-delay:-80s;opacity:.6}
.nubes span:nth-child(6){top:20%;transform:scale(1.1);animation-duration:88s;animation-delay:-45s;opacity:.8}
@keyframes nube{from{left:-220px}to{left:110%}}

/* Silueta de Melilla la Vieja sobre el mar */
.horizonte{position:absolute;left:0;right:0;bottom:0;width:100%;height:70%;z-index:0}
.ciudad{fill:#2c3350;transition:fill 2.5s ease}
.mar{fill:rgba(90,140,200,.72);transition:fill 2.5s ease}
.ventanas{fill:#ffd766;opacity:0;transition:opacity 2.5s ease}
.reflejo{fill:#fff;opacity:0;transition:opacity 2.5s ease}
.luzfaro{fill:#fff3b0;opacity:.35;animation:faro 3.5s ease-in-out infinite}
@keyframes faro{50%{opacity:.9}}

.sky-amanecer .ciudad{fill:#6a4766} .sky-amanecer .mar{fill:rgba(95,135,180,.70)}
.sky-dia .ciudad{fill:#33516b}      .sky-dia .mar{fill:rgba(55,130,195,.78)}
.sky-atardecer .ciudad{fill:#3d2748} .sky-atardecer .mar{fill:rgba(110,80,130,.74)}
.sky-atardecer .ventanas{opacity:.5}
.sky-noche .ciudad{fill:#080c1e}     .sky-noche .mar{fill:rgba(10,20,50,.85)}
.sky-noche .ventanas{opacity:.9}
.sky-noche .reflejo{opacity:.18}
.cielo.nublado .ventanas{opacity:.25}

/* Olas: se mueven solas; su ritmo cambia con el estado real del mar */
.ola{stroke:rgba(255,255,255,.62);stroke-width:3.2;animation:oleaje 9s linear infinite}
.ola2{stroke:rgba(255,255,255,.5);opacity:.8;animation:oleaje 14s linear infinite reverse}
/* espuma: puntitos blancos que se mueven por el mar */
.espuma{position:absolute;background:rgba(255,255,255,.85);border-radius:50%;filter:blur(1px);pointer-events:none}

/* Playa (arena en primer plano) con vida: gente, perros, niños */
.playa{position:absolute;left:0;right:0;bottom:0;height:30%;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(238,222,180,0),rgba(230,208,160,.95) 30%,rgba(210,182,132,.98));
  clip-path:polygon(0% 100%, 100% 100%, 82% 0%, 18% 0%);  /* perspectiva suave */
  transition:filter 2.5s ease}
.playa::after{content:"";position:absolute;left:0;right:0;top:0;height:14%;background:rgba(255,255,255,.25)}  /* orilla mojada */
.sky-noche .playa{filter:brightness(.42) saturate(.7)}
.sky-atardecer .playa{filter:brightness(.88) sepia(.18)}
.sky-amanecer .playa{filter:brightness(.95) sepia(.1)}

/* Palmeras que se mecen con el viento (más si el mar está movido) */
.palmeras{display:none}  /* obsoleto: las palmeras ahora son sprites dibujados (boats.js montaPlaya) */
.palma{position:absolute;bottom:1%;transform-origin:bottom center;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3))}
.palma-svg{display:block}
.palma.p1{left:2%;animation:vaiven 5s ease-in-out infinite}
.palma.p1 .palma-svg{width:130px}
.palma.p2{right:3%;animation:vaiven 6.5s ease-in-out infinite;animation-delay:-2s}
.palma.p2 .palma-svg{width:100px}
@keyframes vaiven{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
.cielo.olas-fuerte .palma{animation-duration:2.6s}
.cielo.olas-calma .palma{animation-duration:8s}
.sky-noche .palma{filter:brightness(.5) drop-shadow(0 3px 3px rgba(0,0,0,.45))}

/* --- Modo FOTO-DIBUJO: Melilla la Vieja de fondo con vida encima --- */
.cielo.foto{background:#0b1226}
.fondo-foto{position:absolute;inset:0;background:url('/static/melilla.jpg') center/cover no-repeat;z-index:0}
.tinte{position:absolute;inset:0;z-index:0;transition:background 2.5s ease;background:transparent}
.cielo.sky-amanecer .tinte{background:linear-gradient(rgba(255,170,90,.20),rgba(255,140,80,.12))}
.cielo.sky-atardecer .tinte{background:linear-gradient(rgba(255,120,60,.22),rgba(110,40,90,.30))}
.cielo.sky-noche .tinte{background:linear-gradient(rgba(6,12,42,.50),rgba(6,12,42,.72))}
.cielo.foto.nublado .tinte{background:rgba(120,130,140,.26)}
/* en modo foto se ocultan las capas dibujadas (el dibujo ya las trae) */
.cielo.foto .horizonte,.cielo.foto .nubes,.cielo.foto .estrellas,.cielo.foto .melilla,.cielo.foto .palmeras,.cielo.foto .playa{display:none}
/* los dibujos, "en acuarela" para que CUADREN con la foto: suaves, color rebajado, cálidos */
.cielo.foto .barcos .spr{filter:saturate(.72) contrast(.9) brightness(1.05) sepia(.12) blur(.6px);opacity:.9}
.cielo.foto .barcos .barco{filter:drop-shadow(0 2px 3px rgba(0,0,0,.16))}
.cielo.foto .barcos .estela{opacity:.5}
/* créditos de la foto (CC BY-SA 4.0) */
.credito{position:fixed;right:6px;bottom:2px;z-index:3;font-size:9px;color:rgba(255,255,255,.55);pointer-events:none}
@keyframes oleaje{to{transform:translateX(120px)}}
.cielo.olas-calma .ola{animation-duration:18s}
.cielo.olas-calma .ola2{animation-duration:26s}
.cielo.olas-fuerte .ola{animation-duration:5s;stroke-width:3.4}
.cielo.olas-fuerte .ola2{animation-duration:8s;stroke-width:3}
.sky-noche .olas{opacity:.5}

/* Barcos cruzando el mar (vela, motor y el Melillero) */
.barcos{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.barco{position:absolute;will-change:transform;line-height:1;filter:drop-shadow(0 3px 3px rgba(0,0,0,.28))}
img.barco{display:block;height:auto;user-select:none}
.estela{position:absolute;height:5px;border-radius:5px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75));pointer-events:none}

/* --- Panel de emojis y stickers --- */
.emojipanel{background:#fff;border-top:1px solid #ddd;height:240px;display:flex;flex-direction:column;z-index:30}
.emojipanel.oculto{display:none}
.ep-tabs{display:flex;border-bottom:1px solid #eee}
.ep-tab{flex:1;padding:10px;border:0;background:#f7f5f1;cursor:pointer;font-size:.9rem}
.ep-tab.activa{background:#fff;font-weight:600;color:var(--verde)}
.ep-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:2px;padding:8px}
.ep-grid.oculto{display:none}
.ep-item{border:0;background:transparent;font-size:1.65rem;cursor:pointer;padding:4px;border-radius:8px;line-height:1}
.ep-item:hover{background:#f0efe9}
.ep-item.ep-sticker{font-size:2.4rem}

/* Sticker enviado: grande y sin burbuja */
.msg.es-sticker{background:transparent!important;box-shadow:none;padding:2px}
.msg.es-sticker .sticker{font-size:58px;line-height:1.05}

/* --- Móvil --- */
@media (max-width:720px){
  .lista{width:100%;max-width:100%}
  .columnas{position:relative}
  .hilo{position:absolute;inset:0;background:var(--fondo);transform:translateX(100%);transition:transform .2s}
  .admin.ver-hilo .hilo{transform:translateX(0)}
  .admin.ver-hilo .lista{display:none}
  .solo-movil{display:inline-block}
}