/************************************************************
MISS ROUSE CRM – FRONTEND STYLES
Estructura:
1. Variables
2. Archive (Grid + Cards)
3. Single Oferta (Vista profesional)
4. ZONA CTA (APUNTARME)
5. Botones
6. Estados
7. Formulario
8. Area Empleado
************************************************************/

/************************************************************
1️⃣ VARIABLES
************************************************************/
:root {
	--mr-red: #FE0000;
	--mr-red-hover: #833000;
	--mr-green: #48A86B;
	--mr-disabled: #ececec;
	--mr-bg-card: #F3F4F6;
	--mr-text-dark: #27282c;
	--mr-text-light: #4b5563;
}

/************************************************************
2️⃣ ARCHIVE – GRID + CARDS
************************************************************/

.mr-archive-wrapper {
	width: 100%;
	max-width:1400px;
	margin: 80px auto;
	padding: 0 20px 80px 0px;
	text-align: center;
}
.mr-container {
	max-width: 1400px;
	margin: 0 auto;
	margin-bottom: 150px;
}
.mr-archive-header{
	text-align:left;
	padding: 40px;
}
.mr-archive-title {
	font-size: 41px !important;
	font-weight: 600 !important;
	margin-bottom: 60px;
}
.mr-archive-label{
	font-size:14px;
	color:#b30000;
	font-weight: 700;
}
.mr-archive-header .mr-link-primary{
	color:#b30000;
}

.mr-desc-title {
	font-size: 20px !important;
	font-weight: 600 !important;
	margin-bottom: 15px;
}

.mr-ofertas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px;
	width: 100%;
}

/* Card */
.mr-oferta-card {
	background: var(--mr-bg-card);
	border-radius: 18px;
	border: 3px solid var(--mr-red);
	padding: 40px 35px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
	display: flex;
	flex-direction: column;
	text-align: left;
	transition: all .25s ease;
}

.mr-oferta-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

body .mr-oferta-title {
	font-size: 28px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin-bottom: 25px;
	color: var(--mr-text-dark);
}
.mr-oferta-card .mr-meta {
	display: block;
	margin-bottom: 15px;
}

.mr-oferta-card .mr-meta-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	margin-bottom: 8px;
	color: var(--mr-text-light);
}
.mr-meta-icon {
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mr-meta-icon svg {
	width: 16px;
	height: 16px;
	fill: var(--mr-red);
}
.mr-divider {
	height: 1px;
	background: #c6c6c6;
	margin: 2px 0;
	border: none;
}

.mr-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30px;
	gap: 15px;
}

/************************************************************
FILTROS ARCHIVE
************************************************************/

.mr-filtros-wrapper {
	background: #ffffff;
	padding: 30px 35px;
	border-radius: 16px;
	box-shadow: 0 6px 25px rgba(0,0,0,.05);
	margin-bottom: 60px;
	border-left: 5px solid var(--mr-red);
}

.mr-filtros {
	display: flex;
	align-items: flex-end;
	gap: 30px;
	flex-wrap: wrap;
}

.mr-filtro-item {
	display: flex;
	flex-direction: column;
	min-width: 220px;
}

.mr-filtro-item label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 6px;
	color: var(--mr-text-dark);
}

.mr-filtro-item select {
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid #e3e5e8;
	background: #f9fafb;
	font-size: 14px;
	transition: all .2s ease;
}

.mr-filtro-item select:focus {
	border-color: var(--mr-red);
	background: #ffffff;
	outline: none;
}

.mr-filtro-actions {
	display: flex;
	gap: 12px;
	align-items: center;
}


/************************************************************
3️⃣ SINGLE OFERTA – VISTA PROFESIONAL
************************************************************/

.mr-single-wrapper {
	width: 100%;
	margin: 100px auto;
	padding: 0 20px;
}

.mr-single-header {
	max-width: 1100px;
	margin: 0 auto 60px auto;
	padding: 50px 60px;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0,0,0,.06);
	border-top: 6px solid var(--mr-red);
}

body .mr-single-title {
	font-size: 42px!important;
	font-weight: 600!important;
	color: var(--mr-text-dark);
	margin-bottom: 20px;
}

.mr-single-header .mr-meta {
	display: flex;
	align-items: center;
	gap: 40px;
	flex-wrap: nowrap;
	margin-top: 20px;
}

.mr-single-header .mr-meta-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--mr-text-light);
}

.mr-meta-icon svg {
	width: 14px;
	height: 14px;
	fill: var(--mr-red);
}

.mr-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.mr-tag {
	background: #f2f3f5;
	padding: 8px 14px;
	border-radius: 20px;
	font-size: 14px;
}

@media(max-width:768px){
	.mr-meta {
		flex-wrap: wrap;
		gap: 15px;
	}
}


/* Separador elegante */
.mr-single-divider {
	height: 2px;
	width: 80px;
	background: var(--mr-red);
	margin: 40px 0;
}

/* Contenido principal */
.mr-single-content {
	font-size: 18px;
	line-height: 1.8;
	color: #333333;
	max-width: 850px;
}

/* Bloques de información */
.mr-single-section {
	margin-top: 70px;
	padding-top: 30px;
	border-top: 1px solid #f0f0f0;
}

.mr-single-section h3 {
	font-size: 22px!important;
	font-weight: 600!important;
	margin-bottom: 25px;
	color: var(--mr-text-dark);
	position: relative;
}

.mr-single-section h3::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	background: var(--mr-red);
	margin-top: 8px;
}

.mr-single-section ul {
	list-style: none;
	padding-left: 0;
}

.mr-single-section li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
	font-size: 16px;
}

.mr-single-section li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 10px;
	height: 10px;
	background: var(--mr-red);
	border-radius: 50%;
}

/************************************************************
4️⃣ ZONA CTA (APUNTARME)
************************************************************/

.mr-single-cta {
	margin-top: 60px;
	padding: 40px;
	background: #f8f9fb;
	border-radius: 16px;
	text-align: center;
}

.mr-btn-apply {
	background: var(--mr-red);
	color: #ffffff;
	border: none;
	padding: 16px 40px;
	font-size: 17px;
	border-radius: 10px;
	font-weight: 600;
	cursor: pointer;
	transition: all .25s ease;
}

.mr-btn-apply:hover {
	background: #8e0000;
	transform: translateY(-2px);
}

.mr-single-cta p {
	margin-bottom: 25px;
	font-size: 16px;
}

/************************************************************
5️⃣ BOTONES
************************************************************/

.mr-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all .2s ease;
}

/* Vermell corporatiu */
.mr-btn-primary {
	background: var(--mr-red);
	color: #ffffff !important;
	padding: 10px 12px;
	border-radius: 7px;
}

.mr-btn-primary:hover {
	background: var(--mr-red-hover);
}

/* Verd aplicar */
.mr-btn-apply {
	background: var(--mr-green);
	color: #ffffff;
}

.mr-btn-apply:hover {
	opacity: .9;
}

/* Disabled */
.mr-disabled {
	background: var(--mr-disabled);
	color: #666666;
	cursor: not-allowed;
}

/************************************************************
6️⃣ ESTADOS
************************************************************/

.mr-estado-ok {
	font-weight: 600;
	color: var(--mr-green);
	font-size: 16px;
}

/************************************************************
7️⃣ FORMULARIO
************************************************************/

.mr-form {
	display: flex;
	justify-content: center;
	padding: 80px 20px;
	background: #f4f5f7;
}

.mr-form .mr-form-container {
	width: 100%;
	max-width: 820px;
}

/* Cards SOLO dentro del formulario */
.mr-form .mr-card {
	background: #ffffff;
	padding: 40px;
	border-radius: 14px;
	margin-bottom: 35px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* Títulos */
.mr-form .mr-card h3 {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 25px;
	color: var(--mr-text-dark);
}

/* Grid SOLO en formulario */
.mr-form .mr-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

@media(max-width:768px){
	.mr-form .mr-grid {
		grid-template-columns: 1fr;
	}
}

/* Labels */
.mr-form .mr-field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .6px;
	margin-bottom: 6px;
	color: var(--mr-text-dark);
}

/* Inputs */
.mr-form .mr-field input,
.mr-form .mr-field select,
.mr-form .mr-field textarea {
	width: 100%;
	background: #f2f3f5;
	border: 1px solid #e3e5e8;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 14px;
	transition: all .2s ease;
}
.mr-form .mr-field input[type="checkbox"]{
	width: 12%;
}

.mr-form .mr-field input:focus,
.mr-form .mr-field select:focus,
.mr-form .mr-field textarea:focus {
	border-color: var(--mr-red);
	background: #ffffff;
	outline: none;
}

/* Checkboxes */
.mr-form .mr-checkbox-group {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
	gap: 12px;
}

.mr-form .mr-checkbox-group label {
	background: #f2f3f5;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.mr-form .mr-checkbox-grid {
	margin:30px;
}

/* Botón */
.mr-form .mr-actions {
	text-align: center;
	margin-top: 30px;
}

.mr-form .mr-btn-primary {
	padding: 14px 30px;
	font-size: 15px;
	border-radius: 8px;
	color: #ffffff!important;
}
.mr-form .mr-btn-primary:hover {
	color: #ffffff!important;
}

/************************************************************
8. ÁREA EMPLEADO – DASHBOARD PROFESIONAL
************************************************************/

.mr-area-empleado {
	max-width: 1100px;
	margin: 80px auto;
	padding: 0 20px;
}

/* HEADER */
.mr-dashboard-header {
	background: #ffffff;
	padding: 40px 50px;
	border-radius: 18px;
	box-shadow: 0 10px 35px rgba(0,0,0,.05);
	border-left: 6px solid var(--mr-red);
	margin-bottom: 50px;
}

.mr-dashboard-header h2 {
	font-size: 34px!important;
	margin-bottom: 10px;
}

.mr-dashboard-header p {
	color: var(--mr-text-light);
	margin-bottom: 20px;
}

.mr-dashboard-header-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.mr-dashboard-actions {
	margin-top: 10px;
}

.mr-btn-logout {
	background: #f1f1f1;
	color: #333;
	border: 1px solid #ddd;
}

.mr-btn-logout:hover {
	background: #e5e5e5;
}



/* BOTONES */
.mr-btn {
	display: inline-block;
	padding: 12px 25px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	transition: .2s ease;
}

.mr-btn-primary {
	background: var(--mr-red);
	color: #fff;
}

.mr-btn-primary:hover {
	background: #8e0000;
}

.mr-btn-secondary {
	background: #f2f3f5;
	color: #333;
}

.mr-btn-secondary:hover {
	background: #e5e7eb;
}

/* SECCIÓN */
.mr-area-empleado h3 {
	font-size: 24px!important;
	margin-bottom: 25px;
}

/* GRID DE CANDIDATURAS */
.mr-candidaturas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 25px;
}

/* CARD */
.mr-candidatura-card {
	background: #ffffff;
	padding: 30px;
	border-radius: 16px;
	box-shadow: 0 6px 25px rgba(0,0,0,.05);
	border-top: 4px solid #e5e7eb;
	transition: .25s ease;
}

.mr-candidatura-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 35px rgba(0,0,0,.08);
}

.mr-candidatura-card h4 {
	font-size: 20px!important;
	margin-bottom: 12px;
}

.mr-candidatura-card p {
	font-size: 14px;
	margin-bottom: 20px;
}

/*Estados*/
.mr-estado {
	display: inline-block;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 20px;
	margin-right: 15px;
}

.mr-estado-apuntado {
	background: #e8f0fe;
	color: #1a73e8;
}

.mr-estado-pre {
	background: #fff4e5;
	color: #ff9800;
}

.mr-estado-entrevista {
	background: #f3e5f5;
	color: #8e24aa;
}

.mr-estado-ok {
	background: #e7f7ed;
	color: #2e7d32;
}

.mr-estado-no {
	background: #fdecea;
	color: #c62828;
}
/* Divider exclusivo del dashboard */
.mr-area-divider {
	height: 1px;
	background: #f0f0f0;
	margin: 50px 0;
}

/* Mensajes */
.mr-area-message,
.mr-area-empty {
	background: #ffffff;
	padding: 30px;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(0,0,0,.04);
	text-align: center;
}

/* Título candidatura */
.mr-candidatura-title {
	font-size: 20px;
	margin-bottom: 15px;
}