/* ============================================================
   assets/css/main.css
   Estilos base del sistema de facturación
   ============================================================ */

/* ----- Reset y variables CSS ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Colores principales */
    --color-primary:       #2563eb;
    --color-primary-dark:  #1d4ed8;
    --color-primary-light: #eff6ff;
    --color-secondary:     #64748b;
    --color-success:       #16a34a;
    --color-success-bg:    #f0fdf4;
    --color-danger:        #dc2626;
    --color-danger-bg:     #fef2f2;
    --color-warning:       #d97706;
    --color-warning-bg:    #fffbeb;
    --color-info:          #0891b2;
    --color-info-bg:       #ecfeff;

    /* Fondos y superficies */
    --bg-page:    #f1f5f9;
    --bg-card:    #ffffff;
    --bg-sidebar: #1e293b;
    --bg-header:  #ffffff;

    /* Texto */
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --text-white:     #ffffff;

    /* Bordes */
    --border:       #e2e8f0;
    --border-focus: #2563eb;

    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.12);

    /* Tipografía */
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Courier New', monospace;

    /* Radios */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Layout */
    --sidebar-w: 240px;
    --header-h:  56px;
}

html { font-size: 14px; scroll-behavior: smooth; }
body {
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-page);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ----- Layout principal ----- */
.app-wrapper     { display: flex; min-height: 100vh; }
.app-sidebar     { width: var(--sidebar-w); background: var(--bg-sidebar); position: fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:100; transition: transform .3s; }
.app-main        { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.app-header      { height: var(--header-h); background: var(--bg-header); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 1.25rem; gap: .75rem; position: sticky; top:0; z-index:50; box-shadow: var(--shadow-sm); }
.app-content     { flex: 1; padding: 1.25rem; max-width: 1400px; width:100%; }

/* ----- Sidebar ----- */
.sidebar-logo    { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: .625rem; }
.sidebar-logo-text { color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.2; }
.sidebar-logo-sub  { color: rgba(255,255,255,.5); font-size: .75rem; }
.sidebar-nav     { padding: .5rem 0; }
.sidebar-section { padding: .625rem 1rem .25rem; color: rgba(255,255,255,.35); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.sidebar-link    { display: flex; align-items: center; gap: .625rem; padding: .5rem 1rem; color: rgba(255,255,255,.75); text-decoration: none; border-radius: 0; transition: background .15s, color .15s; font-size: .875rem; }
.sidebar-link:hover,
.sidebar-link.active { background: rgba(255,255,255,.1); color: #fff; }
.sidebar-link.active { border-left: 3px solid var(--color-primary); }
.sidebar-link svg { width:16px; height:16px; flex-shrink:0; }
.sidebar-badge   { margin-left: auto; background: var(--color-danger); color: #fff; font-size: .65rem; padding: .1em .45em; border-radius: 99px; font-weight: 700; }

/* ----- Header ----- */
.header-toggle   { background:none; border:none; cursor:pointer; padding:.25rem; display:none; }
.header-breadcrumb { flex:1; font-size:.8rem; color: var(--text-secondary); }
.header-breadcrumb strong { color: var(--text-primary); }
.header-actions  { display:flex; align-items:center; gap:.5rem; }
.header-sucursal { background: var(--color-primary-light); color: var(--color-primary); font-size:.75rem; padding:.2rem .625rem; border-radius: var(--radius-sm); font-weight:600; }
.header-user     { display:flex; align-items:center; gap:.375rem; font-size:.8rem; color: var(--text-secondary); cursor:pointer; }

/* ----- Cards ----- */
.card            { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-header     { padding: .875rem 1.125rem; border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.card-title      { font-weight: 600; font-size: .9rem; color: var(--text-primary); }
.card-body       { padding: 1.125rem; }
.card-footer     { padding: .875rem 1.125rem; border-top: 1px solid var(--border); background: #f8fafc; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ----- Formularios ----- */
.form-group      { margin-bottom: .875rem; }
.form-label      { display:block; font-size:.8rem; font-weight:600; color: var(--text-secondary); margin-bottom:.3rem; }
.form-label.required::after { content: ' *'; color: var(--color-danger); }
.form-input,
.form-select,
.form-textarea   {
    width: 100%; padding: .5rem .75rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: .875rem; font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-card);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.form-input.error { border-color: var(--color-danger); }
.form-hint       { font-size:.72rem; color: var(--text-muted); margin-top:.2rem; }
.form-error      { font-size:.72rem; color: var(--color-danger); margin-top:.2rem; }
.input-with-icon { position:relative; }
.input-with-icon .form-input { padding-right: 2.5rem; }
.input-icon-right { position:absolute; right:.625rem; top:50%; transform:translateY(-50%); color: var(--text-muted); pointer-events:none; }
.input-row       { display:grid; gap:.75rem; }
.input-row-2     { grid-template-columns: 1fr 1fr; }
.input-row-3     { grid-template-columns: 1fr 1fr 1fr; }
.input-row-4     { grid-template-columns: repeat(4,1fr); }

/* ----- Botones ----- */
.btn             { display:inline-flex; align-items:center; justify-content:center; gap:.375rem; padding:.5rem 1rem; border-radius: var(--radius-md); font-size:.85rem; font-weight:600; font-family: var(--font); cursor:pointer; border: 1.5px solid transparent; transition: all .15s; text-decoration:none; white-space:nowrap; }
.btn:disabled    { opacity:.6; cursor:not-allowed; }
.btn-sm          { padding:.3rem .75rem; font-size:.78rem; }
.btn-lg          { padding:.625rem 1.5rem; font-size:.95rem; }
.btn-full        { width:100%; }
.btn-icon        { padding:.4rem; }
.btn-primary     { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-secondary   { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-page); }
.btn-success     { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.btn-danger      { background: var(--color-danger);  color: #fff; border-color: var(--color-danger); }
.btn-warning     { background: var(--color-warning); color: #fff; border-color: var(--color-warning); }
.btn-outline-primary { background:transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background: var(--color-primary-light); }
.btn-group       { display:flex; gap:.375rem; flex-wrap:wrap; }

/* ----- Alertas / Flash ----- */
.alert           { display:flex; align-items:center; gap:.5rem; padding:.625rem .875rem; border-radius: var(--radius-md); font-size:.85rem; margin-bottom: .875rem; }
.alert-success   { background: var(--color-success-bg); color: #15803d; border: 1px solid #bbf7d0; }
.alert-error     { background: var(--color-danger-bg);  color: #b91c1c; border: 1px solid #fecaca; }
.alert-warning   { background: var(--color-warning-bg); color: #92400e; border: 1px solid #fde68a; }
.alert-info      { background: var(--color-info-bg);    color: #0e7490; border: 1px solid #a5f3fc; }

/* ----- Tablas ----- */
.table-wrap      { overflow-x: auto; }
table.data-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.data-table th   { background: #f8fafc; color: var(--text-secondary); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; padding:.625rem .875rem; text-align:left; border-bottom: 2px solid var(--border); white-space:nowrap; }
.data-table td   { padding:.5rem .875rem; border-bottom: 1px solid var(--border); vertical-align:middle; }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table .text-right { text-align:right; }
.data-table .text-center { text-align:center; }

/* ----- Badges ----- */
.badge           { display:inline-flex; align-items:center; padding:.15em .55em; border-radius:99px; font-size:.72rem; font-weight:700; }
.badge-success   { background: #dcfce7; color: #15803d; }
.badge-danger    { background: #fee2e2; color: #b91c1c; }
.badge-warning   { background: #fef3c7; color: #92400e; }
.badge-info      { background: #e0f2fe; color: #0369a1; }
.badge-gray      { background: #f1f5f9; color: #475569; }
.badge-primary   { background: #eff6ff; color: #1d4ed8; }

/* ----- Paginación ----- */
.pagination      { display:flex; align-items:center; gap:.25rem; }
.pagination a,
.pagination span { padding:.375rem .625rem; border-radius: var(--radius-sm); font-size:.8rem; }
.pagination a    { color: var(--color-primary); text-decoration:none; border: 1px solid var(--border); }
.pagination a:hover { background: var(--color-primary-light); }
.pagination .active { background: var(--color-primary); color:#fff; border-color: var(--color-primary); }

/* ----- Utilities ----- */
.mt-0 { margin-top:0; }      .mt-1 { margin-top:.5rem; }    .mt-2 { margin-top:.875rem; }   .mt-3 { margin-top:1.25rem; }
.mb-0 { margin-bottom:0; }   .mb-1 { margin-bottom:.5rem; } .mb-2 { margin-bottom:.875rem; } .mb-3 { margin-bottom:1.25rem; }
.d-flex     { display:flex; }
.align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-1 { gap:.5rem; } .gap-2 { gap:.875rem; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.fw-bold { font-weight:700; }
.fs-sm { font-size:.8rem; }
.fs-lg { font-size:1.1rem; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Modal ----- */
.modal-backdrop  { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; display:none; }
.modal-backdrop.open { display:flex; align-items:center; justify-content:center; }
.modal           { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width:100%; max-width:600px; max-height:90vh; overflow-y:auto; }
.modal-header    { padding:.875rem 1.125rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-title     { font-weight:700; font-size:.95rem; }
.modal-body      { padding:1.125rem; }
.modal-footer    { padding:.875rem 1.125rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.5rem; }
.modal-close     { background:none; border:none; cursor:pointer; color: var(--text-muted); padding:.25rem; border-radius: var(--radius-sm); }
.modal-close:hover { color: var(--text-primary); background: var(--bg-page); }

/* ----- Loading spinner ----- */
.loader-overlay  { position:fixed; inset:0; background:rgba(255,255,255,.75); z-index:300; display:none; align-items:center; justify-content:center; }
.loader-overlay.active { display:flex; }
.loader-spinner  { width:40px; height:40px; border:4px solid var(--border); border-top-color: var(--color-primary); border-radius:50%; animation: spin .8s linear infinite; }

/* ----- Responsive ----- */
@media (max-width: 768px) {
    :root { --sidebar-w: 0px; }
    .app-sidebar  { transform: translateX(-240px); width: 240px; }
    .app-sidebar.open { transform: translateX(0); }
    .app-main     { margin-left: 0; }
    .header-toggle { display:block; }
    .input-row-2, .input-row-3, .input-row-4 { grid-template-columns: 1fr; }
    .app-content  { padding: .75rem; }
}
@media (max-width: 480px) {
    .btn { padding:.4rem .75rem; font-size:.8rem; }
    .data-table th, .data-table td { padding:.4rem .625rem; }
}