/* ================================================
   La Colmena – Yobel Tracking · v4
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Rethink+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

#lcy-tracking-wrapper,
#lcy-tracking-wrapper * {
  box-sizing: border-box;
  font-family: 'Rethink Sans', sans-serif !important;
}

#lcy-tracking-wrapper {
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 0 20px 48px !important;
  font-size: 18px !important;
  color: #24170f !important;
}

/* ================================================
   FORMULARIO DE BÚSQUEDA
   ================================================ */
#lcy-search-form {
  background: #ffffff !important;
  border: 1px solid #cccccc !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  animation: lcy-fade-in .35s ease both !important;
}

.lcy-form-header {
  background: #E8DFCF !important;
  padding: 44px 48px 36px !important;
  text-align: center !important;
  border: none !important;
  border-bottom: 1px solid #cccccc !important;
  border-radius: 0 !important;
}

.lcy-form-header .lcy-icon { display: none !important; }

.lcy-form-header h2 {
  font-family: 'Italiana', Georgia, serif !important;
  font-size: 54px !important;
  font-weight: 600 !important;
  margin: 0 0 16px !important;
  color: #24170f !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: none !important;
  -webkit-text-fill-color: #24170f !important;
  /* El título no necesita límite de ancho — se centra solo */
  max-width: 100% !important;
}

.lcy-form-header p {
  margin: 0 auto !important;
  font-size: 18px !important;
  color: #24170f !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  /* Más ancho que el título pero con margen respecto al borde */
  max-width: 88% !important;
}

.lcy-form-body {
  padding: 36px 48px !important;
  background: #ffffff !important;
}

.lcy-field { margin-bottom: 22px !important; }

.lcy-field label {
  display: block !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #24170f !important;
  margin-bottom: 8px !important;
}

.lcy-field input[type="text"],
.lcy-field input[type="email"],
#lcy_order_id,
#lcy_email {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid #24170f !important;
  border-radius: 0 !important;
  font-size: 18px !important;
  font-family: 'Rethink Sans', sans-serif !important;
  color: #24170f !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  transition: box-shadow .2s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.lcy-field input:focus,
#lcy_order_id:focus,
#lcy_email:focus {
  box-shadow: 0 0 0 2px rgba(36,23,15,.12) !important;
}

.lcy-field input::placeholder,
#lcy_order_id::placeholder,
#lcy_email::placeholder {
  color: #a89880 !important;
  opacity: 1 !important;
}

#lcy_search_btn, .lcy-btn {
  display: block !important;
  width: 100% !important;
  padding: 14px !important;
  background: #E8DFCF !important;
  color: #24170f !important;
  border: 1px solid #24170f !important;
  border-radius: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-family: 'Rethink Sans', sans-serif !important;
  cursor: pointer !important;
  transition: background .2s, color .2s !important;
  text-align: center !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  margin-top: 8px !important;
}

#lcy_search_btn:hover, .lcy-btn:hover {
  background: #2a1f14 !important;
  color: #ffffff !important;
}

#lcy_search_btn:disabled, .lcy-btn:disabled {
  opacity: .6 !important;
  cursor: default !important;
}

.lcy-btn-secondary {
  display: inline-block !important;
  padding: 9px 20px !important;
  background: #E8DFCF !important;
  border: 1px solid #24170f !important;
  border-radius: 0 !important;
  color: #24170f !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: 'Rethink Sans', sans-serif !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .2s, color .2s !important;
  white-space: nowrap !important;
}

.lcy-btn-secondary:hover {
  background: #2a1f14 !important;
  color: #ffffff !important;
}

.lcy-link-btn {
  background: none !important;
  border: none !important;
  color: #24170f !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: underline !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#lcy_error_msg, .lcy-error {
  color: #8b1a1a !important;
  font-size: 16px !important;
  margin-top: 12px !important;
  text-align: center !important;
  font-weight: 500 !important;
}

/* ================================================
   RESULTADO — tarjetas con borde gris fino
   ================================================ */
#lcy-result { animation: lcy-slide-up .35s ease both; }

/* Tarjeta principal (número de pedido + guía + barra) */
.lcy-result-header {
  background: #ffffff !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 0 !important;
  padding: 28px 32px !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
}

.lcy-result-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 22px !important;
}

.lcy-order-number {
  font-family: 'Italiana', serif !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  color: #24170f !important;
  line-height: 1.2 !important;
}

.lcy-order-number span {
  font-family: 'Rethink Sans', sans-serif !important;
  font-size: 15px !important;
  color: #6b5c4e !important;
  display: block !important;
  font-weight: 400 !important;
  margin-top: 4px !important;
}

/* Badge — cambia color según estado */
.lcy-wc-badge {
  border: 1px solid #cccccc !important;
  border-radius: 0 !important;
  padding: 5px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  background: #E8DFCF !important;
  color: #24170f !important;
}

.lcy-wc-badge.badge-processing       { background: #fff8e1 !important; color: #7a5800 !important; border-color: #e0c060 !important; }
.lcy-wc-badge.badge-picked_up        { background: #e8f0fe !important; color: #1a3a7a !important; border-color: #7090d0 !important; }
.lcy-wc-badge.badge-in_transit       { background: #e6f4ea !important; color: #1a5c35 !important; border-color: #70b890 !important; }
.lcy-wc-badge.badge-out_for_delivery { background: #f0f7e6 !important; color: #2e5c1a !important; border-color: #80b050 !important; }
.lcy-wc-badge.badge-delivered        { background: #d8f0dd !important; color: #155724 !important; border-color: #60b878 !important; }
.lcy-wc-badge.badge-failed           { background: #fde8e8 !important; color: #7a1c1c !important; border-color: #d08080 !important; }
.lcy-wc-badge.badge-returned         { background: #f3eafe !important; color: #4a1a7a !important; border-color: #b090d8 !important; }

/* -- Número de guía -- */
.lcy-guide-card {
  background: #f5f0e8 !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 0 !important;
  padding: 18px 22px !important;
  margin-bottom: 22px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.lcy-guide-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #6b5c4e !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.lcy-guide-value {
  font-family: 'Courier New', monospace !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #24170f !important;
  letter-spacing: 2px !important;
  word-break: break-all !important;
  display: block !important;
}

.lcy-no-guide {
  color: #6b5c4e !important;
  font-size: 16px !important;
  font-style: italic !important;
}

/* -- Barra de progreso -- */
.lcy-progress-section { margin-bottom: 0 !important; }

.lcy-progress-label {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.lcy-status-text {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #24170f !important;
}

.lcy-progress-pct {
  font-size: 14px !important;
  color: #6b5c4e !important;
}

/* Fondo gris claro visible = total; relleno oscuro = progreso */
.lcy-progress-bar-bg {
  height: 10px !important;
  background: #ddd8d0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.lcy-progress-bar-fill {
  display: block !important;
  height: 10px !important;
  background: #24170f !important;
  border-radius: 0 !important;
  width: 0% !important;
  min-height: 10px !important;
  transition: width 1s cubic-bezier(.4,0,.2,1) !important;
  position: relative !important;
}

.lcy-progress-bar-fill.lcy-delivered   { background: #2d6a32 !important; }
.lcy-progress-bar-fill.lcy-error-state { background: #8b1a1a !important; }

/* -- Tarjeta historial -- */
.lcy-history-card {
  background: #ffffff !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  margin-bottom: 16px !important;
}

.lcy-history-title {
  padding: 18px 24px 16px !important;
  border-bottom: 1px solid #d0d0d0 !important;
  font-family: 'Italiana', serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  color: #24170f !important;
  margin: 0 !important;
  background: none !important;
}

.lcy-timeline {
  padding: 4px 24px 20px !important;
  list-style: none !important;
  margin: 0 !important;
}

.lcy-timeline li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #ede8e0 !important;
  margin: 0 !important;
}

.lcy-timeline li:last-child { border-bottom: none !important; }

.lcy-timeline-dot {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  background: #24170f !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  margin-top: 5px !important;
}

.lcy-timeline li:first-child .lcy-timeline-dot { background: #2d6a32 !important; }

.lcy-timeline-status {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #24170f !important;
  line-height: 1.3 !important;
}

.lcy-timeline-date {
  font-size: 13px !important;
  color: #6b5c4e !important;
  margin-top: 3px !important;
  display: block !important;
}

.lcy-no-history {
  padding: 20px 24px !important;
  color: #6b5c4e !important;
  font-size: 16px !important;
  font-style: italic !important;
}

.lcy-search-again {
  text-align: center !important;
  margin-top: 16px !important;
}

/* ================================================
   ANIMACIONES
   ================================================ */
@keyframes lcy-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lcy-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 600px) {
  #lcy-tracking-wrapper     { padding: 0 14px 40px !important; }
  .lcy-form-header          { padding: 32px 22px 26px !important; }
  .lcy-form-header h2       { font-size: 40px !important; }
  .lcy-form-header p        { font-size: 16px !important; }
  .lcy-form-body            { padding: 28px 22px !important; }
  .lcy-result-header        { padding: 20px 18px !important; }
  .lcy-guide-card           { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .lcy-guide-value          { font-size: 18px !important; }
  .lcy-order-number         { font-size: 26px !important; }
  .lcy-history-title        { font-size: 24px !important; padding: 14px 18px 12px !important; }
  .lcy-timeline             { padding: 4px 18px 16px !important; }
  .lcy-result-meta          { flex-direction: column !important; gap: 8px !important; }
  .lcy-history-card         { border: 1px solid #d0d0d0 !important; }
}

/* ================================================
   TIMELINE VERTICAL CON ICONOS
   ================================================ */
.lcy-history-body {
  padding: 8px 24px 24px !important;
}

.lcy-timeline-wrap {
  display: flex !important;
  flex-direction: column !important;
}

.lcy-tl-item {
  display: flex !important;
  gap: 18px !important;
  position: relative !important;
}

.lcy-tl-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  width: 44px !important;
}

.lcy-tl-icon {
  width: 42px !important;
  height: 42px !important;
  background: #f5f0e8 !important;
  border: 1px solid #d0d0d0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  z-index: 1 !important;
  position: relative !important;
}

.lcy-tl-icon-active {
  background: #24170f !important;
  border-color: #24170f !important;
  /* el emoji sigue siendo visible sobre fondo oscuro con filter */
  filter: none !important;
}

/* línea vertical entre items */
.lcy-tl-line {
  width: 2px !important;
  flex: 1 !important;
  background: #d0d0d0 !important;
  min-height: 24px !important;
  margin: 0 auto !important;
}

.lcy-tl-content {
  padding: 10px 0 24px !important;
  flex: 1 !important;
}

.lcy-tl-item.lcy-tl-last .lcy-tl-content {
  padding-bottom: 8px !important;
}

.lcy-tl-status {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #24170f !important;
  line-height: 1.3 !important;
  font-family: 'Rethink Sans', sans-serif !important;
}

.lcy-tl-item.lcy-tl-first .lcy-tl-status {
  font-size: 17px !important;
  color: #24170f !important;
}

.lcy-tl-date {
  font-size: 13px !important;
  color: #6b5c4e !important;
  margin-top: 4px !important;
  display: block !important;
  font-family: 'Rethink Sans', sans-serif !important;
}

/* Responsive timeline */
@media (max-width: 600px) {
  .lcy-history-body { padding: 8px 16px 20px !important; }
  .lcy-tl-icon      { width: 36px !important; height: 36px !important; font-size: 15px !important; }
  .lcy-tl-left      { width: 36px !important; }
  .lcy-tl-gap       { gap: 12px !important; }
}

/* ================================================
   TIMELINE VERTICAL CON ICONOS
   ================================================ */
.lcy-history-body {
  padding: 8px 24px 20px !important;
}

.lcy-timeline-wrap {
  display: flex !important;
  flex-direction: column !important;
}

.lcy-tl-item {
  display: flex !important;
  gap: 16px !important;
  position: relative !important;
  padding-bottom: 0 !important;
}

.lcy-tl-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  width: 44px !important;
}

.lcy-tl-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  border: 1px solid #d0d0d0 !important;
  background: #f5f0e8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.lcy-tl-item.lcy-tl-active .lcy-tl-icon {
  background: #24170f !important;
  border-color: #24170f !important;
  font-size: 18px !important;
}

/* Línea vertical que conecta los pasos */
.lcy-tl-line {
  width: 1px !important;
  flex: 1 !important;
  min-height: 24px !important;
  background: #d0d0d0 !important;
  margin: 4px 0 !important;
}

/* Ocultar línea en el último item */
.lcy-tl-item:last-child .lcy-tl-line {
  display: none !important;
}

.lcy-tl-body {
  padding: 8px 0 24px !important;
  flex: 1 !important;
}

.lcy-tl-status {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #24170f !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}

.lcy-tl-item.lcy-tl-active .lcy-tl-status {
  font-size: 17px !important;
  color: #24170f !important;
}

.lcy-tl-date {
  font-size: 13px !important;
  color: #6b5c4e !important;
}

/* -- Fix barra de progreso -- */
.lcy-progress-bar-bg {
  height: 10px !important;
  background: #ddd8d0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
  position: relative !important;
}

.lcy-progress-bar-fill {
  display: block !important;
  height: 10px !important;
  min-height: 10px !important;
  background: #24170f !important;
  border-radius: 0 !important;
  width: 0 !important;
  max-width: 100% !important;
  transition: width 1.2s cubic-bezier(.4,0,.2,1) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.lcy-progress-bar-fill.lcy-delivered   { background: #2d6a32 !important; }
.lcy-progress-bar-fill.lcy-error-state { background: #8b1a1a !important; }

/* Responsive timeline */
@media (max-width: 600px) {
  .lcy-history-body { padding: 8px 16px 16px !important; }
  .lcy-tl-icon      { width: 34px !important; height: 34px !important; font-size: 16px !important; }
  .lcy-tl-left      { width: 36px !important; }
  .lcy-tl-body      { padding-bottom: 18px !important; }
}