.tabla-formulario {
		width: 100%;
	/*	border-collapse: collapse;*/
	}

	.tabla-formulario td {
		padding: 2px;
	/*	border-bottom: 1px solid #050505;
		/* ojo cambia a #ccc */
	}

	/* Contenedor flexible para los campos dentro de la celda */
	.form-row {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		align-items: center;
		padding: 4px 0;
	}

	.field-group {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	/* Clases de ancho para este formulario específico */
	/* Control de anchos */
	.ancho-expandir {
		flex: 1;
		min-width: 250px;
	}

	/* Clase para campos largos (Email, Dirección, Ciudad) */
	.ancho-grande {
		flex: 1 1 100%;
		/* Por defecto ocupa todo el ancho disponible */
		min-width: 300px;
		/* Ancho mínimo seguro para móviles */
	}

	/* TIPOS DE ANCHO DINÁMICO */
	.ancho-fijo-corto {
		width: 100px !important;
	}

	.ancho-fijo-medio {
		width: 180px !important;
	}

	/* En pantallas de escritorio (más de 1024px), forzamos que sea prominente */
	@media (min-width: 1024px) {
		.ancho-grande {
			flex: 1 1 800px;
			/* Intenta medir 800px si hay espacio */
		}
	}

	/* Asegura que el contenedor del grupo crezca al 100% */
	.field-group.ancho-grande {
		flex: 1 1 100%;
		/* Ocupa toda la fila */
		display: flex;
		align-items: center;
	}

	/* Esta es la clave: El input debe estirarse dentro de ese contenedor */
	.field-group.ancho-grande input {
		flex: 1;
		/* Obliga al input a tomar el espacio sobrante */
		width: 100%;
		/* Refuerza el ancho total */
		min-width: 0;
		/* Evita que el input desborde el flexbox */
	}

	/* Contenedor del input dentro del grupo para que estire */
	.field-group.ancho-grande input {
		width: 100%;
		flex-grow: 1;
	}

	/* Para nombres, email, dirección */
	.ancho-medio {
		width: 180px !important;
	}

	.ancho-corto {
		width: 100px !important;
	}

	.input-full {
		flex: 1;
		width: 100%;
	}

	/* Estilo para los labels dentro de la tabla */
	/* Ajuste opcional para etiquetas que no deben romperse */
	.label-text {
		flex-shrink: 0;
		/* Evita que el texto "EMAIL:" se comprima */
		margin-right: 10px;
	}

	/* Estilo para los selects y inputs dentro de esta tabla */
	.tabla-formulario select,
	.tabla-formulario input[type="text"],
	.tabla-formulario input[type="email"],
	.tabla-formulario input[type="date"] {
		padding: 6px 10px;
		border: 1px solid var(--border-color);
		border-radius: 4px;
		background: #f9f9f9;
	}

	.tabla-formulario input[readonly] {
		background: #eee;
		cursor: not-allowed;
	}

	/* Esto asegura que los inputs que son READONLY (como Cédula o Nombre) 
   se diferencien visualmente de los que sí se pueden editar */
	.tabla-formulario input[readonly] {
		background-color: #f5f5f5;
		color: #666;
		cursor: not-allowed;
		border-color: #ddd;
	}

	/* Ajuste para los Radio Buttons para que no se vean pegados al texto */
	.field-group label {
		display: flex;
		align-items: center;
		gap: 5px;
		font-size: 16px;
		/*	font-weight: bold;*/
		cursor: pointer;
	}

	/* 1. Obligamos a la celda única a ocupar todo el ancho disponible */
.tabla-formulario td {
    width: 100% !important;
    display: table-cell; /* Aseguramos que se comporte como celda de ancho completo */
}

/* 2. Seleccionamos específicamente los grupos de Email y Dirección */
.field-group:has(input[name="email"]), 
.field-group:has(input[name="direccion"]),
.field-group:has(input[name="direccion_detallada"]) {
    display: flex !important;
    flex-direction: row; /* Label a la izquierda, input a la derecha */
    align-items: center;
    width: 100% !important;
    gap: 10px;
}

/* Mantenemos tu ajuste de Email que ya funcionó */
input[name="email"] {
    width: 90% !important;
    min-width: 90% !important;
}

/* Ajuste específico para la fila donde está la Dirección */
.field-group:has(input[name="direccion"]), 
.field-group:has(input[name="direccion_detallada"]) {
    flex: 1 1 auto !important; /* Esto obliga a este grupo a estirarse al máximo */
    display: flex !important;
}

input[name="direccion"], 
input[name="direccion_detallada"] {
    width: 100% !important; /* 100% del espacio que el flexbox le asigne */
    flex-grow: 1 !important; /* Esta es la clave para que rellene el hueco derecho */
    min-width: 200px !important; /* Evita que se haga demasiado chiquito en móviles */
    box-sizing: border-box !important;
}
/* 1. Mantenemos el Email como lo tenías (que funcionaba al 90%) */
input[name="email"] {
    width: 90% !important;
    min-width: 90% !important;
}

/* 2. REGLA SOLO PARA DIRECCIÓN: 
   Atacamos al form-row que está DENTRO de otro td */
td > .form-row {
    display: flex !important;
    width: 100% !important;
    align-items: center;
}

/* Forzamos al segundo form-row (donde está la dirección) a estirarse */
.form-row > .form-row {
    flex-grow: 1 !important; /* Esto toma el espacio que dejan Estado y Municipio */
    display: flex !important;
}

/* El grupo de dirección ahora sí se expande */
.form-row .ancho-grande {
    flex: 1 !important;
    width: 100% !important;
}

.form-row .ancho-grande input[name="direccion"] {
   width: 100% !important; 
    min-width: 580px !important;
}
* El grupo específico de la dirección */
.field-group.ancho-grande {
    flex: 10 !important; /* <--- Aumenta este número (de 1 a 10) para darle más prioridad de crecimiento */
    min-width: 500px !important; /* <--- MODIFICA AQUÍ: Sube este valor (ej. 600px, 700px) para forzar el largo */
}

/* Contenedor principal */
    .container-login {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        align-items: flex-start;
    }

    /* Formulario a la derecha - ocupa 1 parte */
    .container-form-login {
        flex: 1;
        min-width: 280px;
        background-color: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 20px;
        order: 2;
    }

    /* Panel informativo a la izquierda - ocupa 3 partes (más espacio) */
    .container-accion-footer {
        flex: 3;
        min-width: 320px;
        order: 1;
    }

    /* Iframe responsive */
    .container-form-login iframe {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 300px;
    }

    /* Estilo para la celda contenedora */
    .col-programas {
        vertical-align: top;
        padding: 15px !important;
    }

    /* Estilo para los <p> como títulos */
    .titulo-lista {
        color: var(--primary);
        /* El color azul que definimos antes */
        font-weight: 800;
        font-family: 'Plus Jakarta Sans', Arial, sans-serif;
        font-size: 1.1rem;
        /* Un poco más pequeño que el anterior para que quepa bien */
        margin-bottom: 6px;
        margin-top: 12px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* Estilo para las listas y viñetas */
    .lista-vinetas {
        list-style-type: disc !important;
        margin-left: 20px !important;
        margin-bottom: 15px;
        padding-left: 5px !important;
    }

    .lista-vinetas li {
        color: var(--text-secondary);
        font-weight: 500;
        font-size: 1.1rem;
        margin-bottom: 5px;
        line-height: 1.4;
        display: list-item !important;
    }

    /* Móviles: apilar */
    @media (max-width: 768px) {
        .container-login {
            flex-direction: column;
        }

        .container-form-login,
        .container-accion-footer {
            width: 100%;
            order: 0;
            flex: auto;
        }
    }