@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --bg:        #0d1117;
    --surface:   #161b22;
    --surface2:  #1c2230;
    --border:    #21293a;
    --border2:   #2d3748;
    --blue:      #1a6cff;
    --blue-soft: rgba(26,108,255,.12);
    --green:     #2dca72;
    --green-soft:rgba(45,202,114,.12);
    --yellow:    #f5a623;
    --yellow-soft:rgba(245,166,35,.12);
    --red:       #f05252;
    --red-soft:  rgba(240,82,82,.1);
    --purple:    #9b6bff;
    --text:      #cdd6f4;
    --text2:     #a6adc8;
    --muted:     #585f6e;
    --radius:    10px;
    --sb-width:  220px;
}

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

body {
    font-family:'Outfit',sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:14.5px;
    line-height:1.5;
    min-height:100vh;
}

/* ── Noise texture overlay ── */
.noise {
    position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.025;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════
   SIDEBAR
═══════════════════════ */
.sidebar {
    position:fixed;top:0;left:0;bottom:0;
    width:var(--sb-width);
    background:var(--surface);
    border-right:1px solid var(--border);
    display:flex;flex-direction:column;
    padding:20px 0;
    z-index:50;
    overflow-y:auto;
    overflow-x:hidden;
}
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-track { background:transparent; }
.sidebar::-webkit-scrollbar-thumb { background:var(--border2);border-radius:3px; }

.sb-logo {
    display:flex;align-items:center;gap:10px;
    padding:0 20px 20px;
    border-bottom:1px solid var(--border);
    font-weight:700;font-size:16px;letter-spacing:-.3px;
    color:var(--text);
    transition:opacity .15s;
}
.sb-logo:hover { opacity:.75; }

.sb-nav { flex:1 0 auto;padding:16px 10px;display:flex;flex-direction:column;gap:2px; }

.sb-link {
    display:flex;align-items:center;gap:10px;
    padding:9px 12px;border-radius:8px;
    color:var(--text2);text-decoration:none;
    font-size:14px;font-weight:500;
    transition:background .15s,color .15s;
}
.sb-link:hover { background:var(--surface2);color:var(--text); }
.sb-link.active { background:var(--blue-soft);color:var(--blue); }

.sb-user {
    display:flex;align-items:center;gap:10px;
    padding:16px 16px 0;
    border-top:1px solid var(--border);
    margin-top:auto;
}
.sb-avatar {
    width:34px;height:34px;border-radius:8px;flex-shrink:0;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    display:grid;place-items:center;
    font-weight:700;font-size:13px;color:#fff;
}
.sb-uname { font-weight:600;font-size:13px; }
.sb-role  { font-size:11px;color:var(--muted); }
.sb-logout {
    margin-left:auto;color:var(--muted);
    background:none;border:none;cursor:pointer;
    padding:4px;border-radius:6px;
    transition:color .15s;text-decoration:none;display:grid;place-items:center;
}
.sb-logout:hover { color:var(--red); }

/* ═══════════════════════
   DASHBOARD LAYOUT
═══════════════════════ */
.dash-page { display:block; }

.dash-main {
    margin-left:var(--sb-width);
    padding:36px 36px 60px;
    position:relative;z-index:1;
    min-height:100vh;
}

.dash-header {
    display:flex;align-items:flex-start;justify-content:space-between;
    margin-bottom:32px;gap:16px;flex-wrap:wrap;
}
.dash-header h1 {
    font-size:24px;font-weight:700;letter-spacing:-.4px;
}
.dash-sub { color:var(--muted);font-size:13px;margin-top:3px; }
.back-link { color:var(--blue);text-decoration:none; }
.back-link:hover { text-decoration:underline; }

/* ── Stats ── */
.stats-row { display:grid;grid-template-columns:repeat(5, 1fr);gap:14px;margin-bottom:28px; }
@media(max-width:1100px){ .stats-row{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px){  .stats-row{ grid-template-columns:repeat(2,1fr); } }

.stat-card {
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:18px 20px;
    transition:border-color .2s;
    min-width:0;
    overflow:hidden;
}
.stat-card:hover { border-color:var(--border2); }
.stat-icon { font-size:20px;margin-bottom:8px; }
.stat-val  {
    font-size:16px;
    font-weight:700;
    font-family:'JetBrains Mono',monospace;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    letter-spacing:-1px;
    max-width:100%;
}
.stat-lbl  { font-size:12px;color:var(--muted);margin-top:2px; }
.stat-blue   .stat-icon { color:var(--blue); }
.stat-green  .stat-icon { color:var(--green); }
.stat-yellow .stat-icon { color:var(--yellow); }
.stat-purple .stat-icon { color:var(--purple); }

/* ── Filtros ── */
.filtros-bar {
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;
}
.filtros-bar input,.filtros-bar select {
    background:var(--surface);border:1px solid var(--border);
    color:var(--text);border-radius:8px;padding:8px 12px;font-family:inherit;font-size:13.5px;outline:none;
    transition:border-color .15s;
}
.filtros-bar input:focus,.filtros-bar select:focus { border-color:var(--blue); }
.filtros-bar select { appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23585f6e' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center; }
.btn-filter { background:var(--blue);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-family:inherit;font-size:13.5px;cursor:pointer;font-weight:500;transition:opacity .15s; }
.btn-filter:hover { opacity:.85; }
.btn-clear  { background:none;border:1px solid var(--border);color:var(--text2);border-radius:8px;padding:8px 14px;font-size:13.5px;text-decoration:none;transition:border-color .15s; }
.btn-clear:hover { border-color:var(--border2); }

/* ── Table ── */
.table-wrap {
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    overflow:auto;
}

.data-table { width:100%;border-collapse:collapse; }
.data-table th {
    text-align:left;padding:12px 14px;
    font-size:11.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
    color:var(--muted);border-bottom:1px solid var(--border);
    white-space:nowrap;
}
.data-table td {
    padding:12px 14px;border-bottom:1px solid var(--border);
    vertical-align:middle;
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover td { background:rgba(255,255,255,.02); }

.td-id    { font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted); }
.td-money { font-family:'JetBrains Mono',monospace;font-size:13px; }
.td-date  { font-size:12.5px;color:var(--muted);white-space:nowrap; }
.td-desc  { max-width:240px;white-space:normal;word-break:break-word;line-height:1.4; }
.td-file,.td-actions { white-space:nowrap; }

.highlight { color:var(--green);font-weight:600; }
.highlight-big { font-size:20px;font-weight:700;color:var(--green);font-family:'JetBrains Mono',monospace; }

.client-pill {
    display:inline-block;padding:3px 9px;background:var(--blue-soft);
    color:var(--blue);border-radius:20px;font-size:12.5px;font-weight:600;
}

.file-link {
    display:inline-block;padding:3px 9px;background:var(--surface2);border:1px solid var(--border);
    border-radius:6px;color:var(--text);text-decoration:none;font-size:12.5px;
    transition:border-color .15s;white-space:nowrap;
}
.file-link:hover { border-color:var(--border2);color:var(--blue); }

.file-upload-link {
    color:var(--blue);text-decoration:none;font-size:12.5px;font-weight:500;
}
.file-upload-link:hover { text-decoration:underline; }
.no-file { color:var(--muted);font-size:12.5px; }

/* Badges */
.badge { display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600; }
.badge-ok   { background:var(--green-soft);color:var(--green); }
.badge-warn { background:var(--yellow-soft);color:var(--yellow); }
.badge-info { background:var(--blue-soft);color:var(--blue); }

/* Buttons */
.btn-main {
    display:inline-block;padding:9px 20px;
    background:var(--blue);color:#fff;
    border:none;border-radius:8px;font-family:inherit;font-size:14px;font-weight:600;
    cursor:pointer;text-decoration:none;
    transition:opacity .15s,transform .1s;
    white-space:nowrap;
}
.btn-main:hover  { opacity:.9; }
.btn-main:active { transform:scale(.98); }

.btn-secondary {
    display:inline-block;padding:9px 20px;
    background:none;border:1px solid var(--border);color:var(--text2);
    border-radius:8px;font-family:inherit;font-size:14px;font-weight:500;
    text-decoration:none;cursor:pointer;
    transition:border-color .15s;
}
.btn-secondary:hover { border-color:var(--border2); }

.btn-sm {
    display:inline-block;padding:4px 10px;
    background:var(--surface2);border:1px solid var(--border);
    border-radius:6px;color:var(--text);text-decoration:none;font-size:12.5px;
    transition:border-color .15s;cursor:pointer;
}
.btn-sm:hover { border-color:var(--border2); }
.btn-sm-edit { color:var(--blue); }
.btn-sm-del  { color:var(--red);border-color:transparent;background:none; }
.btn-sm-del:hover { background:var(--red-soft); }

/* Empty state */
.empty-state {
    text-align:center;padding:60px 20px;
}
.empty-icon { font-size:48px;margin-bottom:16px;opacity:.4; }
.empty-state p { color:var(--muted);margin-bottom:20px; }

/* ═══════════════════════
   AUTH PAGES
═══════════════════════ */
.auth-page {
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;padding:24px;
    background:var(--bg);
}
.auth-wrap { width:100%;max-width:400px; }

.auth-card {
    background:var(--surface);border:1px solid var(--border);border-radius:16px;
    padding:36px 32px;
    animation:fadeUp .4s cubic-bezier(.16,1,.3,1);
}
@keyframes fadeUp {
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
}

.auth-logo {
    display:flex;align-items:center;gap:10px;
    font-weight:700;font-size:17px;margin-bottom:24px;
}

.auth-card h1 { font-size:22px;font-weight:700;letter-spacing:-.3px; }
.sub { color:var(--muted);font-size:13.5px;margin-top:4px;margin-bottom:24px; }
.auth-foot { text-align:center;font-size:13px;color:var(--muted);margin-top:20px; }
.auth-foot a { color:var(--blue);text-decoration:none; }
.auth-foot a:hover { text-decoration:underline; }
.auth-foot.hint { font-size:11.5px;margin-top:8px; }
.auth-foot code { background:var(--surface2);padding:1px 5px;border-radius:4px;font-family:'JetBrains Mono',monospace; }

/* ═══════════════════════
   FORMS
═══════════════════════ */
.field,.field-full,.field-half {
    display:flex;flex-direction:column;gap:6px;
}
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.field-full { grid-column:1/-1; }

.field label,.field-full label,.field-half label {
    font-size:12.5px;font-weight:600;color:var(--text2);letter-spacing:.2px;
}
.optional { color:var(--muted);font-weight:400; }

.field input,.field-full input,.field-half input,
.field-full select,.field-half select,
.auth-card input {
    background:var(--surface2);border:1px solid var(--border);
    color:var(--text);border-radius:8px;padding:9px 12px;
    font-family:inherit;font-size:14px;outline:none;
    transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field-full input:focus,.field-half input:focus,
.field-full select:focus,.field-half select:focus,
.auth-card input:focus {
    border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,108,255,.12);
}
.field-hint { font-size:11.5px;color:var(--muted); }

.money-wrap { position:relative; }
.money-prefix {
    position:absolute;left:12px;top:50%;transform:translateY(-50%);
    color:var(--muted);font-size:14px;pointer-events:none;
}
.money-wrap input { padding-left:24px; }

.file-drop {
    background:var(--surface2);border:1px dashed var(--border2);border-radius:8px;
    overflow:hidden;
}
.file-drop input[type="file"] { position:absolute;opacity:0;width:0;height:0; }
.file-drop label {
    display:block;padding:12px 16px;cursor:pointer;font-size:13.5px;color:var(--text2);
    transition:background .15s;text-align:center;
}
.file-drop:hover label { background:rgba(255,255,255,.03);color:var(--text); }

.file-drop-big label {
    padding:28px 16px;
    display:flex;flex-direction:column;align-items:center;gap:6px;
}
.drop-icon { font-size:28px; }
.drop-hint { font-size:11.5px;color:var(--muted); }

.form-actions { display:flex;gap:12px;align-items:center; }
.form-card {
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:28px;max-width:760px;
}

/* Alerts */
.alert {
    padding:10px 14px;border-radius:8px;font-size:13.5px;margin-bottom:20px;
    border:1px solid transparent;
}
.alert-error { background:var(--red-soft);border-color:rgba(240,82,82,.2);color:#f87171; }
.alert-ok    { background:var(--green-soft);border-color:rgba(45,202,114,.2);color:var(--green); }

/* ── Detail view ── */
.detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px; }
@media(max-width:700px){.detail-grid{grid-template-columns:1fr}}

.detail-card {
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:24px;
}
.detail-card h3 { font-size:14px;font-weight:600;margin-bottom:16px;color:var(--text2);letter-spacing:.2px; }

.detail-list { display:grid;gap:12px; }
.detail-list dt { font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.3px;text-transform:uppercase; }
.detail-list dd { font-size:14px; }
.muted { color:var(--muted); }

.doc-list { display:flex;flex-direction:column;gap:16px; }
.doc-item { display:flex;align-items:center;gap:14px; }
.doc-icon { font-size:24px;flex-shrink:0; }
.doc-title { font-size:12px;color:var(--muted);margin-bottom:3px; }

/* Order mini summary */
.orden-mini { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border); }
.orden-mini:last-child { border-bottom:none; }
.om-label { font-size:12.5px;color:var(--muted);min-width:130px;font-weight:600; }

/* ── Section titles inside forms ── */
.form-section-title {
    grid-column: 1 / -1;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-top: 8px;
}
.form-section-title:first-child { margin-top: 0; }

/* ── Password input with toggle ── */
.input-pw-wrap { position: relative; }
.input-pw-wrap input { width: 100%; padding-right: 40px; }
.toggle-pw-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    font-size: 15px; opacity: .5; padding: 2px;
    transition: opacity .15s;
}
.toggle-pw-btn:hover { opacity: 1; }

/* ── Chart card ── */
.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}
.chart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.chart-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
}
.chart-sub {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 3px;
}
.chart-legend {
    display: flex;
    align-items: center;
    font-size: 12.5px;
    color: var(--text2);
}
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 6px;
}
.chart-wrap {
    position: relative;
    height: 240px;
}

/* ── Color de tela ── */
.color-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .4px;
    white-space: nowrap;
}
.color-preview-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .4px;
    min-width: 80px;
    white-space: nowrap;
}
.color-selector-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.color-selector-wrap select {
    flex: 1;
    min-width: 200px;
}

/* ── Tabla compacta ── */
.data-table-sm th {
    padding: 9px 10px;
    font-size: 10.5px;
}
.data-table-sm td {
    padding: 8px 10px;
    font-size: 12.5px;
}
.data-table-sm .td-desc {
    max-width: 200px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}
.data-table-sm .td-money {
    font-size: 12px;
}
.data-table-sm .td-date {
    font-size: 11.5px;
}
.badge-sm {
    font-size: 10.5px;
    padding: 2px 8px;
}
.client-pill-sm {
    font-size: 11px;
    padding: 2px 7px;
}
.file-link-sm {
    padding: 2px 6px;
    font-size: 14px;
}

/* ── Saldo pendiente card ── */
.stat-card-alert {
    border-color: rgba(240,82,82,.25);
}
.stat-card-alert:hover {
    border-color: rgba(240,82,82,.5);
}
.stat-val-red {
    color: var(--red);
}
.stat-red .stat-icon {
    color: var(--red);
}

/* ── Botón toggle IVA ── */
.btn-toggle-iva {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: var(--blue-soft);
    border: 1px dashed rgba(26,108,255,.4);
    border-radius: 8px;
    color: var(--blue);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: background .15s, border-color .15s;
}
.btn-toggle-iva:hover {
    background: rgba(26,108,255,.18);
    border-color: var(--blue);
}
.btn-toggle-iva-active {
    background: rgba(240,82,82,.08);
    border-color: rgba(240,82,82,.4);
    color: var(--red);
}
.btn-toggle-iva-active:hover {
    background: rgba(240,82,82,.14);
    border-color: var(--red);
}

/* ── Datos para pagos ── */
.pago-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 32px;
    max-width: 860px;
}
.pago-card {
    background: var(--surface);
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.18);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
.pago-card-blue  { border-top: 4px solid var(--blue); }
.pago-card-green { border-top: 4px solid var(--green); }

.pago-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--border);
}
.pago-icon { font-size: 26px; flex-shrink: 0; margin-top: 2px; }
.pago-title {
    font-family: 'Syne', 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .3px;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--text);
    line-height: 1.4;
}
.pago-card-blue  .pago-title { color: var(--blue); }
.pago-card-green .pago-title { color: var(--green); }
.pago-subtitle {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 3px;
}

.pago-fields {
    padding: 16px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pago-divider {
    height: 1px;
    background: var(--border);
    margin: 2px 0;
}
.pago-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pago-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}
.pago-value-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pago-value {
    font-size: 14px;
    font-weight: 400;
    color: var(--text2);
}
.pago-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: .5px;
    color: var(--text);
}
.btn-copy {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    padding: 5px 7px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
}
.btn-copy:hover { border-color: var(--border2); color: var(--text); }

/* ── Sidebar perfil cliente (frame style) ── */
.sb-profile-frame {
    margin: 0 10px 8px;
    border: 2px solid #ffffff;
    border-radius: 10px;
    overflow: hidden;
}
.sb-profile-frame-header {
    padding: 8px 12px;
    background: rgba(26,108,255,.2);
    border-bottom: 2px solid #ffffff;
}
.sb-profile-frame-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sb-profile-frame-body {
    padding: 10px 12px;
    background: rgba(255,255,255,.03);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.sb-pf-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sb-pf-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: .3px;
}
.sb-pf-val {
    display: block;
    font-size: 11px;
    color: #a6adc8;
    word-break: break-word;
    line-height: 1.3;
}

/* ── Responsive ── */
@media(max-width:768px){
    .sidebar { display:none; }
    .dash-main { margin-left:0;padding:20px 16px 40px; }
    .form-grid { grid-template-columns:1fr; }
    .field-half { grid-column:1/-1; }
    .chart-wrap { height: 180px; }
}