/* Burbuja de chat — Centro Náutico Murcia. Marca: cian #00B4D8, navy #0A2A4A, Manrope. */
.cnm-bot{
	--cnm-cian:#00B4D8; --cnm-navy:#0A2A4A; --cnm-ink:#06283d;
	position:fixed; right:20px; bottom:20px; z-index:99990;
	font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.cnm-bot *{box-sizing:border-box}

/* Botón flotante */
.cnm-bot-toggle{
	width:60px; height:60px; border-radius:50%; border:0; cursor:pointer;
	background:linear-gradient(145deg,#00c2e9,#00a0c2); color:#06283d;
	box-shadow:0 10px 26px rgba(2,30,75,.34); display:flex; align-items:center; justify-content:center;
	transition:transform .18s ease, box-shadow .18s ease; margin-left:auto;
}
.cnm-bot-toggle:hover{transform:translateY(-2px) scale(1.04); box-shadow:0 14px 32px rgba(2,30,75,.4)}
.cnm-bot-toggle:active{transform:scale(.96)}

/* Panel */
.cnm-bot-panel{
	position:absolute; right:0; bottom:74px; width:370px; max-width:calc(100vw - 32px);
	height:540px; max-height:calc(100vh - 120px); background:#fff; border-radius:18px;
	box-shadow:0 24px 60px rgba(2,30,75,.28); display:flex; flex-direction:column; overflow:hidden;
	border:1px solid rgba(10,42,74,.08); animation:cnm-bot-in .22s ease;
}
/* FIX (no se cerraba nunca): el atributo [hidden] debe ganar a display:flex. */
.cnm-bot[hidden], .cnm-bot-panel[hidden]{ display:none !important; }
@keyframes cnm-bot-in{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

/* Cabecera */
.cnm-bot-head{
	display:flex; align-items:center; gap:11px; padding:14px 14px 14px 16px;
	background:linear-gradient(135deg,#0a2a4a,#0e3a63); color:#fff;
}
.cnm-bot-head-ava{
	width:40px; height:40px; border-radius:50%; flex:0 0 auto;
	background:linear-gradient(145deg,#00c2e9,#00a0c2); display:flex; align-items:center; justify-content:center;
}
.cnm-bot-head-txt{display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0}
.cnm-bot-head-txt strong{font-size:15px; font-weight:800}
.cnm-bot-status{font-size:11.5px; opacity:.82; display:flex; align-items:center; gap:5px}
.cnm-bot-dot{width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:cnm-bot-pulse 2s infinite}
@keyframes cnm-bot-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.cnm-bot-min{background:transparent; border:0; color:#fff; opacity:.8; cursor:pointer; padding:4px; border-radius:6px}
.cnm-bot-min:hover{opacity:1; background:rgba(255,255,255,.12)}
.cnm-bot-reset{background:transparent; border:0; color:#fff; opacity:.72; cursor:pointer; padding:4px; border-radius:6px; margin-right:2px}
.cnm-bot-reset:hover{opacity:1; background:rgba(255,255,255,.12)}
.cnm-bot-reset[hidden]{display:none}

/* "Puerta del móvil": ocupa el hueco del log de mensajes hasta que el
   visitante deja un móvil válido (o ya tenía uno guardado); entonces
   desaparece y no vuelve a salir. Los alumnos nunca la ven (lo decide el JS). */
.cnm-bot-gate{flex:1; overflow-y:auto; padding:20px 16px; background:#f4f8fb; display:flex; flex-direction:column; gap:12px}
.cnm-bot-gate[hidden]{display:none}
.cnm-bot-gate-msg{margin:0; font-size:14.5px; line-height:1.5; color:#16324a; font-weight:700}
.cnm-bot-gate-form{display:flex; align-items:center; gap:8px}
/* font-size 16px: evita el zoom automático de iOS al enfocar el campo en móvil (igual que .cnm-bot-input). */
.cnm-bot-gate-input{flex:1; min-width:0; border:1px solid rgba(10,42,74,.16); border-radius:22px; padding:10px 15px; font-size:16px; font-family:inherit; outline:none; transition:border-color .15s}
.cnm-bot-gate-input:focus{border-color:var(--cnm-cian); box-shadow:0 0 0 3px rgba(0,180,216,.14)}
.cnm-bot-gate-btn{flex:0 0 auto; border:0; border-radius:22px; padding:10px 18px; font-size:14px; font-weight:700; font-family:inherit; color:#06283d; cursor:pointer; background:linear-gradient(145deg,#00c2e9,#00a0c2); transition:transform .15s}
.cnm-bot-gate-btn:hover{transform:translateY(-1px)}
.cnm-bot-gate-error{margin:0; font-size:12.5px; color:#c0392b}
.cnm-bot-gate-error[hidden]{display:none}
.cnm-bot-gate-nota{margin:0; font-size:11.5px; line-height:1.5; color:#8aa0b2}
.cnm-bot-gate-nota a{color:#0a6a85; text-decoration:underline}
/* Oculta visualmente el <label> del móvil sin quitarlo del árbol de accesibilidad. */
.cnm-bot-sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Log de mensajes */
.cnm-bot-log{
	flex:1; overflow-y:auto; padding:16px 14px; background:#f4f8fb;
	display:flex; flex-direction:column; gap:10px;
}
.cnm-bot-msg{max-width:84%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.45; word-wrap:break-word; white-space:pre-wrap}
.cnm-bot-msg a{color:inherit; text-decoration:underline}
.cnm-bot-msg.bot{align-self:flex-start; background:#fff; color:#16324a; border:1px solid rgba(10,42,74,.08); border-bottom-left-radius:4px}
.cnm-bot-msg.user{align-self:flex-end; background:linear-gradient(145deg,#00c2e9,#00a6cc); color:#06283d; font-weight:600; border-bottom-right-radius:4px}
.cnm-bot-msg.err{background:#fff5f5; border-color:#f6cccc; color:#9b2c2c}

/* Indicador de escritura */
.cnm-bot-typing{align-self:flex-start; background:#fff; border:1px solid rgba(10,42,74,.08); padding:12px 14px; border-radius:14px; border-bottom-left-radius:4px; display:flex; gap:4px}
.cnm-bot-typing span{width:7px; height:7px; border-radius:50%; background:#9bb4c7; animation:cnm-bot-bounce 1.2s infinite}
.cnm-bot-typing span:nth-child(2){animation-delay:.2s}
.cnm-bot-typing span:nth-child(3){animation-delay:.4s}
@keyframes cnm-bot-bounce{0%,60%,100%{transform:translateY(0); opacity:.5}30%{transform:translateY(-5px); opacity:1}}

/* Formulario */
.cnm-bot-form{display:flex; align-items:center; gap:8px; padding:11px 12px; border-top:1px solid rgba(10,42,74,.08); background:#fff}
/* font-size 16px: evita el zoom automático de iOS al enfocar el campo en móvil. */
.cnm-bot-input{flex:1; border:1px solid rgba(10,42,74,.16); border-radius:22px; padding:10px 15px; font-size:16px; font-family:inherit; outline:none; transition:border-color .15s}
.cnm-bot-input:focus{border-color:var(--cnm-cian); box-shadow:0 0 0 3px rgba(0,180,216,.14)}
/* Mientras la "puerta del móvil" está abierta, el campo de escribir queda atenuado (igual que el botón de enviar, más abajo). */
.cnm-bot-input:disabled{opacity:.5; cursor:default}
.cnm-bot-send{width:42px; height:42px; flex:0 0 auto; border:0; border-radius:50%; cursor:pointer; background:linear-gradient(145deg,#00c2e9,#00a0c2); display:flex; align-items:center; justify-content:center; transition:transform .15s}
.cnm-bot-send:hover{transform:scale(1.06)}
.cnm-bot-send:disabled{opacity:.5; cursor:default; transform:none}
.cnm-bot-foot{text-align:center; font-size:11px; color:#8aa0b2; padding:0 0 9px; background:#fff}
.cnm-bot-foot span{font-weight:700; color:#5b7186}

/* Chips de sugerencia inicial */
.cnm-bot-chips{display:flex; flex-wrap:wrap; gap:7px; align-self:flex-start; margin-top:-2px}
.cnm-bot-chip{background:#fff; border:1px solid rgba(0,180,216,.4); color:#0a6a85; border-radius:16px; padding:7px 12px; font-size:12.5px; font-weight:600; cursor:pointer; transition:background .15s}
.cnm-bot-chip:hover{background:#e7f7fb}

@media (max-width:900px){
	/*
	 * Subir la burbuja por encima de la barra de navegación inferior de Tutor LMS.
	 * Si no, el botón flotante (y la "X" para cerrar) queda detrás de la barra
	 * y al tocarlo golpeas la barra en vez del bot → "no se cierra".
	 */
	.cnm-bot{right:14px; bottom:calc(78px + env(safe-area-inset-bottom,0px)); z-index:100000}
	.cnm-bot-panel{width:calc(100vw - 28px); height:auto; max-height:calc(100vh - 190px)}
}