/* YonkeNet — Mobile-first CSS */
:root {
  --bg: #f5f5f5;
  --bg-card: #ffffff;
  --text: #1a1a2e;
  --text-muted: #666;
  --accent: #e94560;
  --accent-hover: #d63851;
  --success: #2ecc71;
  --warning: #f39c12;
  --danger: #e74c3c;
  --border: #e0e0e0;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Layout ===== */
#app {
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: 80px; /* espacio para nav inferior */
}

.page { padding: 16px; display: none; }
.page.active { display: block; }

/* ===== Header ===== */
.header {
  background: var(--text);
  color: white;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.header .user-info {
  font-size: 12px;
  opacity: 0.7;
}

/* ===== Bottom Nav ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: white;
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav a {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: color 0.15s;
}
.bottom-nav a.active { color: var(--accent); }
.bottom-nav a .icon { font-size: 22px; }

/* ===== Cards ===== */
.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px; /* para dedos de mecánico, con guantes o manos sucias */
  padding: 14px 24px;
  border: none;
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  touch-action: manipulation;
}
.btn + .btn { margin-top: 14px; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:active { background: var(--accent-hover); transform: scale(0.98); }
.btn-secondary { background: var(--border); color: var(--text); }
.btn-danger { background: var(--danger); color: white; }
.btn-success { background: var(--success); color: white; }
.btn-sm { min-height: 48px; padding: 10px 18px; font-size: 15px; width: auto; }
.btn-whatsapp { background: #25D366; color: white; }
.btn-whatsapp:active { background: #1DA851; transform: scale(0.98); }

/* ===== Forms ===== */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px; /* evita zoom en iOS */
  background: white;
  transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ===== Switches (para partes) ===== */
.part-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.part-item:last-child { border-bottom: none; }
.part-item .part-name { font-size: 15px; flex: 1; padding-right: 12px; }
.part-item .part-years { font-size: 12px; color: var(--text-muted); }

.switch {
  position: relative;
  width: 52px;
  height: 30px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.2s;
}
.switch .slider::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background: var(--success); }
.switch input:checked + .slider::before { transform: translateX(22px); }

/* ===== Category headers ===== */
.category-header {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  padding: 12px 0 4px;
  margin-top: 8px;
}

/* ===== Category accordion ===== */
/* Barras oscuras (mismo azul del encabezado); el rojo queda solo para acciones */
.category-group { margin-bottom: 8px; }
.category-toggle {
  width: 100%;
  background: #1a1a2e;
  color: #ffffff;
  border: none;
  border-left: 6px solid #1a1a2e;
  border-radius: 10px;
  padding: 14px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  touch-action: manipulation;
}
.category-toggle .category-name {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.category-toggle .category-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.category-toggle .category-count {
  background: rgba(255,255,255,0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
}
.category-toggle .category-arrow {
  display: inline-block;
  font-size: 12px;
  transition: transform 0.15s;
}
/* Abierta: línea roja a la izquierda, se queda fija arriba mientras bajas por sus partes */
.category-toggle.open {
  border-left-color: var(--accent);
  border-radius: 10px 10px 0 0;
  position: sticky;
  top: var(--header-h, 56px);
  z-index: 50;
}
.category-toggle.open .category-arrow { transform: rotate(90deg); }
.category-body {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 0 12px 4px 18px;
}
.category-body .part-item:last-child { border-bottom: none; }

/* ===== Status badges ===== */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.badge-available { background: #d5f5e3; color: #1e8449; }
.badge-sold { background: #fadbd8; color: #c0392b; }
.badge-damaged { background: #fdebd0; color: #e67e22; }
.location-badge {
  background: #e8eaf6;
  color: #3949ab;
  flex-shrink: 0;
  font-family: monospace;
  letter-spacing: 0.5px;
}
.demo-badge {
  background: #fff3cd;
  color: #946200;
  font-size: 10px;
  vertical-align: middle;
}

/* ===== Vehicle list ===== */
.vehicle-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform 0.1s;
}
.vehicle-item:active { transform: scale(0.98); }
.vehicle-item .vehicle-info { flex: 1; min-width: 0; }
.vehicle-item .vehicle-info h3 { font-size: 16px; margin-bottom: 2px; }
.vehicle-item .vehicle-info p { font-size: 13px; color: var(--text-muted); }
.vehicle-item .vehicle-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: var(--border);
  flex-shrink: 0;
  object-fit: cover;
}

/* ===== Scan page ===== */
.scan-area {
  background: var(--text);
  border-radius: var(--radius);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}
.scan-area video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scan-area.scanning {
  height: auto;
  min-height: 200px;
  display: block;
}
#scan-reader { width: 100%; }

/* ===== Login ===== */
.login-container {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-container .logo {
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 8px;
}
.login-container .tagline {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.login-box {
  width: 100%;
  max-width: 360px;
}

/* ===== Misc ===== */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
}
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }

/* ===== Loading ===== */
.loading {
  display: flex;
  justify-content: center;
  padding: 40px;
}
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.toast.show { opacity: 1; }

/* ===== Photo grid ===== */
.photo-card {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.1s;
}
.photo-card:active { transform: scale(0.98); }
.photo-card .photo-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
}
.photo-card .photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-card .photo-info h4 { font-size: 15px; margin-bottom: 2px; }
.photo-card .photo-info p { font-size: 12px; color: var(--text-muted); }
.photo-card .photo-status {
  margin-left: auto;
  font-size: 20px;
}

/* ===== Photo strip (in vehicle detail) ===== */
.photos-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0 12px;
  -webkit-overflow-scrolling: touch;
}
.photos-strip .strip-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--border);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
}
.photos-strip .strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Part detail ===== */
.part-photo-area {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  cursor: pointer;
}
.part-photo-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.part-photo-area .placeholder {
  text-align: center;
  color: var(--text-muted);
}
.part-photo-area .placeholder .icon { font-size: 48px; }

/* ===== Sale confirmation modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 16px;
}
.modal {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 360px;
}
.modal h3 { font-size: 18px; margin-bottom: 12px; }
.modal .btn + .btn { margin-top: 14px; }

/* ===== Action buttons row ===== */
.action-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.action-row .btn { flex: 1; }
.action-row .btn + .btn { margin-top: 0; }
.action-row { gap: 12px; }
.mini-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }

/* ===== Ordenar vehículos ===== */
.sort-select {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 15px;
}

/* ===== Borrar foto ===== */
.photo-delete {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 20px;
  padding: 6px 10px;
  cursor: pointer;
}

/* ===== Años compatibles: confirmado / estimado / verificar ===== */
.years-status { font-size: 13px; margin: 4px 0 8px; padding: 6px 10px; border-radius: 8px; }
.years-status.confirmed { background: #e8f8ef; color: #1e7a46; }
.years-status.estimated { background: #f2f2f2; color: var(--text-muted); }
.years-status.check { background: #fff4e0; color: #8a5300; }

/* ===== Modo sol: alto contraste y letra más grande para usar bajo el sol ===== */
.sun-toggle {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 8px;
  font-size: 18px;
  padding: 4px 8px;
  cursor: pointer;
}
body.sun {
  --bg: #ffffff;
  --bg-card: #ffffff;
  --text: #000000;
  --text-muted: #1a1a1a;
  --accent: #c0002a;
  --accent-hover: #99001f;
  --border: #000000;
  --shadow: none;
  font-weight: 600;
}
body.sun #app { zoom: 1.12; }
body.sun .card,
body.sun .vehicle-item,
body.sun .part-item,
body.sun .category-toggle,
body.sun .photo-card { border: 2px solid #000; }
body.sun .sun-toggle { background: #ffd400; }
body.sun .text-muted,
body.sun .years-status.estimated { color: #1a1a1a; }
body.sun .btn-secondary { background: #ffffff; color: #000000; border: 2px solid #000000; }
body.sun .btn-success,
body.sun .btn-whatsapp { background: #157a3c; color: #ffffff; }
body.sun .btn-danger { background: #b3261e; color: #ffffff; }

/* ===== Filtros de búsqueda ===== */
.search-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.search-filters .sort-select { margin-bottom: 0; }
.search-filters .clear-filters { grid-column: 1 / -1; }

/* ===== Lista de carros: ubicación + fecha de llegada ===== */
.vehicle-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.arrival-date { font-size: 12px; color: var(--text-muted); font-weight: 600; }
body.sun .category-toggle { border: 2px solid #000; border-left: 6px solid #000; }
body.sun .category-toggle.open { border-left-color: var(--accent); }
/* #app va con zoom en modo sol: compensar para que la barra quede pegada al encabezado */
body.sun .category-toggle.open { top: calc(var(--header-h, 56px) / 1.12); }

/* ===== Enlace "¿Olvidaste el PIN?" ===== */
.link-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
}