/* ==========================================================================
   LN Consultores — branding profundo (body.html -> /brand/deepbrand.css)
   Paleta OFICIAL (hexadecimales-LN.png): #181A4F · #7C80F7 · #615E99 · #EAEBFB
   ========================================================================== */

/* ---------------- Franja / hero de la página de bienvenida ---------------- */
body.welcome-page .header,
body.welcome-page .header .header-image {
    background:
        radial-gradient(1100px 480px at 12% -15%, rgba(124,128,247,0.40), transparent 60%),
        radial-gradient(820px 460px at 105% 120%, rgba(97,94,153,0.55), transparent 55%),
        linear-gradient(135deg, #181A4F 0%, #615E99 58%, #7C80F7 100%) !important;
    overflow: hidden !important;
    position: relative !important;
}
body.welcome-page .header {
    height: auto !important;
    min-height: 340px !important;
    padding: 48px 16px 46px !important;
    box-sizing: border-box !important;
}
/* Div vacío con margen negativo de Jitsi que arrastraba el contenido hacia
   arriba (recortaba el logo). Lo eliminamos; el fondo se pinta en .header. */
body.welcome-page .header .header-image {
    display: none !important;
}
/* Círculos decorativos de marca (motivo del isotipo circular) */
body.welcome-page .header::before,
body.welcome-page .header::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
body.welcome-page .header::before {
    width: 440px; height: 440px; right: -130px; top: -170px;
    border: 2px solid rgba(124,128,247,0.30);
    background: radial-gradient(circle at 30% 30%, rgba(124,128,247,0.20), transparent 70%);
}
body.welcome-page .header::after {
    width: 280px; height: 280px; left: -100px; bottom: -130px;
    background: radial-gradient(circle, rgba(234,235,251,0.12), transparent 70%);
}

/* Contenido centrado en columna */
body.welcome-page .header-container {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    transform: none !important;
    z-index: 2 !important;
    /* +130px compensa un offset negativo (~-82px) que Jitsi aplica al
       contenedor de la cabecera y que recortaba el logo por arriba. */
    margin: 130px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}
/* Engranaje de ajustes fuera del flujo (arriba a la derecha) */
body.welcome-page .welcome-page-settings {
    position: absolute !important;
    top: 16px !important;
    right: 18px !important;
    z-index: 3 !important;
}

/* Logo: círculo blanco centrado, sin recorte (fondo del contenedor) */
body.welcome-page .header-watermark-container {
    position: relative !important;
    z-index: 2 !important;
    width: 128px !important;
    height: 128px !important;
    min-height: 0 !important;
    margin: 4px auto 6px !important;
    background: url("/brand/watermark.png") center center / contain no-repeat !important;
    border-radius: 50% !important;
    box-shadow: 0 12px 34px rgba(0,0,0,0.28) !important;
}
body.welcome-page .header-watermark-container .welcome-watermark {
    display: none !important;
}

/* Nombre de marca (reemplaza el texto por defecto) */
body.welcome-page .header-text-title {
    font-size: 0 !important;
    margin: 2px 0 0 !important;
}
body.welcome-page .header-text-title::after {
    content: "LN Consultores";
    display: block;
    font-size: 46px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.22);
}
/* Sin subtítulo */
body.welcome-page .header-text-subtitle,
body.welcome-page .header-text-description {
    display: none !important;
}

/* Campo de entrada como tarjeta "glass" */
body.welcome-page #enter_room {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 16px !important;
}
body.welcome-page .join-meeting-container {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    padding: 10px !important;
    border-radius: 16px !important;
    box-shadow: 0 22px 55px rgba(0,0,0,0.30) !important;
    gap: 8px !important;
}
body.welcome-page #enter_room_field.enter-room-input {
    background: rgba(255,255,255,0.96) !important;
    color: #181A4F !important;
    border-radius: 10px !important;
    border: none !important;
}
body.welcome-page #enter_room_field.enter-room-input::placeholder {
    color: #615E99 !important;
}
body.welcome-page #enter_room_button.welcome-page-button {
    background: #181A4F !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
body.welcome-page #enter_room_button.welcome-page-button:hover {
    background: #615E99 !important;
}

/* Ocultar promo de apps de móvil / badges de tiendas */
img[src*="badge"],
img[src*="app-store"],
img[src*="play-store"],
img[src*="google-play"] {
    display: none !important;
}

/* ==========================================================================
   Pantalla de ENTRAR A LA REUNIÓN (prejoin) — mockup LN Consultores
   Fondo decorativo (navy + círculos), panel con logo círculo blanco arriba,
   título, input, botón periwinkle, barra de dispositivos, tarjeta
   "Antes de entrar" y pie de marca; a la derecha, vídeo en recuadro redondeado.
   El pie y la tarjeta se inyectan por JS (body.html); aquí van sus estilos.
   ========================================================================== */

/* Fondo general: imagen decorativa a pantalla completa */
.premeeting-screen {
    background: #181A4F url("/brand/prejoin-band.jpg") center / cover no-repeat !important;
    position: relative !important;
}

/* Panel izquierdo transparente; contenido alineado arriba, con hueco para el
   logo (arriba) y el pie de marca (abajo). */
.premeeting-screen > div:first-child {
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
}
.premeeting-screen [class*="contentControls"] {
    justify-content: flex-start !important;
    padding-top: 196px !important;
    padding-bottom: 96px !important;
    gap: 14px !important;
}

/* Ocultar el mini-logo de esquina */
body:has(.premeeting-screen) .watermark.leftwatermark {
    display: none !important;
}

/* Logo círculo blanco, arriba y CENTRADO en el panel */
.premeeting-screen > div:first-child::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    width: 132px;
    height: 132px;
    background: url("/brand/watermark.png") center / contain no-repeat;
    z-index: 7;
    pointer-events: none;
}

/* Título blanco + nombre de sala en lavanda, alineados a la izquierda */
.premeeting-screen h1 {
    color: #ffffff !important;
    text-align: left !important;
}
.premeeting-screen [class*="roomName"] {
    color: #B9BCEB !important;
    text-align: left !important;
}

/* Campo de nombre: fondo oscuro translúcido, borde lavanda, texto claro */
.premeeting-screen input {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(234, 235, 251, 0.45) !important;
    border-radius: 10px !important;
}
.premeeting-screen input::placeholder {
    color: #B9BCEB !important;
    opacity: 1;
}

/* Botón "Entrar a la reunión": periwinkle corporativo */
.premeeting-screen [class*="actionButton"] {
    background: #7C80F7 !important;
    border-color: #7C80F7 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
}

/* Barra de dispositivos: VISIBLE (como el mockup) */
.premeeting-screen .new-toolbox {
    justify-content: flex-start !important;
}

/* Lado derecho: vídeo en recuadro negro redondeado con margen */
.premeeting-screen > div:nth-child(2) {
    margin: 16px !important;
    border-radius: 18px !important;
    background: #0a0a12 !important;
    overflow: hidden !important;
}

/* Pie de marca (abajo-izquierda del panel) — inyectado por JS */
.ln-prejoin-footer {
    position: absolute;
    left: 50px;
    bottom: 34px;
    z-index: 7;
    line-height: 1.4;
    pointer-events: none;
}
.ln-prejoin-footer .brand {
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.ln-prejoin-footer .claim {
    color: #DBDDF7;
    font-size: 13px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* Tarjeta "Antes de entrar" — inyectada por JS */
.ln-prejoin-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(10, 12, 40, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 6px;
    max-width: 360px;
}
.ln-prejoin-card .ic {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #7C80F7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-style: italic;
    font-size: 14px;
}
.ln-prejoin-card .tx b {
    color: #ffffff;
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}
.ln-prejoin-card .tx span {
    color: #CED1F3;
    font-size: 13px;
}

/* Móvil: el prejoin se apila; ajustamos logo y ocultamos el pie de marca. */
@media (max-width: 600px) {
    .premeeting-screen > div:first-child::before {
        width: 96px; height: 96px; top: 18px;
    }
    .premeeting-screen [class*="contentControls"] {
        padding-top: 130px !important;
    }
    .ln-prejoin-footer { display: none; }
}

/* ==========================================================================
   Logo DENTRO de la llamada (marca de agua de la esquina).
   Por defecto Jitsi lo pone diminuto (71x32). Lo agrandamos. Solo se ve en la
   llamada: en la home usamos otro logo y en el prejoin está oculto.
   ========================================================================== */
.watermark.leftwatermark {
    width: 96px !important;
    height: 96px !important;
    max-width: 120px !important;
    max-height: 120px !important;
    /* Logo sobre circulo BLANCO para que contraste con el fondo navy
       (mismo criterio que Digital, el prejoin y la tarjeta de vista previa). */
    background: #ffffff url("/brand/watermark.png") center / 72% no-repeat !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28) !important;
}

/* ==========================================================================
   Iconos propios en la barra de la LLAMADA (solo los del set: micro/cámara/
   colgar). Los SVG no traen color -> se usan como MÁSCARA y se pintan en
   blanco. El resto de botones (chat, compartir, participantes, mosaico,
   calidad, más) no tienen icono propio y mantienen el de Jitsi.
   ========================================================================== */
.toolbox-button[aria-label*="Silenciar" i] .toolbox-icon > *,
.toolbox-button[aria-label*="Activar micr" i] .toolbox-icon > *,
.toolbox-button[aria-label*="Reactivar" i] .toolbox-icon > *,
.toolbox-button[aria-label*="Detener v" i] .toolbox-icon > *,
.toolbox-button[aria-label*="Apagar c" i] .toolbox-icon > *,
.toolbox-button[aria-label*="Encender c" i] .toolbox-icon > *,
.toolbox-button[aria-label*="Iniciar v" i] .toolbox-icon > *,
.toolbox-button[aria-label*="Salir de la reuni" i] .toolbox-icon > * {
    opacity: 0 !important;
}
.toolbox-button[aria-label*="Silenciar" i] .toolbox-icon,
.toolbox-button[aria-label*="Activar micr" i] .toolbox-icon,
.toolbox-button[aria-label*="Reactivar" i] .toolbox-icon,
.toolbox-button[aria-label*="Detener v" i] .toolbox-icon,
.toolbox-button[aria-label*="Apagar c" i] .toolbox-icon,
.toolbox-button[aria-label*="Encender c" i] .toolbox-icon,
.toolbox-button[aria-label*="Iniciar v" i] .toolbox-icon,
.toolbox-button[aria-label*="Salir de la reuni" i] .toolbox-icon {
    background-color: #ffffff !important;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 58%; mask-size: 58%;
}
.toolbox-button[aria-label*="Silenciar" i] .toolbox-icon { -webkit-mask-image: url("/brand/icons/microfono-activo.svg"); mask-image: url("/brand/icons/microfono-activo.svg"); }
.toolbox-button[aria-label*="Activar micr" i] .toolbox-icon,
.toolbox-button[aria-label*="Reactivar" i] .toolbox-icon { -webkit-mask-image: url("/brand/icons/microfono-silenciado.svg"); mask-image: url("/brand/icons/microfono-silenciado.svg"); }
.toolbox-button[aria-label*="Detener v" i] .toolbox-icon,
.toolbox-button[aria-label*="Apagar c" i] .toolbox-icon { -webkit-mask-image: url("/brand/icons/camara-activa.svg"); mask-image: url("/brand/icons/camara-activa.svg"); }
.toolbox-button[aria-label*="Encender c" i] .toolbox-icon,
.toolbox-button[aria-label*="Iniciar v" i] .toolbox-icon { -webkit-mask-image: url("/brand/icons/camara-apagada.svg"); mask-image: url("/brand/icons/camara-apagada.svg"); }
.toolbox-button[aria-label*="Salir de la reuni" i] .toolbox-icon { -webkit-mask-image: url("/brand/icons/colgar.svg"); mask-image: url("/brand/icons/colgar.svg"); }

/* ---------- Footer corporativo de la home ---------- */
.ln-footer-text {
    text-align: center;
    padding: 18px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #7C80F7;
}
.ln-footer-text a { color: inherit; text-decoration: underline; }