/* Lara Andalucía · Seguimiento Redur
   Estilo limpio, sutil y accesible (botones planos, sin sombras, radius ≤ 10px) */

/* ====== Tokens ====== */
:root {
  --ui-bg: #ffffff;
  --ui-card: #ffffff;
  --ui-border: #e5e7eb;
  --ui-border-strong: #e2e8f0;
  --ui-text: #0b0c0d;
  --ui-subtle: #6b7280;
  --ui-shadow: 0 8px 24px rgba(0,0,0,.06);

  /* radius reducido */
  --radius-lg: 10px;
  --radius-md: 10px;

  /* Accents */
  --accent-blue: #0a84ff;
  --accent-blue-hover: #096fe0;

  /* Superficies */
  --surface-muted: #f7f8fb;
  --surface-badge: #eef2ff;

  /* Focus ring (sutil) */
  --ring: rgba(10,132,255,.25);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --ui-bg: #0b0b0c;
    --ui-card: #121314;
    --ui-border: #202327;
    --ui-border-strong: #2a2e33;
    --ui-text: #e8e9ea;
    --ui-subtle: #a0a5ad;
    --ui-shadow: 0 10px 28px rgba(0,0,0,.4);
    --surface-muted: #17191b;
    --surface-badge: #1d2336;
    --ring: rgba(10,132,255,.35);
  }
}

/* ====== Layout / Tipografía ====== */
.lara-track {
  max-width: 820px;
  margin: 32px auto;
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ui-border);
  background: var(--ui-card);
  box-shadow: var(--ui-shadow);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ui-text);
}

.lara-track h3 {
  margin: 0 0 14px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ====== Formulario ====== */
.lara-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.lara-row input,
.lara-row select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ui-border-strong);
  background: var(--surface-muted);
  color: var(--ui-text);
  outline: none;
  transition: border .15s ease, background .15s ease;
}

.lara-row input::placeholder {
  color: color-mix(in oklab, var(--ui-subtle) 70%, var(--ui-text) 30%);
}

.lara-row input:focus,
.lara-row select:focus {
  border-color: var(--accent-blue);
  background: var(--ui-card);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ====== FONDO AMMARILLO ====== */
.lara-ref-highlight {
  background: #fff7b0;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
}




/* ====== Botones (planos, sin sombras, radius 10px) ====== */
.lara-btn {
  border: 0;
  border-radius: 10px;
  padding: 11px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  background: var(--accent-blue);
  box-shadow: none;
  transition: background-color .15s ease, opacity .15s ease;
}

.lara-btn:hover { background: var(--accent-blue-hover); }
.lara-btn:active { transform: none; }
.lara-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* Variante secondary */
.lara-btn.secondary {
  background: #2A5D51 !important;
  color: #fff;
  box-shadow: none;
  text-decoration: none !important;
  text-transform: uppercase !important;
  padding: 10px 14px;
  font-size: 1.4rem;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.lara-btn.secondary:hover { background: #216b58 !important; color: #fff !important; }

/* Botón específico: Ver en Redur */
.lara-btn-track { background: #0a84ff !important; color: #fff !important; }
.lara-btn-track:hover { background: #096fe0 !important; }

/* Copiar enlace */
.lara-btn-copy {
  background: #6b7280;
  color: white !important;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}
.lara-btn-copy:hover { 
background: #4b5563 !important; 
color:white !important;    
}

/* Grupo acciones */
.lara-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}

/* ====== Tarjetas, tablas y meta ====== */
.lara-result {
  margin-top: 18px;
  border-top: 1px dashed var(--ui-border);
  padding-top: 16px;
}

.lara-card {
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 10px 0;
  background: var(--ui-card);
  box-shadow: var(--ui-shadow);
}

.lara-meta { font-size: 13px; color: var(--ui-subtle); }

.lara-badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface-badge);
  font-weight: 600;
  font-size: 12px;
}

.lara-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 8px;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--ui-border);
  background: var(--ui-card);
}

.lara-table th,
.lara-table td {
  padding: 10px 12px;
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text);
}

.lara-table thead th { background: var(--surface-muted); font-weight: 600; }
.lara-table tr:last-child td { border-bottom: 0; }

/* Tabla: scroll en móvil sin tocar el marcado */
@media (max-width: 640px) {
  .lara-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lara-table thead, .lara-table tbody, .lara-table tr { display: table; width: 100%; table-layout: fixed; }
}

/* Código / respuesta cruda */
.lara-pre {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
}

/* Nota pequeña */
.lara-note { font-size: 12px; color: var(--ui-subtle); margin-top: 6px; }

/* ====== Accesibilidad ====== */
.lara-btn,
.lara-row input,
.lara-row select { -webkit-tap-highlight-color: transparent; }
.lara-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ====== Responsivo ====== */
@media (max-width: 860px) {
  .lara-track { margin: 24px 16px; padding: 20px; }
}

@media (max-width: 640px) {
  .lara-track { margin: 20px 12px; padding: 16px; }

  .lara-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .lara-row input,
  .lara-row select {
    padding: 12px;
    font-size: 15px;
  }

  .lara-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lara-actions .lara-btn,
  .lara-actions .lara-btn-copy,
  .lara-actions .lara-btn.secondary,
  .lara-actions .lara-btn-track {
    width: 100%;
    justify-content: center;
  }

  .lara-card { padding: 12px; }
  .lara-meta { font-size: 12px; }
  .lara-badge { font-size: 11px; padding: 5px 8px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}