/* Estilos de las páginas públicas (formulario de reclamos y comprobante).
   Paleta heredada del diseño original (styles.css, BS3) con el naranjo
   suavizado: original rgb(255,85,36) → rgb(238,126,89). Morado rgba(159,81,153),
   links #002983/#008f3d, fondo antay-logo.png con paneles blancos translúcidos.
   El panel interno sigue usando styles.css + Bootstrap 3; no mezclar. */

:root {
	--marca-naranjo: rgb(238, 126, 89);
	--marca-naranjo-rgb: 238, 126, 89;
	--marca-morado: rgb(159, 81, 153);
	--marca-morado-suave: rgba(159, 81, 153, .85);
}

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background: #fefefe url('../images/antay-logo.png') no-repeat center center fixed;
	background-size: cover;
	color: #666;
}

a {
	color: #002983;
}

a:hover {
	color: #008f3d;
	text-decoration: none;
}

main.container {
	max-width: 860px;
}

/* Paneles blancos translúcidos sobre la imagen de fondo, con desenfoque suave */
.card {
	--bs-card-bg: rgba(255, 255, 255, .85);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Botones con la paleta de la marca: naranjo con hover/activo morado */
.btn-marca {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--marca-naranjo);
	--bs-btn-border-color: var(--marca-naranjo);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--marca-morado);
	--bs-btn-hover-border-color: var(--marca-morado);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--marca-morado);
	--bs-btn-active-border-color: var(--marca-morado);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--marca-naranjo);
	--bs-btn-disabled-border-color: var(--marca-naranjo);
	--bs-btn-focus-shadow-rgb: var(--marca-naranjo-rgb);
}

/* Versión outline: botones "Anterior" y radios de "Medio de respuesta"
   (el estado seleccionado .btn-check:checked + .btn usa las variables active) */
.btn-outline-marca {
	--bs-btn-color: var(--marca-naranjo);
	--bs-btn-bg: rgba(255, 255, 255, .8);
	--bs-btn-border-color: var(--marca-naranjo);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(var(--marca-naranjo-rgb), .8);
	--bs-btn-hover-border-color: var(--marca-naranjo);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--marca-naranjo);
	--bs-btn-active-border-color: var(--marca-naranjo);
	--bs-btn-focus-shadow-rgb: var(--marca-naranjo-rgb);
}

/* Campos del formulario con la paleta de la marca */
.form-control,
.form-select {
	background-color: rgba(255, 255, 255, .9);
	border-color: rgba(var(--marca-naranjo-rgb), .4);
	color: #444;
}

.form-control::placeholder {
	color: #b0a9a5;
}

.form-control:focus,
.form-select:focus {
	background-color: #fff;
	border-color: var(--marca-naranjo);
	box-shadow: 0 0 0 .25rem rgba(var(--marca-naranjo-rgb), .2);
	color: #333;
}

.col-form-label {
	color: #555;
}

/* Honeypot: debe quedar invisible para personas, presente para bots */
.hp-field {
	display: none !important;
}

/* Stepper del wizard */
#stepper .nav-link {
	/* appearance:none + translateZ: sin ellos algunos navegadores (Safari)
	   no aplican backdrop-filter sobre <button> */
	-webkit-appearance: none;
	appearance: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transform: translateZ(0);
	border: 1px solid var(--bs-border-color);
	color: var(--marca-naranjo);
	background-color: rgba(255, 255, 255, .8);
	border-radius: .5rem;
	line-height: 1.2;
	padding: .75rem .5rem;
}

#stepper .nav-link.active {
	color: #fff;
	background-color: var(--marca-naranjo);
	border-color: var(--marca-naranjo);
}

#stepper .nav-link.active:hover {
	background-color: var(--marca-morado-suave);
	border-color: var(--marca-morado-suave);
}

#stepper .nav-link:disabled {
	opacity: .55;
}

/* Texto de ayuda de un campo (ej. instrucciones del apoderado) */
.ayuda-campo {
	background-color: rgba(var(--marca-naranjo-rgb), .07);
	border-left: 3px solid var(--marca-naranjo);
	border-radius: 0 .5rem .5rem 0;
	color: #555;
	font-size: .85rem;
	font-style: italic;
	line-height: 1.6;
	margin-top: .6rem;
	padding: .65rem .9rem;
}

/* Bloque de datos del apoderado */
#bloque-apoderado {
	background-color: rgba(255, 255, 255, .75);
	border: 1px solid rgba(var(--marca-naranjo-rgb), .35);
	border-left: 3px solid var(--marca-naranjo);
	border-radius: 0 .5rem .5rem 0;
	padding: 1rem 1.25rem .1rem;
	margin-bottom: 1rem;
}

/* float:left (reboot de Bootstrap) saca el legend del borde nativo del
   fieldset y lo deja fluir dentro de la caja; el clear evita solapes */
#bloque-apoderado legend {
	color: var(--marca-naranjo);
	float: left;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(var(--marca-naranjo-rgb), .25);
	padding-bottom: .4rem;
	margin-bottom: .75rem;
	width: 100%;
}

#bloque-apoderado legend + * {
	clear: left;
}

/* Paso 3: confirmación con resumen */
.titulo-confirmacion {
	color: var(--marca-naranjo);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: .25rem;
}

.resumen {
	background-color: rgba(255, 255, 255, .75);
	border: 1px solid rgba(var(--marca-naranjo-rgb), .35);
	border-left: 3px solid var(--marca-naranjo);
	border-radius: 0 .5rem .5rem 0;
	padding: 1.25rem 1.5rem;
}

.resumen-titulo {
	color: var(--marca-naranjo);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(var(--marca-naranjo-rgb), .25);
	padding-bottom: .4rem;
	margin-bottom: .75rem;
}

.resumen dt {
	color: #888;
	font-size: .85rem;
	font-weight: 600;
	padding-top: .1rem;
}

.resumen dd {
	color: #333;
	margin-bottom: .5rem;
}

/* Solo para valores generados por JS (textarea con saltos de línea) */
.texto-prewrap {
	white-space: pre-wrap;
}

.nota-legal {
	border-top: 1px solid rgba(var(--marca-naranjo-rgb), .25);
	border-bottom: 1px solid rgba(var(--marca-naranjo-rgb), .25);
	color: #777;
	font-size: .8rem;
	font-style: italic;
	line-height: 1.7;
	margin: 0 auto 1.75rem;
	max-width: 38rem;
	padding: 1.5rem 1rem 1.25rem;
	position: relative;
	text-align: center;
}

.nota-legal strong {
	color: #555;
	font-weight: 600;
	letter-spacing: .03em;
}

/* Medallón con el escudo, montado sobre el filete superior */
.nota-legal-icono {
	align-items: center;
	background-color: #fff;
	border: 1px solid rgba(var(--marca-naranjo-rgb), .35);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
	color: var(--marca-naranjo);
	display: inline-flex;
	height: 2.25rem;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
	width: 2.25rem;
}

/* Comprobante (mensaje.html) */
.aviso-exito {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background-color: rgba(255, 255, 255, .85);
	border: 1px solid rgba(25, 135, 84, .3);
	border-radius: .5rem;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
	margin: 1.75rem auto 1.5rem;
	padding: 1.5rem 1.5rem 1.25rem;
	position: relative;
	text-align: center;
}

/* Medallón con el check, montado sobre el borde superior */
.aviso-exito-icono {
	align-items: center;
	background-color: #fff;
	border: 1px solid rgba(25, 135, 84, .35);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
	color: #198754;
	display: inline-flex;
	height: 3rem;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
	width: 3rem;
}

.aviso-exito-titulo {
	color: #14532d;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .12em;
	margin: .5rem 0 .15rem;
	text-transform: uppercase;
}

.aviso-exito-detalle {
	color: #4d7c60;
	font-size: .9rem;
	font-style: italic;
	margin-bottom: 0;
}

/* Aviso para recuperar la solicitud cuando no dejó email */
.aviso-recuperar {
	background-color: rgba(220, 53, 69, .06);
	border: 1px solid rgba(220, 53, 69, .3);
	border-left: 3px solid #dc3545;
	border-radius: 0 .5rem .5rem 0;
	color: #7d3b42;
	font-size: .9rem;
	line-height: 1.7;
	margin-bottom: 1rem;
	padding: 1rem 1.25rem;
}

.aviso-recuperar strong {
	color: #58151c;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.aviso-recuperar a {
	color: #b02a37;
	font-weight: 600;
}

.comprobante-encabezado {
	border-bottom: 1px solid rgba(var(--marca-naranjo-rgb), .25);
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
}

.comprobante-encabezado #logo {
	max-height: 90px;
	width: auto;
}

.comprobante-tipo {
	color: var(--marca-naranjo);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.comprobante-codigo {
	color: #333;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
}

.comprobante-fecha {
	color: #999;
	font-size: .85rem;
}

.pill-representacion {
	background-color: rgba(var(--marca-naranjo-rgb), .07);
	border: 1px solid rgba(var(--marca-naranjo-rgb), .3);
	border-radius: 2rem;
	color: #776;
	display: inline-block;
	font-size: .8rem;
	font-style: italic;
	padding: .3rem 1.1rem;
}

.nota-imprimir {
	color: #999;
	font-size: .8rem;
	font-style: italic;
	margin-bottom: .75rem;
	text-align: center;
}

/* ------------------------------------------------ Login del panel */

.login-wrap {
	margin-top: 4vh;
	max-width: 26rem;
}

/* El medallón sobresale 1.5rem sobre la card: el logo necesita
   despejarse de él, no solo del borde de la card */
.login-logo {
	margin-bottom: 3rem;
}

.login-card {
	border: 1px solid rgba(var(--marca-naranjo-rgb), .3);
	border-radius: 1rem;
	box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .1);
	position: relative;
}

/* Medallón con el candado, montado sobre el borde superior
   (mismo patrón que .nota-legal-icono / .aviso-exito-icono) */
.login-icono {
	align-items: center;
	background-color: #fff;
	border: 1px solid rgba(var(--marca-naranjo-rgb), .35);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
	color: var(--marca-naranjo);
	display: inline-flex;
	height: 3rem;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
	width: 3rem;
}

.login-subtitulo {
	color: #999;
	font-size: .85rem;
	margin-bottom: 1.75rem;
}

.login-error {
	font-size: .88rem;
}

/* Labels flotantes sobre el fondo translúcido de los inputs */
.login-card .form-floating > label {
	color: #999;
}

.login-card .form-floating > .form-control:focus ~ label,
.login-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
	color: var(--marca-naranjo);
}

.login-boton {
	border-radius: .65rem;
	font-weight: 600;
	letter-spacing: .04em;
	padding-bottom: .7rem;
	padding-top: .7rem;
}

/* Reglas de contraseña (help_text de PasswordChangeForm) */
.login-card .form-text,
.login-card .form-text ul {
	color: #a09a96;
	font-size: .78rem;
}

.login-card .form-text ul {
	margin-bottom: 0;
	padding-left: 1.1rem;
}

.login-nota {
	color: #a09a96;
	font-size: .78rem;
	font-style: italic;
	margin-top: 1.25rem;
}

/* ------------------------------------------------ Panel interno */

/* El panel usa tablas: necesita más ancho que el formulario público */
main.container.container-panel {
	max-width: 1140px;
}

.navbar-panel {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background-color: rgba(255, 255, 255, .85);
	border-bottom: 1px solid rgba(var(--marca-naranjo-rgb), .25);
	/* El blur crea un contexto de apilamiento: sin esto, el dropdown del
	   usuario queda pintado debajo de las cards (también con blur) */
	position: relative;
	z-index: 1030;
}

/* Menú del usuario */
.navbar-panel .dropdown-menu {
	--bs-dropdown-border-color: rgba(var(--marca-naranjo-rgb), .25);
	--bs-dropdown-border-radius: .65rem;
	--bs-dropdown-font-size: .88rem;
	--bs-dropdown-item-padding-y: .45rem;
	--bs-dropdown-link-color: #555;
	--bs-dropdown-link-hover-bg: rgba(var(--marca-naranjo-rgb), .08);
	--bs-dropdown-link-hover-color: var(--marca-naranjo);
	--bs-dropdown-divider-bg: rgba(var(--marca-naranjo-rgb), .2);
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
	margin-top: .5rem;
}

.navbar-panel .navbar-brand {
	color: var(--marca-naranjo);
	font-weight: 700;
}

.navbar-panel .nav-link {
	color: #666;
}

.navbar-panel .nav-link:hover,
.navbar-panel .nav-link:focus {
	color: var(--marca-naranjo);
}

#nbeta img {
	filter: grayscale(100%);
	transition: filter .4s;
}

#nbeta img:hover {
	filter: grayscale(0);
}

/* Punto de estado en los listados */
.punto-estado {
	border-radius: 50%;
	display: inline-block;
	height: .65rem;
	margin-right: .25rem;
	width: .65rem;
}

.punto-estado.respondido { background-color: #27ae60; }
.punto-estado.pendiente { background-color: #f1c40f; }

/* Las tablas del panel van sobre cards translúcidas */
.card .table {
	--bs-table-bg: transparent;
}

/* Columna lateral del índice: acompaña el scroll del listado.
   Solo desde md, que es cuando el layout es a dos columnas. */
@media (min-width: 768px) {
	.lateral-sticky {
		position: sticky;
		top: 1rem;
	}
}

/* Pestañas de filtro del panel: control segmentado sobre panel translúcido
   (sueltas sobre el fondo con imagen, los tipos inactivos se perdían) */
.pills-panel {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background-color: rgba(255, 255, 255, .85);
	border: 1px solid rgba(var(--marca-naranjo-rgb), .25);
	border-radius: 2rem;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
	gap: .15rem;
	max-width: 100%;
	padding: .3rem;
	width: fit-content;
}

.pills-panel .nav-link {
	border: 1px solid transparent;
	border-radius: 2rem;
	color: #777;
	font-size: .88rem;
	font-weight: 600;
	padding: .3rem 1rem;
	white-space: nowrap;
}

.pills-panel .nav-link:hover,
.pills-panel .nav-link:focus {
	background-color: rgba(var(--marca-naranjo-rgb), .08);
	color: var(--marca-naranjo);
}

.pills-panel .nav-link.active {
	background-color: var(--marca-naranjo);
	box-shadow: 0 1px 3px rgba(var(--marca-naranjo-rgb), .35);
	color: #fff;
}

/* Badges de tipo de solicitud: tinte suave + texto del color, no bloque sólido */
.badge-tipo {
	border: 1px solid transparent;
	border-radius: 2rem;
	display: inline-block;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.4;
	padding: .2em .75em;
	text-transform: uppercase;
	white-space: nowrap;
}

.badge-tipo.reclamo {
	background-color: rgba(220, 53, 69, .09);
	border-color: rgba(220, 53, 69, .25);
	color: #b02a37;
}

.badge-tipo.consulta {
	background-color: rgba(13, 110, 253, .07);
	border-color: rgba(13, 110, 253, .22);
	color: #3b6fc9;
}

.badge-tipo.sugerencia {
	background-color: rgba(255, 165, 7, .12);
	border-color: rgba(200, 140, 7, .3);
	color: #9a6b04;
}

.badge-tipo.felicitaciones {
	background-color: rgba(25, 135, 84, .09);
	border-color: rgba(25, 135, 84, .25);
	color: #157347;
}

/* Badge de estado con punto integrado */
.badge-estado {
	border: 1px solid transparent;
	border-radius: 2rem;
	display: inline-block;
	font-size: .74rem;
	font-weight: 600;
	line-height: 1.5;
	padding: .2em .8em .2em .65em;
	white-space: nowrap;
}

.badge-estado::before {
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: .5rem;
	margin-right: .35rem;
	width: .5rem;
}

.badge-estado.pendiente {
	background-color: rgba(241, 196, 15, .12);
	border-color: rgba(200, 160, 10, .3);
	color: #93720a;
}

.badge-estado.pendiente::before { background-color: #f1c40f; }

.badge-estado.respondido {
	background-color: rgba(39, 174, 96, .1);
	border-color: rgba(39, 174, 96, .28);
	color: #1e8449;
}

.badge-estado.respondido::before { background-color: #27ae60; }

/* Tabla de solicitudes: tipografía compacta y jerarquía clara */
.tabla-panel {
	font-size: .88rem;
	margin-bottom: .5rem;
}

.tabla-panel thead th {
	border-bottom: 2px solid rgba(var(--marca-naranjo-rgb), .3);
	color: #a39d99;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .09em;
	padding-bottom: .55rem;
	text-transform: uppercase;
}

.tabla-panel tbody td {
	border-color: rgba(0, 0, 0, .05);
	padding-bottom: .8rem;
	padding-top: .8rem;
}

.tabla-panel > :not(caption) > * > * {
	--bs-table-hover-bg: rgba(var(--marca-naranjo-rgb), .05);
}

.tabla-panel .fila-numero {
	color: #555;
	font-size: .92rem;
	font-weight: 700;
}

.tabla-panel .fila-nombre {
	color: #333;
	font-size: .95rem;
	font-weight: 600;
}

.tabla-panel strong {
	color: #444;
	font-weight: 600;
}

.tabla-panel small {
	color: #a39d99;
	font-size: .78rem;
}

.tabla-panel .btn-sm {
	--bs-btn-font-size: .78rem;
	--bs-btn-padding-x: .7rem;
	--bs-btn-padding-y: .28rem;
}

@media print {
	body {
		background: none;
	}

	#logo {
		width: 6cm;
	}
}