/* ═══════════════════════════════════════════════════════════════════════════
   AYR HUB — PRINCIPIOS DE INTERFAZ
   Se carga después de enterprise.css. Corrige el problema de fondo: había cajas
   dentro de cajas (encabezado, filtros, tarjetas, etapas), y el dato quedaba
   encerrado en cuatro niveles de contenedores.

   Reglas que sigue, tomadas de cómo lo resuelven Linear y los sistemas B2B
   densos (Stripe, Datadog, Retool):

   1. "No compitas por atención que no te ganaste." El chrome retrocede; el
      contenido manda. Menos bordes, menos cajas, menos color decorativo.
   2. "La estructura se siente, no se ve." Separar con espacio y cambios de
      fondo sutiles, no con marcos. Las líneas al mínimo contraste útil.
   3. "El dato ES la interfaz." Todo lo que no sea dato o acción sobre el dato
      se reduce o desaparece.
   4. Maestro-detalle: la lista y el detalle conviven, no se salta de pantalla.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Líneas al mínimo contraste que sigue siendo legible. Antes había #dfe3e8
     en todos lados; eso dibuja una cuadrícula sobre el dato. */
  --line:      #e8ebef;
  --line-2:    #f1f3f6;
  --line-3:    #d7dce2;
  --panel-3:   #f7f8fa;

  /* Un solo radio para todo. La variedad de radios es ruido. */
  --radius:    6px;
  --radius-lg: 6px;
  --radius-xl: 8px;
}

/* ═══════════════════ EL CHROME RETROCEDE ═══════════════════════════════ */

/* El sidebar deja de competir: fondo más apagado, texto inactivo más tenue. */
:root {
  --sidebar-bg:      #171d26;
  --sidebar-hover:   #212936;
  --sidebar-ink:     #c8cdd4;
  --sidebar-muted:   #7d8794;
  --sidebar-section: #5c6675;
  --sidebar-active-bg: #212936;
}
.sidebar { border-right: 0; }
.nav-item { color: var(--sidebar-ink); font-size: 13px; }
.nav-item:hover { background: var(--sidebar-hover); }
.nav-item.is-active { color: #fff; }
.sidebar-brand { border-bottom: 0; padding-bottom: var(--sp-3); }

/* La barra superior deja de ser una franja con borde: sólo se separa con aire. */
.topbar {
  border-bottom: 1px solid var(--line-2);
  background: var(--bg);
}
.role-pill { border-color: transparent; background: var(--panel-3); }

/* ═══════════════════ SIN CAJAS ALREDEDOR DEL DATO ══════════════════════ */

/* El encabezado de página no necesita marco ni fondo. */
.sd-header { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--sp-4); }
.sd-header h1 { font-size: 20px; font-weight: 650; }

/* A todo lo ancho: se quita el ancho máximo de lectura para que la tabla llegue
   hasta las orillas, y el espaciado lateral se reduce. */
.page-content, .view > .card, .view > div[style*="margin"] {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.app-content { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }

/* Los filtros dejan de ser un panel: son una franja sobre el contenido. */
.sd-filters, .vr-tools, .filters {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 var(--sp-3) !important;
  border-bottom: 1px solid var(--line-2) !important;
  margin-bottom: var(--sp-4) !important;
  gap: var(--sp-4) !important;
}
.sd-filters > label, .vr-tools > label, .filters > label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  gap: 4px;
}
.sd-filters input, .sd-filters select,
.vr-tools input, .vr-tools select,
.filters input, .filters select,
.filter-search {
  border-color: var(--line-3) !important;
  background: var(--panel) !important;
}
.filter-search { background: var(--panel) !important; }

/* Las etapas dejan de ser un control con caja: son pestañas con subrayado. */
.sd-stages {
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--line-2) !important;
  width: 100% !important;
  background: transparent !important;
  margin-bottom: var(--sp-4) !important;
  gap: var(--sp-5) !important;
}
.sd-stages button {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 4px 0 8px !important;
  gap: 6px !important;
  margin-bottom: -1px;
}
.sd-stages button:hover { background: transparent !important; color: var(--ink) !important; }
.sd-stages button[aria-pressed="true"] {
  background: transparent !important;
  color: var(--ink) !important;
  border-bottom-color: var(--primary) !important;
}
.sd-stages button[aria-pressed="true"] strong { color: var(--primary) !important; }

/* El aviso deja de ser una caja con filete: una línea de texto con un punto. */
.sd-notice, .notice, .quick-note {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 var(--sp-3) !important;
  color: var(--muted) !important;
  font-size: var(--fs-sm) !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sd-notice::before, .notice::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}

/* La tabla: sólo líneas horizontales tenues. Sin marco, sin caja. */
.sd-cards, .table-wrap, .orders-table-wrap {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
/* La columna del folio se distingue con un realce sutil, no con una caja. */
.sd-card > .sd-folio,
.sd-card-top > .sd-folio {
  font-weight: 700 !important;
  color: var(--primary) !important;
  font-size: 12px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* La flecha del botón sobra cuando ya hay columna de acciones. */
@media (min-width: 761px) {
  .sd-open span[aria-hidden="true"] { display: none; }
  .sd-open { white-space: nowrap; }
}
.sd-cards-head {
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sd-card {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-bottom: 1px solid var(--line-2) !important;
  background: transparent !important;
}
.sd-card:hover { background: var(--panel-3) !important; }
table thead th {
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  padding-left: 0 !important;
}
table thead th:first-child { padding-left: var(--sp-2) !important; }
table tbody td { padding-left: 0; border-bottom: 1px solid var(--line-2); }
table tbody td:first-child { padding-left: var(--sp-2); }
table tbody tr:hover td { background: var(--panel-3); }

/* Las tarjetas (vehículos, paneles) bajan a una línea tenue, sin sombra. */
.vr-card, .card, .panel, .sd-panel, .metric-card {
  border-color: var(--line) !important;
  background: var(--panel);
}
.metric-card { border: 0 !important; border-left: 2px solid var(--line-3) !important; border-radius: 0 !important; background: transparent; padding-left: var(--sp-4) !important; }
.metric-card.accent-red   { border-left-color: var(--red) !important; }
.metric-card.accent-blue  { border-left-color: var(--primary) !important; }
.metric-card.accent-amber { border-left-color: var(--amber) !important; }
.metric-card.accent-green { border-left-color: var(--green) !important; }
.vr-stats > div { border: 0 !important; border-left: 2px solid var(--line-3) !important; border-radius: 0 !important; background: transparent; padding-left: var(--sp-4) !important; }

/* El panel lateral del expediente: fondo distinto, sin marco. */
.sd-panel { border: 0 !important; background: transparent; padding: 0 var(--sp-4) 0 0 !important; }
.sd-detail-grid > aside.sd-panel { border-left: 1px solid var(--line-2) !important; padding-left: var(--sp-4) !important; padding-right: 0 !important; }
.sd-detail-grid > main.sd-panel { padding-right: var(--sp-4) !important; }

/* Los formularios dentro del expediente: filas, no cajas apiladas. */
.sd-panel input, .sd-panel select, .sd-panel textarea {
  border-color: var(--line-3) !important;
  background: var(--panel) !important;
}
.sd-save { border-top-color: var(--line-2) !important; }

/* Botones: menos peso. El secundario pierde el borde marcado. */
.btn-secondary { background: transparent; border-color: var(--line-3); color: var(--ink-2); }
.btn-secondary:hover { background: var(--panel-3); border-color: var(--line-3); color: var(--ink); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { background: var(--panel-3); }

/* ═══════════════════ MAESTRO-DETALLE EN ESCRITORIO ═════════════════════
   En pantallas anchas, el expediente se abre como panel lateral sobre la lista,
   en lugar de saltar a otra pantalla. Así se ve el contexto y se vuelve rápido. */

@media (min-width: 1200px) {
  .sd-detail-grid {
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: var(--sp-6);
  }
}

/* La lista se lee como tabla: filas altas sólo cuando hacen falta dos líneas. */
.sd-card { min-height: 44px; }
.sd-card > h2 { font-size: 13px !important; font-weight: 600; }
.sd-customer { font-size: var(--fs-sm) !important; }

/* El folio y el estado pierden su caja: son texto con color. */
.sd-folio {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: var(--fs-sm) !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}
.vr-plate {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: var(--fs-base) !important;
  color: var(--ink) !important;
}

/* ═══════════════════ CELULAR ══════════════════════════════════════════ */

@media (max-width: 760px) {
  /* En celular sí conviene la tarjeta: es un dedo, no un puntero. */
  .sd-cards { display: grid !important; grid-template-columns: 1fr !important; gap: var(--sp-2) !important; }
  .sd-cards-head { display: none !important; }
  .sd-card {
    display: block !important;
    padding: var(--sp-3) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: var(--panel) !important;
    min-height: 0;
  }
  .sd-card-top { display: flex !important; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .sd-meta { display: flex !important; }
  .sd-card > .sd-folio, .sd-card-top > .sd-folio { display: inline-flex !important; }
  .sd-folio { font-size: var(--fs-sm) !important; }
  .sd-open { width: 100% !important; margin-top: var(--sp-2) !important; }
  .sd-card > details { margin-top: 6px; }
  .sd-detail-grid { grid-template-columns: 1fr !important; }
  .sd-detail-grid > aside.sd-panel { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line-2) !important; padding-top: var(--sp-4) !important; }
  .sd-stages { gap: var(--sp-4) !important; }
}