/* ===== TeamFlow — estilos base =====
   Colores forzados con !important a propósito: el tema del sitio (modo
   oscuro, textos blancos por defecto, inputs oscuros, etc.) puede pisar
   nuestros estilos y volver el texto invisible. Aquí forzamos un sistema de
   color propio y consistente para que se vea igual en cualquier tema. */

:root {
	--tf-gray: #303030;
	--tf-gray-soft: #5a5a5a;
	--tf-gray-bg: #303030;
	--tf-yellow: rgb(253, 201, 4);
	--tf-white: #ffffff;
	--tf-border: #e2e2e2;
}

.tf-box {
	background: var(--tf-white) !important;
	border: 1px solid var(--tf-border);
	border-radius: 10px;
	padding: 18px 20px;
	margin: 16px 0;
	font-family: inherit;
	color: var(--tf-gray) !important;
	max-width: 100%;
	box-sizing: border-box;
}
.tf-box * { box-sizing: border-box; }

/* Forzamos el color de texto gris en todo lo que hay dentro de la caja,
   salvo en los elementos que definen explícitamente su propio color
   (badges, highlight, botones, celdas de la malla). */
.tf-box,
.tf-box p,
.tf-box span,
.tf-box li,
.tf-box label,
.tf-box strong,
.tf-box em,
.tf-box small,
.tf-box h1, .tf-box h2, .tf-box h3, .tf-box h4,
.tf-box td {
	color: var(--tf-gray) !important;
}

.tf-title {
	margin-top: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	color: var(--tf-gray) !important;
}
.tf-logo-mini {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 6px;
}
.tf-box-warning {
	background: #fff8e5 !important;
	border: 1px solid #f0c36d;
	color: #6b4e00 !important;
	padding: 14px 16px;
	border-radius: 8px;
}
.tf-box-warning * { color: #6b4e00 !important; }
.tf-box-success {
	background: #e9f9ee !important;
	border: 1px solid #7fd99a;
	color: #17643a !important;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 14px;
}
.tf-box-success * { color: #17643a !important; }

.tf-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	border-radius: 6px;
}
.tf-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
	font-size: 14px;
	background: var(--tf-white);
}
.tf-table th, .tf-table td {
	border: 1px solid #e5e5e5;
	padding: 8px 10px;
	text-align: left;
	white-space: nowrap;
}
.tf-table td { background: var(--tf-white) !important; color: var(--tf-gray) !important; }

/* Encabezados de TODAS las tablas del plugin: fondo gris, texto blanco. */
.tf-table thead th {
	background: var(--tf-gray-bg) !important;
	color: var(--tf-white) !important;
	font-weight: 600;
}

/* Primera columna fija (nombre del integrante) al hacer scroll horizontal en
   celular — así siempre se sabe a quién corresponde cada fila mientras se
   desliza para ver el resto de columnas (días, bloques, etc.). */
.tf-table.tf-sticky-first th:first-child,
.tf-table.tf-sticky-first td:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
}
.tf-table.tf-sticky-first td:first-child {
	background: var(--tf-white) !important;
	box-shadow: 2px 0 4px rgba(0,0,0,0.06);
}
.tf-table.tf-sticky-first thead th:first-child {
	z-index: 3;
	box-shadow: 2px 0 4px rgba(0,0,0,0.15);
}

.tf-scroll-hint {
	display: none;
	font-size: 12px;
	color: var(--tf-gray-soft) !important;
	margin: -4px 0 8px;
}
@media (max-width: 640px) {
	.tf-scroll-hint { display: block; }
}

.tf-cell-libre {
	background: #ffecec !important;
	color: #a11 !important;
	font-weight: 600;
	text-align: center;
}
.tf-cell-disponible {
	background: #eefaf0 !important;
	color: #1a7a3a !important;
	text-align: center;
}
.tf-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}
.tf-badge-ok { background: #e6f7ea !important; color: #1a7a3a !important; }
.tf-badge-warning { background: #fff3d6 !important; color: #8a6100 !important; }
.tf-badge-danger { background: #fdeaea !important; color: #a11 !important; }

/* Caja de aviso destacado (turno de hoy, total del grupo, etc.): fondo gris
   oscuro de marca, texto blanco, y el valor principal en amarillo oficial. */
.tf-highlight {
	background: var(--tf-gray-bg) !important;
	border: 1px solid #454545;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 10px;
	font-size: 15px;
	color: var(--tf-white) !important;
}
.tf-highlight * { color: var(--tf-white) !important; }
.tf-highlight strong { color: var(--tf-yellow) !important; }

.tf-note {
	font-size: 12px;
	color: var(--tf-gray-soft) !important;
	margin-top: 10px;
}

/* Botones: alto mínimo táctil (44px recomendado en móvil) */
.tf-box .button,
.tf-box button {
	min-height: 42px;
	line-height: 1.2;
	white-space: normal;
}
.tf-btn-primary {
	background: var(--tf-yellow) !important;
	color: var(--tf-gray) !important;
	border-color: var(--tf-yellow) !important;
	font-weight: 600;
}
.tf-btn-danger {
	background: #b32d2e !important;
	color: #fff !important;
	border-color: #b32d2e !important;
}

/* Fila de acciones (varios botones seguidos): en pantallas anchas quedan en
   línea, en celular se apilan a ancho completo para que sean fáciles de
   tocar sin equivocarse de botón. */
.tf-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tf-actions .button {
	flex: 1 1 auto;
}

/* Inputs, selects y textareas: fondo claro fijo y texto gris fijo, para que
   no hereden estilos oscuros del tema del sitio y el texto deje de
   "desaparecer". font-size 16px evita que iOS haga zoom automático al
   enfocar el campo. */
.tf-box input[type="text"],
.tf-box input[type="date"],
.tf-box input[type="number"],
.tf-box input[type="email"],
.tf-box select,
.tf-box textarea {
	background: #f4f4f5 !important;
	color: var(--tf-gray) !important;
	border: 1px solid #ccc !important;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 16px;
	min-height: 42px;
	max-width: 100%;
}
.tf-box select option {
	background: #ffffff !important;
	color: var(--tf-gray) !important;
}
.tf-box input::placeholder,
.tf-box textarea::placeholder {
	color: #9a9a9a !important;
}

/* Formularios de filtro (fecha, período, bloque): en pantallas angostas cada
   campo pasa a ocupar todo el ancho, uno debajo del otro. */
.tf-filter-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: end;
	margin-bottom: 14px;
}
.tf-filter-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
}
@media (max-width: 480px) {
	.tf-filter-form { flex-direction: column; align-items: stretch; }
	.tf-filter-form label,
	.tf-filter-form input,
	.tf-filter-form select,
	.tf-filter-form button {
		width: 100%;
	}
	.tf-actions { flex-direction: column; }
	.tf-actions .button { width: 100%; }
	.tf-box form > p > button[type="submit"] {
		display: block;
		width: 100%;
	}
}

.tf-group-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}
.tf-group-logo-big {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 10px;
}
.tf-members-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 14px;
}
.tf-member-card {
	text-align: center;
	background: #fafafa !important;
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 10px 6px;
}
.tf-member-card * { color: var(--tf-gray) !important; }
.tf-member-photo {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 50%;
	margin: 0 auto 8px;
	display: block;
}
.tf-member-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tf-gray-bg) !important;
	color: var(--tf-yellow) !important;
	font-size: 26px;
	font-weight: 700;
}
.tf-member-name {
	font-weight: 600;
	font-size: 13px;
}
.tf-member-role {
	font-size: 11px;
	color: var(--tf-gray-soft) !important;
}

/* Slider (panorama de agencia) */
.tf-slider {
	overflow: hidden;
	width: 100%;
}
.tf-slider-track {
	display: flex;
	transition: transform 0.35s ease;
}
.tf-slide {
	min-width: 100%;
	box-sizing: border-box;
	padding: 4px 2px;
}
.tf-slide h4 {
	margin-top: 0;
	color: var(--tf-gray) !important;
}
.tf-row-top td {
	background: #fff8e5 !important;
	color: var(--tf-gray) !important;
}
.tf-slider-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 12px;
}
.tf-slider-btn {
	background: var(--tf-gray-bg) !important;
	color: var(--tf-yellow) !important;
	border: 1px solid var(--tf-gray-bg);
	border-radius: 50%;
	width: 42px;
	height: 42px;
	min-height: 42px;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
	flex-shrink: 0;
}
.tf-slider-btn:hover {
	opacity: 0.85;
}
.tf-slider-dots {
	display: flex;
	gap: 8px;
}
.tf-slider-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ddd;
	cursor: pointer;
	display: inline-block;
}
.tf-slider-dot.active {
	background: var(--tf-yellow);
}

@media (max-width: 600px) {
	.tf-box { padding: 14px; margin: 12px 0; }
	.tf-title { font-size: 17px; flex-wrap: wrap; }
	.tf-table { font-size: 13px; }
	.tf-table th, .tf-table td { padding: 7px 8px; }
	.tf-highlight { font-size: 14px; }
	.tf-members-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
	.tf-member-photo { width: 56px; height: 56px; }
	.tf-member-photo-placeholder { font-size: 20px; }
	.tf-group-header { gap: 10px; margin-bottom: 12px; }
	.tf-group-logo-big { width: 44px; height: 44px; }
	.tf-slide h4 { font-size: 15px; }
}

@media (max-width: 380px) {
	.tf-box { padding: 12px; }
	.tf-table { font-size: 12px; }
}