:root {
  --primary: #FF441F;
  --primary-dark: #c63c1d;
  --secondary: #EBB045;
  --blue: #213F99;
  --success: #31EC56;
  --text: #222222;
}

/* Base theme */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
}
.bg-pattern-soft {
  background-image: url('fondo_patron_comida.png');
  background-repeat: repeat;
  background-size: 220px 220px;
  background-position: center;
  background-color: #f7f6f6;
  background-blend-mode: lighten;
}

.logo {
  height: 48px;
  width: auto;
}

/* Buttons */
.btn-verde { background-color: var(--primary); }
.btn-verde:hover { background-color: var(--primary-dark); }
.btn-verde:disabled { background-color: #cccccc; cursor: not-allowed; }
.btn-rojo { background-color: var(--primary); }
.btn-rojo:hover { background-color: var(--primary-dark); }
.btn-azul { background-color: #213F99; }
.btn-azul:hover { background-color: #1a337a; }
.btn-whatsapp { background: #25D366; }

/* Layout helpers */
.media-banner { width: 100%; max-height: 160px; }
.media-image { aspect-ratio: 5 / 4; max-height: 160px; }
.hidden-panel { display: none; }
.badge-count { min-width: 20px; }
.cropper-area { min-height: 300px; max-height: 70vh; }
.coords-box { display: none; margin: 20px 0; }
.map-container { display: none; margin-top: 15px; }
.map-frame { border: 0; border-radius: 10px; }
.error-inline { display: none; }
.card-comercio { transition: transform 0.3s, box-shadow 0.3s; }
.card-comercio:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12); }
.fade-in-place { opacity: 0; animation: fadeInPlace 0.5s ease-out forwards; }
@keyframes fadeInPlace { from { opacity: 0; } to { opacity: 1; } }
.slide-in-right { opacity: 0; transform: translateX(200px); animation: slideInRight 2s ease-out forwards; }
@keyframes slideInRight { from { opacity: 0; transform: translateX(400px); } to { opacity: 1; transform: translateX(0); } }
.slide-delay-120 { animation-delay: 0ms; }
.skeleton-card { background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); }
.skeleton-animate { position: relative; overflow: hidden; background: #e5e7eb; }
.skeleton-animate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); animation: shimmer 1.2s infinite; transform: translateX(-100%); }
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton-card-sm { background: #ffffff; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); }
.badge-bounce { animation: badgeBounce 0.5s ease; }
@keyframes badgeBounce { 0% { transform: scale(1); } 30% { transform: scale(1.25); } 60% { transform: scale(0.92); } 100% { transform: scale(1); } }
.footer-licandelivery { background: #FF441F; color: #ffffff; }
.footer-licandelivery a { color: #ffffff; }
.footer-licandelivery a:hover { text-decoration: underline; }
.share-floating { position: fixed; inset-inline: 0; bottom: 72px; display: flex; justify-content: center; z-index: 50; }
.share-floating button { background: #10b981; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.18); animation: bobbing 2.6s ease-in-out infinite; }
@keyframes bobbing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.comercio-card { border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.04); }
.comercio-media { border-radius: 12px; overflow: hidden; border: 1px solid #f3f4f6; max-width: 220px; margin: 0 auto; }
.media-banner-sm { width: 100%; height: 150px; object-fit: cover; }
.resumen-card { border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 10px 24px rgba(0,0,0,0.05); overflow: hidden; }
.resumen-card .media-banner-sm { max-width: 340px; margin: 0 auto; }
.resumen-actions { gap: 10px; flex-wrap: wrap; justify-content: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.pill-red { background: #fee2e2; color: #b91c1c; }

/* Toasts and notifications */
.notificacion { position: fixed; top: 20px; right: 20px; animation: slideIn 0.3s ease-out; z-index: 1000; background: var(--primary); }
@keyframes slideIn { from { transform: translateX(400px); } to { transform: translateX(0); } }
.toast-container { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 2000; pointer-events: none; }
.toast { min-width: 260px; max-width: 320px; background-color: #1f2937; color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25); opacity: 0; transform: translateY(-15px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: auto; font-weight: 600; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { border-left: 4px solid #31EC56; }
.toast-error { border-left: 4px solid #ef4444; }
.toast-warning { border-left: 4px solid #f59e0b; }
.toast-info { border-left: 4px solid #3b82f6; }

/* Modals */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: none; z-index: 1000; align-items: center; justify-content: center; }
.modal.active { display: flex; }
.modal-content { background: white; border-radius: 10px; padding: 20px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; }
.modal-content-wide { max-width: 900px; width: 95%; }
#modal-cropper { z-index: 1100; }
.modal-backdrop { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); display: none; z-index: 50; align-items: center; justify-content: center; }
.modal-backdrop.active { display: flex; }
.pedido-modal { border-radius: 15px; padding: 40px; text-align: center; animation: modalSlideIn 0.3s ease-out; }
@keyframes modalSlideIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-open { overflow: hidden; }

/* Horarios y tabs */
.horario-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.horario-dia { min-width: 32px; font-weight: 700; color: #1f2937; }
.horario-horas { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.horario-input { width: 100%; max-width: 110px; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
.horario-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #4b5563; white-space: nowrap; }
.tab-inactive { border-b-0; color: #9ca3af; }
.tab-active { border-b-2; border-color: var(--primary); color: #222222; }

/* Badges */
.badge { display: inline-block; padding: 4px 8px; border-radius: 20px; font-size: 12px; font-weight: bold; }
.badge-pendiente { background-color: #fef08a; color: #854d0e; }
.badge-confirmado { background-color: #d1fae5; color: #065f46; }
.badge-en_camino { background-color: #dbeafe; color: #0c4a6e; }
.badge-para_entregar { background-color: #cffafe; color: #155e75; }
.badge-asignado { background-color: #ccfbf1; color: #0f766e; }
.badge-entregado { background-color: #bbf7d0; color: #065f46; }
.badge-cancelado { background-color: #fee2e2; color: #7f1d1d; }

/* Estados (cards y filtros) */
.estado-card { border: 1px solid transparent; display: flex; flex-direction: column; }
.estado-card .estado-label { font-size: 0.65rem; text-transform: capitalize; letter-spacing: 0.02em; }
.estado-card .estado-value { margin-top: auto; }
.estado-card .estado-footer { margin-top: auto; }
.estado-card .estado-label,
.estado-card .estado-value,
.estado-card .estado-subvalue { color: inherit; }
.estado-card-pendiente { background-color: #fef08a; border-color: #fef08a; color: #854d0e; }
.estado-card-confirmado { background-color: #d1fae5; border-color: #d1fae5; color: #065f46; }
.estado-card-en_camino { background-color: #dbeafe; border-color: #dbeafe; color: #0c4a6e; }
.estado-card-para_entregar { background-color: #cffafe; border-color: #cffafe; color: #155e75; }
.estado-card-asignado { background-color: #ccfbf1; border-color: #ccfbf1; color: #0f766e; }
.estado-card-entregado { background-color: #bbf7d0; border-color: #bbf7d0; color: #065f46; }
.estado-card-cancelado { background-color: #fee2e2; border-color: #fee2e2; color: #7f1d1d; }
.estado-btn { border: 1px solid transparent; }
.estado-btn-pendiente { background-color: #fef08a; border-color: #fef08a; color: #854d0e; }
.estado-btn-confirmado { background-color: #d1fae5; border-color: #d1fae5; color: #065f46; }
.estado-btn-en_camino { background-color: #dbeafe; border-color: #dbeafe; color: #0c4a6e; }
.estado-btn-para_entregar { background-color: #cffafe; border-color: #cffafe; color: #155e75; }
.estado-btn-asignado { background-color: #ccfbf1; border-color: #ccfbf1; color: #0f766e; }
.estado-btn-entregado { background-color: #bbf7d0; border-color: #bbf7d0; color: #065f46; }
.estado-btn-cancelado { background-color: #fee2e2; border-color: #fee2e2; color: #7f1d1d; }

.preview-imagen { max-width: 200px; max-height: 200px; margin: 10px auto; display: none; }

/* Login base */
.base-body { font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f6f7fb; color: #1f2933; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.base-body .card { background: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); max-width: 520px; width: 100%; padding: 2.5rem 2rem; }
.base-body .card__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.base-body .card__title { margin: 0; font-size: 1.6rem; font-weight: 600; }
.base-body .status { padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; background: #e2e8f0; color: #1f2933; }
.base-body .status--ok { background: #d1fae5; color: #047857; }
.base-body .status--warn { background: #fee2e2; color: #b91c1c; }
.base-body .user-data dt { font-weight: 600; margin-top: 1.25rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.base-body .user-data dd { margin: 0.5rem 0 0; font-size: 1.05rem; color: #111827; word-break: break-word; }
.base-body .actions { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.base-body .button { border: none; padding: 0.75rem 1.5rem; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 1rem; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.base-body .button--primary { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; box-shadow: 0 10px 24px rgba(79, 70, 229, 0.35); }
.base-body .button--ghost { background: transparent; color: #374151; border: 1px solid #d1d5db; }
.base-body .button:focus { outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25); }
.base-body .button:active { transform: scale(0.98); }
.base-body .hidden { display: none !important; }
.base-body .token-hint { font-size: 0.85rem; color: #6b7280; }

/* Login router/dashboard */
.router-body { font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f6f7fb; color: #1f2933; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2rem; padding: 6rem 2rem 2rem; box-sizing: border-box; }
.router-body .page-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; background: #fff; border-radius: 0; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12); padding: 1rem 2rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; z-index: 100; }
.router-body .page-header__inner { width: 100%; max-width: 1100px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.router-body .page-header__left { font-size: 1.25rem; font-weight: 600; color: #1f2937; }
.router-body .page-header__right { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.router-body .page-header__item { font-size: 0.95rem; color: #374151; white-space: nowrap; }
.router-body .page-header__form { margin: 0; }
.router-body .page-header__item--alert { color: #b91c1c; font-weight: 600; }
.router-body .card { background: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); max-width: 560px; width: 100%; padding: 2.5rem 2rem; }
.router-body .card__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.router-body .card__title { margin: 0; font-size: 1.6rem; font-weight: 600; }
.router-body .status { padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; background: #fee2e2; color: #b91c1c; }
.router-body .status--ok { background: #d1fae5; color: #047857; }
.router-body dl { margin: 0; }
.router-body dt { font-weight: 600; margin-top: 1.25rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.router-body dd { margin: 0.5rem 0 0; font-size: 1.05rem; color: #111827; word-break: break-word; }
.router-body pre { background: #f3f4f6; padding: 1rem; border-radius: 8px; overflow-x: auto; }
.router-body .actions { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.router-body .button { border: none; padding: 0.75rem 1.5rem; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 1rem; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.router-body .button--primary { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; box-shadow: 0 10px 24px rgba(79, 70, 229, 0.35); }
.router-body .button--ghost { background: transparent; color: #374151; border: 1px solid #d1d5db; }
.router-body .button:focus { outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25); }
.router-body .button:active { transform: scale(0.98); }
.router-body .modal-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(2px); z-index: 300; }
.router-body .modal-overlay--visible { display: flex; }
.router-body .modal-dialog { background: #ffffff; border-radius: 16px; max-width: 420px; width: 100%; padding: 2rem; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2); text-align: center; }
.router-body .modal-dialog__title { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 600; color: #111827; }
.router-body .modal-dialog__message { margin: 0 0 2rem; font-size: 1rem; color: #374151; }
.router-body .modal-dialog__actions { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.router-body .modal-dialog--payments { max-width: 720px; text-align: left; }
.router-body .modal-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.router-body .modal-dialog__close { background: transparent; border: none; color: #6b7280; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0.25rem; transition: color 0.15s ease; }
.router-body .modal-dialog__close:hover,
.router-body .modal-dialog__close:focus { color: #111827; }
.router-body .modal-dialog__message--error { color: #b91c1c; font-weight: 600; }
.router-body .modal-dialog__actions--align-right { justify-content: flex-end; }
.router-body .payments-table-wrapper { max-height: 320px; overflow: auto; margin: 1.5rem 0; }
.router-body .payments-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.router-body .payments-table th,
.router-body .payments-table td { padding: 0.75rem 0.5rem; border-bottom: 1px solid #e5e7eb; text-align: left; }
.router-body .payments-table th { font-weight: 600; color: #4b5563; background: #f9fafb; }
.router-body .payments-table tbody tr:nth-child(even) { background: #f9fafb; }
.router-body .payments-table__empty { margin: 1.5rem 0; text-align: center; color: #6b7280; }
.router-body .payments-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: #e5e7eb; color: #1f2937; text-transform: capitalize; }
.router-body .payments-badge--exitoso { background: #d1fae5; color: #047857; }
.router-body .payments-badge--fallido { background: #fee2e2; color: #b91c1c; }
.router-body .payments-badge--pendiente { background: #fef3c7; color: #92400e; }
.router-body .payments-badge--cancelado { background: #e2e8f0; color: #475569; }
.router-body .payments-badge--reembolsado { background: #ede9fe; color: #5b21b6; }
.router-body .hidden { display: none !important; }
.router-body .page-footer { width: 100%; max-width: 900px; text-align: center; color: #ffffff; font-size: 0.9rem; background: #FF441F; border-radius: 0; }
.router-body .page-footer p { margin: 0; }