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;
		}