/* =====================================================================
   TOKENS DE DISEÑO — Gestión de Facturación
   Paleta pensada como "libro de control de operaciones": azul acero para
   confianza/estructura, verde para estados resueltos, ámbar/rojo reservados
   estrictamente para alertas (no decoración). Tipografía: IBM Plex Sans
   para texto, IBM Plex Mono para códigos de OT/factura/remisión — el
   monoespaciado refuerza que son identificadores exactos, como en un
   manifiesto de despacho real.
   ===================================================================== */

:root {
  --color-bg: #F4F6F8;
  --color-surface: #FFFFFF;
  --color-sidebar: #0F2130;
  --color-sidebar-hover: #1A3245;
  --color-ink: #16232E;
  --color-ink-soft: #5B6B78;
  --color-border: #E1E7EA;

  /* Azul principal: tomado directamente del engranaje del logo de Sermotor (#0E91C7) */
  --color-primary: #0E91C7;
  --color-primary-dark: #0A6E97;
  --color-primary-soft: #E2F2FA;

  --color-success: #1F8A5F;
  --color-success-soft: #E5F5EE;
  /* Ámbar/naranja: tomado del casco del logo (#FDBE55), llevado a un tono con buen contraste sobre blanco */
  --color-warning: #C97A1E;
  --color-warning-soft: #FCEEDA;
  --color-danger: #C4453D;
  --color-danger-soft: #FBEAE9;
  --color-neutral-soft: #EDF1F3;

  /* Colores de "Ubicación de la OT" */
  --color-ubicacion-lila: #7C5CBF;
  --color-ubicacion-lila-soft: #EFE9FA;
  --color-ubicacion-gerencia: #B8791F;
  --color-ubicacion-gerencia-soft: #FCEEDA;
  --color-ubicacion-auditoria: #1B7A8C;
  --color-ubicacion-auditoria-soft: #E1F1F4;
  --color-ubicacion-archivo: #5B6B78;
  --color-ubicacion-archivo-soft: #EAEDEF;

  --font-display: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-card: 0 1px 2px rgba(18, 24, 38, 0.06), 0 1px 8px rgba(18, 24, 38, 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
  font-size: 14px;
}

.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

/* ---- Botones ---- */
.btn {
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: var(--color-neutral-soft); color: var(--color-ink); }
.btn-secondary:hover { background: #E2E5EA; }
.btn-block { width: 100%; }

/* ---- Tarjetas ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* ---- Pills de estado de OT (el elemento "firma" de la interfaz) ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill-pendiente-salir     { background: var(--color-neutral-soft); color: var(--color-ink-soft); }
.pill-pendiente-cotizar   { background: var(--color-warning-soft); color: var(--color-warning); }
.pill-cotizado-sin-entrega{ background: var(--color-warning-soft); color: var(--color-warning); }
.pill-cotizado-con-salida { background: var(--color-primary-soft); color: var(--color-primary); }
.pill-facturado            { background: var(--color-success-soft); color: var(--color-success); }
.pill-devuelta              { background: var(--color-danger-soft); color: var(--color-danger); }
.pill-garantia               { background: var(--color-warning-soft); color: var(--color-warning); }
.pill-ubicacion-planta               { background: var(--color-neutral-soft); color: var(--color-ink-soft); }
.pill-ubicacion-auditoria-inventario { background: var(--color-ubicacion-auditoria-soft); color: var(--color-ubicacion-auditoria); }
.pill-ubicacion-gestion-de-facturacion { background: var(--color-ubicacion-lila-soft); color: var(--color-ubicacion-lila); }
.pill-ubicacion-revision-por-la-gerencia { background: var(--color-ubicacion-gerencia-soft); color: var(--color-ubicacion-gerencia); }
.pill-ubicacion-archivo              { background: var(--color-ubicacion-archivo-soft); color: var(--color-ubicacion-archivo); }

/* ---- Tabla de datos ---- */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data-table th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  background: #FAFBFC;
}
table.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
table.data-table tbody tr:hover { background: #FAFBFC; }

/* ---- Layout de la app (sidebar + contenido) ---- */
.app-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  height: 100vh;
}

.sidebar {
  background: var(--color-sidebar);
  color: #C7CCD6;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
}
.sidebar .brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  padding: 0 10px 20px;
  letter-spacing: 0.01em;
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: #AEB4C0;
  text-decoration: none;
  cursor: pointer;
}
.sidebar .nav-item:hover { background: var(--color-sidebar-hover); color: #fff; }
.sidebar .nav-item.active { background: var(--color-sidebar-hover); color: #fff; }
.sidebar .nav-section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6C7382;
  padding: 16px 10px 6px;
}
.sidebar .spacer { flex: 1; }
.sidebar .user-box {
  border-top: 1px solid #262E40;
  padding-top: 12px;
  font-size: 12.5px;
  color: #8890A0;
}
.sidebar .user-box strong { color: #fff; display: block; font-size: 13px; }

.content { overflow-y: auto; padding: 28px 32px; }
.content-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.content-header h1 { font-family: var(--font-display); font-size: 20px; margin: 0; }
.content-header .subtitle { color: var(--color-ink-soft); font-size: 13px; margin-top: 2px; }