/* ============================================================
   Sistema de Facturación · Taller Mecánico
   Hoja de estilos principal
   ============================================================ */

:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --color-bg: #f4f6f9; --color-surface: #ffffff; --color-surface-2: #f8fafc; --color-surface-offset: #edf1f5; --color-border: #d8e0e8;
  --color-text: #162130; --color-text-muted: #4a5568; --color-text-faint: #94a3b8; --color-text-inverse: #ffffff;
  --color-primary: #d94514; --color-primary-hover: #b0360f; --color-primary-soft: #fff0eb;
  --color-success: #1f7a43; --color-success-soft: #d9efe0; --color-warning: #ad6a00; --color-warning-soft: #f6ead4; --color-error: #e53e3e; --color-error-soft: #fed7d7;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-app-bar: 0 -4px 15px rgba(0,0,0,0.06);
  --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem; --radius-full: 999px;
  --font-body: 'Satoshi', Inter, sans-serif; --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:var(--color-bg);}
body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
input,select,textarea{border:1px solid var(--color-border);background:var(--color-surface);padding:.7rem .85rem;border-radius:var(--radius-md);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--color-primary);outline-offset:-1px}
a{text-decoration:none;color:inherit}
table{width:100%;border-collapse:collapse}
th,td{padding:.8rem;text-align:left;border-bottom:1px solid var(--color-border);font-size:var(--text-sm);vertical-align:top}
th{color:var(--color-text-muted);font-weight:700;background:var(--color-surface-2);position:sticky;top:0; z-index:2}

.app{display:grid;grid-template-columns:280px 1fr;height:100dvh}
.sidebar{background:var(--color-surface);color:var(--color-text);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-6);overflow-y:auto;overscroll-behavior:contain;border-right:1px solid var(--color-border)}
.brand{display:flex;align-items:center;gap:.9rem}.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--color-primary);color:#fff;display:grid;place-items:center;flex-shrink:0}.brand-mark svg{width:24px;height:24px}
.brand strong{display:block;font-size:1rem;line-height:1.2}.brand span{font-size:.86rem;color:var(--color-text-muted)}
.nav{display:flex;flex-direction:column;gap:.35rem}.nav button{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;border-radius:.9rem;color:var(--color-text-muted);text-align:left;transition:all var(--transition)} .nav button.active,.nav button:hover{background:var(--color-primary-soft);color:var(--color-primary);font-weight:700}
.sidebar-footer{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--color-border);display:grid;gap:.75rem}
.main{display:flex;flex-direction:column;overflow:hidden;height:100dvh}
.header{padding:var(--space-5) var(--space-6);background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-shrink:0}
.header h1{font-size:var(--text-xl);line-height:1.1}.header p{font-size:var(--text-sm);color:var(--color-text-muted)}
.header-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.content{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-6);display:grid;gap:var(--space-6);align-content:start;}

.grid{display:grid;gap:var(--space-4)} .grid.kpis{grid-template-columns:repeat(4,minmax(0,1fr))} .grid.two{grid-template-columns:1.35fr .95fr} .grid.split{grid-template-columns:1fr 1fr}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-5)}
.card h2,.card h3{font-size:var(--text-lg);margin-bottom:.8rem} .subtle{color:var(--color-text-muted);font-size:var(--text-sm)}
.kpi .label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)} .kpi .value{font-size:1.9rem;font-weight:900;margin-top:.35rem;font-variant-numeric:tabular-nums lining-nums}
.toolbar,.filters,.row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.toolbar{justify-content:space-between;margin-bottom:1rem}
.btn{padding:.75rem 1rem;border-radius:.85rem;font-size:var(--text-sm);font-weight:700;transition:all var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover)} .btn-secondary{background:var(--color-surface-2);border:1px solid var(--color-border)} .btn-secondary:hover{background:var(--color-surface-offset)} .btn-danger{background:var(--color-error);color:#fff} .btn-success{background:var(--color-success);color:#fff}
.pill{display:inline-flex;align-items:center;padding:.3rem .65rem;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700} .status-borrador,.status-pendiente{background:var(--color-warning-soft);color:var(--color-warning)} .status-emitida,.status-aceptado{background:var(--color-primary-soft);color:var(--color-primary)} .status-pagada{background:var(--color-success-soft);color:var(--color-success)} .status-anulada,.status-rectificativa,.status-rechazado{background:var(--color-error-soft);color:var(--color-error)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))} .field{display:grid;gap:.35rem}.field label{font-size:var(--text-sm);font-weight:700}.field small{font-size:var(--text-xs);color:var(--color-text-muted)}
.invoice-lines{display:grid;gap:.8rem}.line-row{display:grid;grid-template-columns:2fr 1.5fr .7fr .9fr .9fr auto;gap:.75rem;align-items:end} .totals{margin-left:auto;max-width:340px;display:grid;gap:.6rem}.totals .rowline{display:flex;justify-content:space-between;gap:1rem}.totals .rowline strong{font-variant-numeric:tabular-nums lining-nums}
.list-table{max-height:420px;overflow:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);} .empty{padding:2rem;text-align:center;color:var(--color-text-muted)}

.login-portal { min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; background:var(--color-surface); }
.login-cover { background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary)); color: white; padding: 4rem; display: flex; flex-direction: column; justify-content: space-between; }
.login-form-area { display: grid; place-items: center; padding: 2rem; background:var(--color-surface); }
.login-card { width: min(400px, 100%); display: grid; gap: 1.5rem; }
.login-tabs { display: flex; gap: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem;}
.login-tabs button { font-weight: 700; color: var(--color-text-muted); padding: 0.5rem 0; border-bottom: 2px solid transparent; }
.login-tabs button.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.toast-container { position: fixed; bottom: 80px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; }
.toast { background: var(--color-surface); color: var(--color-text); padding: 16px 24px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); border-left: 4px solid var(--color-primary); animation: slideIn 0.3s ease-out forwards; display: flex; align-items: center; gap: 12px; font-weight: 500; }
.toast.success { border-color: var(--color-success); } .toast.error { border-color: var(--color-error); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
.loading-screen { position: fixed; inset: 0; background: var(--color-surface); z-index: 9999; display: grid; place-items: center; font-weight: bold; font-size: 1.5rem; color: var(--color-primary); }

/* ===================== Visor PDF (iframe real) ===================== */
.pdf-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.85); z-index: 100; display: flex; flex-direction: column; }
.pdf-header { background: var(--color-surface); padding: 1rem; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); gap:.75rem; flex-wrap:wrap; }
.pdf-header h2 { margin:0; font-size:1rem; font-weight:700; }
.pdf-viewer { flex: 1; position: relative; padding: 1.5rem 1rem; display: flex; justify-content: center; align-items: stretch; min-height: 0; }
.pdf-viewer iframe { width: 100%; max-width: 900px; height: 100%; border: none; border-radius: 8px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.pdf-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; gap: .5rem; text-align:center; padding:1rem; }
.pdf-fallback { color:#fff; font-size:var(--text-sm); }
.pdf-fallback a { color:#fff; text-decoration:underline; font-weight:700; }

.mobile-nav { display: none; }
.mobile-only { display: none !important; }

@media (max-width: 760px){
  .desktop-only { display: none !important; }
  .mobile-only { display: flex !important; }

  .app { grid-template-columns: 1fr; display: flex; flex-direction: column; }
  .sidebar { display: none; } /* Ocultar sidebar tradicional */

  /* Cabecera Móvil Fija */
  .header { padding: 1rem; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
  .header h1 { font-size: 1.25rem; }
  .header-actions { margin-top: 0; gap: 0.5rem; }
  .header-actions button { padding: 0.5rem 0.75rem; font-size: 0.8rem; }

  /* Contenido Central Scrollable */
  .main { flex: 1; margin-bottom: 65px; /* Espacio para barra inferior */ }
  .content { padding: 1rem; gap: 1rem; }

  /* Menú Inferior Nativo */
  .mobile-nav {
      display: flex; position: fixed; bottom: 0; left: 0; right: 0;
      background: var(--color-surface); border-top: 1px solid var(--color-border);
      padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)) 0.5rem;
      z-index: 50; box-shadow: var(--shadow-app-bar);
      overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .mobile-nav::-webkit-scrollbar { display: none; }
  .mobile-nav button {
      flex: 1; min-width: 70px; display: flex; flex-direction: column; align-items: center;
      gap: 0.25rem; font-size: 0.65rem; color: var(--color-text-muted);
      padding: 0.5rem 0; border-radius: 0.5rem; transition: none; scroll-snap-align: start;
  }
  .mobile-nav button span:first-child { font-size: 1.25rem; }
  .mobile-nav button.active { color: var(--color-primary); font-weight: 700; background: transparent; }

  /* Ajuste de Formularios (Tarjetas Limpias en Móvil) */
  .grid.kpis { grid-template-columns: 1fr 1fr; }
  .grid.two, .grid.split, .form-grid, .form-grid.three, .form-grid.four { grid-template-columns: 1fr; }

  .line-row {
      grid-template-columns: 1fr 1fr; background: var(--color-surface);
      border: 1px solid var(--color-border); padding: 1rem; border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm); align-items: start; gap: 0.8rem;
  }
  .line-row .field:nth-child(1) { grid-column: 1 / -1; } /* Descripción ancha */
  .line-row .field:nth-child(2) { grid-column: 1 / -1; } /* Selector producto ancho */
  .line-row .remove-line { grid-column: 1 / -1; width: 100%; margin-top: 0.5rem; }

  /* Tablas y Listados Móvil */
  .list-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
  .list-table table { min-width: 600px; } /* Fuerza el scroll horizontal limpio */
  .totals { max-width: 100%; margin-top: 1rem; padding: 1rem; background: var(--color-surface-2); border-radius: var(--radius-md); }

  .login-portal { grid-template-columns: 1fr; }
  .login-cover { display: none; }
  .toast-container { bottom: 85px; right: 10px; left: 10px; }
  .pdf-viewer { padding: 0; }
  .pdf-viewer iframe { border-radius: 0; }
}