/******************************************* PROVEEDORES ********************************/

<style>
/* Menú superior */
.top-menu {
    min-height: 38px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: rgba(0, 0, 0, 0.75);
    border-bottom: 1px solid rgba(254, 249, 194, 0.4);
}

.top-menu .navbar-brand,
.top-menu .nav-link {
    font-size: 0.8rem;
    color: #FEF9C2;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.1;
}

.top-menu .dropdown-menu {
    font-size: 0.8rem;
    padding: 4px 0;
}

.top-menu .dropdown-item {
    font-size: 0.78rem;
    padding: 4px 12px;
}

.hidden { display: none !important; }

/* Cabecera estilo index_gastos.php */
.card-dark{
    background: rgba(52,52,56,0.92);
    border: 1px solid #FEF9C2;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.35);
    color:#FEF9C2;
}
#btnVerProveedores{
    padding:6px 10px;
    font-size:0.85rem;
    line-height:1.1;
    white-space:nowrap;
}


.btn-nuevo {
    background-color: #A5D6A7; /* verde claro elegante */
    border: 1px solid #81C784;
    color: #1B5E20; /* texto verde oscuro para contraste */
}

.btn-nuevo:hover {
    background-color: #81C784;
    border-color: #66BB6A;
    color: #ffffff;
}





#btnVerArticulosGastos{
    padding:6px 10px;
    font-size:0.85rem;
    line-height:1.1;
    white-space:nowrap;
}

/* Botonera superior compacta (Ver proveedores / Ver artículos-gastos) */
.top-actions{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
}
.btn-top-compact{
    padding:6px 10px;
    font-size:0.85rem;
    line-height:1.1;
    white-space:nowrap;
    width:180px;
    max-width:48%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* Filtros de fechas compactos (artículos / gastos) */
.filter-bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin: 8px 0 14px 0;
}
.filter-bar label{
    color:#FEF9C2;
    margin:0;
    font-size:0.80rem;
}
.filter-bar input[type="date"]{
    max-width:170px;
    padding:6px 8px;
    font-size:0.85rem;
    line-height:1.1;
    height:32px;
}
.btn-inline-small{
    padding:6px 10px;
    font-size:0.82rem;
    line-height:1.1;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
}

/* Listado de proveedores: filas más compactas + acciones en una sola línea */
#listado-proveedores table{
    width:100%;
    border-collapse:collapse;
}
#listado-proveedores table th,
#listado-proveedores table td{
    padding:6px 8px;
    vertical-align:middle;
}
#listado-proveedores table td.actions{
    white-space:nowrap;
    width:120px;
    text-align:center;
}
#listado-proveedores table td.actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:3px 6px;
    line-height:1;
    text-decoration:none;
}
#listado-proveedores table td.actions i{
    font-size:1rem;
}

@media (max-width: 520px){
    .btn-top-compact{ width:100%; max-width:100%; }
    .filter-bar input[type="date"]{ max-width:100%; flex: 1 1 180px; }
}

/* Barra de búsqueda + botones en una sola fila (igual criterio que index_gastos.php) */
.search-form{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin-bottom: 10px;
    max-width:100%;
    box-sizing:border-box;
}
.search-form label{
    white-space:nowrap;
}
.search-form input[type="date"]{
    width:170px;
    max-width:170px;
    box-sizing:border-box;
}
.search-form .btn,
.search-form .btn-compact{
    flex:0 0 auto;
    white-space:nowrap;
}

.search-form input[type="text"]{
    flex: 0 1 260px;
    min-width: 180px;
}
.search-form .btn.btn-compact{
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 0.82rem;
    line-height: 1.1;
    white-space: nowrap;
}

/* Contenedores responsive para listados (evita que las tablas se salgan de la caja) */
.table-responsive-dark{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(254, 249, 194, 0.35);
    border-radius: 14px;
    background: rgba(0,0,0,0.25);
    padding: 8px;
}
.table-responsive-dark table{
    width:100%;
    min-width: 1100px; /* fuerza scroll horizontal dentro del contenedor si no cabe */
}

</style>


<style>
/* Ajuste tipográfico para igualar main.html */
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
}

/* Tablas y formularios más compactos */
table, th, td, label, input, select, textarea, button {
    font-size: 0.82rem;
}

/* Encabezados */
h1 { font-size: 1.2rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }
</style>


















/******************************************* CLIENTES ********************************/


<style>
/* Ajuste tipográfico para igualar main.html */
body {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
}

/* Tablas y formularios más compactos */
table, th, td, label, input, select, textarea, button {
    font-size: 0.82rem;
}

/* Encabezados */
h1 { font-size: 1.2rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }

/* === Ajustes tabla clientes (ID mínimo + Apellidos amplio) === */
.table-clientes{
    table-layout: fixed;
    width: 100%;
}
.table-clientes .col-id{
    width: 50px;
    text-align: center;
    white-space: nowrap;
    padding: 2px 6px;
}
.table-clientes .col-apellidos{
    width: 25%;
    white-space: normal;
}

</style>


<style>
/* Menú superior */
.top-menu {
    min-height: 38px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: rgba(0, 0, 0, 0.75);
    border-bottom: 1px solid rgba(254, 249, 194, 0.4);
}

.top-menu .navbar-brand,
.top-menu .nav-link {
    font-size: 0.8rem;
    color: #FEF9C2;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.1;
}

.top-menu .dropdown-menu {
    font-size: 0.8rem;
    padding: 4px 0;
}

.top-menu .dropdown-item {
    font-size: 0.78rem;
    padding: 4px 12px;
}

.hidden { display: none !important; }
</style>


<style>
/* Ajuste tipográfico para igualar main.html */
body {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
}

/* Tablas y formularios más compactos */
table, th, td, label, input, select, textarea, button {
    font-size: 0.82rem;
}

/* Encabezados */
h1 { font-size: 1.2rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }
</style>


<style>
/* Cabecera con botón "Ver clientes" (igual que gastos/proveedores) */
.page-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
#btnVerClientes{
    padding:6px 10px;
    font-size:0.85rem;
    line-height:1.1;
    white-space:nowrap;
}

/* Barra de búsqueda en una línea + botones compactos */
.search-form{
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-end;
    gap:8px 10px;
    margin:8px 0 14px 0;
}
.search-form input[type="text"]{
    min-width: 180px;
    flex: 1 1 220px;
}
.search-form .btn.btn-inline{
    width:auto !important;
    min-width: 110px;
    padding:6px 12px;
    font-size:0.85rem;
    line-height:1.1;
    white-space:nowrap;
}
</style>
























/******************************************* RESTO ********************************/




body {
        background-image: url('images/fondo.jpg');
        background-size: cover;          /* Ajusta la imagen a la pantalla */
        background-repeat: no-repeat;    /* No repetir */
        background-position: center;     /* Centrada */
        background-attachment: fixed;    /* Efecto fijo al hacer scroll */
}



.container {
    max-width: 1100px;
    margin: 30px auto;
    padding: 25px;
    background: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 0 20px #000;
}

h1, h2 {
    text-align: center;
    color: #fff;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

input {
    padding: 10px;
    border: 1px solid #444;
    border-radius: 6px;
    background: #222;
    color: #eee;
}

input:focus {
    outline: none;
    border-color: #777;
}

.btn {
    margin-top: 20px;
    width: 100%;
    padding: 12px;
    background: #444;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.btn:hover {
    background: #666;
}

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

th, td {
    padding: 10px;
    border-bottom: 1px solid #333;
    text-align: left;
}

th {
    background: #222;
}

.actions i {
    cursor: pointer;
    margin-right: 10px;
    color: #bbb;
}

.actions i:hover {
    color: #fff;
}


.acciones-articulos {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;       /* evita solapes en pantallas pequeñas */
    margin-bottom: 10px;
}

.acciones-articulos .solo-stock {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
}

.acciones-articulos .btn {
    white-space: nowrap;
}




<style>
/* Ajuste tipográfico para igualar main.html */
body {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
}

/* Tablas y formularios más compactos */
table, th, td, label, input, select, textarea, button {
    font-size: 0.82rem;
}

/* Encabezados */
h1 { font-size: 1.2rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }

/* === Ajustes tabla clientes (ID mínimo + Apellidos amplio) === */
.table-clientes{
    table-layout: fixed;
    width: 100%;
}
.table-clientes .col-id{
    width: 50px;
    text-align: center;
    white-space: nowrap;
    padding: 2px 6px;
}
.table-clientes .col-apellidos{
    width: 25%;
    white-space: normal;
}

</style>


<style>
/* Menú superior */
.top-menu {
    min-height: 38px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: rgba(0, 0, 0, 0.75);
    border-bottom: 1px solid rgba(254, 249, 194, 0.4);
}

.top-menu .navbar-brand,
.top-menu .nav-link {
    font-size: 0.8rem;
    color: #FEF9C2;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.1;
}

.top-menu .dropdown-menu {
    font-size: 0.8rem;
    padding: 4px 0;
}

.top-menu .dropdown-item {
    font-size: 0.78rem;
    padding: 4px 12px;
}

.hidden { display: none !important; }
</style>


<style>
/* Ajuste tipográfico para igualar main.html */
body {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
}

/* Tablas y formularios más compactos */
table, th, td, label, input, select, textarea, button {
    font-size: 0.82rem;
}

/* Encabezados */
h1 { font-size: 1.2rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.95rem; }
</style>


<style>
/* Cabecera con botón "Ver clientes" (igual que gastos/proveedores) */
.page-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
#btnVerClientes{
    padding:6px 10px;
    font-size:0.85rem;
    line-height:1.1;
    white-space:nowrap;
}

/* Barra de búsqueda en una línea + botones compactos */
.search-form{
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-end;
    gap:8px 10px;
    margin:8px 0 14px 0;
}
.search-form input[type="text"]{
    min-width: 180px;
    flex: 1 1 220px;
}
.search-form .btn.btn-inline{
    width:auto !important;
    min-width: 110px;
    padding:6px 12px;
    font-size:0.85rem;
    line-height:1.1;
    white-space:nowrap;
}
</style>