/* Shared listing + toolbar styles centralized from listar_clientes, listar_pagos, r_factura (payment/invoice list portions).
   Scope: generic list pages (clientes, pagos, facturas).
   Apply directly (no wrapper class required). Optional wrapper: .listar_clases_css if scoping is desired.
*/

/* Layout */
.sticky-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1040;
  background: linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);
  box-shadow: 0 2px 10px rgba(16,24,40,0.08);
  padding: 10px 0;
}
.page-header { margin:0 0 0; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:8px; }
.page-header h1, .header-title h1 { font-size:1.25rem; margin:0; font-weight:600; display:flex; align-items:center; gap:3px; }
@media (max-width:760px){ .page-header .header-content{ flex-direction:column; align-items:flex-start; } }
.main-content { padding:0 28px 40px; }

/* Toolbar */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:5px; margin-top:0; }
.toolbar form { display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.toolbar-input { height:34px; padding:5px 8px; border-radius:6px; border:1px solid #d7ddea; min-width:180px; }
.toolbar-select { height:34px; border-radius:6px; border:1px solid #d7ddea; padding:4px 6px; }
.toolbar-button { height:34px; border-radius:6px; border:1px solid #d7ddea; background:#fff; padding:0 10px; }
.toolbar-icon-btn { height:34px; min-width:34px; padding:4px 8px; display:inline-flex; align-items:center; justify-content:center; gap:3px; border-radius:6px; line-height:1; }
.toolbar-icon-btn i { display:inline-block; line-height:1; font-size:1rem; vertical-align:middle; }

/* Table container & table (unified design for all list pages) */
.table-container { 
    margin-top:0; 
    background:#fff; 
    border-radius:12px; 
    border:1px solid #e7ecf4; 
    box-shadow:0 1px 4px rgba(15,23,42,0.06); 
    overflow:hidden; 
}
.table-standard { 
    width:100%; 
    border-collapse:collapse; 
    font-size:0.9rem; 
}
.table-standard th, 
.table-standard td { 
    padding:12px 14px; 
    border-bottom:1px solid #eff3fb; 
    vertical-align:middle; 
    text-align:left; 
    font-size:14px; 
}
.table-standard, 
.table-standard thead, 
.table-standard tbody, 
.table-standard th, 
.table-standard td { 
    text-align:left !important; 
}
.table-standard thead th { 
    background:#e8ecf1; 
    font-size:14px; 
    color:#3d4a5c; 
    font-weight:600; 
    letter-spacing:0.02em; 
    text-transform:none; 
    border-bottom:2px solid #d1d8e0;
}
.table-standard tbody tr { 
    transition:background .15s ease; 
}
.table-standard tbody tr:hover { 
    background:#f6fbff; 
}

/* Selectable rows (for checkbox/radio selection) */
.selectable-row { 
    cursor:pointer; 
    user-select:none; 
}
.selectable-row.table-primary,
.table-standard tbody tr.table-primary { 
    background:#e3f2fd !important; 
    box-shadow:0 0 0 2px #1976d2 inset; 
}

/* Center alignment helpers */
.table-standard th.text-center,
.table-standard td.text-center { 
    text-align:center !important; 
}

/* Image previews in tables */
.img-preview { 
    max-width:100px; 
    max-height:60px; 
    border-radius:6px; 
    object-fit:cover; 
    border:1px solid #e7ecf4;
}

/* Empty state styling */
.empty-state { 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    justify-content:center;
    gap:12px; 
    padding:40px 20px;
    color:#6c757d; 
    text-align:center;
}
.empty-state i,
.empty-state-icon { 
    font-size:3rem; 
    color:#b0b8c1;
    opacity:0.6;
}
.empty-state p { 
    margin:0; 
    font-size:1.1rem;
    font-weight:500;
}

/* Action buttons column */
.action-buttons {
    display:flex;
    gap:5px;
    align-items:center;
    justify-content:center;
}
.action-buttons form {
    margin:0;
    padding:0;
    display:inline-flex;
}
.action-buttons .btn-action {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    font-size:0.85rem;
    border-radius:6px;
}

/* Badges / status */
.badge-status { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:.75rem; font-weight:600; text-transform:capitalize; }
.badge-aplicado { background:#e8faf0; color:#1b5e20; }
.badge-conciliado { background:#e3f2fd; color:#0d47a1; }
.badge-pendiente { background:#fff7e6; color:#f57c00; }
.badge-rechazado { background:#fdecea; color:#c62828; }
.badge-cancelado { background:#f3f4f6; color:#374151; }

/* Buttons (option + add) */
.btn-opcion { min-width:120px; font-weight:600; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:background .2s, color .2s, opacity .2s; border:1px solid currentColor; }
.btn-opcion:disabled, .btn-opcion.disabled { background:#f3f6fa !important; color:#b0b8c1 !important; border-color:#e3eaf3 !important; opacity:.7 !important; cursor:not-allowed !important; pointer-events:none !important; }
.btn-opcion:hover:not(:disabled):not(.disabled) { opacity:.95; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.btn-add { transition:background .18s, color .18s, border-color .18s; }
.btn-add.disabled, .btn-add[disabled] { background:#f3f6fa !important; color:#b0b8c1 !important; border-color:#e3eaf3 !important; opacity:.7 !important; box-shadow:none !important; cursor:not-allowed !important; pointer-events:none !important; }

/* Empty state styling */
.empty-state { 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    justify-content:center;
    gap:12px; 
    padding:40px 20px;
    color:#6c757d; 
    text-align:center;
}
.empty-state i,
.empty-state-icon { 
    font-size:3rem; 
    color:#b0b8c1;
    opacity:0.6;
}
.empty-state p { 
    margin:0; 
    font-size:1.1rem;
    font-weight:500;
}

/* Action buttons column */
.action-buttons {
    display:flex;
    gap:5px;
    align-items:center;
    justify-content:center;
}
.action-buttons form {
    margin:0;
    padding:0;
    display:inline-flex;
}
.action-buttons .btn-action {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    font-size:0.85rem;
    border-radius:6px;
}

/* Badges / status (unified across all list pages) */
.badge-status { 
    display:inline-flex; 
    align-items:center; 
    padding:4px 10px; 
    border-radius:999px; 
    font-size:.75rem; 
    font-weight:600; 
    text-transform:capitalize; 
}
.badge-aplicado { background:#e8faf0; color:#1b5e20; }
.badge-conciliado { background:#e3f2fd; color:#0d47a1; }
.badge-pendiente { background:#fff7e6; color:#f57c00; }
.badge-rechazado { background:#fdecea; color:#c62828; }
.badge-cancelado { background:#f3f4f6; color:#374151; }

/* Additional badge variants for vehiculos, prospectos, etc */
.badge-disponible { background:#e8faf0; color:#1b5e20; }
.badge-vendido { background:#e3f2fd; color:#0d47a1; }
.badge-apartado { background:#fff7e6; color:#f57c00; }
.badge-activo { background:#e8faf0; color:#1b5e20; }
.badge-inactivo { background:#f3f4f6; color:#374151; }
.badge-nuevo { background:#e3f2fd; color:#0d47a1; }
.badge-contactado { background:#fff7e6; color:#f57c00; }
.badge-calificado { background:#dff0d8; color:#3c763d; }
.badge-cerrado { background:#f3f4f6; color:#374151; }

/* Misc utilities */
.monto { font-size:1rem; font-weight:600; }
.text-muted.tiny { font-size:.75rem; line-height:1.2; }

/* Toolbar actions row (unified layout for all list pages) */
.toolbar-actions { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    gap:12px; 
    margin-bottom:12px;
    flex-wrap:wrap;
}
.toolbar-actions > div:first-child {
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}

/* Inline search form inside toolbar */
#toolbarSearchForm {
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:8px;
}
#toolbarSearchForm .toolbar-input,
#toolbarSearchForm .toolbar-select {
    height:32px;
    font-size:0.85rem;
    padding:4px 8px;
    border:1px solid #d7ddea;
    border-radius:6px;
    background:#fff;
}
#toolbarSearchForm .toolbar-input {
    min-width:180px;
    max-width:300px;
}
#toolbarSearchForm .toolbar-input:focus,
#toolbarSearchForm .toolbar-select:focus {
    outline:none;
    border-color:#1976d2;
    box-shadow:0 0 0 3px rgba(25,118,210,0.08);
}

/* Table counter (e.g. "Mostrando X de Y registros") - standardized across list pages */
.table-counter { font-weight:600; font-size:12px; color:inherit; letter-spacing:.2px; }
.table-counter.text-info { font-size:12px; }
/* Row that holds the counter above tables */
.table-header-row { display:flex; justify-content:flex-end; align-items:center; margin:0 0 4px; min-height:20px; }
.table-header-row .table-counter { margin:0; }

/* Unified list page body background + inner content padding */
body.list-page { background:#f5f7fb; }

/* Consistent space below counter before table/card */
.table-header-row { margin:0 0 8px; }

/* Pagination */
.pagination { margin-top:16px; display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.pagination .page-link { border-radius:6px; border:1px solid #d7ddea; padding:4px 10px; font-size:12px; line-height:1.2; color:#0f172a; text-decoration:none; background:#fff; transition:background .15s, color .15s, border-color .15s; }
.pagination .page-link:hover { background:#f1f5fa; text-decoration:none; }
.pagination .page-item.active .page-link,
.pagination .page-link.active,
.pagination .active .page-link,
.pagination .active {
  background:#0d6efd;
  color:#fff;
  border-color:#0c63d3;
  box-shadow:0 0 0 1px #0c63d3 inset;
  border-radius:6px;
}
.pagination .page-link:focus { outline:2px solid #94c1ff; outline-offset:2px; }
.pagination .page-item.disabled .page-link { opacity:.5; cursor:not-allowed; }

/* Combined pagination + per-page control row (facturas) */
.pagination-row { margin-top:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.pagination-row .pager-container { flex:1; min-width:0; }
.pagination-row .per-container { flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.per-page label { font-weight:500; color:#6c757d; font-size:12px; margin-right:4px; }
.per-page select { height:30px; font-size:12px; border:1px solid #d7ddea; border-radius:6px; padding:2px 6px; background:#fff; color:#0f172a; }
.per-page select:focus { outline:2px solid #94c1ff; outline-offset:1px; }

@media (max-width:600px){
  .pagination-row { justify-content:flex-start; }
  .pagination { justify-content:flex-start; }
}

/* Responsive shared */
@media (max-width:1024px) {
  .sticky-header { position:sticky; }
  .table-container { overflow-x:auto; }
  .table-standard { min-width:960px; }
}
@media (max-width:768px) {
  .main-content { padding:0 16px 32px; }
  .toolbar { flex-direction:column; align-items:flex-start; }
  .toolbar form { width:100%; }
  .toolbar-input, .toolbar-select, .toolbar-button { width:100%; }
}
@media (max-width:900px) {
  .toolbar-actions { overflow-x:auto; -webkit-overflow-scrolling:touch; justify-content:flex-start !important; gap:4px; padding:8px 6px; margin-bottom:0; -ms-overflow-style:none; scrollbar-width:none; }
  .toolbar-actions::-webkit-scrollbar { display:none; }
  .toolbar-actions > div { display:inline-flex; flex:0 0 auto; gap:4px; }
  .toolbar-actions .toolbar { display:inline-flex; flex:0 0 auto; }
  .toolbar-actions .toolbar form { display:inline-flex; align-items:center; gap:4px; }
  .toolbar-actions .btn, .toolbar-actions .toolbar-input, .toolbar-actions .toolbar-select { white-space:nowrap; }
}
/* Canonical spacing below header actions (applied to all list pages) */
.toolbar-actions { margin-bottom:0; }
/* Optional metrics/counter row directly under actions */
.header-metrics { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-bottom:12px; }