/* Color de fondo general */
body {
background-color: #EDF6F9;
margin: 0;
padding: 0;
min-height: 100vh; /* asegura que el color cubra toda la altura */
}
.LogoYNombredeClub{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.ClubLogo {
width: 200px;
height: 200px;
}
/* Estilos base para selects que usan autoWidth */
select.auto-width-select,
select[data-auto-width="true"] {
min-width: 0 !important; /* anular min-width global si existe */
box-sizing: border-box;
vertical-align: middle;
}
/* Clase que aplica apariencia custom (flecha SVG como background) */
select.auto-width-select.custom-appearance,
select[data-auto-width="true"].custom-appearance {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.5rem center;
padding-right: 1.6rem; /* espacio para la flecha custom */
}
/* --- A. Contenedor flex para alinear label + select --- */
.modalidad-form {
display: inline-flex; /* linea horizontal (mantiene comportamiento inline del form) */
align-items: center; /* centra verticalmente label y select */
gap: .5rem; /* separación controlada entre label y select */
margin-bottom: 0; /* por si el form añade margen */
}
/* Asegurar que el label quede perfectamente centrado */
.modalidad-label {
display: inline-block;
margin-bottom: 0;
line-height: 1; /* evita desplazamientos por línea */
vertical-align: middle;
font-weight: 600;
color: #333;
}
/* --- B. Select específico: quitar min-width global forzoso y permitir que JS calcule ancho exacto --- */
.form-select.modalidad-select {
display: inline-block;
width: auto; /* JS pondrá width en px en escritorio */
box-sizing: border-box;
vertical-align: middle;
min-width: 0 !important; /* anular cualquier min-width global (p.ej. 10rem) */
padding-right: .8rem; /* menos padding para que no quede tanto hueco */
padding-left: .45rem;
background-color: #EDF6F9;
color: #006D77;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
/* --- C. Opciones: intento de styling del hover/selected (funciona en muchos navegadores) --- */
select.modalidad-select option {
/* mantener contraste normal */
color: #000;
background-color: #fff;
}
/* hover dentro del dropdown */
select.modalidad-select option:hover,
select.modalidad-select option:focus {
background-color: #006D77; /* color solicitado */
color: #ffffff;
}
/* selected en la lista (cuando esté seleccionado) */
select.modalidad-select option:checked {
background-color: #006D77;
color: #ffffff;
}
/* --- D. (Opcional) Si quieres un control total de apariencia en todos los navegadores:
Ocultar la apariencia nativa y dibujar una flecha SVG como background.
Esto permite estilos más fiables para el select pero pierde el menú nativo (seguirá abriendo el native list). */
select.modalidad-select.custom-appearance {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.5rem center;
padding-right: 1.6rem; /* espacio para la flecha custom */
border-radius: .375rem;
}
/* --- E. Ajustes menores para accesibilidad/espaciado --- */
.modalidad-form .form-select:focus {
box-shadow: 0 0 0 0.15rem rgba(0,109,119,0.15);
border-color: #006D77;
}
/* Mantener la tabla lo más compacta posible en escritorio */
.table { table-layout: auto !important; width: auto !important; margin: 0 auto !important; }
.table th, .table td { white-space: nowrap; }
/* En pantallas pequeñas permitir wrapping para que no salte el layout */
@media (max-width: 767.98px) {
.table th, .table td { white-space: normal; }
}
/* Card layout para concursos en móvil: pequeños ajustes */
.conc-card .card-title { font-size: 1rem; margin-bottom: .25rem; }
.conc-card .meta { font-size: .85rem; color: #6c757d; }
/*Botón añadir concurso*/
.btn-add {
background-color: #FFAE96; /* color base */
color: #000000; /* texto negro */
border: 1px solid rgba(0,0,0,0.06);
box-shadow: none;
}
.btn-add:hover {
background-color: #DE7752; /* tono un poco más oscuro para hover/focus */
color: #000000;
}
.btn-add:active {
background-color: #DCAEA0; /* un poco más oscuro al hacer click */
color: #000000;
transform: translateY(0.5px);
}
/*Botón modalidades*/
.btn-modalidades {
background-color: #006D77; /* color base */
color: #FFFFFF; /* texto negro */
border: 1px solid rgba(0,0,0,0.06);
box-shadow: none;
}
.btn-modalidades:hover {
background-color: #004F57; /* tono un poco más oscuro para hover/focus */
color: #FFFFFF;
}
.btn-modalidades:active {
background-color: #00353B; /* un poco más oscuro al hacer click */
color: #FFFFFF;
transform: translateY(0.5px);
}
/*Botón puntos*/
.btn-puntos {
background-color: #006D77; /* color base */
color: #FFFFFF; /* texto negro */
border: 1px solid rgba(0,0,0,0.06);
box-shadow: none;
}
.btn-puntos:hover {
background-color: #004F57; /* tono un poco más oscuro para hover/focus */
color: #FFFFFF;
}
.btn-puntos:active {
background-color: #00353B; /* un poco más oscuro al hacer click */
color: #FFFFFF;
transform: translateY(0.5px);
}
/* ---------- Tabla centrada, shrink-to-fit y esquinas redondeadas ---------- */
/* El contenedor no pinta fondo: lo hacemos transparente para evitar el "trozo blanco" */
.table-responsive {
background: transparent; /* nada de fondo aquí */
border: none; /* quitamos borde si lo tenías */
overflow: visible; /* permitimos que la tabla se muestre sin clip por defecto */
padding: 0.25rem; /* pequeño acolchado opcional para respirar (ajústalo) */
}
/* En pantallas md+ (tu tabla se muestra solo en md+) mantenemos el comportamiento shrink-to-fit */
@media (min-width: 768px) {
.table.table-striped {
width: auto; /* tan ancha como su contenido */
margin: 0 auto; /* centra la tabla horizontalmente */
table-layout: auto;
white-space: nowrap; /* evita saltos; cámbialo a normal si permites wrap */
border-collapse: separate; /* necesario para que radius funcione bien */
border-spacing: 0;
background-clip: padding-box;
border-radius: 8px; /* radio visible aplicado a la tabla */
background-color: #ffffff; /* fondo blanco que queremos ver pero solo en la tabla */
overflow: hidden; /* recorta las celdas para respetar el radius */
box-shadow: 0 1px 2px rgba(0,0,0,0.03); /* opcional: sombra ligera */
display: table; /* ayuda a shrink-to-fit y a centrar con margin auto */
}
}
/* Asegurar que el thead no "salga" y respetar las esquinas */
.table.table-striped thead th {
background-color: #006D77; /* tu color de encabezado */
color: #fff;
}
.table.table-striped thead th:first-child {
border-top-left-radius: 8px;
}
.table.table-striped thead th:last-child {
border-top-right-radius: 8px;
}
/* Esquinas inferiores */
.table.table-striped tbody tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
.table.table-striped tbody tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
/* Mantener filas alternadas (siguen dentro de la tabla, ahora con clipping correcto) */
.table.table-striped tbody tr:nth-of-type(odd) {
background-color: #ffffff;
}
.table.table-striped tbody tr:nth-of-type(even) {
background-color: #f5f5f5;
}
/* Asegurar celdas centradas horizontal y verticalmente */
.table.table-striped th,
.table.table-striped td {
text-align: center;
vertical-align: middle;
white-space: nowrap;
padding: .45rem .6rem;
}
/* Limitar tamaño máximo de la tabla en pantallas pequeñas (para no romper el layout) */
@media (max-width: 767.98px) {
.table.table-striped {
width: 100%;
table-layout: fixed; /* permite scroll horizontal si hace falta */
white-space: normal;
}
.table.table-striped th,
.table.table-striped td {
white-space: normal;
}
}
/* 4) Encabezado de la tabla color solicitado y texto legible */
.table.table-striped thead th {
background-color: #006D77; /* color encabezado pedido */
color: #ffffff;
font-weight: 700;
border-color: rgba(0,0,0,0.05);
}
/* 5) Mantener filas alternadas (bootstrap ya lo hace); podemos ajustar contraste */
.table.table-striped tbody tr:nth-of-type(odd) {
background-color: #ffffff;
}
.table.table-striped tbody tr:nth-of-type(even) {
background-color: #f5f5f5; /* gris muy suave */
}
/* 6) Ajustes para botones de acción en la tabla (iconos etc.) */
.table .btn.p-0 {
padding: .25rem .35rem;
font-size: 1rem;
color: inherit;
}
/* ==========================
Estética uniforme para TODOS los modales
========================== */
/* Contenedor principal del modal: fondo, radio, borde y sombra */
.modal .modal-content {
background-color: #EDF6F9; /* fondo uniforme */
color: #083238; /* texto principal */
border: 1px solid rgba(0,109,119,0.10); /* borde sutil */
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
overflow: hidden; /* respeta el border-radius */
transition: transform .12s ease, box-shadow .12s ease;
}
/* Encabezado / footer: heredarán el fondo y no tendrán líneas extra */
.modal .modal-header,
.modal .modal-footer {
background: transparent;
border: none;
color: inherit;
padding-left: 1rem;
padding-right: 1rem;
}
/* Título con color de acento */
.modal .modal-title {
color: #006D77;
font-weight: 600;
margin: 0;
}
/* Botón cerrar: usar variable de BS para pintar el icono (Bootstrap 5) */
.modal .btn-close {
--bs-close-color: #006D77;
opacity: 1;
filter: none;
}
/* Cuerpo del modal: espaciado y color de texto */
.modal .modal-body {
padding: 1rem 1rem;
color: inherit;
background: transparent;
}
/* Inputs / selects / textarea dentro de modales: mantener fondo blanco para legibilidad */
.modal .form-control,
.modal .form-select,
.modal input[type="number"],
.modal input[type="text"],
.modal input[type="date"],
.modal input[type="time"],
.modal textarea {
background-color: #ffffff;
color: #111;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 6px;
box-shadow: none;
}
/* Placeholder más suave */
.modal .form-control::placeholder {
color: rgba(0,0,0,0.45);
}
/* Tablas dentro de modal: fondo blanco y sin radius interno que rompa el contenedor */
.modal .table {
background: transparent;
margin-bottom: 0;
}
.modal .table thead th {
background-color: transparent; /* si quieres el encabezado con color, ajustar aquí */
}
/* Footer: alineado y botones consistentes */
.modal .modal-footer {
padding: .75rem 1rem;
display: flex;
gap: .5rem;
align-items: center;
justify-content: flex-end;
}
/* Botones dentro del modal: consistencia visual */
.modal .btn-save {
background-color: #FFAE96; /* color base */
color: #000000; /* texto negro */
border: 1px solid rgba(0,0,0,0.06);
box-shadow: none;
}
.modal .btn-save:hover { background-color: #DE7752; /* tono un poco más oscuro para hover/focus */
color: #000000; }
.modal .btn-save:active { background-color: #DCAEA0; /* un poco más oscuro al hacer click */
color: #000000;
transform: translateY(0.5px); }
/* Botones secundarios/primarios estándar: mantener contraste sobre el fondo claro */
.modal .btn-primary {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
.modal .btn-secondary {
background-color: var(--bs-secondary);
border-color: var(--bs-secondary);
}
/* Si tienes forms con .modal-content en