/* tklk_style.css */
/* Hoja de Estilos Personalizada para la Aplicación de Control de Vencimientos TKLK */

/* ---------------- Variables de Color TKLK ---------------- */
:root {
    --tklk-purple: #7049FF;
    --tklk-pink: #FF008B;
    --tklk-orange: #F76002;
    --tklk-green: #66C901;
    --tklk-navbar-dark-bg: #212529; /* Un gris oscuro, similar a bg-dark de Bootstrap */
    /* --tklk-navbar-dark-bg: #000000; */ /* Alternativa: Negro puro si se prefiere */
    --tklk-text-on-dark: #f8f9fa;   /* Texto claro para fondos oscuros */
    --tklk-text-on-light: #212529; /* Texto oscuro para fondos claros */
    --tklk-body-bg: #f4f6f9; /* Un gris muy claro para el fondo del cuerpo de páginas internas */
    --tklk-light-gray-bg: #f8f9fa; /* Gris claro para encabezados de tarjeta auth */
    --tklk-border-color: #dee2e6; /* Color de borde estándar */
}

/* ---------------- Tipografía y Estilos Base ---------------- */
body { 
    font-family: 'Prompt', sans-serif; 
    font-weight: 200; /* Peso para el cuerpo del texto */
    background-color: var(--tklk-body-bg); 
    color: var(--tklk-text-on-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Estilo para las páginas de autenticación con fondo degradado */
body.auth-page-background {
    background: linear-gradient(120deg, var(--tklk-purple) 0%, var(--tklk-pink) 30%, var(--tklk-orange) 60%, var(--tklk-green) 100%);
    background-size: 300% 300%; /* Aumentar tamaño para animación más suave */
    animation: tklkGradientAnimation 25s ease infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem; /* Espacio por si la tarjeta es muy grande en pantallas pequeñas */
}

@keyframes tklkGradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand-text, 
.form-section-title, 
.accordion-button.custom-accordion-btn,
.card-title {
    font-weight: 700; 
    font-family: 'Prompt', sans-serif;
    color: var(--tklk-text-on-light); 
}
.fw-900 { font-weight: 900 !important; } 

a { 
    color: var(--tklk-pink); 
    text-decoration: none;
}
a:hover { 
    color: var(--tklk-orange); 
    text-decoration: underline;
}

/* ---------------- Barra de Navegación TKLK Oscura ---------------- */
.navbar-tklk-dark {
    background-color: var(--tklk-navbar-dark-bg) !important;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.navbar-tklk-dark .navbar-brand img {
    height: 35px; 
    margin-right: 10px;
    vertical-align: middle;
}
.navbar-tklk-dark .navbar-brand-text {
    color: var(--tklk-text-on-dark);
    font-size: 1.25rem;
    vertical-align: middle;
}
.navbar-tklk-dark .navbar-nav .nav-link,
.navbar-tklk-dark .navbar-text {
    color: rgba(255, 255, 255, 0.75); 
}
.navbar-tklk-dark .navbar-nav .nav-link:hover,
.navbar-tklk-dark .navbar-nav .nav-link:focus {
    color: var(--tklk-text-on-dark);
}
.navbar-tklk-dark .btn-outline-light-tklk { 
    color: rgba(255,255,255,0.75);
    border-color: rgba(255,255,255,0.5);
}
.navbar-tklk-dark .btn-outline-light-tklk:hover {
    color: var(--tklk-text-on-dark);
    background-color: var(--tklk-pink);
    border-color: var(--tklk-pink);
}

/* ---------------- Encabezados de Tarjeta TKLK (para index.php, edit_client.php) ---------------- */
.card-header-tklk { 
    background-color: var(--tklk-purple) !important; 
    color: var(--tklk-text-on-dark) !important;
    border-bottom: none; 
}
.card-header-tklk .h4, .card-header-tklk h1, .card-header-tklk h2, .card-header-tklk h3, .card-header-tklk h5, .card-header-tklk h6 {
    color: var(--tklk-text-on-dark) !important; 
}
.card-header-edit-tklk { /* Encabezado para página de edición */
    background-color: var(--tklk-orange) !important; 
    color: var(--tklk-text-on-dark) !important;
    border-bottom: none;
}
.card-header-edit-tklk .h4 {
    color: var(--tklk-text-on-dark) !important;
}


/* ---------------- Tarjetas de Autenticación (login, forgot, reset) ---------------- */
.auth-card {
    max-width: 450px; 
    width: 100%; 
    background-color: #fff; 
    border: none;
    border-radius: 0.75rem; 
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15) !important; /* Sombra más pronunciada */
}
.auth-card .card-header {
    background-color: var(--tklk-light-gray-bg); 
    color: var(--tklk-text-on-light) !important; 
    border-bottom: 1px solid var(--tklk-border-color);
    border-top-left-radius: 0.75rem; /* Coincidir con el radio de la tarjeta */
    border-top-right-radius: 0.75rem;
}
.auth-card .card-header h3, .auth-card .card-header .h4 {
    color: var(--tklk-text-on-light) !important; 
    font-weight: 700;
}
.auth-card .login-logo { 
    max-width: 180px; 
    margin-bottom: 1rem;
}
.auth-card .btn-tklk-pink { 
    background-color: var(--tklk-pink) !important;
    border-color: var(--tklk-pink) !important;
    color: var(--tklk-text-on-dark) !important;
}
.auth-card .btn-tklk-pink:hover {
    background-color: color-mix(in srgb, var(--tklk-pink) 85%, black) !important;
    border-color: color-mix(in srgb, var(--tklk-pink) 80%, black) !important;
}
.auth-card .text-body { 
    color: var(--tklk-text-on-light) !important;
}


/* ---------------- Botones TKLK Personalizados ---------------- */
.btn-tklk {
    font-weight: 400; 
    border-radius: 50rem; 
    padding: 0.375rem 0.85rem; 
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.btn-tklk-primary { 
    background-color: var(--tklk-purple); color: var(--tklk-text-on-dark); border-color: var(--tklk-purple); 
}
.btn-tklk-primary:hover { 
    background-color: color-mix(in srgb, var(--tklk-purple) 85%, black); border-color: color-mix(in srgb, var(--tklk-purple) 80%, black); 
    color: var(--tklk-text-on-dark);
}
.btn-tklk-orange { 
    background-color: var(--tklk-orange); color: var(--tklk-text-on-dark); border-color: var(--tklk-orange); 
}
.btn-tklk-orange:hover { 
    background-color: color-mix(in srgb, var(--tklk-orange) 85%, black); border-color: color-mix(in srgb, var(--tklk-orange) 80%, black); 
    color: var(--tklk-text-on-dark);
}
.btn-tklk-success { 
    background-color: var(--tklk-green); color: var(--tklk-text-on-dark); border-color: var(--tklk-green); 
}
.btn-tklk-success:hover { 
    background-color: color-mix(in srgb, var(--tklk-green) 85%, black); border-color: color-mix(in srgb, var(--tklk-green) 80%, black); 
    color: var(--tklk-text-on-dark);
}
.btn-sm.btn-tklk { 
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
}


/* ---------------- Estilos de Tabla ---------------- */
.table th { 
    background-color: #e9ecef; 
    color: var(--tklk-text-on-light);
    font-weight: 700;
}
.table td, .table th {
    font-size: 0.875rem; 
    vertical-align: middle;
}
.table .badge { 
    font-size: 0.75rem;
    padding: 0.3em 0.5em;
    font-weight: 400; 
}
.badge.bg-tklk-orange { background-color: var(--tklk-orange) !important; color: var(--tklk-text-on-dark); }


/* ---------------- Botones de Acción en Tabla ---------------- */
.action-buttons .btn, 
.action-buttons .input-group {
    margin-right: 4px; 
    margin-bottom: 4px; 
}
.action-buttons {
    display: flex;
    flex-wrap: wrap; 
    align-items: center; 
}
.action-buttons .input-group {
    width: auto !important; 
}
.action-buttons .input-group input.form-control-sm[type="number"] {
    width: 55px !important; 
    text-align: center;
    flex-grow: 0 !important; 
}
.action-buttons .input-group .btn {
     flex-shrink: 0; 
}

/* ---------------- Acordeón ---------------- */
.accordion-button.custom-accordion-btn {
    font-weight: 700;
    border-bottom: 1px solid var(--tklk-border-color); 
}
.accordion-button.custom-accordion-btn:not(.collapsed) {
    color: var(--tklk-text-on-dark);
    background-color: var(--tklk-purple);
    border-bottom: none;
}
.accordion-button.custom-accordion-btn:not(.collapsed)::after { 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button.custom-accordion-btn:focus {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--tklk-purple) 40%, transparent);
    border-color: var(--tklk-purple);
}
.accordion-item {
    border: 1px solid var(--tklk-border-color); 
}


/* ---------------- Formularios ---------------- */
.form-section-title { 
    color: var(--tklk-purple); 
    font-size: 1rem; 
}
.form-label .text-danger {
    font-weight: bold;
}
.form-control-sm { 
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.input-group-text.password-icon { 
    cursor: pointer;
    background-color: #fff;
}

/* ---------------- Footer ---------------- */
footer.text-muted {
    font-size: 0.85rem;
    color: #6c757d !important; 
}
footer .bi-heart-fill {
    color: var(--tklk-pink);
}