/* Clases compartidas: las escribe a mano mas de una pagina, por eso viven aqui y no
   en el .razor.css de un componente. */
@layer components {
	
.text-error {
	color: var(--nrh-danger);
	text-wrap-mode: wrap;
	overflow-wrap: break-word;
}
	
form:invalid button[type="submit"] {
	/*pointer-events: none;
    */
	opacity: 0.6;
}

/* ---------------------------------- */

/* Tabs */

/* ---------------------------------- */

.employee-tab-nav {
	display: flex;
	border-bottom: 1px solid var(--nrh-border);
	margin-bottom: 1.5rem;
	gap: 0;
}

.tab {
	padding: 0.625rem 1.5rem;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--nrh-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.tab:hover {
	color: var(--nrh-ink);
}

.tab.active {
	color: var(--nrh-green);
	border-bottom-color: var(--nrh-green);
}

.tab-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: 0.5rem;
}

/* Tab nav rendered with <button> elements (interactive tabs) */
.employee-tab-nav button.tab {
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	margin-bottom: -2px;
	cursor: pointer;
}

.employee-tab-nav button.tab.active {
	color: var(--nrh-green);
	border-bottom-color: var(--nrh-green);
}

button.link-button {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0.5rem 0.25rem;
	color: var(--nrh-muted);
	text-decoration: underline;
	cursor: pointer;
}

button.link-button:hover {
	color: var(--nrh-text);
}

.text-muted {
	color: rgba(0, 0, 0, 0.6);
}

/* ---------- BUTTONS ---------- */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 10px 16px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(135deg, #12a06a, #1370c9);
	color: #fff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 16px -8px rgba(18, 112, 201, 0.5);
	white-space: nowrap;
}

.btn-block {
	width: 100%;
	padding: 13px;
	font-size: 14.5px;
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border: 1px solid #e4ebe8;
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: #46564f;
	cursor: pointer;
}

.btn-danger {
	padding: 12px;
	border: none;
	border-radius: 10px;
	background: #d24b4b;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 16px -8px rgba(210, 75, 75, 0.6);
}

.plus {
	font-size: 16px;
	line-height: 1;
}

a.btn-primary, a.btn-outline {
	text-decoration: none;
}

.tone-success { color: var(--nrh-success); background: var(--nrh-success-bg); }
.tone-info    { color: var(--nrh-info);    background: var(--nrh-info-bg); }
.tone-warning { color: var(--nrh-warning); background: var(--nrh-warning-bg); }
.tone-danger  { color: var(--nrh-danger);  background: var(--nrh-danger-bg); }
.tone-neutral { color: var(--nrh-text-soft); background: var(--nrh-bg); }
.tone-purple  { color: #7a52c9; background: #f1ecfb; }
.tone-teal    { color: #0f8a86; background: #e7f7f5; }

/* ---------- CARD ---------- */
.card {
	background: var(--nrh-surface);
	border: 1px solid var(--nrh-border-soft);
	border-radius: var(--nrh-radius);
	padding: 22px;
	box-shadow: var(--nrh-shadow-card);
}

.card-title {
	font-family: var(--nrh-font-display);
	font-weight: 600;
	font-size: 15.5px;
	color: var(--nrh-ink);
}

.card-sub {
	font-size: 12.5px;
	color: var(--nrh-muted);
}

/* ---------- DATA TABLE (scoped a .data-table para no afectar QuickGrid/Fluent) ---------- */
.table-card {
	padding: 0;
	overflow: hidden;
}

.table-scroll { overflow-x: auto; }

.data-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 760px;
}

.data-table thead tr {
	background: #fafcfb;
	border-bottom: 1px solid var(--nrh-border-faint);
}

.data-table th {
	text-align: left;
	padding: 13px 16px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--nrh-faint);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.data-table th:first-child { padding-left: 20px; }
.data-table th:last-child { text-align: right; padding-right: 20px; }

.data-table td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--nrh-border-row);
	font-size: 13px;
	color: var(--nrh-text-soft);
	white-space: nowrap;
}

.data-table tbody tr:hover { background: #fafcfb; }
.data-table td:first-child { padding-left: 20px; }
.data-table td:last-child { text-align: right; padding-right: 20px; }

.emp-cell {
	display: flex;
	align-items: center;
	gap: 11px;
}

.emp-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nrh-text);
}


.emp-curp {
	font-family: var(--nrh-font-display);
	letter-spacing: 0.01em;
	font-size: 12.5px;
	color: var(--nrh-muted-2);
}


.table-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-top: 1px solid var(--nrh-border-faint);
}

/* En mobile el contador y el paginador no caben lado a lado: en space-between el
   paginador se quedaba en ~198px y sus controles se partian en dos lineas. */
@media (max-width: 767px) {
	.table-foot {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px 14px;
		text-align: center;
	}
}

.table-count {
	font-size: 12.5px;
	color: var(--nrh-faint);
}

.pager { display: flex; gap: 5px; }

.link-strong { color: var(--nrh-blue); font-weight: 600; }

/* ---------- FORM LAYOUT ---------- */
.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 8px;
}

.span-2 { grid-column: span 2; }

.divider {
	height: 1px;
	background: var(--nrh-border-faint);
	margin: 22px 0;
}

.form-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 26px;
}

/* ---------- FILTER FORMS (compartido entre páginas) ---------- */
.filters-form {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: end;
}

.filter-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.filter-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.filter-field label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--nrh-text-soft);
}

.filter-field .req { color: var(--nrh-danger); }

.filter-select,
.filter-input {
	padding: 11px 13px;
	border: 1px solid var(--nrh-field-border);
	border-radius: 10px;
	background: var(--nrh-field-bg);
	font: inherit;
	font-size: 14px;
	color: var(--nrh-ink);
	outline: none;
}

.filter-select:focus,
.filter-input:focus { border-color: var(--nrh-green); }

/* ---------- LOADING ---------- */
/* Markup de Codexcite.Blazor: <LoadingOverlay> renderiza .loading-container dentro de un
   wrapper position:relative, y <Loading> renderiza .loading con el svg. Como lo renderiza
   la libreria, no aparece buscando class="loading" en los .razor; lo usan 7 paginas. */
.loading-container {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(243, 246, 245, 0.72);
	backdrop-filter: blur(2px);
	/* Hereda el radio de la tarjeta que lo contiene para no cuadrar sus esquinas. */
	border-radius: inherit;
	/* Basta con ganar a sus hermanos: un z-index alto taparia el cajon lateral en mobile. */
	z-index: 5;
}

.loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.loading svg {
	width: 38px;
	height: 38px;
}

/* El svg trae stroke="white" y fill="black" como atributos de presentacion, que el CSS
   si puede pisar (las opacidades van en style= inline y esas se respetan: dan el efecto
   de pista tenue + arco solido). */
/* El circle no declara fill, y el valor por defecto de SVG es negro: sin esto se ve un
   disco relleno en vez de la pista del spinner. Antes se disimulaba sobre el fondo
   oscuro al 50% que tenia el overlay. */
.loading svg circle {
	stroke: var(--nrh-green);
	fill: none;
}

.loading svg path {
	fill: var(--nrh-green);
}

/* Campos con plantilla. Los renderiza un componente de libreria via data-field-role,
   asi que hay consumidores que no aparecen buscando class="field-container" en los .razor.
   Por eso viven aqui y no en el .razor.css de FileUploader. */
.field-container {
	display: inline-grid;
	grid-template-columns: 20% 1fr;
	padding: 0.5rem;
	align-items: center;
	gap: 0.5rem;
}
.field-container > [data-field-role="label-container"], .field-label {
	color: var(--nrh-text);
	font-size: 1rem;
	font-weight: 600;
}
.field-container > [data-field-role="input-container"] {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	grid-template-columns: auto;
}
.field-container > [data-field-role="input-container"] input, select {
	width: 100%;
	border-radius: 0.375rem;
	padding: 0.5rem;
	border-width: 2px;
}
/* El reset de 02-base.css le quita borde y padding al textarea, y la regla de arriba solo
   cubre input y select: sin esto el campo se ve como un bloque plano sin contorno. */
.field-container > [data-field-role="input-container"] textarea {
	width: 100%;
	border: 1px solid black;
	border-radius: 8px;
	padding: 0.5rem;
}

.field-container > [data-field-role="input-container"] input:focus {
	outline: none;
	border-color: var(--nrh-green);
}
.field-container[data-is-error] > [data-field-role="input-container"] input {
	border-color: var(--nrh-danger);
	outline: none;
	color: var(--nrh-danger);
}
.field-container > [data-field-role="validation-container"] label {
	color: var(--nrh-danger);
	font-size: small;
}
.field-container > [data-field-role="validation-container"] {
	color: var(--nrh-danger);
	font-size: small;
	grid-column: 2;
}
.field-container > [data-field-role="validation-container"] ul {
	color: var(--nrh-danger);
	list-style: disc;
	list-style-position: inside;
}
.field-container input:user-invalid { border-color: var(--nrh-danger); }
.field-container input:user-valid { border-color: var(--nrh-success); }
.field-container > [data-field-role="description-container"] > span {
	color: var(--nrh-ink);
	font-size: small;
}
.field-container > [data-field-role="description-container"] { display: contents; }

/* El input de archivo cuelga directo de .field-container (FileUploader no usa
   input-container), asi que no lo alcanza la regla de arriba. Sin esto su ancho nativo
   —"Elegir archivo | Sin archivos seleccionados"— desborda la tarjeta en mobile. */
.field-container input[type="file"] {
	width: 100%;
	max-width: 100%;
}

/* Los items de grid no bajan de su min-content por defecto, y el de un input de archivo
   es ancho: sin esto la columna 1fr se estira y saca el contenido del contenedor. */
.field-container > * { min-width: 0; }

/* A 20% la columna de etiqueta se queda en ~70px en un telefono y recorta textos como
   "Periodicidad:". En pantallas angostas la etiqueta va encima del campo. */
@media (max-width: 767px) {
	.field-container {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}

	.field-container > [data-field-role="validation-container"] { grid-column: 1; }
}

}