/* Add here all your css styles (customizations) */


/* Pantallas de fichaje simplificadas: icono grande + un mensaje corto,
   pensadas para que se entiendan de un vistazo sin tener que leer. */
.yof-panel {
	text-align: center;
	padding: 30px 15px;
}
.yof-icon-circle {
	display: block;
	width: 110px;
	height: 110px;
	line-height: 110px;
	border-radius: 50%;
	margin: 0 auto 18px auto;
	font-size: 52px;
	color: #fff;
	text-align: center;
	box-shadow: 0 10px 24px rgba(0,0,0,.18);
	flex: none;
}
.yof-icon-circle i {
	line-height: inherit;
}
.yof-reloj {
	font-size: 18px;
	font-weight: 700;
	color: #2f2f2f;
	opacity: 1;
	margin-bottom: 12px;
}
.yof-titulo {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 8px;
	color: #5db3ec;
}
.yof-titulo-accent {
	color: #f4a341;
}
.yof-subtitulo {
	font-size: 15px;
	opacity: .95;
	margin-bottom: 0;
}
.yof-nota {
	font-size: 12px;
	opacity: .8;
	margin-top: 22px;
	text-align: left;
}


/* Tarjetas y tablas modernizadas (rejillas de fichadas / resúmenes) */
.yof-card {
	border: none;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 14px 36px rgba(30,40,60,.10);
}
.yof-card-header {
	background: #0d3b66;
	color: #fff;
	border: none;
	padding: 16px 20px;
}
.yof-card-header a {
	color: #fff;
	opacity: .85;
}
.yof-card-header a:hover {
	opacity: 1;
}
.yof-table {
	margin-bottom: 0;
}
.yof-table thead tr {
	background: #1c84c6;
	color: #fff;
}
.yof-table thead th {
	border: none;
	padding: 12px 10px;
	font-size: 12px;
	letter-spacing: .3px;
}
.yof-table tbody td {
	padding: 12px 10px;
	border-color: #1c2d47;
	vertical-align: middle;
}
.yof-table tbody tr:hover {
	background: #16283f;
}
.yof-map-link {
	display: inline-block;
	font-size: 11px;
	padding: 3px 8px;
	margin: 2px;
	border-radius: 999px;
	background: #16283f;
	color: #5db3ec !important;
	text-decoration: none !important;
	border: 1px solid rgba(93,179,236,.3);
}
.yof-map-link:hover {
	background: #1c84c6;
	color: #fff !important;
}
.yof-pagination .page-link {
	border-radius: 999px !important;
	margin: 0 3px;
	border: 1px solid #24384f;
	background-color: #101f36;
	color: #dbe4f0;
}
.yof-pagination mark {
	border-radius: 999px;
	padding: 4px 11px;
}


/* Etiquetas de estado (horas extra) */
.yof-estado {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
}
.yof-estado-pendiente {
	background: #fdf1de;
	color: #b06a00;
}
.yof-estado-ok {
	background: #e3f6e8;
	color: #1a7d3a;
}
.yof-estado-no {
	background: #fbe6e5;
	color: #b3251e;
}

.yof-btn-green {
	background: #1a7d3a;
	color: #fff !important;
	border: none;
}
.yof-btn-green:hover, .yof-btn-green:focus {
	background: #146530;
	color: #fff !important;
}


/* ============================================================
   Reemplazo global del color "primary" del tema (verde #72c02c)
   por la identidad de marca de Solinfor (azul marino / azul).
   Se carga el último, así que gana sobre unify-globals.css/unify.css.
   ============================================================ */
.g-bg-primary,
.u-header__section--dark.g-bg-primary {
	background-color: #0d3b66 !important;
}
.u-btn-primary {
	color: #fff !important;
	background-color: #1c84c6 !important;
}
.u-btn-primary:hover, .u-btn-primary.active, .u-btn-primary:focus {
	background-color: #23c6c8 !important;
	border-color: #23c6c8 !important;
}
.u-btn-outline-primary {
	color: #5db3ec !important;
	border-color: #5db3ec !important;
	background-color: transparent !important;
}
.u-btn-outline-primary:hover, .u-btn-outline-primary:focus, .u-btn-outline-primary.active {
	color: #0a1628 !important;
	background-color: #5db3ec !important;
}
.u-btn-outline-bluegray {
	color: #8b9cb5 !important;
	border-color: #8b9cb5 !important;
	background-color: transparent !important;
}
.u-btn-outline-bluegray:hover, .u-btn-outline-bluegray:focus, .u-btn-outline-bluegray.active {
	color: #0a1628 !important;
	background-color: #8b9cb5 !important;
}

/* ============================================================
   Tema oscuro general del sitio (estilo SOL-CLI): fondo de página
   navy muy oscuro, y las propias tarjetas (.card, .yof-card) también
   oscuras -no blancas- con su texto en claro. El naranja se reserva
   como acento puntual (badges, hover), no para botones ni fondos.
   ============================================================ */
body,
.g-bg-gray-light-v5,
.g-theme-bg-primary-light-v1 {
	background-color: #0a1628 !important;
	color: #dbe4f0;
}
.card,
.yof-card {
	background-color: #101f36 !important;
	border: 1px solid #1c3450 !important;
	color: #dbe4f0;
}
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.yof-card h1, .yof-card h2, .yof-card h3, .yof-card h4, .yof-card h5, .yof-card h6,
.card .card-title,
.card p, .yof-card p,
.card li, .yof-card li,
.card label, .yof-card label,
.card small, .yof-card small {
	color: #dbe4f0 !important;
}
.g-color-black,
.g-color-black-opacity-0_8 {
	color: #dbe4f0 !important;
}
.g-color-black-opacity-0_6,
.g-color-gray-dark-v4,
.text-muted {
	color: #8b9cb5 !important;
}
.yof-reloj {
	color: #e8edf5;
}
.yof-nota {
	color: #8b9cb5;
}
.bg-light {
	background-color: #16283f !important;
	color: #8b9cb5 !important;
}

/* Campos de formulario oscuros (estilo SOL-CLI), en vez de cajas blancas */
.form-control,
.form-control:disabled,
.form-control[readonly] {
	background-color: #0c1a2c !important;
	border: 1px solid #24384f;
	color: #e8edf5 !important;
	padding: 12px 16px;
	height: auto;
}
.form-control::placeholder {
	color: #6b7c94;
	opacity: 1;
}
.form-control:focus {
	background-color: #0c1a2c !important;
	border-color: #f4a341;
	color: #e8edf5 !important;
	box-shadow: 0 0 0 3px rgba(244,163,65,.25);
}
.g-brd-primary,
.g-brd-primary-top,
.g-brd-primary-bottom,
.g-brd-primary-left,
.g-brd-primary-right {
	border-color: #1c84c6 !important;
}
.g-color-primary {
	color: #1c84c6 !important;
}
mark {
	background: #50CAFC;
	color: #0d3b66;
}
/* Tarjetas de contenido (páginas tipo informacion/legal/ficharc) con el
   mismo look de tarjeta redondeada que el resto del sitio ya modernizado */
.card.g-brd-primary {
	border: none !important;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 14px 36px rgba(30,40,60,.10);
}

/* Insignia de administrador y aviso de incidencias pendientes en fichar1.php */
.yof-admin-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: #0d3b66;
	color: #fff;
	font-weight: 800;
	font-size: 13px;
	margin-right: 10px;
}
.yof-incidencias-alerta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: #fdf1de;
	color: #b06a00 !important;
	font-weight: 800;
	font-size: 13px;
	text-decoration: none !important;
	border: 1px solid rgba(176,106,0,.25);
}
.yof-incidencias-alerta:hover {
	background: #fbe6c3;
}

/* Páginas de texto informativo (informacion.php, legal.php, terminos.php) */
.yof-info-callout {
	margin: 24px 0;
	padding: 16px 20px;
	border-left: 5px solid #1c84c6;
	border-radius: 12px;
	background: #16283f;
	color: #5db3ec;
	font-weight: 700;
}
.yof-info-list {
	padding-left: 20px;
}
.yof-info-list li {
	margin-bottom: 10px;
	line-height: 1.6;
}

/* ============================================================
   Rejillas de datos en claro: el resto del sitio es oscuro, pero las
   tablas (fichadas, resúmenes, incidencias...) se leen mejor en blanco,
   como estaban antes. Se marcan con .yof-card-tabla y esto gana por
   estar cargado el último.
   ============================================================ */
.yof-card-tabla.card,
.yof-card-tabla {
	background-color: #ffffff !important;
	border-color: #e7eaec !important;
}
.yof-card-tabla h1, .yof-card-tabla h2, .yof-card-tabla h3, .yof-card-tabla h4, .yof-card-tabla h5, .yof-card-tabla h6,
.yof-card-tabla p, .yof-card-tabla li, .yof-card-tabla label, .yof-card-tabla small,
.yof-card-tabla td, .yof-card-tabla .yof-table td {
	color: #33475b !important;
}
.yof-card-tabla .yof-card-header,
.yof-card-tabla .yof-card-header h1, .yof-card-tabla .yof-card-header h2, .yof-card-tabla .yof-card-header h3,
.yof-card-tabla .yof-card-header h4, .yof-card-tabla .yof-card-header h5, .yof-card-tabla .yof-card-header h6 {
	color: #ffffff !important;
}
.yof-card-tabla .yof-table thead th {
	color: #ffffff !important;
}
.yof-card-tabla .g-color-black,
.yof-card-tabla .g-color-black-opacity-0_8,
.yof-card-tabla .g-color-black-opacity-0_6,
.yof-card-tabla .g-color-gray-dark-v4,
.yof-card-tabla .text-muted {
	color: #67757c !important;
}
.yof-card-tabla .yof-table tbody td {
	border-color: #eef1f5 !important;
}
.yof-card-tabla .yof-table tbody tr:hover {
	background: #f7f9fb !important;
}
.yof-card-tabla .u-btn-outline-primary {
	color: #1c84c6 !important;
	border-color: #1c84c6 !important;
}
.yof-card-tabla .u-btn-outline-primary:hover, .yof-card-tabla .u-btn-outline-primary:focus, .yof-card-tabla .u-btn-outline-primary.active {
	color: #fff !important;
	background-color: #1c84c6 !important;
}
.yof-card-tabla .yof-map-link {
	background: #f1f8ff !important;
	color: #1c84c6 !important;
	border-color: rgba(28,132,198,.25) !important;
}
.yof-card-tabla .yof-pagination .page-link {
	background-color: #ffffff !important;
	color: #1c2f46 !important;
	border-color: #e7eaec !important;
}
.yof-card-tabla .form-control {
	background-color: #ffffff !important;
	border-color: #d7dee6 !important;
	color: #33475b !important;
}