:root {

    /* Brand */

    --tl-primary: #B45309;
    --tl-primary-hover: #92400E;

    --tl-accent: #F59E0B;

    /* Surfaces */

    --tl-bg: #F8FAFC;
    --tl-surface: #FFFFFF;

    /* Borders */

    --tl-border: #E2E8F0;

    /* Text */

    --tl-text: #0F172A;
    --tl-text-muted: #64748B;

    /* Radius */

    --tl-radius-sm: 6px;
    --tl-radius-md: 10px;
    --tl-radius-lg: 16px;

    /* Shadows */

    --tl-shadow-sm:
        0 1px 2px rgba(0,0,0,.05);

    --tl-shadow-md:
        0 4px 12px rgba(0,0,0,.08);

    /* Layout */

    --tl-container: 1200px;

}


/*RESET*/


*,
*::before,
*::after {

    box-sizing: border-box;

}

body {

    margin: 0;
    padding: 0;

}




html {

    font-size: 16px;

}

body {

    min-height: 100vh;

}

/*Typography*/


body {

    font-family:
        Inter,
        system-ui,
        sans-serif;

    background: var(--tl-bg);

    color: var(--tl-text);

    line-height: 1.6;

}

h1,
h2,
h3,
h4 {

    margin-top: 0;

}

/*Layout*/


.tl-container {

    width: 100%;
    max-width: var(--tl-container);

    margin: 0 auto;

    padding: 1rem;

}

/*grid */

.tl-grid {

    display: grid;
    gap: 1rem;



}



/*flex*/


.tl-flex {

    display: flex;

}


/* Componentes*/


.tl-card {

    background: var(--tl-surface);

    border: 1px solid var(--tl-border);

    border-radius: var(--tl-radius-md);

    padding: 1rem;

    box-shadow: var(--tl-shadow-sm);

}


.tl-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: .5rem;

    text-decoration: none;

    font-weight: 600;

    transition: .2s ease;

}


.tl-btn--primary:hover {

    background:
        var(--tl-primary-hover);

}

.tl-btn--primary {

    background:
        var(--tl-primary);

    color: white;

}


.tl-input {

    width: 100%;

    padding: .75rem;

    border: 1px solid
        var(--tl-border);

    border-radius:
        var(--tl-radius-sm);

}


.tl-alert {

    padding: 1rem;

    border-radius:
        var(--tl-radius-sm);

}


.tl-badge {

    display: inline-block;

    padding:
        .25rem .75rem;

    border-radius:
        999px;

    font-size: .85rem;

}

.tl-input:focus {

    outline: none;

    border-color:
        var(--tl-primary);

}

.tl-stack {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}

.tl-form {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}

.tl-page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

}

.tl-auth {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

}

.tl-auth__card {

    width: 100%;
    max-width: 420px;

}


/*Chat Components*/


.tl-chat {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}


.tl-chat__messages {

    display: flex;

    flex-direction: column;

    gap: .75rem;

}


.tl-message {

    background: white;

    border:
        1px solid
        var(--tl-border);

    border-radius:
        var(--tl-radius-md);

    padding: .75rem;

}


.tl-message__content {

    margin-top: .25rem;

}




.tl-message__meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.tl-message__author {

    font-weight: 600;

}


.tl-message__timestamp {

    font-size: .8rem;

    color:
        var(--tl-text-muted);

}


/*Utilities*/


.tl-mb-1 {
    margin-bottom: 1rem;
}

.tl-mb-2 {
    margin-bottom: 2rem;
}

.tl-text-center {
    text-align: center;
}

.tl-w-full {
    width: 100%;
}

.tl-hidden {

    display: none;

}



/* new css */



.tl-navbar {

    background: white;

    border-bottom:
        1px solid
        var(--tl-border);

}

.tl-navbar__inner {

    max-width:
        var(--tl-container);

    margin: 0 auto;

    padding:
        1rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.tl-brand {

    font-size: 1.25rem;

    font-weight: 700;

    text-decoration: none;

    color: var(--tl-text);

}


.tl-nav {

    display: flex;

    gap: 1rem;

    align-items: center;

}


.tl-menu-toggle {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

}


.tl-sidebar {

    position: fixed;

    top: 0;
    right: -260px;

    width: 260px;

    height: 100vh;

    background: white;

    border-left:
        1px solid
        var(--tl-border);

    transition:
        .25s ease;

    padding: 1rem;

}

.tl-sidebar--open {

    right: 0;

}


@media (max-width: 768px) {

    .tl-nav {

        display: none;

    }

    .tl-menu-toggle {

        display: block;

    }

}