/* ═══════════════════════════════════════════════════════════
   ACOLDREP — Frontend CSS  v2.0
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --g1: #0a1a0d;
  --g2: #122118;
  --g3: #183322;
  --green:  #1e7a35;
  --green2: #2d9e4a;
  --lime:   #4fcb6a;
  --gold:   #f0b429;
  --gold2:  #e08800;
  --red:    #e53e3e;
  --white:  #f5fdf7;
  --muted:  rgba(255,255,255,0.45);
  --border: rgba(255,255,255,0.08);
  --panel:  rgba(255,255,255,0.04);
  --panel2: rgba(255,255,255,0.07);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 8px 40px rgba(0,0,0,0.45);
  --edit-bg: #0d2415;
  --edit-border: rgba(45,158,74,0.35);
}

/* ── Base ───────────────────────────────────────────────────── */
.acoldrep-wrap *,
.acoldrep-wrap *::before,
.acoldrep-wrap *::after { box-sizing: border-box; }

.acoldrep-wrap {
  font-family: 'Barlow', sans-serif;
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 12px 20px;
  color: var(--white);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ccircle cx='35' cy='35' r='28' fill='none' stroke='%232d9e4a' stroke-width='1' stroke-dasharray='4 4' opacity='0.1'/%3E%3Cpath d='M35 10L35 60M10 35L60 35' stroke='%232d9e4a' stroke-width='0.5' opacity='0.07'/%3E%3C/svg%3E"),
    linear-gradient(155deg, #122118 0%, #0a1a0d 45%, #060f08 100%);
  border-radius: 18px;
  box-shadow: var(--shadow);
  position: relative;
}

/* ── TOP BAR ────────────────────────────────────────────────── */
.acol-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}

.acol-logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acol-logo-icon { font-size: 30px; line-height: 1; }

.acol-brand {
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  line-height: 1;
}

.acol-tagline {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.acol-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* botón modo edición */
.acol-btn-edit-mode {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  color: var(--muted);
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
}
.acol-btn-edit-mode:hover,
.acol-btn-edit-mode.active {
  background: rgba(240,180,41,0.12);
  border-color: var(--gold);
  color: var(--gold);
}
.acol-btn-edit-mode.active .edit-label::after { content: ' ON'; }

/* botón generar */
.acol-btn-generate {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  border: none;
  border-radius: 50px;
  color: #111;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(240,180,41,0.38);
  transition: all 0.2s;
  white-space: nowrap;
}
.acol-btn-generate:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(240,180,41,0.5); }

/* ── TABS ───────────────────────────────────────────────────── */
.acol-tab-switcher {
  display: flex;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 12px;
}

.acol-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border: none;
  border-radius: 50px;
  background: transparent;
  color: var(--muted);
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}
.acol-tab.active {
  background: var(--green);
  color: #fff;
  box-shadow: 0 2px 12px rgba(30,122,53,0.45);
}

/* ── MODO BANNER ────────────────────────────────────────────── */
.acol-mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  padding: 6px 12px;
  background: rgba(240,180,41,0.07);
  border: 1px solid rgba(240,180,41,0.18);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

.acol-date-badge {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 400;
}

/* ── LISTA ──────────────────────────────────────────────────── */
.acol-price-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
  gap: 10px;
}

/* Categoría */
.acol-category {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.acol-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: linear-gradient(90deg, var(--green), var(--green2));
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--lime);
}
.cat-count {
  background: rgba(255,255,255,0.18);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  letter-spacing: 0;
  font-weight: 500;
}

/* Item */
.acol-item {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.acol-item:last-child { border-bottom: none; }
.acol-item:hover { background: var(--panel2); }

/* Fila principal */
.acol-item-row {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  gap: 6px;
}

.acol-item-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  line-height: 1.3;
}

.acol-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.acol-item-price {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
}

.price-rec, .price-bod { display: none; }
.price-rec.active, .price-bod.active { display: inline; }

/* Destacados */
.acol-item[data-dest-rec="1"] .price-rec.active { color: var(--red) !important; }
.acol-item[data-dest-rec="1"] .price-rec.active ~ .acol-item-name,
.acol-item[data-dest-rec="1"].show-rec .acol-item-name { color: var(--red) !important; }

.acol-item[data-dest-bod="1"] .price-bod.active { color: var(--red) !important; }

/* Aplica rojo al nombre también cuando está destacado en modo activo */
.mode-recogiendo .acol-item[data-dest-rec="1"] .acol-item-name { color: var(--red); }
.mode-bodega     .acol-item[data-dest-bod="1"] .acol-item-name { color: var(--red); }

/* ── BOTÓN EDITAR ITEM ──────────────────────────────────────── */
.acol-edit-trigger {
  display: none; /* se muestra solo en modo edición */
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s;
  line-height: 1;
  padding: 0;
}
.acol-edit-trigger:hover {
  background: rgba(240,180,41,0.15);
  border-color: var(--gold);
  color: var(--gold);
}

/* Mostrar trigger cuando modo edición está activo */
.edit-mode-on .acol-edit-trigger { display: flex; }

/* ── PANEL EDICIÓN ──────────────────────────────────────────── */
.acol-edit-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1);
}
.acol-edit-panel.open { max-height: 320px; }

.acol-edit-inner {
  padding: 10px 10px 12px;
  background: var(--edit-bg);
  border-top: 1px solid var(--edit-border);
}

/* Grid campos */
.acol-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.acol-edit-field { display: flex; flex-direction: column; gap: 3px; }
.acol-edit-field.full { grid-column: 1 / -1; }

.acol-edit-field label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lime);
  font-weight: 600;
  font-family: 'Oswald', sans-serif;
}

.acol-edit-field input[type="text"],
.acol-edit-field input[type="number"],
.acol-edit-field select {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 7px 10px;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.18s;
  width: 100%;
  -moz-appearance: textfield;
}
.acol-edit-field input::-webkit-outer-spin-button,
.acol-edit-field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.acol-edit-field input:focus,
.acol-edit-field select:focus { border-color: var(--lime); }
.acol-edit-field select option { background: #122118; }

/* Toggles destacado */
.acol-edit-toggles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.acol-hl-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.acol-hl-label input[type="checkbox"] { display: none; }

.acol-hl-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 50px;
  border: 1.5px solid rgba(229,62,62,0.3);
  background: rgba(229,62,62,0.07);
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.18s;
  cursor: pointer;
  user-select: none;
}
.acol-hl-label input:checked + .acol-hl-pill {
  background: rgba(229,62,62,0.2);
  border-color: var(--red);
  color: var(--red);
}

/* Footer del panel edición */
.acol-edit-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.acol-btn-save-item,
.acol-btn-cancel-item,
.acol-btn-delete-item {
  padding: 7px 14px;
  border: none;
  border-radius: 6px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.18s;
}
.acol-btn-save-item   { background: var(--green2); color: #fff; }
.acol-btn-save-item:hover { background: #27883e; }
.acol-btn-cancel-item { background: rgba(255,255,255,0.07); color: var(--muted); }
.acol-btn-cancel-item:hover { background: rgba(255,255,255,0.12); color: #fff; }
.acol-btn-delete-item { background: rgba(229,62,62,0.12); color: var(--red); border: 1px solid rgba(229,62,62,0.25); }
.acol-btn-delete-item:hover { background: var(--red); color: #fff; }

.acol-save-msg {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}
.acol-save-msg.ok  { background: rgba(45,158,74,0.2); color: var(--lime); opacity: 1; }
.acol-save-msg.err { background: rgba(229,62,62,0.2); color: var(--red); opacity: 1; }

/* ── SECCIÓN AGREGAR ────────────────────────────────────────── */
.acol-add-section {
  margin-top: 14px;
}

.acol-btn-add-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  background: rgba(255,255,255,0.04);
  border: 1.5px dashed rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}
.acol-btn-add-toggle:hover,
.acol-btn-add-toggle.open {
  border-color: var(--lime);
  color: var(--lime);
  background: rgba(79,203,106,0.05);
}
.add-plus { font-size: 18px; line-height: 1; }

.acol-add-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1);
}
.acol-add-panel.open { max-height: 340px; }

.acol-add-inner {
  background: var(--edit-bg);
  border: 1px solid var(--edit-border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 14px;
}

.acol-add-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.acol-add-footer button {
  padding: 9px 22px;
  background: linear-gradient(135deg, var(--green), var(--green2));
  border: none;
  border-radius: 6px;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.18s;
}
.acol-add-footer button:hover { opacity: 0.88; }

#acol-add-msg {
  font-size: 12px;
  font-weight: 600;
  color: var(--lime);
  min-height: 16px;
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.acol-footer-info {
  text-align: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.acol-phone {
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 3px;
}
.acol-footer-sub {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── MODAL ──────────────────────────────────────────────────── */
.acol-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(8px);
}
.acol-modal.open { display: flex; animation: acol-fadein 0.2s ease; }

@keyframes acol-fadein { from { opacity:0; transform:scale(0.97); } to { opacity:1; transform:scale(1); } }

.acol-modal-inner {
  background: var(--g2);
  border: 1px solid var(--green2);
  border-radius: 16px;
  padding: 20px;
  width: 600px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 70px rgba(0,0,0,0.65);
}

.acol-modal-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex; align-items: center; justify-content: center;
}
.acol-modal-close:hover { background: var(--red); color: #fff; border-color: var(--red); }

.acol-modal-title {
  font-family: 'Oswald', sans-serif;
  font-size: 17px;
  color: var(--gold);
  margin-bottom: 14px;
  text-align: center;
  letter-spacing: 1px;
}

#acol-img-container img {
  width: 100%;
  border-radius: 8px;
  display: block;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.acol-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.acol-btn-share, .acol-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 28px;
  border-radius: 50px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s;
}
.acol-btn-share    { background: var(--green2); color: #fff; box-shadow: 0 3px 14px rgba(45,158,74,0.4); }
.acol-btn-download { background: var(--gold); color: #111; box-shadow: 0 3px 14px rgba(240,180,41,0.4); }
.acol-btn-share:hover, .acol-btn-download:hover { transform: translateY(-2px); opacity: 0.9; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .acoldrep-wrap    { padding: 10px 8px 16px; border-radius: 12px; }
  .acol-topbar      { flex-wrap: wrap; }
  .acol-tab         { font-size: 11.5px; padding: 8px 10px; }
  .acol-price-list  { grid-template-columns: 1fr; gap: 8px; }
  .acol-item-name   { font-size: 12px; }
  .acol-item-price  { font-size: 12.5px; }
  .acol-edit-grid   { grid-template-columns: 1fr; }
  .acol-edit-field.full { grid-column: 1; }
  .acol-brand       { font-size: 17px; }
}

@media (max-width: 400px) {
  .acol-btn-generate .btn-label { display: none; }
  .acol-topbar-right { gap: 6px; }
}