/* ***** css click-identy ***** */

#clck_main, #clck_login{
	text-align: center;
	color: #fff;
	margin-top: -24px;
}
#clck_main h1, .clck_main_title {
	padding: 30px 1rem 8px;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

#clck_main, #pnlGrd_opciones #pnlGrd_opciones_content, #clck_login, .pnl_ver_solicitud{
	background-color: #4686a0;
	background-attachment: fixed, fixed, fixed;
	background-image: url("/jakarta.faces.resource/img/overlay2.png.html"), url("/jakarta.faces.resource/img/overlay3.svg.html"), linear-gradient(45deg, #9dc66b 5%, #4fa49a 30%, #4361c2);
}

#clck_pmenubar .ui-menubar{
	border-top:none; 
	border-right: none; 
	border-left: none;
}

/* ═════════════════════════════════════════════════════════════════════
   BRANDING & LOGO RESPONSIVO INSTITUCIONAL CLICK IDENTY (SPEC-0011)
   ═════════════════════════════════════════════════════════════════════ */

/* Enlace contenedor del logo */
.clck_logo_link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
	vertical-align: middle;
}

/* Máscara blanca institucional (Patrón co-branding con elevación sutil) */
.brand-logo-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 1px solid #EADFF5;
	border-radius: 8px;
	padding: 0.35rem 0.75rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	line-height: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.brand-logo-badge:hover {
	box-shadow: 0 4px 12px rgba(134, 59, 255, 0.18);
	transform: translateY(-1px);
}

/* Imagen del logo oficial a color Click Identy */
.brand-logo-img {
	height: 42px;
	width: auto;
	max-width: 45vw;
	object-fit: contain;
	display: block;
	flex-shrink: 1;
	transition: height 0.2s ease;
}

/* Wrapper y variante para el login */
.clck_logo_login_wrapper {
	text-align: center;
	padding: 20px 0 10px;
}

.brand-logo-badge-login {
	padding: 0.6rem 1.25rem;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
	background: #FFFFFF;
}

.brand-logo-badge-login:hover {
	box-shadow: 0 6px 24px rgba(134, 59, 255, 0.24);
}

.brand-logo-img-login {
	height: 56px;
	max-width: 80vw;
}

/* Menú bar responsive y alineación vertical */
#clck_menubar {
	width: 100%;
}

#clck_pmenubar.ui-menubar,
#clck_pmenubar .ui-menubar {
	display: flex;
	align-items: center;
	border-top: none;
	border-right: none;
	border-left: none;
	padding: 0.4rem 1rem;
	min-height: 58px;
}

#clck_pmenubar .ui-menubar .ui-menu-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.clck_menuitem_top > .ui-menuitem-link {
	padding: 0.65rem 0.85rem !important;
	display: flex;
	align-items: center;
}

/* Regla fallback para compatibilidad con código legado (#clck_logo) */
#clck_logo {
	display: inline-block;
	background-image: url("/jakarta.faces.resource/img/logo_clickidenty.png.html");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 42px;
	width: 86px;
	max-width: 45vw;
	margin: 2px 8px;
	vertical-align: middle;
	transition: height 0.2s ease, width 0.2s ease;
}

/* ── ADAPTACIÓN RESPONSIVE POR DISPOSITIVO (BREAKPOINTS) ── */

/* 1. Laptops y Desktop estándar (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	.brand-logo-img {
		height: 38px;
	}
	.brand-logo-badge {
		padding: 0.3rem 0.65rem;
		border-radius: 7px;
	}
	.brand-logo-img-login {
		height: 48px;
	}
	#clck_logo {
		height: 38px;
		width: 78px;
	}
}

/* 2. Tablets y pantallas medianas (641px – 767px) */
@media (min-width: 641px) and (max-width: 767px) {
	.brand-logo-img {
		height: 34px;
	}
	.brand-logo-badge {
		padding: 0.25rem 0.55rem;
		border-radius: 7px;
	}
	.brand-logo-img-login {
		height: 44px;
	}
	#clck_logo {
		height: 34px;
		width: 70px;
	}
}

/* 3. Móviles estándar / Celulares (381px – 640px) */
@media (max-width: 640px) {
	.brand-logo-img {
		height: 28px;
		max-width: 42vw;
	}
	.brand-logo-badge {
		padding: 0.2rem 0.45rem;
		border-radius: 6px;
	}
	.brand-logo-img-login {
		height: 38px;
		max-width: 75vw;
	}
	.brand-logo-badge-login {
		padding: 0.4rem 0.85rem;
	}
	#clck_logo {
		height: 28px;
		width: 58px;
		max-width: 40vw;
	}
	#clck_pmenubar.ui-menubar,
	#clck_pmenubar .ui-menubar {
		padding: 0.3rem 0.5rem;
		min-height: 48px;
	}
	.clck_menuitem_top > .ui-menuitem-link {
		padding: 0.5rem 0.6rem !important;
	}
}

/* 4. Celulares ultra-estrechos (<= 380px) */
@media (max-width: 380px) {
	.brand-logo-img {
		height: 22px;
		max-width: 38vw;
	}
	.brand-logo-badge {
		padding: 0.15rem 0.35rem;
		border-radius: 5px;
	}
	.brand-logo-img-login {
		height: 32px;
		max-width: 70vw;
	}
	#clck_logo {
		height: 22px;
		width: 45px;
	}
}

/* ═════════════════════════════════════════════════════════════════════
   LANDING MULTIDISPOSITIVO & CARDS INTERACTIVAS (SPEC-P-10 / SPEC-0051)
   ═════════════════════════════════════════════════════════════════════ */

.clck_cards_container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.75rem;
	max-width: 1140px;
	margin: 1.5rem auto 2.5rem;
	padding: 0 1.25rem;
	align-items: stretch;
}

.clck_modern_card {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid #EADFF5;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(24, 17, 36, 0.08);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.75rem 1.5rem;
	text-align: center;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
	box-sizing: border-box;
}

.clck_modern_card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(134, 59, 255, 0.18);
	border-color: #863BFF;
}

.clck_card_header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 0.5rem;
}

.clck_card_badge {
	display: inline-block;
	background: #F0EAF8;
	color: #6F2BE0;
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 0.25rem 0.85rem;
	border-radius: 20px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.clck_badge_popular {
	background: #863BFF;
	color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(134, 59, 255, 0.3);
}

.clck_card_title {
	font-size: 1.35rem;
	font-weight: 700;
	color: #181124;
	margin: 0.25rem 0 0;
	line-height: 1.25;
}

.clck_card_desc {
	font-size: 0.875rem;
	color: #4A3E5D;
	margin: 0;
	line-height: 1.4;
	min-height: 2.8em;
}

.clck_card_body {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clck_card_illustration {
	width: 100%;
	height: 210px;
	max-height: 210px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin: 0.75rem auto;
	transition: transform 0.3s ease;
}

.clck_modern_card:hover .clck_card_illustration {
	transform: scale(1.03);
}

#personaNaturalAnimation {
	background-image: url("/jakarta.faces.resource/img/img_inicio_nat.png.html");
}

#representanteLegalAnimation {
	background-image: url("/jakarta.faces.resource/img/img_inicio_jur.png.html");
}

.clck_card_illustration_mie {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F0EAF8;
	border-radius: 12px;
	border: 1px dashed #863BFF;
}

.clck_card_corporate_icon {
	font-size: 64px !important;
	color: #863BFF !important;
	opacity: 0.85;
}

.clck_card_footer {
	margin-top: 1.25rem;
	width: 100%;
}

.clck_card_btn,
.ui-button.clck_card_btn {
	min-height: 48px !important;
	height: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	border-radius: 24px !important;
	background: #863BFF !important;
	border: 1px solid #863BFF !important;
	color: #FFFFFF !important;
	box-shadow: 0 4px 14px rgba(134, 59, 255, 0.25) !important;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
	text-decoration: none !important;
	width: 100% !important;
	padding: 0.65rem 1rem !important;
	white-space: normal !important;
	text-wrap: pretty !important;
	box-sizing: border-box !important;
}

.clck_card_btn:hover,
.ui-button.clck_card_btn:hover {
	background: #6F2BE0 !important;
	border-color: #6F2BE0 !important;
	box-shadow: 0 6px 20px rgba(134, 59, 255, 0.4) !important;
	transform: translateY(-2px);
}

.clck_card_btn:focus-visible,
.ui-button.clck_card_btn:focus-visible {
	outline: 3px solid #863BFF !important;
	outline-offset: 2px !important;
}

.clck_card_btn .ui-icon {
	color: #FFFFFF !important;
}

/* Reglas heredadas para formularios y solicitudes */
#clck_pnl_nat, #clck_pnl_jur, #clck_pnl_mie {
	box-sizing: border-box;
}

#clck_pnl_reg_per_nat, #clck_pnl_reg_per_jur {
	text-align: left;
}

#formUsuario {
	padding: 0 9%;
}

.clck_pnl_form, .pnl_ver_solicitud {
	text-align: left;
}

/* ═════════════════════════════════════════════════════════════════════
   MODERNIZACIÓN DE PANTALLA DE LOGIN Y ERROR (SPEC-P-10 SPRINT 2)
   ═════════════════════════════════════════════════════════════════════ */

.clck_login_page_container {
	min-height: calc(100vh - 120px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 1rem 3rem;
	box-sizing: border-box;
}

.clck_login_card {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid #EADFF5;
	border-radius: 20px;
	box-shadow: 0 15px 35px rgba(24, 17, 36, 0.12);
	max-width: 440px;
	width: 100%;
	padding: 2.25rem 2rem;
	text-align: left;
	box-sizing: border-box;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	margin: 0.5rem auto 1.5rem;
}

.clck_login_header {
	text-align: center;
	margin-bottom: 1.75rem;
}

.clck_login_title {
	font-size: 1.6rem;
	font-weight: 700;
	color: #181124;
	margin: 0 0 0.4rem;
	letter-spacing: -0.01em;
}

.clck_login_subtitle {
	font-size: 0.9rem;
	color: #4A3E5D;
	margin: 0;
	line-height: 1.4;
}

.clck_login_form {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.clck_form_group {
	margin-bottom: 1.25rem;
	width: 100%;
}

.clck_form_label,
.ui-outputlabel.clck_form_label {
	display: block !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: #181124 !important;
	margin-bottom: 0.45rem !important;
}

.clck_input_wrapper {
	width: 100%;
	position: relative;
	display: block;
}

.clck_input_wrapper > i.pi {
	position: absolute;
	top: 50%;
	left: 0.9rem;
	transform: translateY(-50%);
	color: #8C7E9F;
	font-size: 1.1rem;
	z-index: 2;
	pointer-events: none;
}

.clck_form_input,
.ui-inputfield.clck_form_input {
	width: 100% !important;
	min-height: 48px !important;
	height: 48px !important;
	font-size: 0.95rem !important;
	border: 1px solid #8C7E9F !important;
	border-radius: 10px !important;
	padding: 0.65rem 0.85rem 0.65rem 2.6rem !important;
	box-sizing: border-box !important;
	background: #FFFFFF !important;
	color: #181124 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.clck_form_input:focus,
.ui-inputfield.clck_form_input:focus {
	border-color: #863BFF !important;
	outline: 3px solid #863BFF !important;
	outline-offset: 2px !important;
}

/* Visor de clave PrimeFaces con toggleMask */
.clck_input_wrapper .ui-password {
	width: 100% !important;
	display: block !important;
	position: relative !important;
}

.clck_input_wrapper .ui-password > input {
	width: 100% !important;
	min-height: 48px !important;
	height: 48px !important;
	font-size: 0.95rem !important;
	border: 1px solid #8C7E9F !important;
	border-radius: 10px !important;
	padding: 0.65rem 2.6rem 0.65rem 2.6rem !important;
	box-sizing: border-box !important;
	background: #FFFFFF !important;
	color: #181124 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.clck_input_wrapper .ui-password > input:focus {
	border-color: #863BFF !important;
	outline: 3px solid #863BFF !important;
	outline-offset: 2px !important;
}

.clck_input_wrapper .ui-password .ui-password-toggle {
	position: absolute !important;
	top: 50% !important;
	right: 0.85rem !important;
	transform: translateY(-50%) !important;
	color: #8C7E9F !important;
	cursor: pointer !important;
	font-size: 1.15rem !important;
	z-index: 3 !important;
	padding: 4px !important;
}

.clck_input_wrapper .ui-password .ui-password-toggle:hover {
	color: #863BFF !important;
}

.clck_login_btn_wrapper {
	margin-top: 0.75rem;
	width: 100%;
}

.clck_login_btn,
.ui-button.clck_login_btn {
	width: 100% !important;
}

.clck_login_footer_links {
	margin-top: 1.5rem;
	text-align: center;
}

.clck_back_link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #6F2BE0;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.clck_back_link:hover {
	color: #863BFF;
	transform: translateX(-3px);
	text-decoration: underline;
}

.clck_login_divider {
	margin: 1.5rem 0 !important;
	border-color: #EADFF5 !important;
}

.clck_login_instructions {
	text-align: center;
	margin-top: 1rem;
}

.clck_instruction_img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* ── Estilos de Tarjeta de Error (login-error.xhtml) ── */
.clck_error_card {
	text-align: center !important;
	border-top: 4px solid #B91C1C !important;
}

.clck_error_icon_wrapper {
	margin: 0.5rem auto 1rem;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #FDECEC;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clck_error_icon {
	font-size: 32px !important;
	color: #B91C1C !important;
}

.clck_error_title {
	color: #B91C1C !important;
	font-size: 1.45rem !important;
}

.clck_error_header {
	margin-bottom: 1.5rem;
}

.clck_error_actions {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-top: 1.75rem;
	width: 100%;
}

.clck_btn_secondary,
.ui-button.clck_btn_secondary {
	min-height: 48px !important;
	height: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	border-radius: 24px !important;
	background: #FFFFFF !important;
	border: 2px solid #863BFF !important;
	color: #6F2BE0 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
	width: 100% !important;
	padding: 0.65rem 1rem !important;
	box-sizing: border-box !important;
}

.clck_btn_secondary:hover,
.ui-button.clck_btn_secondary:hover {
	background: #F0EAF8 !important;
	border-color: #6F2BE0 !important;
	color: #863BFF !important;
	transform: translateY(-1px);
}

/* Fallback legado para compatibilidad */
#clck_title_login {
	padding: 20px 0;
}

#clck_pnl_boton_login {
	padding: 10px 0;
}

#panelGridUsuario, #clck_pnl_boton_user {
	width: 75%;
	margin: 0 auto;
}

.label_center {
	text-align: center !important;
}

.pnl_ver_solicitud h1 {
	color: #fff;
	text-align: center;
}

/* ═════════════════════════════════════════════════════════════════════
   FOOTER INSTITUCIONAL RESPONSIVO
   ═════════════════════════════════════════════════════════════════════ */

#pnl_footer {
	font-size: 16px;
	padding: 1.5rem 1rem 2.5rem;
	color: #FFFFFF;
}

#pnl_footer a {
	color: #FFFFFF;
	text-decoration: underline;
	transition: opacity 0.2s ease;
}

#pnl_footer a:hover {
	opacity: 0.85;
}

#ft_contacto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0;
}

.ft_title {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.ft_subtitle {
	font-size: 0.95rem;
	opacity: 0.92;
}

.ft_whatsapp {
	font-size: 0.95rem;
	margin-top: 0.2rem;
}

#pnl_redes_sociales {
	padding: 0.85rem 0 0;
}

#pnl_redes_sociales ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
}

#pnl_redes_sociales ul li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.fa {
	color: #fff;
	padding: 0 4px;
	font-size: 32px !important;
	text-decoration: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.fa:hover {
	transform: scale(1.15);
	opacity: 0.9;
}

/* ═════════════════════════════════════════════════════════════════════
   MEDIA QUERIES PARA ADAPTACIÓN MÓVIL Y TABLETS
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	.clck_cards_container {
		grid-template-columns: 1fr;
		gap: 1.25rem;
		padding: 0 1rem;
		margin: 1rem auto 2rem;
	}
	.clck_card_illustration {
		height: 180px;
		max-height: 180px;
	}
	.clck_modern_card {
		padding: 1.25rem 1rem;
	}
	.ft_title {
		font-size: 1.05rem;
	}
	.ft_subtitle {
		font-size: 0.88rem;
	}
}

@media (max-width: 380px) {
	.clck_cards_container {
		padding: 0 0.5rem;
		gap: 1rem;
	}
	.clck_card_title {
		font-size: 1.2rem;
	}
	.clck_card_desc {
		font-size: 0.8125rem;
	}
	.clck_card_illustration {
		height: 150px;
		max-height: 150px;
	}
	.clck_card_btn,
	.ui-button.clck_card_btn {
		font-size: 0.875rem !important;
		padding: 0.5rem 0.75rem !important;
	}
	.fa {
		font-size: 26px !important;
	}
}

/* ═════════════════════════════════════════════════════════════════════
   EXPERIENCIA SENIOR UI/UX: ALTA LEGIBILIDAD (70+ ANOS) & GRID FLUIDO
   ═════════════════════════════════════════════════════════════════════ */
#panelDatosSolicitud .ui-grid-row {
	display: flex !important;
	flex-wrap: wrap !important;
	width: 100% !important;
	gap: 10px !important;
	margin-bottom: 6px !important;
}

#panelDatosSolicitud .ui-grid-row > .ui-grid-col-3 {
	flex: 1 1 calc(25% - 8px) !important;
	max-width: calc(25% - 8px) !important;
	width: calc(25% - 8px) !important;
	box-sizing: border-box !important;
}

#panelDatosSolicitud .ui-grid-row > .ui-grid-col-4 {
	flex: 1 1 calc(33.333% - 7px) !important;
	max-width: calc(33.333% - 7px) !important;
	width: calc(33.333% - 7px) !important;
	box-sizing: border-box !important;
}

#panelDatosSolicitud .ui-grid-row > .ui-grid-col-6 {
	flex: 1 1 calc(50% - 5px) !important;
	max-width: calc(50% - 5px) !important;
	width: calc(50% - 5px) !important;
	box-sizing: border-box !important;
}

#panelDatosSolicitud .ui-grid-row > .ui-grid-col-12 {
	flex: 1 1 100% !important;
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.borde-grid, div.borde-grid {
	border: 1.5px solid #cbd5e1 !important;
	border-radius: 10px !important;
	background-color: #ffffff !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
	padding: 10px 12px !important;
	box-sizing: border-box !important;
	transition: all 0.15s ease-in-out !important;
}

.borde-grid:hover, div.borde-grid:hover {
	border-color: #94a3b8 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.borde-grid:focus-within, div.borde-grid:focus-within {
	border-color: #863bff !important;
	box-shadow: 0 0 0 3px rgba(134, 59, 255, 0.18) !important;
}

/* Forzar que las tablas internas PrimeFaces dentro del card tomen el 100% */
.borde-grid .ui-panelgrid,
.borde-grid .ui-panelgrid-content,
.borde-grid .ui-panelgrid tr,
.borde-grid .ui-panelgrid td {
	width: 100% !important;
	box-sizing: border-box !important;
	display: block !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

/* Labels de alta legibilidad para personas de hasta 70 anos (15.5px, maximo contraste Slate-900) */
.borde-grid .ui-outputlabel {
	font-size: 0.96875rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin-bottom: 5px !important;
	display: block !important;
	text-align: left !important;
	letter-spacing: -0.01em !important;
}

/* Expansion fluida al 100% de ancho de todos los controles */
.borde-grid input.ui-inputtext,
.borde-grid .ui-inputfield,
.borde-grid .ui-selectonemenu,
.borde-grid .ui-datepicker,
.borde-grid .ui-inputgroup {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Controles de texto y selects (16px y 44px de altura ergonomica) */
.borde-grid input.ui-inputtext,
.borde-grid .ui-selectonemenu {
	height: 44px !important;
	line-height: 44px !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	border-radius: 8px !important;
	border: 1.5px solid #cbd5e1 !important;
	color: #0f172a !important;
	background-color: #f8fafc !important;
	padding: 0 12px !important;
	transition: all 0.15s ease !important;
	box-sizing: border-box !important;
}

.borde-grid input.ui-inputtext:focus,
.borde-grid .ui-selectonemenu.ui-state-focus {
	background-color: #ffffff !important;
	border-color: #863bff !important;
	box-shadow: 0 0 0 3px rgba(134, 59, 255, 0.15) !important;
}

.borde-grid .ui-selectonemenu .ui-selectonemenu-label {
	height: 44px !important;
	line-height: 44px !important;
	font-size: 1rem !important;
	padding-left: 12px !important;
	box-sizing: border-box !important;
	text-align: left !important;
	width: 100% !important;
}

.borde-grid .ui-datepicker input {
	width: calc(100% - 42px) !important;
	height: 44px !important;
	font-size: 1rem !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.borde-grid .ui-datepicker .ui-datepicker-trigger {
	height: 44px !important;
	width: 42px !important;
	border-top-right-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
	background: #863bff !important;
	border-color: #863bff !important;
}

.borde-grid .ui-inputgroup .ui-inputtext {
	width: calc(100% - 4.5rem) !important;
	height: 44px !important;
	font-size: 1rem !important;
}

.borde-grid .ui-inputgroup .ui-button {
	height: 44px !important;
}

/* Opciones de desplegables con espacio comodo de seleccion */
.ui-selectonemenu-panel .ui-selectonemenu-item {
	font-size: 0.96875rem !important;
	padding: 8px 12px !important;
}

/* Cabeceras semanticas compactas (ahorro vertical) */
.seccion-form-header {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f1f5f9;
	border-left: 4px solid #863bff;
	border-top: 1px solid #e2e8f0;
	border-right: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 6px 12px;
	margin: 10px 0 6px 0;
	font-size: 0.96875rem;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.seccion-form-header i {
	color: #863bff;
	font-size: 1.15rem;
}

.feedback-optimizacion-img {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 6px;
	color: #065f46;
	font-size: 11px;
	font-weight: 600;
	margin-top: 6px;
	animation: fadeInOpt 0.3s ease-in-out;
}

@keyframes fadeInOpt {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

@media screen and (max-width: 992px) {
	#panelDatosSolicitud .ui-grid-row > .ui-grid-col-3,
	#panelDatosSolicitud .ui-grid-row > .ui-grid-col-4,
	#panelDatosSolicitud .ui-grid-row > .ui-grid-col-6 {
		flex: 1 1 calc(50% - 5px) !important;
		max-width: calc(50% - 5px) !important;
	}
}

@media screen and (max-width: 640px) {
	#panelDatosSolicitud .ui-grid-row > .ui-grid-col-3,
	#panelDatosSolicitud .ui-grid-row > .ui-grid-col-4,
	#panelDatosSolicitud .ui-grid-row > .ui-grid-col-6 {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
	.borde-grid {
		padding: 8px 10px !important;
		margin-bottom: 4px !important;
	}
	.borde-grid input.ui-inputtext,
	.borde-grid .ui-selectonemenu {
		height: 44px !important;
		line-height: 44px !important;
	}
	.seccion-form-header {
		font-size: 0.9rem;
		padding: 6px 10px;
	}
}

/* =====================================================================
   ESTILO ERGONOMICO DE PLACEHOLDERS (ALTA LEGIBILIDAD SENIOR WCAG AAA)
   Diferenciacion visual inmediata: cursiva y tono Slate-400 suave
   ===================================================================== */
.borde-grid input.ui-inputtext::placeholder,
.borde-grid .ui-inputfield::placeholder,
.borde-grid textarea::placeholder,
.clck_pnl_form input::placeholder,
input.ui-inputtext::placeholder {
	color: #94a3b8 !important;
	font-style: italic !important;
	font-weight: 400 !important;
	font-size: 0.9375rem !important;
	text-transform: none !important;
	opacity: 1 !important;
}

.borde-grid input.ui-inputtext::-webkit-input-placeholder,
.borde-grid .ui-inputfield::-webkit-input-placeholder,
input.ui-inputtext::-webkit-input-placeholder {
	color: #94a3b8 !important;
	font-style: italic !important;
	font-weight: 400 !important;
	font-size: 0.9375rem !important;
	text-transform: none !important;
	opacity: 1 !important;
}

.borde-grid input.ui-inputtext::-moz-placeholder,
.borde-grid .ui-inputfield::-moz-placeholder,
input.ui-inputtext::-moz-placeholder {
	color: #94a3b8 !important;
	font-style: italic !important;
	font-weight: 400 !important;
	font-size: 0.9375rem !important;
	text-transform: none !important;
	opacity: 1 !important;
}

/* =====================================================================
   ANULACION ABSOLUTA DE IMAGENES DE FONDO DE EJEMPLO EN ARCHIVOS CARGADOS
   ===================================================================== */
.fila_archivos.archivo-cargado,
td.fila_archivos.archivo-cargado,
div.fila_archivos.archivo-cargado,
.cedula-frente.archivo-cargado,
.cedula-reverso.archivo-cargado,
.selfie.archivo-cargado,
.recibo.archivo-cargado,
.ruc.archivo-cargado,
.pdf.archivo-cargado,
.pdf-cedula.archivo-cargado,
.video.archivo-cargado {
	background-image: none !important;
	background-color: #ffffff !important;
}



/* ===== Solicitudes: «Editar» bloqueado para socios (solicitud ENVIADA a autorización) ===== */
.clck_editar_bloqueado {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.75rem;
	border: 1px dashed #9ca3af;
	border-radius: 6px;
	color: #4b5563;
	background: #f3f4f6;
	cursor: not-allowed;
	white-space: nowrap;
	user-select: none;
}
.clck_editar_bloqueado:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* ===== Correo: aviso al salir del campo (correo.js) ===== */
.clck_correo_aviso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin-top: 0.35rem;
	font-size: 0.85rem;
	line-height: 1.35;
	color: #374151;
}
.clck_correo_aviso_error {
	color: #b91c1c;
}
.clck_correo_aviso_aviso {
	color: #92400e;
}
.clck_correo_input_error.ui-inputfield {
	border-color: #dc2626;
}
.clck_correo_sugerencia {
	padding: 0.2rem 0.55rem;
	border: 1px solid #93c5fd;
	border-radius: 999px;
	background: #eff6ff;
	color: #1d4ed8;
	font: inherit;
	cursor: pointer;
}
.clck_correo_sugerencia:hover {
	background: #dbeafe;
}
.clck_correo_sugerencia:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* ===== Registro Exitoso: aviso para validar por WhatsApp ===== */
.clck_exito_whatsapp {
	max-width: 640px;
	margin: 1rem auto;
	padding: 1.25rem 1.5rem;
	border: 1px solid #bbf7d0;
	border-left: 6px solid #25d366;
	border-radius: 12px;
	background: #f0fdf4;
	color: #14532d;
	box-sizing: border-box;
}
.clck_exito_whatsapp_cabecera {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.clck_exito_whatsapp_icono {
	font-size: 2rem;
	color: #25d366;
	flex: 0 0 auto;
}
.clck_exito_whatsapp_titulo {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.35;
	color: #14532d;
}
.clck_exito_whatsapp_solicitud,
.clck_exito_whatsapp_texto,
.clck_exito_whatsapp_alternativa {
	margin: 0.6rem 0 0;
	line-height: 1.45;
}
.clck_exito_whatsapp_boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	background: #0f7a3d;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.clck_exito_whatsapp_boton:hover {
	background: #0e6f37;
}
.clck_exito_whatsapp_boton:focus-visible {
	outline: 3px solid #14532d;
	outline-offset: 3px;
}
.clck_exito_whatsapp_alternativa {
	font-size: 0.9rem;
	color: #166534;
}
@media (max-width: 640px) {
	.clck_exito_whatsapp {
		margin: 0.75rem 0;
		padding: 1rem;
	}
	.clck_exito_whatsapp_titulo {
		font-size: 1.05rem;
	}
	.clck_exito_whatsapp_boton {
		display: flex;
		width: 100%;
		box-sizing: border-box;
	}
}

/* El borde de la capa web del 1-oct (.borde-grid, con !important) tapaba el aviso de error del correo de firmas#16. */
.borde-grid input.ui-inputtext.clck_correo_input_error {
	border-color: #dc2626 !important;
}