*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI;
}

body{
background:#f4f6f9;
}

/* LOGIN */

.login-container{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#1e3c72,#2a5298);
}

.login-box{
background:white;
padding:40px;
border-radius:10px;
width:350px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.login-box h2{
text-align:center;
margin-bottom:20px;
}

.login-box input{
width:100%;
padding:12px;
margin:10px 0;
border:1px solid #ccc;
border-radius:5px;
}

.login-box button{
width:100%;
padding:12px;
background:#2a5298;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
}

/* SIDEBAR */

.sidebar{
width:240px;
height:100vh;
background:#111827;
position:fixed;
color:white;
}

.sidebar h2{
text-align:center;
padding:20px;
border-bottom:1px solid #333;
}

.sidebar ul{
list-style:none;
}

.sidebar ul li{
padding:15px;
border-bottom:1px solid #222;
}

.sidebar ul li:hover{
background:#1f2937;
}

.sidebar a{
color:white;
text-decoration:none;
}

/* CONTENIDO */

.content{
margin-left:240px;
padding:30px;
}

.topbar{
background:white;
padding:15px;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
margin-left:240px;
}

/* CARDS */

.cards{
display:flex;
gap:20px;
flex-wrap:wrap;
margin-top:20px;
}

.card{
background:white;
padding:20px;
width:220px;
border-radius:10px;
box-shadow:0 5px 10px rgba(0,0,0,0.1);
}

.card h3{
margin-bottom:10px;
}

/* TABLAS */

table{
width:100%;
border-collapse:collapse;
margin-top:20px;
background:white;
}

table th,table td{
padding:12px;
border-bottom:1px solid #ddd;
text-align:left;
}

button{
padding:10px 15px;
background:#2563eb;
border:none;
color:white;
border-radius:5px;
cursor:pointer;
}

.btn{
padding:10px 15px;
border:none;
border-radius:6px;
color:white;
cursor:pointer;
}

.btn-verde{
background:#16a34a;
}

.btn-azul{
background:#2563eb;
}

.btn-rojo{
background:#dc2626;
}

.btn-naranja{
background:#ea580c;
}

.form-container{
max-width:600px;
margin:40px auto;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

.form-container h2{
text-align:center;
margin-bottom:25px;
color:#1f2937;
}

.form-group{
margin-bottom:15px;
}

.form-group label{
font-weight:bold;
display:block;
margin-bottom:5px;
}

.form-group input,
.form-group select{
width:100%;
padding:12px;
border:1px solid #ccc;
border-radius:6px;
font-size:14px;
}

.form-group input:focus{
border-color:#2563eb;
outline:none;
}

.btn{
padding:10px 18px;
border:none;
border-radius:6px;
color:white;
cursor:pointer;
font-size:14px;
}

.btn-verde{
background:#16a34a;
}

.btn-azul{
background:#2563eb;
}

.btn-naranja{
background:#ea580c;
}

.btn-rojo{
background:#dc2626;
}

.botones{
display:flex;
gap:10px;
margin-top:20px;
justify-content:center;
}

.contenedor{
width:90%;
margin:auto;
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.tabla{
width:100%;
border-collapse:collapse;
}

.tabla th{
background:#1f2937;
color:white;
padding:12px;
text-align:left;
}

.tabla td{
padding:10px;
border-bottom:1px solid #ddd;
}

.tabla tr:hover{
background:#f4f6f9;
}

/* BOTONES */

.btn{
padding:8px 14px;
border:none;
border-radius:6px;
color:white;
cursor:pointer;
}

.btn-verde{
background:#16a34a;
}

.btn-azul{
background:#2563eb;
}

.btn-naranja{
background:#ea580c;
}

.btn-rojo{
background:#dc2626;
}

/* NIVELES */

.nivel{
padding:5px 10px;
border-radius:5px;
color:white;
font-size:12px;
}

.super{
background:#7c3aed;
}

.admin{
background:#2563eb;
}

.contador{
background:#16a34a;
}

.facturacion{
background:#ea580c;
}

.modal{

display:none;
position:fixed;
z-index:1;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.6);

}

.modal-contenido{

background:white;
margin:5% auto;
padding:20px;
width:60%;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.3);

}

.cerrar{

float:right;
font-size:28px;
cursor:pointer;

}

.modal{

display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
z-index:1000;

}

.modal-box{

background:white;
width:750px;
margin:5% auto;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.3);

}

.modal-header{

padding:15px;
background:#1f2937;
color:white;
display:flex;
justify-content:space-between;
align-items:center;
border-radius:10px 10px 0 0;

}

.cerrar{

font-size:28px;
cursor:pointer;

}

.modal-body{

display:flex;
padding:20px;
gap:20px;

}

.foto-usuario{

text-align:center;

}

.foto-usuario img{

width:120px;
height:120px;
border-radius:50%;
border:2px solid #ddd;

}

.form-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
width:100%;

}

.form-grid input,
.form-grid select{

padding:8px;
border:1px solid #ccc;
border-radius:5px;

}

.modal-footer{

padding:15px;
text-align:center;

}

.btn{

padding:10px 18px;
border:none;
border-radius:6px;
color:white;
cursor:pointer;

}

.btn-verde{

background:#16a34a;

}

.btn-naranja{

background:#f97316;

}

.btn-rojo{

background:#dc2626;

}

.botones{

margin-top:20px;
display:flex;
justify-content:center;
gap:10px;

}

.contenedor{
width:95%;
margin:auto;
padding-bottom:60px;
}

.botones{
  margin-top:10px;           /* espacio arriba */
  display:flex;              /* alineación horizontal */
  justify-content:center;    /* centrados */
  gap:10px;                  /* separación entre botones */
}

.btn{
  padding:10px 18px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-weight:bold;
  color:white;
}

.btn-guardar{
  background:#2e8b57;       /* color verde */
}

.btn-cancelar{
  background:#6c757d;       /* color gris */
}

.btn:hover{
  opacity:0.9;
}

.modal{

display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
justify-content:center;
align-items:center;
z-index:999;

}

.modal-content{

background:white;
padding:20px;
width:700px;
border-radius:8px;
max-height:80vh;
overflow:auto;

}

#tabla_proveedores{

width:100%;
border-collapse:collapse;

}

#tabla_proveedores th{

background:#2563eb;
color:white;
padding:8px;

}

#tabla_proveedores td{

padding:8px;
border-bottom:1px solid #ddd;

}

#tabla_proveedores tr:hover{

background:#f1f5f9;

}

.modal{

display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
justify-content:center;
align-items:center;

}

.modal-box{

background:white;
padding:20px;
width:650px;
border-radius:6px;
max-height:500px;
overflow:auto;

}

.tabla_busqueda{

width:100%;
border-collapse:collapse;

}

.tabla_busqueda th{

background:#1e40af;
color:white;
padding:8px;

}

.tabla_busqueda td{

padding:6px;
border-bottom:1px solid #ddd;

}

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

body{
    font-family:Arial, sans-serif;
    background:linear-gradient(135deg, #0f172a, #1e3a8a);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

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

.login-box{
    width:100%;
    max-width:400px;
    background:#ffffff;
    padding:35px 30px;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

.login-box h2{
    text-align:center;
    color:#1e3a8a;
    margin-bottom:25px;
    font-size:28px;
    font-weight:bold;
}

.login-box form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.login-box input{
    width:100%;
    padding:14px;
    border:1px solid #d1d5db;
    border-radius:8px;
    font-size:15px;
    transition:0.3s;
    background:#f9fafb;
}

.login-box input:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,0.15);
    background:#fff;
}

.login-box button{
    padding:14px;
    border:none;
    border-radius:8px;
    background:#2563eb;
    color:white;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

.login-box button:hover{
    background:#1d4ed8;
}

.login-box .mensaje-error{
    background:#fee2e2;
    color:#991b1b;
    padding:10px;
    border-radius:8px;
    margin-bottom:15px;
    font-size:14px;
    text-align:center;
}

.login-box .mensaje-info{
    background:#dbeafe;
    color:#1e40af;
    padding:10px;
    border-radius:8px;
    margin-bottom:15px;
    font-size:14px;
    text-align:center;
}

.login-footer{
    text-align:center;
    margin-top:18px;
    color:#6b7280;
    font-size:13px;
}

body{
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #222;
    margin: 0;
    padding: 20px;
}

.factura-box{
    width: 900px;
    margin: auto;
    background: #fff;
}

.encabezado{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 1px solid #d1d5db;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.logo{
    width: 120px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img{
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
}

.empresa{
    flex: 1;
    text-align: center;
}

.empresa h1{
    margin: 0;
    color: #1d4ed8;
    font-size: 34px;
    font-weight: bold;
}

.empresa .subtitulo{
    margin-top: 4px;
    font-size: 12px;
    color: #444;
    line-height: 1.5;
}

.titulo-factura{
    font-size: 52px;
    font-weight: bold;
    color: #1e3a8a;
    margin: 10px 0 5px 0;
    letter-spacing: 1px;
}

.codigo-factura{
    font-size: 12px;
    margin-bottom: 15px;
}

.info-top{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 20px;
}

.info-box{
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 14px 16px;
    min-height: 120px;
    box-sizing: border-box;
}

.info-box h3{
    margin: 0 0 10px 0;
    color: #1e3a8a;
    font-size: 14px;
}

.info-grid{
    display: grid;
    grid-template-columns: 110px 1fr 90px 1fr;
    gap: 8px 10px;
    align-items: start;
}

.info-grid div{
    font-size: 12px;
}

.label{
    font-weight: bold;
    color: #111827;
}

table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

table th{
    text-align: left;
    background: #f3f4f6;
    color: #374151;
    padding: 10px;
    border-bottom: 1px solid #d1d5db;
    font-size: 12px;
}

table td{
    padding: 10px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
}

.numero{
    text-align: right;
}

.resumen{
    width: 320px;
    margin-left: auto;
    margin-top: 20px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 12px 16px;
}

.resumen-row{
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
}

.resumen-total{
    border-top: 2px solid #cbd5e1;
    padding-top: 10px;
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #1e3a8a;
}

.pie{
    text-align: center;
    margin-top: 40px;
    font-size: 11px;
    color: #555;
}

.firmas{
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 70px;
}

.firma-box{
    width: 40%;
    text-align: center;
}

.firma-linea{
    border-top: 1px solid #111;
    margin-bottom: 8px;
    height: 1px;
}

.firma-texto{
    font-size: 12px;
    font-weight: bold;
}

@media print {
    img {
        display:block !important;
        visibility:visible !important;
    }
}