/* ============================================================================
   LAYOUT DE LA PÁGINA DE VIDEOLLAMADA — ESTRUCTURA COMPARTIDA, NO EDITAR.
   Sustituye a bootstrap.css + style.css + la parte de layout de chat.css
   (que sumaban ~80 media queries con anchos fijos por resolución).
   Principio: anchos relativos + flexbox; las cajas se adaptan solas a
   cualquier pantalla. Colores personalizables vía variables en tema.css.
   ========================================================================== */

/* --- Contenedor general ---------------------------------------------------- */
.content {
	width: 100%;
	max-width: 970px;
	margin: 0 auto;
	padding: 0 15px 24px;
	box-sizing: border-box;
}

.container-fluid {
	padding: 0;
}

/* Fila principal: panel del agente + panel del usuario, se apilan solos */
.row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 16px;
	box-sizing: border-box;
	background-color: var(--color-panel, #e3e6e6);
	border-radius: 8px;
}

/* Solo contiene el elemento de audio del tono; sin presencia visual */
.col-md-8,
.position_controls {
	display: none;
}

/* Clase que usa el JS para ocultar el chat en pantalla completa */
.chat_oculto {
	display: none !important;
}

/* --- Panel del agente (vídeo remoto) --------------------------------------- */
.fondo-agente {
	flex: 1 1 380px;
	min-width: min(100%, 280px);
	position: relative;
	background-color: #ffffff;
	border-radius: 8px;
	height: clamp(280px, 42vw, 400px);
	overflow: hidden;
}

.videoremoto {
	position: absolute;
	inset: 0;
}

#remoteVideo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: #000;
	border-radius: 8px;
}

#remoteAudio {
	position: absolute;
	bottom: 0;
	left: 0;
}

/* Botón Contestar (solo visible en llamada entrante) */
.button3 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 5px;
	background-color: #00cc33;
	color: #ffffff;
	text-align: center;
	font-size: 18px;
	padding: 10px 24px;
	cursor: pointer;
	z-index: 60;
}

/* Botón de pantalla completa */
.ampliar {
	position: absolute;
	bottom: 8px;
	right: 8px;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Icono del botón (images/maximize.svg; el color se cambia editando el svg) */
.ampliar img {
	width: 35px;
	height: 35px;
}

/* El JS oculta el botón de ampliar con la clase 'ocultar' al entrar en
   pantalla completa; !important para que ningún display posterior lo pise */
.ampliar.ocultar {
	display: none !important;
}

/* --- Panel del usuario (vídeo local + botón de llamada) --------------------- */
.fondo-usuario {
	flex: 1 1 240px;
	min-width: min(100%, 220px);
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Anclado arriba para que el recuadro blanco quede alineado con el panel
	   del agente */
	justify-content: flex-start;
	gap: 14px;
}

/* Recuadro blanco del vídeo del usuario: visible también antes de llamar,
   igual que el recuadro del agente */
.jumbotron {
	width: 100%;
	min-height: 230px;
	background-color: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

#localVideo {
	display: block;
	width: 100%;
	height: auto;
}

/* En pantallas estrechas el JS mueve el vídeo local dentro del panel del
   agente: ahí se muestra como miniatura sobre el vídeo remoto */
#agente #localVideo {
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 30%;
	height: auto;
	border-radius: 8px;
	z-index: 110;
}

.titulo {
	text-align: center;
	width: 100%;
	color: var(--color-titulos, #333333);
	font-weight: bold;
}

.botonera {
	width: 100%;
}

.llamar,
.colgar {
	height: 85px;
	width: 85px;
	border-radius: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.llamar {
	background-color: var(--color-boton-llamar, #008676);
	background-image: url(../images/llamar-ico.png);
}

.colgar {
	background-color: var(--color-boton-colgar, #d00b2b);
	background-image: url(../images/colgar-ico.png);
}

/* --- Panel del chat ---------------------------------------------------------
   IMPORTANTE: el interior de este panel (widget de Converse.js, cajas chat1 /
   consulta1, etiquetas y botón Enviar) lo define css/chat.css, que se carga
   desde chat.php. NO duplicar aquí esas reglas: chat.css es el CSS original de
   producción, es el que oculta el panel de contactos de Converse y coloca sus
   piezas. Aquí solo va el marco exterior, con las mismas medidas que en
   producción (padding 10px) para que las de chat.css encajen. */
.jumbotron2 {
	/* El panel se extiende hasta los bordes internos de .row (compensando su
	   padding de 16px) para que su interior mida lo mismo que en producción,
	   que es para lo que están calculadas las reglas de chat.css.
	   position: relative es la referencia de las cajas .chat1 / .consulta1. */
	position: relative;
	width: calc(100% + 32px);
	margin: 16px -16px -16px;
	padding: 10px;
	box-sizing: border-box;
	background-color: var(--color-panel-chat, #cacaca);
	border-radius: 0 0 8px 8px;
}

/* --- Única media query: por debajo de 850px cambia la FORMA del layout ------
   (los paneles se apilan). Coincide con el punto en que el JS existente
   mueve el vídeo local como miniatura dentro del panel del agente. */
@media (max-width: 850px) {
	.row {
		flex-direction: column;
	}
	.fondo-agente,
	.fondo-usuario {
		flex-basis: auto;
		width: 100%;
	}
	.fondo-agente {
		height: clamp(240px, 56vw, 400px);
	}
}

/* Si el vídeo local se ha movido al panel del agente, ocultar su caja vacía */
#videoLocal:not(:has(video)) {
	display: none !important;
}

/* --- Modo pantalla completa (clases que aplica el JS) -----------------------
   Estas reglas van después de las genéricas para ganarles en cascada:
   sin ellas, el width:100% del recuadro blanco pisaría al overlay. */

/* El vídeo del usuario en pantalla completa es una miniatura flotante.
   !important para ganar de forma inequívoca al width:100% genérico del
   recuadro, pase lo que pase con el orden de carga de las hojas. */
#videoLocal.overlay {
	width: 273px !important;
	min-height: 0;
	background-color: transparent;
}

#videoLocal.overlay video {
	width: 100%;
	height: auto;
}

/* En pantalla completa, el botón de llamar/colgar queda fijo abajo al
   centro, por encima del vídeo */
.fondo-usuario.overlay .botonera {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	z-index: 120;
}

/* Panel del agente a pantalla completa de verdad: gana al position:relative
   genérico y a los tamaños inline en px que aplica el JS (por eso !important) */
.fondo-agente.fullscreen {
	position: fixed;
	inset: 0;
	width: auto !important;
	height: auto !important;
	z-index: 100;
	border-radius: 0;
}

#remoteVideo.fullscreen,
.fullscreen #remoteVideo {
	width: 100% !important;
	height: 100% !important;
	border-radius: 0;
}