body{
			margin:0;
			padding:0;
			background:#f4f6f8;
			font-family:Arial,Helvetica,sans-serif;
		}

		.card{
			width:100%;
			max-width:520px;
			margin:60px auto;
			background:#fff;
			padding:35px;
			box-sizing:border-box;
			border-radius:12px;
			box-shadow:0 8px 25px rgba(0,0,0,.15);
		}

		h1{
			text-align:center;
			color:#0066cc;
			margin-bottom:5px;
		}

		h2{
			text-align:center;
			color:#666;
			font-size:16px;
			margin-bottom:30px;
		}

		label{
			display:block;
			margin-top:15px;
			margin-bottom:5px;
			font-weight:bold;
		}

		input[type=text],
		input[type=password],
		input[type=number]{

			width:100%;
			box-sizing:border-box;
			padding:10px;
			font-size:16px;
		}

		.boton{

			width:100%;
			margin-top:25px;

			padding:12px;

			background:#0066cc;

			color:white;

			border:none;

			border-radius:5px;

			cursor:pointer;

			font-size:16px;
		}

		.boton:hover{

			background:#0055aa;

		}

		.error{

			margin-top:20px;

			color:red;

			text-align:center;

		}

		.version{

			margin-top:30px;

			text-align:center;

			color:#999;

			font-size:12px;

		}

        .composer-header {
            text-align: center;
            margin-bottom: 25px;
        }

        .composer-header h1 {
            margin-bottom: 8px;
        }

        .composer-header h2 {
            margin-top: 0;
        }

        .usuario-barra {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 12px;
            border-bottom: 1px solid #cccccc;
            font-size: 14px;
        }

        .usuario-barra a {
            text-decoration: none;
        }

        .campo {
            margin-bottom: 20px;
        }

        .campo label {
            display: block;
            margin-bottom: 6px;
            font-weight: bold;
        }

        .campo input[type="text"],
        .campo input[type="number"] {
            width: 100%;
            box-sizing: border-box;
        }

        .rango {
            display: flex;
            gap: 15px;
        }

        .rango .campo {
            flex: 1;
        }

        .tipo-sesion {
            margin-top: 10px;
            margin-bottom: 25px;
        }

        .tipo-sesion label {
            display: block;
            margin-bottom: 12px;
            cursor: pointer;
        }

        .tipo-sesion input[type="radio"] {
            margin-right: 8px;
        }

        .boton-generar {
            text-align: center;
            margin-top: 25px;
        }

        .boton-generar input[type="submit"] {
            width: 100%;
            cursor: pointer;
        }

        @media (max-width: 600px) {

            .composer-container {
                margin: 20px auto;
                padding: 20px;
            }

            .rango {
                flex-direction: column;
                gap: 0;
            }

        }
		
		.usuario-barra{
			display:flex;
			justify-content:space-between;
			align-items:center;
			margin-bottom:25px;
			padding-bottom:12px;
			border-bottom:1px solid #ddd;
			font-size:14px;
		}

		.usuario-barra a{
			color:#0066cc;
			text-decoration:none;
			font-weight:bold;
		}

		.usuario-barra a:hover{
			text-decoration:underline;
		}

		.rango{
			display:flex;
			gap:15px;
		}

		.rango .campo{
			flex:1;
		}

		.campo{
			margin-bottom:20px;
		}

		.tipo-sesion{
			margin-top:20px;
		}

		.tipo-sesion label{
			display:block;
			margin:10px 0;
			font-weight:normal;
		}

		.boton-generar input[type=submit]{
			width:100%;
		}

		@media (max-width:600px){

			.card{
				margin:20px;
				padding:25px;
			}

			.rango{
				flex-direction:column;
				gap:0;
			}

		}
		
		.aviso-existente{
			text-align:center;
			margin:25px 0;
			color:#555;
		}

		.archivos-existentes{
			margin:20px 0;
			padding:15px;
			background:#f4f6f8;
			border-radius:6px;
			line-height:1.8;
			text-align:left;
		}

		.pregunta-regenerar{
			margin-top:25px;
			font-weight:bold;
			color:#333;
		}

		.cancelar{
			margin-top:18px;
			text-align:center;
		}

		.cancelar a{
			color:#666;
			text-decoration:none;
		}
		
		.barra-progreso {
			width: 100%;
			height: 10px;
			background: #e5e7eb;
			border-radius: 10px;
			overflow: hidden;
			margin: 25px 0;
			position: relative;
		}

		.barra-progreso::after {
			content: "";
			position: absolute;
			top: 0;
			left: -35%;
			width: 35%;
			height: 100%;
			background: #1976d2;
			border-radius: 10px;
			animation: progreso-activo 1.3s infinite ease-in-out;
		}

		@keyframes progreso-activo {
			0% {
				left: -35%;
			}

			100% {
				left: 100%;
			}
		}

		.cancelar a:hover{
			color:#0066cc;
			text-decoration:underline;
		}
		
		.estado{
			text-align:center;
			padding:20px 0;
		}

		.estado h3{
			color:#0066cc;
			margin-bottom:15px;
		}

		.estado-ok h3{
			color:#2e8b57;
		}

		.seed{
			margin-top:20px;
			color:#666;
			font-size:15px;
		}

		.ayuda-campo{
			margin-top:6px;
			color:#777;
			font-size:13px;
			line-height:1.4;
		}
		
		.preview-grafica{
			margin:25px 0 15px 0;
		}

		.preview-grafica-titulo{
			font-weight:bold;
			margin-bottom:10px;
			text-align:left;
		}

		.grafica-bloques{
			width:100%;
			height:120px;

			display:flex;
			align-items:flex-end;

			background:#f4f6f8;

			border-bottom:2px solid #777;

			overflow:hidden;
		}

		.bloque-ftp{
			min-width:1px;

			cursor:pointer;

			border-right:1px solid rgba(255,255,255,0.35);

			box-sizing:border-box;

			transition:
				opacity 0.15s,
				transform 0.15s;
		}

		.bloque-ftp:hover{
			opacity:0.75;
			transform:translateY(-2px);
		}
				
		.sesion-listado{
			display:flex;
			justify-content:space-between;
			align-items:center;
			gap:15px;

			padding:8px 0;

			border-bottom:1px solid #e5e5e5;
		}

		.sesion-listado:last-child{
			border-bottom:none;
		}

		.ver-sesion{
			white-space:nowrap;

			font-size:12px;
			font-weight:bold;

			text-decoration:none;
			color:#1976d2;
		}

		.ver-sesion:hover{
			text-decoration:underline;
		}

		@media (max-width:600px){

			.sesion-listado{
				align-items:flex-start;
				flex-direction:column;
				gap:4px;
			}
		}

		.boton-eliminar{
			background:#b3261e;
		}

		.boton-eliminar:hover{
			background:#8f1f19;
		}
		
		/* =========================================================
		   MODAL DE MENSAJES / CONFIRMACIONES
		========================================================= */
		.modal-fondo {
			display: none;
			position: fixed;
			inset: 0;
			background: rgba(0, 0, 0, 0.65);
			z-index: 999999;

			align-items: center;
			justify-content: center;

			padding: 20px;
			box-sizing: border-box;
		}

		.modal-fondo.activo {
			display: flex;
		}

		.modal-caja {
			width: 100%;
			max-width: 480px;

			background: #fff;
			border-radius: 12px;

			padding: 28px;

			box-sizing: border-box;

			text-align: center;

			box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
		}

		.modal-icono {
			font-size: 38px;
			margin-bottom: 10px;
		}

		.modal-titulo {
			margin: 0 0 12px 0;
			font-size: 22px;
		}

		.modal-texto {
			margin: 0 0 25px 0;
			line-height: 1.5;
			color: #555;
		}

		.modal-botones {
			display: flex;
			justify-content: center;
			gap: 12px;
			flex-wrap: wrap;
		}

		.modal-boton {
			border: 0;
			border-radius: 7px;
			padding: 11px 18px;
			cursor: pointer;
			font-weight: bold;
			font-size: 14px;
		}

		.modal-boton-volver {
			background: #e5e5e5;
			color: #333;
		}

		.modal-boton-confirmar {
			background: #c62828;
			color: #fff;
		}

		.modal-boton-confirmar:hover {
			background: #a91f1f;
		}

		/* body {
			border-top: 8px solid red !important;
		} */
		
		.grafica-bloques {
			position: relative;
		}

		#progresoSesion {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;

			width: 3px;
			background: white;

			z-index: 50;

			pointer-events: none;

			box-shadow:
				0 0 4px rgba(0,0,0,0.8);
		}
		
		.preview-controles {
			text-align: right;
			margin-bottom: 10px;
		}

		#zonaPreview {
			transition: all 0.25s ease;
		}

		#zonaPreview.modo-ampliado {
			position: fixed;

			left: 0;
			top: 0;

			width: 100vw;
			height: 100vh;

			box-sizing: border-box;

			padding: 20px;

			background: #111;

			z-index: 99999;

			overflow: auto;
		}

		#zonaPreview.modo-ampliado .preview-grafica {
			width: 100%;
		}

		#zonaPreview.modo-ampliado .grafica-bloques {
			width: 100%;
		}

		#zonaPreview.modo-ampliado .preview-audio {
			width: 100%;
			margin-top: 20px;
		}

		body.preview-ampliado {
			overflow: hidden;
		}	

		#zonaPreview.modo-ampliado .grafica-bloques {
			height: 240px;
			align-items: flex-end;
		}

		#zonaPreview.modo-ampliado .bloque-ftp {
			transform: scaleY(2);
			transform-origin: bottom;
		}

		#zonaPreview.modo-ampliado #progresoSesion {
			top: 0;
			bottom: 0;
		}

		.titulo-ampliado {
			display: none;
		}

		#zonaPreview.modo-ampliado .titulo-ampliado {
			display: block;
			text-align: center;
			font-size: 22px;
			font-weight: bold;
			margin-bottom: 15px;
			color: #fff;
		}
		
		#zonaPreview.modo-ampliado .titulo-ampliado strong {
			color: #fff;
		}	

		#infoBloqueAmpliado {
			display: none;
		}

		#zonaPreview.modo-ampliado #infoBloqueAmpliado {
			display: flex;
			justify-content: center;
			gap: 50px;

			margin-bottom: 15px;

			color: #fff;
			font-size: 20px;
		}

		#zonaPreview.modo-ampliado #infoBloqueAmpliado strong {
			font-size: 24px;
			color: #fff;
		}

		.acciones-preview {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 18px;
			margin-top: 30px;
			width: 100%;
		}

		.acciones-preview form {
			margin: 0;
		}

		.boton-volver {
			display: inline-block;
			text-decoration: none;
			text-align: center;
			margin-top: 2px;
		}

		.boton-eliminar-secundario {
			background: transparent !important;
			border: 1px solid #999 !important;
			color: #777 !important;
			font-size: 13px;
			padding: 8px 14px;
			opacity: 0.8;
		}

		.boton-eliminar-secundario:hover {
			opacity: 1;
			color: #c33 !important;
			border-color: #c33 !important;
		}

		/* ---------------------------------------------------------
		   LÍNEA DE PARCIALES
		--------------------------------------------------------- */

		.linea-parciales {
			display: flex;
			width: 100%;
			height: 32px;
			box-sizing: border-box;
			margin-top: 3px;
		}

		.parcial-linea {
			box-sizing: border-box;
			border-left: 1px solid #777;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			font-size: 11px;
			line-height: 14px;
			padding-top: 2px;
		}

		.parcial-linea:last-child {
			border-right: 1px solid #777;
		}

		.parcial-numero {
			display: block;
			font-weight: bold;
		}

		.parcial-duracion {
			display: block;
			font-size: 10px;
			opacity: 0.75;
		}

		#zonaPreview.modo-ampliado .linea-parciales {
			color: #fff;
		}

		#zonaPreview.modo-ampliado .parcial-linea {
			border-left-color: #aaa;
		}

		#zonaPreview.modo-ampliado .parcial-linea:last-child {
			border-right-color: #aaa;
		}

		#zonaPreview.modo-ampliado .parcial-duracion {
			color: #ddd;
		}

		.listado-sesiones-scroll {
			margin-top: 12px;

			max-height: 350px;
			overflow-y: auto;

			padding-right: 6px;
		}
		
		/* =========================================================
		   ADMINISTRACIÓN
		   ========================================================= */

		.card-admin {
			width: 60%;
			max-width: 1400px;
			margin: 30px auto;
			box-sizing: border-box;
		}

		/* =========================================================
		   RESULTADOS ADMIN - ESTILO CONSOLA
		   ========================================================= */

		.admin-resultado {
			width: 100%;
			margin-top: 20px;
			background: #111;
			color: #eee;
			padding: 18px;
			border-radius: 8px;
			max-height: 600px;
			overflow: auto;
			box-sizing: border-box;
		}

		.admin-resultado pre {
			margin: 0;
			color: #eee;
			background: transparent;
			white-space: pre;
			font-family: monospace;
			font-size: 13px;
			line-height: 1.5;
		}

		.admin-listado-sesiones {
			max-height: 520px;
			overflow-y: auto;
			margin-top: 20px;
		}

		.admin-listado-sesiones table {
			width: 100%;
			border-collapse: collapse;
		}

		.admin-listado-sesiones th,
		.admin-listado-sesiones td {
			padding: 10px 12px;
			border-bottom: 1px solid #444;
			text-align: left;
		}

		.admin-listado-sesiones thead th {
			position: sticky;
			top: 0;
			background: #111;
			z-index: 2;
		}

		.admin-loading {
			display: none;

			position: fixed;
			inset: 0;

			background: rgba(0, 0, 0, 0.75);

			z-index: 999999;

			align-items: center;
			justify-content: center;
		}

		.admin-loading.activo {
			display: flex;
		}

		.admin-loading-box {
			background: #111;

			border: 1px solid #555;
			border-radius: 10px;

			padding: 30px 45px;

			text-align: center;
			color: #fff;
		}

		.admin-loading-box strong,
		.admin-loading-box span {
			display: block;
		}

		.admin-loading-box strong {
			margin-top: 15px;
			font-size: 18px;
		}

		.admin-loading-box span {
			margin-top: 6px;
			opacity: 0.7;
		}

		.admin-spinner {
			width: 38px;
			height: 38px;

			margin: auto;

			border: 4px solid #444;
			border-top-color: #fff;
			border-radius: 50%;

			animation: admin-girar 0.8s linear infinite;
		}

		@keyframes admin-girar {
			to {
				transform: rotate(360deg);
			}
		}

		.admin-error {
			background: #b42318;
			color: #fff;
			border: 2px solid #ffb4ab;
			border-radius: 8px;
			padding: 18px 22px;
			margin: 20px 0;
		}

		.admin-error h3 {
			color: #fff;
			margin-top: 0;
		}

		.admin-error p {
			color: #fff;
			margin-bottom: 8px;
		}

		.admin-error p:last-child {
			margin-bottom: 0;
		}

/* =========================================================
   TEMA EXTERIOR COMPOSER: oscuro por defecto, claro opcional
   Solo cambia el fondo exterior. Las tarjetas siguen blancas.
   ========================================================= */
html { min-height: 100%; background: #1b1e24; }
body { min-height: 100vh; background: #1b1e24; transition: background-color .2s ease; }
html:has(body.tema-claro) { background: #f4f6f8; }
body.tema-claro { background: #f4f6f8; }
.boton-tema-composer {
  position: fixed; top: 14px; right: 16px; z-index: 90000;
  padding: 9px 13px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,.3);
  background: #343a46; color: #fff; cursor: pointer;
  font: 600 13px Arial,Helvetica,sans-serif;
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
}
body.tema-claro .boton-tema-composer {
  background: #fff; color: #333; border-color: #ccd1d8;
}
.boton-tema-composer:hover { filter: brightness(1.1); }
@media (max-width: 600px) {
  .boton-tema-composer { top: 8px; right: 8px; padding: 7px 10px; font-size: 12px; }
}

/* Tipografia de la pantalla de creacion de sesiones IA.
   Mantener los titulos en negrita y las opciones/listados en peso normal. */
.card form[action="generar.php"] .campo > label:not(.opcion) { font-weight: bold; }
.card form[action="generar.php"] .campo label.opcion,
.card form[action="generar.php"] .campo label.opcion strong { font-weight: normal; }
.card .archivos-existentes .sesion-listado strong,
.card .archivos-existentes .sesion-listado .ver-sesion { font-weight: normal; }

/* ==========================================
   SELECTOR IDIOMA - COMPOSER 6.0
   ========================================== */

.selector-idioma {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin: 0 0 12px;
}

.idioma-btn {
    display: inline-block;
    min-width: 38px;
    padding: 7px 12px;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid #aaa;
    background: #f0f0f0;
    color: #555;
    transition: background 0.2s, color 0.2s;
}

.idioma-btn.activo {
    background: #0066cc;
    border-color: #0066cc;
    color: #fff;
    font-weight: bold;
}

.idioma-btn:hover {
    border-color: #0066cc;
}