/* Marina, la asistente de casasdelacosta (copia del chat de Luz con los colores de la marca) */
.marina { position: fixed; right: 22px; bottom: 22px; z-index: 900; font-size: .95rem; }
.marina-foto { position: relative; display: block; border-radius: 50%; overflow: hidden; background: var(--mar); flex: none; }
.marina-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.marina-foto .f-ojos, .marina-foto .f-habla { opacity: 0; }
.marina.parpadea .marina-foto .f-ojos { opacity: 1; }
.marina.hablando.boca .marina-foto .f-habla { opacity: 1; }
.marina.hablando.boca.parpadea .marina-foto .f-ojos { opacity: 0; }

.marina-boton { position: relative; width: 88px; height: 88px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; animation: marina-flota 5s ease-in-out infinite; }
.marina-foto-boton { width: 100%; height: 100%; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--mar), 0 16px 34px rgba(11, 46, 79, .38); transition: transform .25s; }
.marina-boton:hover .marina-foto-boton { transform: scale(1.05); }
.marina-boton::before, .marina-boton::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--mar); opacity: 0; animation: marina-onda 3.2s ease-out infinite; pointer-events: none; }
.marina-boton::after { animation-delay: 1.6s; }
.marina-en-linea { position: absolute; right: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #22c55e; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: marina-pulso 2s infinite; }
.marina-nombre { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); background: var(--noche); color: #fff; font-size: .74rem; font-weight: 800; padding: 3px 12px; border-radius: 99px; letter-spacing: .04em; box-shadow: 0 4px 10px rgba(11, 46, 79, .3); }
.marina.abierta .marina-boton { animation: none; }
.marina.abierta .marina-boton::before, .marina.abierta .marina-boton::after { display: none; }
.marina.saluda .marina-boton { animation: marina-saluda 1s ease-in-out 3; }
.marina-bocadillo { position: absolute; right: 104px; bottom: 22px; width: 250px; background: #fff; color: var(--tinta); padding: 14px 16px; border-radius: 18px 18px 4px 18px; box-shadow: 0 18px 40px rgba(11, 46, 79, .22); cursor: pointer; line-height: 1.4; animation: marina-entra .45s cubic-bezier(.2, .9, .3, 1.3); border: 1px solid #f3d2c2; }
.marina-bocadillo b { color: var(--noche); }

.marina-panel { position: absolute; right: 0; bottom: 108px; width: 390px; max-width: calc(100vw - 32px); height: min(620px, calc(100vh - 140px)); display: flex; flex-direction: column; background: #fff; border-radius: 26px; box-shadow: 0 30px 80px rgba(11, 46, 79, .35); overflow: hidden; animation: marina-entra .3s ease-out; }
.marina-panel[hidden] { display: none !important; }
.marina-panel header { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: linear-gradient(120deg, var(--marino-3), var(--noche) 55%, var(--noche-2)); color: #fff; position: relative; }
.marina-panel header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--degradado); }
.marina-foto-mini { width: 48px; height: 48px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mar); }
.marina-titulo { flex: 1; min-width: 0; }
.marina-titulo b { display: block; font-size: 1.1rem; letter-spacing: .01em; }
.marina-titulo span { font-size: .78rem; opacity: .9; }
.marina-titulo span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #4ade80; vertical-align: 1px; }
.marina-icono { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.05rem; line-height: 1; cursor: pointer; flex: none; }
.marina-icono:hover { background: rgba(255, 255, 255, .28); }
.marina-cerrar { font-size: 1.5rem; }
.marina-mensajes { flex: 1; overflow-y: auto; padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 10px; background: radial-gradient(circle at 50% 0, #fff7e0 0, var(--fondo) 55%); }
.marina-portada { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 10px; }
.marina-foto-grande { width: 112px; height: 112px; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--mar), 0 14px 30px rgba(11, 46, 79, .25); margin-bottom: 10px; }
.marina-portada b { font-size: 1.15rem; color: var(--noche); }
.marina-portada span { font-size: .8rem; color: var(--gris); }
.marina-msg { max-width: 84%; padding: 10px 14px; border-radius: 18px; line-height: 1.45; overflow-wrap: anywhere; animation: marina-msg .25s ease-out; }
.marina-de-marina { position: relative; align-self: flex-start; margin-left: 34px; background: #fff; color: var(--tinta); border-bottom-left-radius: 5px; box-shadow: 0 3px 12px rgba(11, 46, 79, .08); }
.marina-de-marina::before { content: ''; position: absolute; left: -34px; bottom: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--mar) url(/static/img/marina.jpg) center / cover; box-shadow: 0 0 0 2px #fff; }
.marina-de-marina a { color: var(--noche-2); font-weight: 700; }
.marina-de-usuario { align-self: flex-end; background: linear-gradient(135deg, var(--noche-2), var(--noche)); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 3px 12px rgba(11, 46, 79, .18); }
.marina-voz { font-style: italic; }
.marina-error { background: #fff4f4; color: var(--rojo); }
.marina-nota { background: #fff8e6; color: #7a4a00; font-size: .85rem; }
.marina-escribiendo { display: flex; gap: 5px; padding: 14px 16px; }
.marina-escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--mar); animation: marina-puntos 1s infinite; }
.marina-escribiendo i:nth-child(2) { animation-delay: .15s; }
.marina-escribiendo i:nth-child(3) { animation-delay: .3s; }
.marina-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; background: var(--fondo); }
.marina-sugerencias[hidden] { display: none; }
.marina-sugerencias button { border: 1px solid #ffe0a0; background: #fffaf0; color: #6b4300; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .2s; }
.marina-sugerencias button:hover { background: #ffefc2; }
.marina-escribir { display: flex; gap: 8px; padding: 12px 14px; background: var(--fondo); }
.marina-escribir[hidden] { display: none; }
.marina-escribir input { flex: 1; min-width: 0; border: 1px solid var(--linea); border-radius: 99px; padding: 12px 16px; font: inherit; background: #fff; box-shadow: inset 0 1px 3px rgba(11, 46, 79, .05); }
.marina-escribir input:focus { outline: 2px solid var(--mar); border-color: transparent; }
.marina-mic, .marina-enviar { width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: transform .15s; }
.marina-mic { background: #fff; color: var(--noche); box-shadow: 0 0 0 1px var(--linea); }
.marina-mic:hover { color: #c2410c; box-shadow: 0 0 0 2px var(--mar); }
.marina-enviar { background: var(--degradado); color: #fff; font-size: 1.1rem; }
.marina-mic:active, .marina-enviar:active { transform: scale(.92); }
.marina-grabando { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff1f1; color: #991b1b; font-weight: 600; }
.marina-grabando[hidden] { display: none; }
.marina-rec { width: 12px; height: 12px; border-radius: 50%; background: #dc2626; animation: marina-pulso-rojo 1s infinite; flex: none; }
.marina-ondas { display: flex; gap: 3px; align-items: center; height: 22px; flex: 1; }
.marina-ondas i { width: 4px; height: 6px; border-radius: 3px; background: #dc2626; animation: marina-onda-voz .9s ease-in-out infinite; }
.marina-ondas i:nth-child(2) { animation-delay: .1s; } .marina-ondas i:nth-child(3) { animation-delay: .2s; } .marina-ondas i:nth-child(4) { animation-delay: .3s; } .marina-ondas i:nth-child(5) { animation-delay: .4s; }
.marina-rec-cancelar, .marina-rec-enviar { border: 0; border-radius: 99px; padding: 8px 12px; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.marina-rec-cancelar { background: transparent; color: #991b1b; }
.marina-rec-enviar { background: #dc2626; color: #fff; }
.marina-aviso { margin: 0; padding: 0 14px 10px; background: var(--fondo); color: var(--gris-2); font-size: .7rem; line-height: 1.3; }
.marina.escucha .marina-foto-mini { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #dc2626; }
@keyframes marina-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes marina-onda { 0% { transform: scale(.95); opacity: .8; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes marina-pulso { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@keyframes marina-pulso-rojo { 50% { opacity: .3; } }
@keyframes marina-onda-voz { 0%, 100% { height: 6px; } 50% { height: 20px; } }
@keyframes marina-saluda { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.08) rotate(-4deg); } 60% { transform: scale(1.08) rotate(4deg); } }
@keyframes marina-entra { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes marina-msg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes marina-puntos { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 560px) {
  .marina { right: 12px; bottom: 14px; }
  .marina-boton { width: 70px; height: 70px; }
  .marina-panel { position: fixed; right: 8px; left: 8px; bottom: 96px; width: auto; max-width: none; height: calc(100vh - 116px); height: calc(100dvh - 116px); }
  .marina-bocadillo { right: 84px; bottom: 14px; width: 210px; }
  .marina-foto-grande { width: 88px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .marina-boton, .marina-boton::before, .marina-boton::after, .marina-en-linea { animation: none !important; }
}
@media print { .marina { display: none; } }