/* =====================================
   FLOWDESK - INTERFAZ PROFESIONAL
===================================== */


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Arial, sans-serif;
}


body {

    background:#f5f7fb;

    color:#1f2937;

    height:100vh;

    overflow:hidden;

}



/* =====================================
   BARRA SUPERIOR
===================================== */


.topbar {

    height:65px;

    background:white;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

    border-bottom:1px solid #e5e7eb;

}


.logo {

    font-size:22px;

    font-weight:700;

    color:#2563eb;

}



.usuario {

    display:flex;

    align-items:center;

    gap:20px;

}


.usuario a {

    color:#ef4444;

    text-decoration:none;

    font-weight:600;

}




/* =====================================
   FORMULARIOS
===================================== */


.form-container {


    width:420px;

    max-width:90%;

    margin:70px auto;

    background:white;

    padding:35px;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.form-container h1 {

    margin-bottom:20px;

}



.form-container label {

    display:block;

    margin-top:15px;

    margin-bottom:6px;

    font-weight:600;

}



.form-container input {


    width:100%;

    padding:13px;

    border-radius:10px;

    border:1px solid #d1d5db;

    font-size:15px;

}



button {


    margin-top:20px;

    width:100%;

    padding:13px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

}


button:hover {

    background:#1d4ed8;

}





/* =====================================
   PANEL EMPRESA
===================================== */


.empresa-container {

    height:calc(100vh - 65px);

    padding:35px;

    overflow-y:auto;

}



.panel-grid {


    margin-top:30px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));

    gap:25px;


}



.panel-card {


    background:white;

    padding:25px;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,.06);

}



.panel-card h2 {

    margin-bottom:15px;

}



.panel-card p {

    color:#6b7280;

    line-height:1.5;

}



.codigo {


    margin-top:15px;

    padding:15px;

    background:#eff6ff;

    color:#2563eb;

    text-align:center;

    border-radius:10px;

    font-size:22px;

    font-weight:700;

}





/* =====================================
   CHAT CLIENTE
===================================== */


.chat-container {


    width:900px;

    max-width:95%;


    height:calc(100vh - 100px);


    margin:20px auto;


    background:white;


    border-radius:18px;


    display:flex;

    flex-direction:column;


    overflow:hidden;


    box-shadow:0 10px 30px rgba(0,0,0,.08);


}




.chat-header {


    height:60px;


    background:#2563eb;


    color:white;


    display:flex;


    align-items:center;


    padding:0 20px;


    font-size:19px;


    font-weight:700;


}





#chat-box {


    flex:1;


    overflow-y:auto;


    padding:20px;


    background:#f8fafc;


}





.mensaje {


    max-width:70%;


    padding:12px 15px;


    border-radius:15px;


    margin-bottom:12px;


    line-height:1.5;


}




.mensaje.usuario {


    margin-left:auto;


    background:#2563eb;


    color:white;


}





.mensaje.ia {


    background:white;


    border:1px solid #e5e7eb;


}







.chat-input {


    height:75px;


    display:flex;


    gap:10px;


    padding:12px 20px;


    background:white;


}





.chat-input input {


    flex:1;


    border:1px solid #d1d5db;


    border-radius:10px;


    padding:12px;


    font-size:15px;


}



.chat-input button {


    width:120px;


    margin:0;


}





/* =====================================
   SCROLL
===================================== */


::-webkit-scrollbar {

    width:8px;

}


::-webkit-scrollbar-thumb {

    background:#cbd5e1;

    border-radius:10px;

}




/* =====================================
   MOVIL
===================================== */


@media(max-width:700px){


    body{

        overflow:auto;

    }


    .chat-container{

        height:calc(100vh - 90px);

    }


    .usuario{

        gap:8px;

    }


}
/* =====================================
   NUEVO PANEL SAAS
===================================== */


.app-layout {

    display:flex;

    height:100vh;

}



.sidebar {

    width:250px;

    background:#111827;

    color:white;

    display:flex;

    flex-direction:column;

    padding:25px;

}



.sidebar-logo {

    font-size:24px;

    font-weight:700;

    margin-bottom:40px;

}



.sidebar nav {

    display:flex;

    flex-direction:column;

    gap:8px;

}



.sidebar a {

    color:#cbd5e1;

    text-decoration:none;

    padding:12px;

    border-radius:10px;

    transition:.2s;

}



.sidebar a:hover,

.sidebar a.active {


    background:#2563eb;

    color:white;

}



.sidebar-bottom {

    margin-top:auto;

}





.main-content {

    flex:1;

    padding:35px;

    overflow-y:auto;

}



.page-header h1 {

    font-size:32px;

}



.page-header p {

    color:#6b7280;

    margin-top:8px;

}




.dashboard-grid {


    margin-top:35px;


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));


    gap:25px;


}



.dashboard-card {


    background:white;


    padding:25px;


    border-radius:18px;


    box-shadow:0 8px 25px rgba(0,0,0,.06);


}



.dashboard-card h2 {

    margin-bottom:15px;

}