/* ============================================
   Lugano Tenis Club
   Tema base (general) + estilos de Login
   ============================================ */

/* =========================
   1) Paleta y tipografía base
   ========================= */

:root {
    --ltc-green: #04b103;
    --ltc-green-dark: #038002;
    --ltc-green-soft: #E6FFE6;

    --ltc-text: #1f2933;
    --ltc-muted: #6b7280;
    --ltc-bg-soft: #f4f6f9;
    /* fondo general de contenido */
}

body {
    color: var(--ltc-text);
    font-size: 0.95rem;
}

/* Enlaces generales */
a {
    color: var(--ltc-green-dark);
}

a:hover {
    color: var(--ltc-green);
}

/* =========================
   2) Componentes generales
   (afectan login y panel)
   ========================= */

/* Botón principal LTC (sobrescribe .btn-primary de Bootstrap/AdminLTE) */
.btn-primary {
    background-color: var(--ltc-green);
    border-color: var(--ltc-green-dark);
}

.btn-primary:hover {
    background-color: var(--ltc-green-dark);
    border-color: var(--ltc-green-dark);
    box-shadow: 0 2px 6px rgba(4, 177, 3, 0.35);
}

/* Botón outline principal LTC */
.btn-outline-primary {
    color: var(--ltc-green);
    /* Color del texto inicial: verde LTC */
    border-color: var(--ltc-green-dark);
    /* Color del borde inicial: verde oscuro LTC */
    background-color: transparent;
    font-weight: 600;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: #ffffff;
    /* Texto blanco al pasar el mouse/activar */
    background-color: var(--ltc-green-dark);
    /* Fondo verde oscuro al pasar el mouse/activar */
    border-color: var(--ltc-green-dark);
    /* Borde verde oscuro */
    box-shadow: 0 2px 6px rgba(4, 177, 3, 0.35);
    /* Sombra similar al botón sólido */

}

/* Focus en campos de formulario con halo verde suave */
.form-control:focus,
.form-select:focus {
    border-color: var(--ltc-green);
    box-shadow: 0 0 0 0.2rem rgba(5, 204, 4, 0.18);
}

/* Texto atenuado y utilidades de color */
.text-muted {
    color: var(--ltc-muted) !important;
}

.bg-ltc-soft {
    background-color: var(--ltc-green-soft) !important;
}

.text-ltc {
    color: var(--ltc-green) !important;
}

/* =========================
   3) Estilos específicos del LOGIN
   (sólo afectan vistas con body.login-page)
   ========================= */

/* Fondo degradado verde del login */
body.login-page {
    background: radial-gradient(circle at top,
            #05CC04 0,
            #049403 35%,
            #020814 100%);
}

/* Logo del login */
.login-logo img {
    max-height: 80px;
}

/* Ancho de la caja de login */
.login-box {
    width: 400px;
}

@media (max-width: 576px) {
    .login-box {
        width: 90%;
    }
}

/* =========================
   4) Toasts / Alertas flotantes
   ========================= */

.ltc-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1060;
    /* por encima de la mayoría de cosas */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ltc-toast {
    min-width: 260px;
    max-width: 340px;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 4px solid #d1d5db;
    animation: ltc-toast-in 0.18s ease-out;
}

/* Variantes por tipo */
.ltc-toast-success {
    border-left-color: var(--ltc-green);
    background-color: #e5f7e6; /* verde pastel sólido */
}

.ltc-toast-error {
    border-left-color: #ef4444;
    background-color: #fdecec; /* rojo pastel sólido */
}

.ltc-toast-warning {
    border-left-color: #f59e0b;
    background-color: #fef6e6; /* amarillo pastel sólido */
}

.ltc-toast-info {
    border-left-color: #06b6d4;
    background-color: #e8f8fc; /* celeste pastel sólido */
}

/* Botón de cierre (si luego lo agregamos) */
.ltc-toast-close {
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 1rem;
    line-height: 1;
    margin-left: 0.5rem;
    cursor: pointer;
}

/* Animaciones */
@keyframes ltc-toast-in {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ltc-toast-hide {
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

/* =========================
   5) Estilos específicos para formularios
   ========================= */

/* Asterisco rojo para campos requeridos */
.required-label::after {
    content: " *";
    color: #d9534f;
    /* rojo suave */
    font-weight: bold;
}

/* Estilo de borde al fallar validación */
input:invalid,
select:invalid,
textarea:invalid {
    border-color: #d9534f !important;
}

input:invalid:focus,
select:invalid:focus,
textarea:invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(217, 83, 79, 0.25) !important;
}


/* =========================
   6) Estilos específicos para páginas internas
   ========================= */
/* ---------------------------------------
   Encabezado compacto de páginas (ABM)
----------------------------------------- */

.ltc-page-header {
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 1px;
    /* ⭐ Suave, prolijo */
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ltc-page-header h1 {
    font-size: 1.45rem;
    font-weight: 600;
}

.ltc-page-actions .btn {
    min-width: 100px;
}



/* =========================
   7) Estilos específicos para formularios ABM
   ========================= */
/* Estilo para la fila del socio al pasar el mouse */
.ltc-table-scroll {
    font-size: 0.85rem;
}

.socio-row {

    cursor: pointer;
    /* Muestra el dedo índice para indicar que es clickeable */
}

.cancha-row {
    cursor: pointer;
    /* Muestra el dedo índice para indicar que es clickeable */
}

.cancha-row.ltc-row-selected {
    background-color: #d4f8d4 !important;
    /* verde pastel */
    cursor: default;
    /* Opcional: para que no muestre el dedo si ya está seleccionada */
}

.cancha-row:hover {
    background-color: #f0f0f0;
    /* Color gris claro al pasar el mouse */
}

.canchero-row {
    cursor: pointer;
    /* Muestra el dedo índice para indicar que es clickeable */
}

.canchero-row.ltc-row-selected {
    background-color: #d4f8d4 !important;
    /* verde pastel */
    cursor: default;
    /* Opcional: para que no muestre el dedo si ya está seleccionada */
}

.canchero-row:hover {
    background-color: #f0f0f0;
    /* Color gris claro al pasar el mouse */
}

/* Fila seleccionada en el panel de búsqueda */
.socio-row.ltc-row-selected {
    background-color: #d4f8d4 !important;
    /* verde pastel */
    cursor: default;
    /* Opcional: para que no muestre el dedo si ya está seleccionada */
}

.socio-row:hover {
    background-color: #f0f0f0;
    /* Color gris claro al pasar el mouse */
}

/* =========================
   8) Overlay global para AJAX
   ========================= */
/* Nuevo Overlay Global para AJAX */
#global-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1050;

    /* 🟢 Configuración de transición y ocultamiento inicial */
    opacity: 0;
    /* Opacidad inicial 0 */
    visibility: hidden;
    /* Totalmente oculto e inaccesible al clic */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    /* Transición suave */

}

#global-loader-overlay.is-loading {
    /* 🟢 CLAVE: La clase is-loading debe activar el display y la visibilidad */
    display: flex;
    /* <-- Activamos display solo en el estado 'cargando' */
    justify-content: center;
    align-items: center;

    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
}

/* =========================
   9) Barra de Estado Fija (Fixed Status Bar) - CLASE DE FIRMA
   ========================= */

.ltc-fixed-status-bar {
    /* 🟢 PROPIEDADES VISUALES Y FÍSICAS */
    height: 40px;
    background-color: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0 1rem;
    z-index: 1000;

    /* 🟢 PROPIEDADES DE POSICIONAMIENTO FIJO */
    position: fixed;
    bottom: 0;

    /* --- APLICA CUANDO EL SIDEBAR ESTÁ ABIERTO (Default) --- */
    /* Ancho del sidebar abierto: 250px */
    left: 250px;
    width: calc(100% - 250px);
}

/* --- APLICA CUANDO EL SIDEBAR ESTÁ COLAPSADO (.sidebar-collapse) --- */
/* Se aplica a tu clase Ltc cuando el body tiene la clase de AdminLTE */
body.sidebar-collapse .ltc-fixed-status-bar {
    /* Ancho del sidebar colapsado: ~4.6rem */
    left: 4.6rem;
    width: calc(100% - 4.6rem);
}

.cuota-row {
    cursor: pointer;
    /* Muestra el dedo índice para indicar que es clickeable */
}


/* ============================================================
   ÍTEMS DE LISTA (Cancheros, Canchas, Horas)
   ============================================================ */

.al-item {
    padding: 7px 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: all 0.15s ease-in-out;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ltc-text);
    background: #ffffff;
}

.al-item small {
    font-size: 0.78rem;
    color: #777;
}

.al-item:last-child {
    border-bottom: none;
}

.al-item:hover {
    background: #f1f8f3;
    /* verde MUY suave */
    color: #04ac37;
    padding-left: 14px;
}


/* ============================================================
   LISTAS CONTENEDORAS
   ============================================================ */

#alquiler-cancheros-container,
#alquiler-canchas-container,
#alquiler-horas-container {
    border-radius: 4px;
}

/* Alturas recomendadas (pueden ajustarse según tu layout) */
#alquiler-cancheros-container .card-body,
#alquiler-canchas-container .card-body {
    max-height: 260px;
    overflow-y: auto;
}

#alquiler-horas-container .card-body {
    max-height: 320px;
    overflow-y: auto;
}

/* Scrollbar (moderno y suave) */
#alquiler-cancheros-container .card-body::-webkit-scrollbar,
#alquiler-canchas-container .card-body::-webkit-scrollbar,
#alquiler-horas-container .card-body::-webkit-scrollbar {
    width: 6px;
}

#alquiler-cancheros-container .card-body::-webkit-scrollbar-thumb,
#alquiler-canchas-container .card-body::-webkit-scrollbar-thumb,
#alquiler-horas-container .card-body::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 4px;
}


/* ============================================================
   FORMULARIO
   ============================================================ */

#alquiler-form-container .card {
    border-left: 4px solid #1a73e8;
}

#al-btn-guardar {
    min-width: 120px;
}

/* ============================================================
   TABLA DE REGISTROS DEL DÍA
   ============================================================ */

#alquiler-grilla-container table td,
#alquiler-grilla-container table th {
    font-size: 0.85rem;
    vertical-align: middle;
    font-weight: 500;
}

/* ============================================================
   EFECTOS GLOBALES
   ============================================================ */

.al-fade-in {
    animation: fadeIn 0.18s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   ESTILOS DE SELECCIÓN PARA LISTAS Y GRILLA
   ============================================================ */
.ltc-alq-selected {
    background: var(--ltc-green-soft) !important;
    color: var(--ltc-green-dark) !important;
    padding-left: 12px;
    transition: all 0.15s ease-in-out;
}

.ltc-alq-hover:hover:not(.ltc-alq-selected) {
    background: #f1f8f3 !important;
    padding-left: 14px;
}

.al-item,
.alquiler-row {
    transition: all 0.15s ease-in-out;

}

/* Interactividad y estilo coherente con las listas */
.alquiler-row {
    cursor: pointer;
}


/* Hover igual que listas, pero sin interferir con selección */
.alquiler-row:hover:not(.ltc-alq-selected) {
    background: #f1f8f3;
}

/* ================================
   FORMULARIO COMPACTO ALQUILERES
   ================================ */

.ltc-alquiler-form label {
    font-size: 0.90rem;     /* Labels más chicos */
    margin-bottom: 2px;     /* Menos espacio */
    color: #444;
}

.ltc-alquiler-form .form-control-sm {
    padding: 3px 6px;        /* Inputs más angostos */
    font-size: 0.90rem;      /* Texto más pequeño */
    height: calc(1.5em + .5rem + 2px);
}

.ltc-alquiler-form .form-group {
    margin-bottom: 6px;      /* Reduce altura entre campos */
}

.ltc-alquiler-form textarea.form-control-sm {
    height: 28px !important; /* Notas mini-altura */
    resize: vertical;
}

.ltc-alquiler-form #al-btn-guardar {
    padding: 4px 8px;
    font-size: 0.80rem;
    height: 28px;
}

.ltc-alquiler-form .card-body {
    padding: 10px 12px;      /* Achica padding general del form */
}


/* ======================================
   ALTO FIJO PARA LA GRILLA DE ALQUILERES
   ====================================== */

#alquiler-grilla-container {
    max-height: 290px;       /* Ajustable: 260 / 300 / 350 px */
    overflow-y: auto;
    padding-right: 4px;      /* para evitar solapamiento con scrollbar */
}

/* Scrollbar elegante */
#alquiler-grilla-container::-webkit-scrollbar {
    width: 6px;
}

#alquiler-grilla-container::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 3px;
}

.grilla-row.grilla-row-selected {
    background-color: #d4f8d4 !important;
}

.grilla-row:hover {
    background-color: #f0f0f0;
}

.grilla-row {
    cursor: pointer;
    /* Muestra el dedo índice para indicar que es clickeable */
}

/* Unificar color de checkbox y radio */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #6f42c1; /* violeta AdminLTE */
}



/* ============================================
   Modal LTC Unificado (para todos los modales)
   ============================================ */

/* Contenedor y sombra */
.ltc-modal-content {
    border-radius: 14px;
    border: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    animation: ltcModalFadeIn 0.25s ease-out;
}

/* Header con degradado LTC */
.ltc-modal-header {
    background: linear-gradient(90deg, #3c8dbc 0%, #5fa7d6 40%, var(--ltc-green) 100%);
    color: white;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    border-bottom: 3px solid var(--ltc-green);
    padding: 12px 18px;
}

.ltc-modal-header .modal-title {
    font-weight: 600;
}

/* Botón X */
.ltc-modal-close span {
    color: white;
    font-size: 22px;
    opacity: 1;
}

.ltc-modal-close:hover span {
    opacity: 0.7;
}

/* Cuerpo */
.ltc-modal-body {
    padding: 18px 22px;
    font-size: 1rem;
    color: var(--ltc-text);
}

.ltc-modal-alert {
    border-left: 4px solid var(--ltc-green);
}

/* Footer */
.ltc-modal-footer {
    padding: 12px 18px;
    border-top: 1px solid #eee;
}

/* Input destacado */
.ltc-input-strong {
    font-weight: bold;
    color: var(--ltc-green-dark) !important;
}

/* Animación */
@keyframes ltcModalFadeIn {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* boton extra */
.btn-ltc-soft {
    background-color: #66d66b; /* Verde LTC suavizado */
    border-color: var(--ltc-green);
    color: #0f3f0f;
    font-weight: 600;
    border-radius: 8px;
    padding: 6px 18px;
    transition: all 0.15s ease-in-out;
}

.btn-ltc-soft:hover {
    background-color: var(--ltc-green); /* Se refuerza al pasar el mouse */
    border-color: var(--ltc-green-dark);
    color: #fff;
    box-shadow: 0 2px 6px rgba(4, 177, 3, 0.35);
}