/* ==================================================================
   ESTILOS PARA MÓDULO DE RECUPERACIÓN DE CONTRASEÑA - PISAMI
   Estructura responsive siguiendo metodología mobile-first
   Versión: 2.0.0
   Fecha: 09/02/2026
   ================================================================== */

/* ==================================================================
   1. VARIABLES CSS (Custom Properties)
   ================================================================== */
:root {
	/* Colores principales */
	--color-primary: #950101;
	--color-primary-dark: #730101;
	--color-primary-darker: #4a0001;
	--color-primary-light: rgba(149, 1, 1, 0.1);
	
	/* Colores de estado */
	--color-success: #28a745;
	--color-success-bg: #d4edda;
	--color-success-text: #155724;
	--color-error: #dc3545;
	--color-error-bg: #f8d7da;
	--color-error-text: #721c24;
	
	/* Colores neutros */
	--color-text: #333;
	--color-text-light: #666;
	--color-text-lighter: #999;
	--color-border: #e0e0e0;
	--color-bg-light: #f8f9fa;
	--color-white: #ffffff;
	
	/* Espaciados */
	--spacing-xs: 8px;
	--spacing-sm: 12px;
	--spacing-md: 18px;
	--spacing-lg: 25px;
	--spacing-xl: 35px;
	--spacing-xxl: 50px;
	
	/* Bordes */
	--border-radius-sm: 6px;
	--border-radius-md: 10px;
	--border-radius-lg: 12px;
	--border-radius-xl: 20px;
	
	/* Transiciones */
	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease;
	--transition-slow: 0.5s ease;
	
	/* Sombras */
	--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 15px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.2);
	--shadow-primary: 0 4px 15px rgba(149, 1, 1, 0.3);
	
	/* Contenedor */
	--container-max-width: 480px;
	--container-padding: 25px 20px;
}

/* ==================================================================
   2. RESET Y BASE
   ================================================================== */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
}

/* Permitir scroll solo en tablets+ */
@media (min-width: 576px) {
	html, body {
		overflow: visible;
	}
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	/* Mobile: fondo simple blanco */
	background: var(--color-white);
	min-height: 100vh;
	height: 100vh;
	position: relative;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

/* Gradiente para tablets+ */
@media (min-width: 576px) {
	body {
		background: linear-gradient(135deg, var(--color-white) 0%, #f8f8f8 50%, #f0f0f0 100%);
		height: auto;
		overflow-x: hidden;
		overflow-y: auto;
	}
}

/* ==================================================================
   3. EFECTOS DE FONDO DECORATIVOS
   ================================================================== */
body::before,
body::after {
	/* Ocultar en mobile */
	display: none;
}

@media (min-width: 576px) {
	body::before {
		display: block;
		content: '';
		position: fixed;
		top: -50%;
		right: -10%;
		width: 600px;
		height: 600px;
		background: radial-gradient(circle, rgba(149, 1, 1, 0.08) 0%, transparent 70%);
		border-radius: 50%;
		z-index: 0;
		pointer-events: none;
	}

	body::after {
		display: block;
		content: '';
		position: fixed;
		bottom: -30%;
		left: -10%;
		width: 500px;
		height: 500px;
		background: radial-gradient(circle, rgba(115, 1, 1, 0.05) 0%, transparent 70%);
		border-radius: 50%;
		z-index: 0;
		pointer-events: none;
	}
}

/* ==================================================================
   4. CONTENEDOR PRINCIPAL
   ================================================================== */
.container-recuperar {
	/* Mobile: pantalla completa sin card */
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: var(--color-white);
	padding: var(--container-padding);
	overflow-y: auto;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	animation: fadeInUp var(--transition-slow) ease-out;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Animación para tablets+ */
@media (min-width: 576px) {
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translate(-50%, calc(-50% + 30px));
		}
		to {
			opacity: 1;
			transform: translate(-50%, -50%);
		}
	}
}

/* ==================================================================
   5. ENCABEZADO
   ================================================================== */
.header-recuperar {
	text-align: center;
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-md);
	border-bottom: 2px solid #f0f0f0;
}

.header-recuperar h1 {
	color: var(--color-primary);
	font-size: clamp(22px, 5vw, 28px);
	margin: 0 0 var(--spacing-sm) 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.2;
}

.header-recuperar p {
	color: var(--color-text-light);
	font-size: clamp(14px, 3vw, 14px);
	margin: 0;
	line-height: 1.7;
	font-weight: 400;
}

@media (min-width: 576px) {
	.header-recuperar {
		margin-bottom: var(--spacing-lg);
		padding-bottom: var(--spacing-lg);
	}
}

/* ==================================================================
   6. FORMULARIO Y GRUPOS
   ================================================================== */
.form-group {
	margin-bottom: var(--spacing-md);
	position: relative;
}

@media (min-width: 576px) {
	.form-group {
		margin-bottom: var(--spacing-lg);
	}
}

.form-group label {
	display: block;
	color: var(--color-text);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: var(--spacing-xs);
	width: auto;
	float: none;
}

.form-group input[type="text"] {
	width: 100%;
	height: 48px;
	background-color: var(--color-white);
	border: 2px solid var(--color-border);
	color: var(--color-text);
	padding: 0 16px;
	font-size: 15px;
	font-family: inherit;
	border-radius: var(--border-radius-md);
	transition: all var(--transition-normal);
}

.form-group input[type="text"]:focus {
	border-color: var(--color-primary);
	outline: none;
	box-shadow: 0 0 0 4px var(--color-primary-light);
	background-color: var(--color-white);
}

.form-group input[type="text"]::placeholder {
	color: var(--color-text-lighter);
}

/* ==================================================================
   7. VALIDACIÓN DE ERRORES
   ================================================================== */
input.error {
	border-color: var(--color-error) !important;
	background-color: #fff5f5;
}

label.error {
	display: block;
	width: auto;
	padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-xl);
	font-size: 13px;
	color: var(--color-error);
	background-image: url(../imagenes/globales/error.gif);
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 16px 16px;
	margin-top: var(--spacing-xs);
	font-weight: 500;
	background-color: #fff3f3;
	border-radius: var(--border-radius-sm);
	border-left: 3px solid var(--color-error);
	line-height: 1.4;
}

/* ==================================================================
   8. BOTONES
   ================================================================== */
.btn-recuperar {
	width: 100%;
	height: 50px;
	border: none;
	border-radius: var(--border-radius-lg);
	cursor: pointer;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	color: var(--color-white);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	transition: all var(--transition-normal);
	box-shadow: var(--shadow-primary);
}

.btn-recuperar:hover {
	background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker));
	box-shadow: 0 6px 20px rgba(149, 1, 1, 0.4);
	transform: translateY(-2px);
}

.btn-recuperar:active {
	transform: translateY(0);
	box-shadow: 0 2px 10px rgba(149, 1, 1, 0.3);
}

.btn-recuperar:disabled {
	background: linear-gradient(135deg, #cccccc, #999999);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Botones de navegación */
.action-buttons {
	margin-top: var(--spacing-md);
	text-align: center;
}

@media (min-width: 576px) {
	.action-buttons {
		margin-top: var(--spacing-lg);
	}
}

.btn-volver,
.btn-secondary {
	display: inline-block;
	padding: 12px 28px;
	border: 2px solid var(--color-primary);
	border-radius: var(--border-radius-md);
	color: var(--color-primary);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all var(--transition-normal);
	background: transparent;
}

.btn-volver:hover,
.btn-secondary:hover {
	background: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-primary);
}

/* ==================================================================
   9. MENSAJES
   ================================================================== */

/* Texto informativo */
.info-text {
	background: var(--color-bg-light);
	padding: var(--spacing-md);
	border-radius: var(--border-radius-md);
	font-size: 13px;
	color: var(--color-text-light);
	line-height: 1.7;
	margin-top: var(--spacing-md);
	border-left: 4px solid var(--color-primary);
}

@media (min-width: 576px) {
	.info-text {
		margin-top: var(--spacing-lg);
	}
}

.info-text strong {
	color: var(--color-primary);
	font-weight: 600;
}

/* Mensaje de éxito */
.success-message {
	background: linear-gradient(135deg, var(--color-success-bg) 0%, #e8f5e9 100%);
	border-left: 5px solid var(--color-success);
	padding: var(--spacing-md);
	border-radius: var(--border-radius-lg);
	margin-bottom: var(--spacing-md);
	box-shadow: 0 4px 15px rgba(40, 167, 69, 0.15);
	animation: slideInDown var(--transition-slow) ease-out;
}

@media (min-width: 576px) {
	.success-message {
		padding: var(--spacing-lg);
		margin-bottom: var(--spacing-xl);
	}
}

@keyframes slideInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.success-message .title {
	color: var(--color-success-text);
	font-weight: 700;
	font-size: clamp(16px, 4vw, 18px);
	margin-bottom: var(--spacing-md);
	display: flex;
	align-items: center;
	gap: 10px;
}

.success-message .title::before {
	content: '✓';
	display: inline-block;
	width: 26px;
	height: 26px;
	background: var(--color-success);
	color: var(--color-white);
	border-radius: 50%;
	text-align: center;
	line-height: 26px;
	font-weight: bold;
	font-size: 16px;
	flex-shrink: 0;
}

.success-message .content {
	color: var(--color-success-text);
	font-size: 14px;
	line-height: 1.8;
}

.success-message .content p {
	margin: 0 0 var(--spacing-sm) 0;
}

.success-message .content p:last-child {
	margin-bottom: 0;
}

.success-message .content p.note {
	margin-top: var(--spacing-sm);
	padding-top: var(--spacing-sm);
	border-top: 1px solid rgba(21, 87, 36, 0.2);
	font-size: 13px;
}

.success-message .email {
	font-weight: 700;
	color: #0d4419;
	background: rgba(255, 255, 255, 0.5);
	padding: 3px 8px;
	border-radius: 4px;
}

.success-message a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
	transition: all var(--transition-normal);
	border-bottom: 1px solid transparent;
}

.success-message a:hover {
	color: var(--color-primary-dark);
	border-bottom-color: var(--color-primary-dark);
}

/* Mensaje de error */
.mensaje_error {
	background: linear-gradient(135deg, var(--color-error-bg) 0%, #f5c6cb 100%);
	border-left: 5px solid var(--color-primary);
	color: var(--color-error-text);
	font-weight: 600;
	font-size: 14px;
	padding: var(--spacing-md) var(--spacing-lg);
	border-radius: var(--border-radius-lg);
	margin-bottom: var(--spacing-lg);
	line-height: 1.7;
	box-shadow: 0 4px 15px rgba(149, 1, 1, 0.15);
	animation: shake var(--transition-slow) ease-in-out;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-10px); }
	75% { transform: translateX(10px); }
}

/* ==================================================================
   10. RESPONSIVE DESIGN - Mobile First
   ================================================================== */

/* Tablets pequeñas y móviles horizontales (576px+) */
@media (min-width: 576px) {
	:root {
		--container-padding: 40px 35px;
	}
	
	.container-recuperar {
		/* Volver al diseño tipo card desde tablets */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: calc(100% - 40px);
		height: auto;
		max-width: 540px;
		max-height: 95vh;
		background: rgba(255, 255, 255, 0.98);
		border-radius: var(--border-radius-xl);
		box-shadow: var(--shadow-md);
		backdrop-filter: blur(10px);
		display: block;
		justify-content: initial;
	}
	
	.form-group input[type="text"] {
		height: 50px;
	}
	
	.btn-recuperar {
		height: 52px;
	}
}

/* Tablets (768px+) */
@media (min-width: 768px) {
	:root {
		--container-padding: 45px 40px;
	}
	
	.container-recuperar {
		max-width: 600px;
		width: calc(100% - 60px);
	}
	
	.header-recuperar {
		margin-bottom: var(--spacing-xl);
		padding-bottom: var(--spacing-xl);
	}
	
	.form-group {
		margin-bottom: 30px;
	}
	
	.btn-volver,
	.btn-secondary {
		padding: 14px 35px;
		font-size: 15px;
	}
	
	body::before {
		width: 700px;
		height: 700px;
	}
	
	body::after {
		width: 600px;
		height: 600px;
	}
}

/* Desktop (992px+) */
@media (min-width: 992px) {
	:root {
		--container-padding: 50px 45px;
	}
	
	.container-recuperar {
		max-width: 650px;
		width: calc(100% - 80px);
	}
	
	.header-recuperar h1 {
		font-size: 30px;
	}
	
	.header-recuperar p {
		font-size: 15px;
	}
	
	.form-group input[type="text"] {
		height: 52px;
		font-size: 16px;
	}
	
	.btn-recuperar {
		height: 54px;
		font-size: 16px;
	}
	
	.success-message .title {
		font-size: 19px;
	}
	
	.success-message .content {
		font-size: 15px;
	}
}

/* Pantallas grandes (1200px+) */
@media (min-width: 1200px) {
	body::before {
		width: 800px;
		height: 800px;
	}
	
	body::after {
		width: 700px;
		height: 700px;
	}
}

/* ==================================================================
   11. RESPONSIVE - Móviles pequeños (max-width)
   ================================================================== */

/* Móviles muy pequeños */
@media (max-width: 375px) {
	:root {
		--container-padding: 20px 16px;
	}
	
	.header-recuperar h1 {
		font-size: 20px;
		letter-spacing: 0.3px;
	}
	
	.header-recuperar p {
		font-size: 13px;
	}
	
	.form-group input[type="text"] {
		height: 46px;
		font-size: 14px;
		padding: 0 14px;
	}
	
	.btn-recuperar {
		height: 48px;
		font-size: 14px;
		letter-spacing: 0.5px;
	}
	
	.btn-volver,
	.btn-secondary {
		padding: 10px 20px;
		font-size: 13px;
	}
	
	.success-message,
	.mensaje_error {
		padding: var(--spacing-sm);
		font-size: 13px;
	}
	
	.success-message .title::before {
		width: 22px;
		height: 22px;
		line-height: 22px;
		font-size: 14px;
	}
}

/* ==================================================================
   11.1. RESPONSIVE - Landscape Mobile
   ================================================================== */

/* Landscape en móviles - pantalla completa sin scroll del body */
/* Detecta dispositivos con altura limitada típica de móviles horizontales */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px) {
	:root {
		--container-padding: 16px 20px;
	}
	
	html, body {
		overflow: hidden;
		height: 100vh;
	}
	
	.container-recuperar {
		/* Mantener pantalla completa en landscape */
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		max-width: none !important;
		max-height: none !important;
		background: var(--color-white) !important;
		padding: var(--container-padding);
		overflow-y: auto;
		border-radius: 0 !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		transform: none !important;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.header-recuperar {
		margin-bottom: var(--spacing-sm);
		padding-bottom: var(--spacing-sm);
	}
	
	.header-recuperar h1 {
		font-size: 20px;
		margin-bottom: 6px;
	}
	
	.header-recuperar p {
		font-size: 12px;
		line-height: 1.4;
	}
	
	.form-group {
		margin-bottom: var(--spacing-sm);
	}
	
	.form-group label {
		font-size: 13px;
		margin-bottom: 6px;
	}
	
	.form-group input[type="text"] {
		height: 42px;
		font-size: 14px;
	}
	
	.btn-recuperar {
		height: 44px;
		font-size: 14px;
	}
	
	.action-buttons {
		margin-top: var(--spacing-sm);
	}
	
	.btn-volver,
	.btn-secondary {
		padding: 8px 18px;
		font-size: 12px;
	}
	
	.success-message,
	.mensaje_error {
		padding: var(--spacing-sm);
		font-size: 12px;
		margin-bottom: var(--spacing-sm);
	}
	
	.success-message .title {
		font-size: 14px;
		margin-bottom: var(--spacing-sm);
	}
	
	.success-message .title::before {
		width: 20px;
		height: 20px;
		line-height: 20px;
		font-size: 12px;
	}
	
	.success-message .content {
		font-size: 12px;
		line-height: 1.5;
	}
	
	.info-text {
		padding: var(--spacing-sm);
		font-size: 11px;
		margin-top: var(--spacing-sm);
	}
	
	label.error {
		font-size: 11px;
		padding: 6px 10px 6px 28px;
		background-size: 14px 14px;
		background-position: 8px center;
	}
}

/* ==================================================================
   12. OPTIMIZACIONES DE RENDIMIENTO
   ================================================================== */

/* Reducir animaciones para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==================================================================
   13. UTILIDADES Y ESTADOS
   ================================================================== */

/* Estado de carga */
.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Ocultar elementos en móviles */
@media (max-width: 767px) {
	.hide-mobile {
		display: none !important;
	}
}

/* Ocultar elementos en desktop */
@media (min-width: 768px) {
	.hide-desktop {
		display: none !important;
	}
}

/* Focus visible para accesibilidad */
:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}

/* ==================================================================
   FIN DEL ARCHIVO CSS
   ================================================================== */