/* ==========================================================================
   La Fresa · panel admin
   Usa los tokens de la tienda (assets/css/styles.css): rojo de marca en el
   header, crema de fondo, Aristotelica en todo el texto funcional.
   ========================================================================== */
.admin-body { background: var(--cream-100); }

/* ---------- ingreso ---------- */
.admin-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--red); }
.admin-login__card {
  width: min(400px, 100%); padding: clamp(24px, 5vw, 36px);
  background: var(--white); border-radius: var(--radius-lg); text-align: center;
  box-shadow: 0 18px 48px rgba(35,34,29,.2);
}
.admin-login__logo { width: auto; height: 120px; margin: 0 auto 18px; }
.admin-login__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--red); font-size: 28px; line-height: 1; }
.admin-login__lead { margin-top: 8px; color: var(--ink-soft); font-size: 15px; line-height: 1.4; }
.admin-login__form { margin-top: 20px; display: grid; gap: 16px; text-align: left; }
.admin-login__back { display: inline-block; margin-top: 16px; color: var(--ink-soft); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- estructura ---------- */
.admin-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 12px clamp(16px, 3vw, 28px);
  background: var(--red); color: var(--white);
}
.admin-header__brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.admin-header__brand img { width: auto; height: 34px; }
.admin-header__brand h1 { font-size: 17px; line-height: 1.2; }
.admin-mode { padding: 5px 12px; border-radius: 999px; font-size: 12px; line-height: 1; }
.admin-mode--remote { background: var(--lime); color: var(--green-dark); }
.admin-mode--local  { background: rgba(255,255,255,.18); color: var(--white); }

.admin-main { max-width: 1200px; margin-inline: auto; padding: clamp(18px, 3vw, 32px) clamp(16px, 3vw, 28px) 64px; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.admin-search { position: relative; flex: 1; min-width: 220px; }
.admin-search .icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ink-soft); pointer-events: none; }
.admin-search input { width: 100%; min-height: 44px; padding: 0 16px 0 42px; border: 0; border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: 15px; box-shadow: inset 0 0 0 1.5px var(--line); }
.admin-search input:focus { outline: 3px solid var(--green); outline-offset: 2px; }
.admin-count { margin: 16px 0 10px; color: var(--ink-soft); font-size: 14px; }
.admin-error { margin-bottom: 14px; padding: 12px 16px; border-radius: var(--radius-sm); background: #FDECEA; color: var(--red-dark); font-size: 14px; }

/* ---------- tabla ---------- */
.admin-table { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.admin-row {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 52px minmax(0, 1.5fr) minmax(0, 1.5fr) 96px;
  padding: 12px clamp(12px, 2vw, 20px);
}
.admin-row__meta { display: grid; grid-template-columns: minmax(0, 1fr) 104px 64px; align-items: center; gap: 12px; }
.admin-row + .admin-row { border-top: 1px solid var(--line); }
.admin-row--head { background: var(--cream-100); color: var(--ink-soft); font-size: 13px; }
.admin-row--off { opacity: .55; }
.admin-row__img { width: 52px; height: 52px; border-radius: 10px; background: var(--card); overflow: hidden; display: grid; place-items: center; }
.admin-row__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.admin-row__name { font-size: 16px; line-height: 1.25; }
/* Unidad y oferta comparten una línea propia debajo del nombre, siempre
   presente, para que todas las filas midan lo mismo y el mismo dato se lea
   siempre igual. */
.admin-row__sub { display: flex; align-items: center; gap: 8px; min-height: 19px; margin-top: 2px; }
.admin-row__sub small { color: var(--ink-soft); font-size: 12px; }
.admin-row__cat { display: inline-block; justify-self: start; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: var(--cream); color: var(--ink); font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-row__price { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.admin-row__offer { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--red); font-size: 12px; }
.admin-row__offer .icon { width: 12px; height: 12px; }
.admin-row__actions { display: flex; justify-content: flex-end; gap: 6px; }
.admin-icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--cream-100); color: var(--ink); transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.admin-icon-btn:hover { background: var(--cream); }
.admin-icon-btn--danger:hover { background: var(--red); color: var(--white); }
.admin-icon-btn .icon { width: 17px; height: 17px; }
.admin-empty { padding: 40px 20px; text-align: center; color: var(--ink-soft); font-size: 15px; }
.admin-empty .btn { margin-top: 14px; }

/* switch */
.admin-switch { position: relative; display: inline-block; width: 44px; height: 26px; }
.admin-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.admin-switch__track { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background-color var(--dur) var(--ease-out); }
.admin-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: transform var(--dur) var(--ease-out); }
.admin-switch input:checked + .admin-switch__track { background: var(--green); }
.admin-switch input:checked + .admin-switch__track::after { transform: translateX(18px); }
.admin-switch input:focus-visible + .admin-switch__track { outline: 3px solid var(--green); outline-offset: 2px; }

/* ---------- modales ---------- */
.admin-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(35,34,29,.45); display: grid; place-items: start center; overflow-y: auto; padding: 24px 16px; }
.admin-modal { width: min(560px, 100%); background: var(--white); border-radius: var(--radius-lg); box-shadow: 0 18px 48px rgba(35,34,29,.22); }
.admin-modal--wide { width: min(720px, 100%); }
.admin-modal__head { padding: 20px clamp(18px, 3vw, 26px) 0; }
.admin-modal__head h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--red); font-size: 23px; line-height: 1.05; }
.admin-modal__body { display: grid; gap: 16px; padding: 18px clamp(18px, 3vw, 26px); }
.admin-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 clamp(18px, 3vw, 26px) 22px; }
.admin-field { display: grid; gap: 6px; }
.admin-field--row { grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-label { color: var(--ink-soft); font-size: 13px; line-height: 1.2; }
.admin-input {
  width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius-sm);
  background: var(--cream-100); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--line); caret-color: var(--red);
  -webkit-appearance: none; appearance: none;
}
textarea.admin-input { min-height: 76px; padding: 12px 14px; line-height: 1.4; resize: vertical; }
.admin-input:focus { outline: 3px solid var(--green); outline-offset: 2px; }
.admin-input--err { box-shadow: inset 0 0 0 2px var(--red); }
.admin-hint { color: var(--ink-soft); font-size: 12px; line-height: 1.35; }
.admin-hint--err { color: var(--red); }
.admin-hint--good { color: var(--green); }
.admin-preview { width: 84px; height: 84px; border-radius: 10px; background: var(--card); object-fit: contain; mix-blend-mode: multiply; }
.admin-photo { display: flex; align-items: center; gap: 14px; }
.admin-photo__preview { flex: none; width: 84px; height: 84px; border-radius: 10px; background: var(--card); display: grid; place-items: center; overflow: hidden; }
.admin-photo__empty { padding: 0 6px; color: var(--ink-soft); font-size: 11px; line-height: 1.3; text-align: center; }
.admin-photo__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-photo__actions .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
.admin-inline { display: flex; align-items: center; gap: 12px; }
.admin-inline span { font-size: 14px; }

.admin-offer-row { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; }
.admin-offer-row__arrow { color: var(--ink-soft); font-size: 14px; }
.admin-offer { padding: 12px; border-radius: var(--radius-sm); background: var(--cream-100); }
.admin-offer + .admin-offer { margin-top: 8px; }
.admin-section { padding: 14px; border-radius: var(--radius-sm); background: var(--cream-100); display: grid; gap: 12px; }
.admin-section__title { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 14px; }
.admin-section__title .icon { width: 17px; height: 17px; }

@media (max-width: 860px) {
  /* Una sola fila por producto, siempre de la misma altura: nombre y oferta a la
     izquierda, área, precio y el switch de visible debajo, y los dos botones
     centrados al final. Es la pantalla donde se cambia un precio con el pulgar. */
  .admin-row {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "img name actions" "img meta actions";
    align-items: center; row-gap: 6px; column-gap: 12px;
  }
  .admin-row__img { grid-area: img; width: 48px; height: 48px; align-self: center; }
  .admin-row__name { grid-area: name; align-self: end; }
  .admin-row__meta {
    grid-area: meta; align-self: start;
    /* El área se recorta con puntos suspensivos antes de partir el precio en
       dos líneas: así todas las filas miden lo mismo. */
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  }
  .admin-row__price { text-align: right; }
  .admin-row__actions { grid-area: actions; align-self: center; }
  .admin-row--head { display: none; }
  .admin-field--row { grid-template-columns: 1fr; }
}

/* Cartel de confirmación propio: reemplaza al confirm() del navegador. */
.admin-confirm { width: min(440px, 100%); }
.admin-confirm__text { color: var(--ink); font-size: 15px; line-height: 1.45; }
.admin-confirm:focus { outline: none; }
/* Sobre el rojo el anillo verde no contrasta: ahí se usa el blanco. */
.admin-confirm .btn--red:focus-visible, .btn--red:focus-visible { outline-color: var(--white); }

/* Cada sucursal es un bloque con su nombre, su dirección y su horario. */
.admin-branch { display: grid; gap: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.admin-branch + .admin-branch { margin-top: 10px; }
.admin-branch__num { color: var(--green); font-size: 13px; }

/* Cada zona de envío es un bloque con su nombre, su costo y su descripción,
   más un botón para quitarla: mismo cajón que una sucursal, pero eliminable. */
.admin-zone { display: grid; gap: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.admin-zone + .admin-zone { margin-top: 10px; }
.admin-zone__head { display: flex; align-items: center; justify-content: space-between; }

/* Grilla semanal de franjas de reparto. */
.admin-slots { display: grid; gap: 6px; }
.admin-slots__head, .admin-slots__row { display: grid; grid-template-columns: 92px 1fr 1fr; align-items: center; gap: 8px; }
.admin-slots__head { color: var(--ink-soft); font-size: 12px; }
.admin-slots__row span { font-size: 14px; }
.admin-slots__row .admin-input { min-height: 38px; font-size: 14px; }