@import url('variables.css');

/* --- Base / Layout --- */
html,body {
	height:100%;
}
body {
	font-family:  'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	max-width:var(--max-width);
	margin: 0px auto;
	padding:0 16px;
	color:var(--text-color);
	background:var(--neutral-cloud);
	display:flex;
	flex-direction:column;
	min-height:100vh;
}

	/* --- Base / Layout --- */
main.container { 
	flex: 1;
	background: var(--neutral-cloud);
}

	/* --- Header --- */
header{
	background: #ffffff;
	border-bottom:1px solid var(--neutral-pearl);
	padding:1rem 0;
	box-shadow: 0 2px 4px rgba(0,0,0,0.08);
	border-radius: 0px 0px 25px 25px;
	margin-bottom: 0.5rem;
}

header h1{ 
	color: var(--color-secondary-gold);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
	padding: 0 1rem;
}

header .header-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1rem;
}

header nav{ 
	margin-top: 1rem;
	padding: 0 1rem;
	display: flex;
	gap: 1.5rem;
	align-items: center;
	flex-wrap: wrap;
}

header nav a{ 
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s;
}

header nav a:hover{
	color: var(--color-primary-dark);
}

.auth-buttons {
	margin-left: auto;
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.auth-buttons span {
	color: var(--text-color);
	font-size: 0.9rem;
}

	/* Añadir al archivo style.css, después de las reglas de .auth-buttons */

	/* --- Botones de autenticación responsive --- */
.auth-buttons .btn {
	border-radius: 6px;
	font-size: 0.85rem;
	padding: 0.4rem 0.9rem;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: auto;
	transition: all 0.3s ease;
}

	/* Contenedores para texto e icono */
.auth-buttons .btn .btn-text {
	display: inline-block;
	transition: opacity 0.3s ease;
}

.auth-buttons .btn .btn-icon {
	display: inline-block;
	font-size: 1rem;
	transition: opacity 0.3s ease;
}

	/* En móviles: solo mostrar iconos */
@media (max-width: 768px) {
	.auth-buttons {
		gap: 0.5rem;
	}
	
	.auth-buttons .btn {
		padding: 0.4rem 0.6rem;
		min-width: 40px;
		justify-content: center;
	}
	
	.auth-buttons .btn .btn-text {
		display: none;
		opacity: 0;
		width: 0;
		overflow: hidden;
	}
	
	.auth-buttons .btn .btn-icon {
		display: inline-block;
		opacity: 1;
		font-size: 1.1rem;
		margin: 0;
	}
	
	/* Ajustar tamaño del texto del usuario */
	.auth-buttons span {
		font-size: 0.8rem;
		max-width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

	/* En escritorio: mostrar texto e icono */
@media (min-width: 769px) {
	.auth-buttons .btn .btn-text {
		display: inline-block;
		opacity: 1;
	}
	
	.auth-buttons .btn .btn-icon {
		display: inline-block;
		opacity: 1;
	}
	
	/* Para el botón de logout, el icono va después del texto */
	.logout-btn .btn-icon {
		margin-left: 0.4rem;
	}
}

	/* Ajustes específicos para el header en móviles */
@media (max-width: 768px) {
	header .header-top {
		padding: 0 0.5rem;
		flex-wrap: nowrap;
	}
	
	header h1 {
		font-size: 1rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 120px;
	}
	
	.auth-buttons {
		margin-left: auto;
		flex-shrink: 0;
	}
}

	/* Asegurar que el language swither también sea responsive */
.language-selector .btn {
	padding: 0.4rem 0.6rem;
	min-width: auto;
}

@media (max-width: 768px) {
	.language-selector .btn {
		padding: 0.3rem 0.5rem;
	}
	
	.language-selector .lang-text {
		display: none;
	}
	
	.language-selector .flag-icon {
		font-size: 1.1rem;
		margin-right: 0;
	}
}

/* --- Footer --- */
footer {
	background: #ffffff;
	border-top: 1px solid var(--neutral-pearl);
	padding: 2rem;
	text-align: center;
	margin-top: auto;
	color: var(--muted-color);
	font-size: 0.9rem;
}

/* --- Typography --- */
h1,h2,h3,h4,h5,h6{ 
	color: var(--text-color);
	margin-top: 0;
}

h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
h2 { font-size: 2rem; margin-bottom: 0.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }

.h1-primary { color: var(--color-primary); }
.h2-primary { color: var(--color-primary); }
.h5-primary { color: var(--color-primary); }

.lead{ 
	color: var(--muted-color); 
	font-size: 1.1rem;
	margin-bottom: 2rem;
}

.text-muted { color: var(--muted-color); }
.text-center { text-align: center; }

/* --- Alerts --- */
.alert {
	padding: 1rem;
	border-radius: 8px;
	border: 1px solid;
	margin: 1rem 0;
}

.alert-success {
	background-color: rgba(168, 230, 207, 0.2);
	border-color: var(--state-success);
	color: #1a5c52;
}

.alert-danger {
	background-color: rgba(255, 170, 165, 0.2);
	border-color: var(--state-danger);
	color: #8b3a37;
}

.alert-warning {
	background-color: rgba(255, 211, 182, 0.3);
	border-color: var(--color-accent);
	color: #8b6a00;
}

.alert-info {
	background-color: rgba(109, 211, 206, 0.1);
	border-color: var(--color-primary);
	color: #1a5c52;
}

.alert strong { font-weight: 600; }
.alert h5 { margin-top: 0; color: inherit; }
.alert p { margin: 0.5rem 0; }

.alert-secondary {
	border: 1px solid var(--neutral-pearl);
	color: #1a5c52;
}

.alert-accent {
	background:linear-gradient(135deg, var(--color-secondary-orange) 0%, var(--color-accent) 100%);
	border: 1px solid var(--neutral-pearl);
	color: var( --neutral-cloud);
}

.alert-info-small p { font-size: 0.9rem; }

/* --- Buttons --- */
.btn-primary{
	background: var(--color-primary);
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 0.6rem 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s;
	cursor: pointer;
	display: inline-block;
}

.btn-primary:hover, .btn-primary:focus{
	background: var(--color-primary-dark);
	color: #fff;
	text-decoration: none;
}

.btn-primary.w-100 {
	width: 100%;
	display: block;
	padding: 0.6rem;
}

.btn-accent{
	background: var(--color-accent);
	color: #222;
	border: none;
	border-radius: 6px;
	padding: 0.6rem 1rem;
}

.btn-outline-primary{
	background: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: 6px;
	padding: 0.4rem 0.9rem;
	font-size: 0.85rem;
	text-decoration: none;
	cursor: pointer;
}

.btn-outline-secondary {
	background: transparent;
	color: var(--muted-color);
	border: 1px solid var(--neutral-pearl);
	border-radius: 6px;
	padding: 0.6rem 1rem;
	text-decoration: none;
	cursor: pointer;
}

.btn-sm {
	padding: 0.4rem 0.9rem;
	font-size: 0.85rem;
}

.btn.flex-grow-1 { flex: 1; }

.d-grid {
	display: grid;
}

.d-grid.gap-2 {
	gap: 0.5rem;
}

/* --- Forms --- */
.form-control, 
input[type="text"], 
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 0.6rem;
	border: 1px solid var(--neutral-pearl);
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.95rem;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(109, 211, 206, 0.1);
}

.form-label {
	color: var(--text-color);
	font-weight: 600;
	display: block;
	margin-bottom: 0.5rem;
}

.form-label-optional {
	color: var(--muted-color);
	font-size: 0.9rem;
}

textarea { resize: vertical; }

.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }

/* --- Cards --- */

/* contenedor con perspectiva para que los hijos tengan sensación de profundidad */
.cards-container {            /* aplica esta clase al padre de las cards */
	perspective: 1000px;
}
.card {
	border: 1px solid var(--neutral-pearl);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1),   /* sombra más pronunciada */
				0 8px 24px rgba(0,0,0,0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	transform-style: preserve-3d;             /* importante para 3D */
}
/* efecto al pasar el ratón: giro/avance y subida de sombra */
.card:hover {
	transform: translateZ(10px) rotateX(2deg) rotateY(2deg);
	box-shadow: 0 8px 24px rgba(0,0,0,0.15),
				0 16px 48px rgba(0,0,0,0.08);
}
/* opcional: un “sombra interna” para el interior de la card */
.card::before {
	content: '';
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 30px rgba(0,0,0,0.04);
	pointer-events: none;
}

.card.card-shadow {
	box-shadow: 0 4px 12px rgba(109, 211, 206, 0.1);
}

.card.card-full-height {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.card-body{ 
	padding: 1rem;
}

.card-body.p-4 { padding: 1.5rem; }

.card-title {
	color: var(--color-primary);
	margin: 0 0 0.5rem 0;
	font-weight: 600;
}

.card-title.h5 { font-size: 1.1rem; }

.card-text { 
	color: var(--muted-color);
	margin-bottom: 1rem;
	font-size: 0.95rem;
}

.card-header-secondary {
	/* background changed from solid to gradient */
	background: linear-gradient(135deg, var(--color-secondary-gold) 0%, var(--color-secondary) 100%);
	padding: 1rem;
	text-align: center;
	font-size: 2rem;
}

.card-header-accent {
	/* background changed from solid to gradient */
	background: linear-gradient(135deg, var(--color-secondary-orange) 0%, var(--color-accent) 100%);
	padding: 1rem;
	text-align: center;
	font-size: 2rem;
}

.card-header-gradient {
	background: linear-gradient(135deg, var(--color-secondary-cloud) 0%, var(--color-secondary) 100%);
	padding: 1.5rem;
	border-radius: 10px 10px 0 0;
	color: white;
}

.card-body > :first-child { margin-top: 0; }
.card-body > :last-child { margin-bottom: 0; }

.card-body.flex-grow { flex: 1; }

/* Service cards */
.service-card{ 
	background: var(--color-secondary);
	border: 1px solid var(--neutral-pearl);
	padding: 1rem;
	border-radius: 8px;
}

.card--secondary { 
	background: var(--color-secondary);
	border-color: var(--neutral-pearl);
}

/* Order status badges */
.badge-success { 
	background: var(--state-success);
	color: #fff;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 500;
}

.badge-danger { 
	background: var(--state-danger);
	color: #fff;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	font-size: 0.85rem;
}

.badge-secondary {
	background: var(--color-secondary);
	color: #1a5c52;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	font-size: 0.85rem;
}

.badge-accent {
	background: var(--color-accent);
	color: #222;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	font-size: 0.85rem;
}

.badge-neutral {
	background: var(--neutral-pearl);
	color: var(--muted-color);
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	font-size: 0.85rem;
}

/* --- Layout utilities --- */
.row { display: flex; flex-wrap: wrap; margin: -0.5rem; }
.col { flex: 1; padding: 0.5rem; }

.row.g-2 { gap: 0.5rem; }
.row.g-3 { gap: 1rem; }

.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2.5rem; }

.mt-lg-0 { @media (min-width: 992px) { margin-top: 0; } }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }

.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }

/* Order cards layout */
.order-card { margin-bottom: 1.5rem; }
.order-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.order-card-title {
	margin: 0;
	color: var(--color-primary);
}

.order-card-body {
	padding: 1rem;
	flex: 1;
}

.order-card-meta {
	margin: 0.75rem 0;
	color: var(--text-color);
}

.order-card-meta-muted {
	margin: 0.75rem 0;
	color: var(--muted-color);
	font-size: 0.9rem;
}

.order-card-notes {
	background: var(--neutral-cloud);
	padding: 0.75rem;
	border-radius: 6px;
	margin: 0.75rem 0;
	border-left: 3px solid var(--color-accent);
}

.order-card-footer {
	display: flex;
	gap: 0.5rem;
	padding: 1rem;
	border-top: 1px solid var(--neutral-pearl);
}

/* Dashboard grid */
.dashboard-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

/* Tablet: 2 columnas */
@media (min-width: 768px) {
	.dashboard-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Escritorio: 3 columnas */
@media (min-width: 1024px) {
	.dashboard-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.dashboard-empty {
	background: var(--color-secondary);
	border: 1px solid var(--neutral-pearl);
	border-radius: 8px;
	padding: 2rem;
	text-align: center;
	color: #1a5c52;
}

.dashboard-empty h5 {
	margin-top: 0;
	font-size: 1.3rem;
}

/* Panel layout */
.panel-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.panel-aside {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Info boxes */
.info-box {
	border-radius: 8px;
	border: 1px solid var(--neutral-pearl);
	padding: 1.5rem;
	list-style: none;
}

.info-box li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--neutral-pearl);
}

.info-box li:last-child {
	border-bottom: none;
}

.info-box li strong {
	color: var(--text-color);
}

.info-box ul {
	margin-top: 0.5rem;
	margin-bottom: 0;
	padding-left: 1rem;
	font-size: 0.95rem;
}

/* Form layout */
.form-container {
	max-width: 400px;
	margin: 0 auto;
}

.form-section {
	margin-bottom: 1.5rem;
}

.form-submit-group {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

/* Login/Register specific */
.register-btn,
.register-btn:hover,
.register-btn:focus,
.register-btn .btn-text,
.register-btn .btn-icon {
    color: var(--neutral-cloud) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.auth-card {
	border: 1px solid var(--neutral-pearl);
	box-shadow: 0 4px 12px rgba(109, 211, 206, 0.1);
	border-radius: 10px;
}

.auth-card-header {
	text-align: center;
	margin-bottom: 2rem;
}

.auth-card-header h2 {
	color: var(--color-primary);
	font-size: 1.75rem;
	margin: 0 0 0.5rem 0;
}

.auth-card-header p {
	color: var(--muted-color);
	margin: 0;
}

.auth-divider {
	border-color: var(--neutral-pearl);
	margin: 1rem 0;
}

.auth-footer {
	text-align: center;
	font-size: 0.95rem;
}

.auth-footer a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
}

.auth-info-box {
	background: var(--color-secondary);
	border-radius: 8px;
	border: 1px solid var(--neutral-pearl);
	padding: 1rem;
	color: var(--neutral-cloud);
	font-size: 0.9rem;
}

.auth-role-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.5rem;
}

.auth-role-card {
	background: var(--color-secondary);
	border: 1px solid var(--neutral-pearl);
	padding: 1rem;
	border-radius: 8px;
	color: var(--neutral-cloud);
}

.auth-role-card h6 {
	color: var(--neutral-cloud);
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.auth-role-card p {
	font-size: 0.85rem;
	margin: 0;
}

/* --- Links --- */
a{ 
	color: var(--color-primary);
	text-decoration: none;
}

a:hover{ 
	color: var(--color-primary-dark);
	text-decoration: underline;
}

a.link-muted {
	color: var(--muted-color);
}

/* --- Tables --- */
table{ 
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
}

th, td{ 
	border: 1px solid var(--neutral-pearl);
	padding: 0.75rem;
	text-align: left;
}

th {
	background: var(--neutral-cloud);
	font-weight: 600;
	color: var(--text-color);
}

/* --- Responsive --- */
@media (max-width: 768px){
	header h1 { font-size: 1rem; }
	body { padding: 0 12px; }
	h1 { font-size: 1.75rem; }
	.auth-card { margin-top: 1rem; }
	.panel-container { grid-template-columns: 1fr; }
	.panel-aside { margin-top: 1rem; }
	.row { margin: 0; }
	.col { padding: 0; margin-bottom: 1rem; }
	.order-card-footer {
		flex-direction: column;
	}
	.order-card-footer .btn {
		width: 100%;
	}
}

/* ─── Logo WashJet ─── */
.site-logo {
    display: flex;
    flex-direction: column;
}

.site-logo .logo-main {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 3px;
    line-height: 1;
	font-style: italic;
}

.site-logo .logo-main .wash {
    color: var(--color-primary);
}

.site-logo .logo-main .jet {
    color: var(--color-primary-dark);
}

.site-logo .logo-sub {
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-top: 2px;
}

@media (max-width: 768px) {
    .site-logo .logo-main {
        font-size: 1.1rem;
        letter-spacing: 2px;
    }
    .site-logo .logo-sub {
        font-size: 0.5rem;
    }
}