/* ===========================
   SOADEL - Forest Operations
   =========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#2563EB;
    --primary-hover:#1D4ED8;

    --dark:#111827;
    --dark-2:#1F2937;

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

    --border:#E2E8F0;

    --background:#F4F7FB;

    --white:#FFFFFF;

    --success:#10B981;
    --danger:#EF4444;

}

html,
body{

    height:100%;

    font-family:'Inter',sans-serif;

    background:var(--background);

    color:var(--text);

}

/******************************/
/******** LOGIN ***************/
/******************************/

.login-page{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    background:
    radial-gradient(circle at top,#DDEAFE 0%,#F4F7FB 45%,#F4F7FB 100%);

}

.login-container{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.login-card{

    width:420px;

    background:white;

    border-radius:22px;

    padding:45px;

    box-shadow:
    0 20px 60px rgba(15,23,42,.08);

    border:1px solid rgba(226,232,240,.8);

}

.login-logo{

    margin-bottom:35px;

}

.login-logo h1{

    font-size:34px;

    font-weight:700;

    color:#1E3A8A;

    letter-spacing:1px;

}

.login-logo span{

    color:#64748B;

    font-size:14px;

}

.login-title{

    font-size:28px;

    font-weight:600;

    margin-bottom:8px;

}

.login-text{

    color:#64748B;

    font-size:15px;

    margin-bottom:30px;

    line-height:24px;

}

.input{

    width:100%;

    padding:15px 18px;

    border-radius:12px;

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

    font-size:15px;

    margin-bottom:18px;

    transition:.25s;

}

.input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.10);

}

.btn-login{

    width:100%;

    border:none;

    border-radius:12px;

    padding:16px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    color:white;

    background:var(--primary);

    transition:.25s;

}

.btn-login:hover{

    background:var(--primary-hover);

    transform:translateY(-1px);

}

.login-error{

    margin-top:18px;

    text-align:center;

    color:var(--danger);

    min-height:22px;

}

.login-footer{

    margin-top:35px;

    text-align:center;

    color:#94A3B8;

    font-size:13px;

}

/******************************/
/******** DASHBOARD ***********/
/******************************/

.app{

    display:flex;

    height:100vh;

}

.sidebar{

    width:260px;

    background:var(--dark);

    color:white;

}

.logo{

    padding:28px;

    font-size:28px;

    font-weight:700;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.sidebar ul{

    list-style:none;

    padding:15px 0;

}

.sidebar li{

    margin:4px 12px;

}

.sidebar a{

    display:block;

    padding:14px 18px;

    color:#CBD5E1;

    text-decoration:none;

    border-radius:12px;

    transition:.20s;

}

.sidebar a:hover{

    background:#1E293B;

    color:white;

}

.sidebar a.active{

    background:var(--primary);

    color:white;

}

.content{

    flex:1;

    overflow:auto;

    padding:35px;

}

.card{

    background:white;

    border-radius:18px;

    padding:25px;

    border:1px solid #E2E8F0;

    box-shadow:0 10px 25px rgba(0,0,0,.04);

}

table{

    width:100%;

    border-collapse:collapse;

    background:white;

}

thead{

    background:#0F172A;

    color:white;

}

th{

    padding:14px;

    text-align:left;

}

td{

    padding:14px;

    border-bottom:1px solid #E2E8F0;

}

tr:hover{

    background:#F8FAFC;

}

/* ===========================
   HOME
=========================== */

.page-header{

    margin-bottom:30px;

}

.page-header h1{

    font-size:30px;

    font-weight:700;

    color:#1f2937;

    margin-bottom:6px;

}

.page-header p{

    color:#6b7280;

    font-size:15px;

}

.cards{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:30px;

}

.card{

    background:#ffffff;

    border-radius:16px;

    padding:22px;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

    transition:.25s;

}

.card:hover{

    transform:translateY(-3px);

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

}

.card-title{

    color:#64748b;

    font-size:14px;

    margin-bottom:12px;

}

.card-value{

    font-size:34px;

    font-weight:700;

    color:#111827;

}

.panel{

    background:#ffffff;

    border-radius:16px;

    padding:25px;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

}

/*======================================
TOPBAR
======================================*/

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#ffffff;

    padding:18px 30px;

    border-radius:14px;

    margin-bottom:25px;

    box-shadow:0 4px 15px rgba(0,0,0,.05);

}

.topbar h2{

    margin:0;

    font-size:24px;

}

.topbar small{

    color:#64748b;

}

.user-info{

    font-weight:600;

    color:#111827;

}

/*=============================
OPERACIONES
=============================*/

.toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.search-box{

    width:380px;

    padding:12px 16px;

    border:1px solid #dbe3ee;

    border-radius:10px;

    font-size:15px;

}

.btn-refresh{

    background:#2563eb;

    color:white;

    border:none;

    padding:12px 20px;

    border-radius:10px;

    cursor:pointer;

}

.table-card{

    background:white;

    border-radius:14px;

    overflow:hidden;

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

}

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    background:#111827;

    color:white;

    padding:15px;

}

.table td{

    padding:15px;

    border-bottom:1px solid #edf2f7;

}

.table tbody tr:hover{

    background:#f8fafc;

}

.pagination{

    display:flex;

    justify-content:flex-end;

    gap:15px;

    padding:18px;

}

.pagination button{

    width:36px;

    height:36px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:#2563eb;

    color:white;

}

.pagination button:disabled{

    background:#cbd5e1;

    cursor:not-allowed;

}

.pagination span{

    align-self:center;

    color:#64748b;

    font-size:14px;

}