/* =========================
      GENERAL
   ========================= */

   body{
   margin:0;
   font-family:Arial, Helvetica, sans-serif;
   background:#f4f6f9;
   }

   input, select, button{
   font-size:16px; /* evita zoom en mobile */
   }

   /* =========================
      SIDEBAR
   ========================= */

   .sidebar{
   position:fixed;
   left:0;
   top:0;
   width:240px;
   height:100vh;
   background:#111;
   color:white;
   display:flex;
   flex-direction:column;
   transition:0.3s;
   z-index:1000;
   }

   .sidebar a{
   display:block;
   color:white;
   text-decoration:none;
   margin:12px 0;
   padding:10px;
   border-radius:6px;
   transition:0.2s;
   }

   .sidebar a i{
   margin-right:10px;
   }

   .sidebar a:hover{
   background:#333;
   }

   /* =========================
      MAIN
   ========================= */

   .main{
   margin-left:240px;
   padding:40px;
   max-width:1600px;
   }

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

   .topbar{
   display:flex;
   justify-content:space-between;
   align-items:center;
   margin-bottom:30px;
   }

   .user{
   background:white;
   padding:8px 15px;
   border-radius:20px;
   box-shadow:0 2px 6px rgba(0,0,0,0.1);
   }

   /* =========================
      MENU MOBILE
   ========================= */

   .menu-toggle{
   display:none;
   background:none;
   border:none;
   font-size:20px;
   cursor:pointer;
   }

   /* =========================
      CARDS
   ========================= */

   .card{
   background:white;
   padding:25px;
   border-radius:12px;
   box-shadow:0 4px 10px rgba(0,0,0,0.1);
   text-decoration:none;
   color:black;
   transition:0.25s;
   }

   .card:hover{
   transform:translateY(-6px);
   box-shadow:0 12px 25px rgba(0,0,0,0.15);
   }

   /* =========================
      TABLES
   ========================= */

   .table-box{
   background:white;
   padding:20px;
   border-radius:10px;
   overflow-x:auto;
   }

   /* =========================
      LOGIN PAGE
   ========================= */

   .login-page{
   min-height:100vh;
   display:flex;
   justify-content:center;
   align-items:center;
   padding:20px;
   background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
   }

   .login-container{
   width:100%;
   display:flex;
   justify-content:center;
   align-items:center;
   }

   .login-card{
   background:white;
   padding:45px;
   width:100%;
   max-width:420px;
   border-radius:12px;
   box-shadow:0 15px 40px rgba(0,0,0,0.3);
   text-align:center;
   }

   .login-card h2{
   margin-bottom:5px;
   font-size:24px;
   }

   .subtitle{
   color:#777;
   margin-bottom:25px;
   font-size:14px;
   }

   /* INPUTS */

   .login-card input{
   width:100%;
   padding:12px;
   border-radius:6px;
   border:1px solid #ccc;
   font-size:14px;
   outline:none;
   transition:0.2s;
   margin-bottom:10px;
   box-sizing:border-box;
   }

   .login-card input:focus{
   border-color:#000;
   box-shadow:0 0 0 2px rgba(0,0,0,0.1);
   }

   /* PASSWORD */

   .password-wrapper{
   position:relative;
   width:100%;
   }

   .password-wrapper input{
   padding-right:45px;
   }

   .password-wrapper span{
   position:absolute;
   right:12px;
   top:50%;
   transform:translateY(-50%);
   cursor:pointer;
   font-size:16px;
   color:#555;
   }

   .password-wrapper span:hover{
   color:#000;
   }

   /* BUTTON */

   .login-card button{
   width:100%;
   padding:12px;
   margin-top:10px;
   border:none;
   border-radius:6px;
   background:#111;
   color:white;
   font-size:15px;
   cursor:pointer;
   transition:0.2s;
   }

   .login-card button:hover{
   background:#333;
   transform:translateY(-1px);
   }

   /* LOGO */

   .logo-login{
   margin-bottom:20px;
   }

   .logo-login img{
   width:200px;
   }

   /* ERROR */

   .error-msg{
   background:#ffe5e5;
   color:#c42b2b;
   padding:10px;
   border-radius:6px;
   margin-bottom:15px;
   font-size:13px;
   display:flex;
   align-items:center;
   gap:8px;
   }

   /* =========================
      MODAL
   ========================= */

   .modal{
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background:rgba(0,0,0,0.6);
   display:flex;
   justify-content:center;
   align-items:center;
   z-index:2000;
   }

   .modal-content{
   background:white;
   padding:30px;
   border-radius:10px;
   width:90%;
   max-width:320px;
   text-align:center;
   }

   .modal-content input{
   width:100%;
   padding:10px;
   margin:10px 0;
   border-radius:6px;
   border:1px solid #ccc;
   box-sizing:border-box;
   }

   .modal-content button{
   width:100%;
   padding:10px;
   background:black;
   color:white;
   border:none;
   border-radius:6px;
   cursor:pointer;
   }

   .modal-content button:hover{
   background:#333;
   }

   /* =========================
      GRID
   ========================= */

   .card-grid{
   display:grid;
   grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
   gap:20px;
   }

   /* =========================
      RESPONSIVE
   ========================= */

   @media(max-width:900px){

   .sidebar{
   width:70px;
   }

   .sidebar a span{
   display:none;
   }

   .main{
   margin-left:70px;
   padding:20px;
   }

   }

   @media(max-width:600px){

   .menu-toggle{
   display:block;
   }

   .sidebar{
   left:-240px;
   }

   .sidebar.active{
   left:0;
   }

   .main{
   margin-left:0;
   padding:15px;
   }

   .login-card{
   max-width:90%;
   padding:25px;
   }

   }

/* =========================
   SUME
========================= */

.badge-login{
background:#dcfce7;
color:#166534;
padding:4px 10px;
border-radius:6px;
}

.badge-logout{
background:#f3f4f6;
color:#374151;
padding:4px 10px;
border-radius:6px;
}

.badge-delete{
background:#fee2e2;
color:#991b1b;
padding:4px 10px;
border-radius:6px;
}

.badge-edit{
background:#dbeafe;
color:#1e40af;
padding:4px 10px;
border-radius:6px;
}

.badge-default{
background:#f1f5f9;
color:#334155;
padding:4px 10px;
border-radius:6px;
}

.btn-clear{
background:#f8fafc;
border:1px solid #e2e8f0;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
font-size:13px;
transition:.2s;
}

.btn-clear:hover{
background:#eef2f7;
}

.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
margin-top:20px;
}

.page-btn{
background:#f8fafc;
border:1px solid #e2e8f0;
padding:6px 12px;
border-radius:6px;
text-decoration:none;
color:#111;
font-size:13px;
transition:.2s;
}

.page-btn:hover{
background:#eef2f7;
}

.page-info{
font-size:13px;
color:#555;
}

/* =========================
   AZURE LOGIN
========================= */

.badge-login{
background:#dcfce7;
color:#166534;
padding:4px 10px;
border-radius:6px;
}

.badge-logout{
background:#f3f4f6;
color:#374151;
padding:4px 10px;
border-radius:6px;
}

.badge-delete{
background:#fee2e2;
color:#991b1b;
padding:4px 10px;
border-radius:6px;
}

.badge-edit{
background:#dbeafe;
color:#1e40af;
padding:4px 10px;
border-radius:6px;
}

.badge-default{
background:#f1f5f9;
color:#334155;
padding:4px 10px;
border-radius:6px;
}

.btn-clear{
background:#f8fafc;
border:1px solid #e2e8f0;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
font-size:13px;
transition:.2s;
}

.btn-clear:hover{
background:#eef2f7;
}

.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
margin-top:20px;
}

.page-btn{
background:#f8fafc;
border:1px solid #e2e8f0;
padding:6px 12px;
border-radius:6px;
text-decoration:none;
color:#111;
font-size:13px;
transition:.2s;
}

.page-btn:hover{
background:#eef2f7;
}

.page-info{
font-size:13px;
color:#555;
}


.separator{
    margin:20px 0;
    text-align:center;
    color:#999;
    font-size:14px;
}

.microsoft-btn{
    display:block;
    width:100%;
    padding:14px;
    box-sizing:border-box;
    text-align:center;
    text-decoration:none;
    background:#0078D4;
    color:white;
    border-radius:8px;
    font-weight:600;
    transition:0.2s;
}

.microsoft-btn:hover{
    background:#106EBE;
}

.microsoft-btn i{
    margin-right:8px;
}