/* ===========================================================================
   Panel "Datos del restaurante"  ·  admin y colaborador

   Este panel nacio con TODOS los estilos escritos dentro del HTML
   (style="..." en cada campo). Eso lo hacia imposible de adaptar al celular:
   una regla de @media no le gana a un estilo incrustado salvo a punta de
   !important. Por eso aqui viven las clases y el HTML solo las nombra.

   La hoja tambien trae .mini-switch, que antes solo existia en
   /admin-nuevo/carta.css: el panel del colaborador nunca cargaba ese archivo,
   asi que sus interruptores (modalidades, metodos de pago, dias de horario)
   salian como texto suelto con un cuadrito vacio al lado.

   Escritorio arriba, celular abajo en un solo @media. La regla de oro del
   bloque de celular: campos de 16px, porque por debajo de eso iOS hace zoom
   solo al tocarlos y saca al usuario de su lugar.
   =========================================================================== */

/* ── interruptores (compartidos) ─────────────────────────────────────────── */
.mini-switch{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;cursor:pointer;user-select:none}
.mini-switch i{width:34px;height:20px;border-radius:999px;background:var(--line);padding:3px;flex:none;transition:background .16s ease}
.mini-switch i:after{content:"";display:block;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .16s ease}
.mini-switch.on i{background:var(--wine)}
.mini-switch.on i:after{transform:translateX(14px)}
.mini-switch[data-bloqueada]{cursor:not-allowed}

/* ── la tarjeta ──────────────────────────────────────────────────────────── */
.ngp{padding:14px 16px;margin-bottom:16px}

/* encabezado: titulo, explicacion y acciones */
.ngp-hd{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.ngp-tt{font:700 14px Georgia,"Times New Roman",serif;letter-spacing:.1px}
.ngp-sub{font-size:12px;color:var(--muted);flex:1 1 250px}
.ngp-hd-acc{display:flex;gap:8px;margin-left:auto}
.ngp-hd-acc .btn{font-size:11.5px;padding:3px 10px}

/* identidad: logo + campos principales */
.ngp-id{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.ngp-logo-col{text-align:center}
.ngp-logo{width:66px;height:66px;border-radius:16px;border:1px dashed var(--line);cursor:pointer;
  background:var(--bg) center/cover no-repeat;padding:0;color:var(--muted);font:inherit;font-size:11px;
  display:grid;place-items:center;flex:none}
.ngp-logo.tiene{border-style:solid}
.ngp-logo-ay{display:none}
.ngp-campos{flex:1;min-width:min(100%,230px);display:grid;gap:9px}

/* un campo con su etiqueta encima */
.ngp-c{display:block}
.ngp-lbl{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.ngp-in{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--bg);
  color:inherit;padding:0 12px;font:inherit;outline:none;transition:border-color .14s ease,box-shadow .14s ease}
.ngp-in:focus{border-color:var(--wine);box-shadow:0 0 0 3px var(--wine-soft)}
textarea.ngp-in{height:auto;padding:9px 12px;resize:vertical;line-height:1.45}
.ngp-in:disabled{opacity:.5;cursor:not-allowed}

/* etiqueta que envuelve a su campo (las secciones plegables lo usan asi) */
.ngp-w{display:block;font-size:11.5px;color:var(--muted)}
.ngp-w .ngp-in{display:block;margin-top:4px;height:38px;border-radius:9px;padding:0 10px}

.ngp-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
.ngp-todo{grid-column:1/-1}

/* ── secciones plegables ─────────────────────────────────────────────────── */
.ngp-sec{border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:var(--card)}
.ngp-sec>summary{cursor:pointer;font-size:13px;font-weight:700;list-style:none;display:flex;
  align-items:center;gap:8px;position:relative;padding-right:22px}
.ngp-sec>summary::-webkit-details-marker{display:none}
/* punta que gira: sustituye al triangulo del navegador, que es diminuto */
.ngp-sec>summary:after{content:"";position:absolute;right:2px;top:50%;width:7px;height:7px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease}
.ngp-sec[open]>summary:after{transform:translateY(-25%) rotate(225deg)}
.ngp-sec>summary .muted{font-weight:400}
.ngp-cuerpo{padding-top:11px}
.ngp-secs{display:grid;gap:9px;margin-top:14px}

.ngp-rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:9px}
.ngp-pila{display:grid;gap:11px}
.ngp-fila{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.ngp-chips{display:flex;gap:7px;flex-wrap:wrap}
.ngp-rot{font-size:11.5px;color:var(--muted);margin-bottom:6px}

/* zonas de entrega y promociones: filas de varios campos */
.ngp-caja{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:10px}
.ngp-zona{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:7px;
  align-items:end;padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.ngp-zona .ngp-in{height:36px;border-radius:8px;padding:0 8px;background:var(--card)}
.ngp-zona .ngp-w{font-size:10.5px}
.ngp-zona .ngp-w .ngp-in{margin-top:3px}
.ngp-promo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:7px;align-items:center}
.ngp-promo .ngp-in{height:36px;border-radius:8px;padding:0 8px}
.ngp-vacio{font-size:11.5px;color:var(--muted);padding:12px;border:1px dashed var(--line);
  border-radius:10px;text-align:center}

/* boton de quitar: en escritorio solo la cruz, en celular con su nombre */
.ngp-quitar{color:var(--danger,#A33B4B);height:36px;padding:0 8px;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ngp-quitar-tx{display:none}

/* horarios */
.ngp-dia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,105px),1fr));gap:8px;align-items:center}
.ngp-hora{height:34px;border:1px solid var(--line);border-radius:8px;background:var(--bg);
  color:inherit;padding:0 7px;font:inherit;outline:none;min-width:0}
.ngp-hora:focus{border-color:var(--wine)}
.ngp-hora:disabled{opacity:.45}

/* aviso de guardado */
.ngp-estado{font-size:12px;color:var(--muted);min-height:16px;margin:9px 0 0}


/* piezas sueltas del panel */
.ngp-sello{font-size:12px}
.ngp-nota{font-size:11.5px;color:var(--muted);margin:0}
.ngp-ayuda{align-self:end;padding:10px 12px;border:1px dashed var(--line);border-radius:9px;
  font-size:11.5px;color:var(--muted);line-height:1.4}
.ngp-lista{display:grid;gap:8px}
.ngp-agregar{border-style:dashed;justify-content:center;font-size:12px}
.ngp-peligro{color:var(--danger,#A33B4B)}
.ngp-logo-quitar{font-size:11px;padding:2px 8px;margin-top:6px;color:var(--danger,#A33B4B)}
.ngp-fila-top{align-items:flex-start}
.ngp-fila-tx{flex:1;min-width:min(100%,220px)}
.ngp-fila-tx strong{font-size:12.5px}
.ngp-fila-tx .ngp-nota{margin-top:3px}
.ngp-solo{width:max-content}
.ngp-sec>summary .muted{font-weight:400;color:var(--muted)}
/* un textarea dentro de una etiqueta no debe heredar el alto fijo del input */
.ngp-w textarea.ngp-in{height:auto;padding:9px 10px;line-height:1.45}

/* =========================================================================
   CELULAR
   Una sola columna, campos de 16px (para que iOS no haga zoom al tocarlos)
   y area de toque de 48px, que es lo minimo comodo para un pulgar.
   ========================================================================= */
@media (max-width:720px){
  .ngp{padding:14px 13px}

  /* el encabezado deja de pelear por una sola linea */
  .ngp-hd{display:block;margin-bottom:14px}
  .ngp-tt{display:block;font-size:16px;margin-bottom:3px}
  .ngp-sub{display:block;font-size:12.5px;line-height:1.45;margin-bottom:11px}
  .ngp-hd-acc{margin-left:0;gap:8px}
  .ngp-hd-acc .btn{flex:1;justify-content:center;font-size:13px;padding:0;height:40px}

  /* el logo pasa a ser una tira con su nombre, en vez de un cuadro sin explicar */
  .ngp-id{display:grid;gap:13px}
  .ngp-logo-col{display:flex;align-items:center;gap:12px;text-align:left;width:100%}
  .ngp-logo{width:58px;height:58px;border-radius:14px}
  .ngp-logo-ay{display:block;font-size:13px;font-weight:700;line-height:1.3}
  .ngp-logo-ay small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:2px}
  .ngp-logo-col .btn{margin-top:0}
  .ngp-campos{min-width:0;gap:12px}

  /* nada de dos columnas: no caben dos campos utiles en 390px */
  .ngp-duo,.ngp-rejilla,.ngp-promo,.ngp-zona{grid-template-columns:1fr}

  .ngp-lbl,.ngp-w{font-size:13px}
  .ngp-in,.ngp-w .ngp-in,.ngp-zona .ngp-in,.ngp-promo .ngp-in{
    height:48px;font-size:16px;border-radius:11px;padding:0 13px}
  textarea.ngp-in{height:auto;padding:11px 13px}
  .ngp-zona .ngp-w{font-size:12.5px}

  /* secciones plegables: renglon alto y facil de atinarle */
  .ngp-sec{padding:0;border-radius:13px}
  .ngp-sec>summary{padding:15px 34px 15px 14px;font-size:14.5px;min-height:52px}
  .ngp-sec>summary:after{right:15px;width:8px;height:8px}
  .ngp-cuerpo{padding:0 14px 14px}
  .ngp-secs{gap:10px}

  /* interruptores del tamano de un dedo */
  .mini-switch{font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;
    background:var(--bg);width:100%}
  .mini-switch.on{border-color:var(--wine);background:var(--wine-soft)}
  .ngp-chips{display:grid;gap:8px}

  /* quitar zona o promocion: boton ancho y con su nombre, no una cruz suelta */
  .ngp-quitar{width:100%;height:44px;border:1px solid var(--line);border-radius:11px;font-size:13.5px}
  .ngp-quitar-tx{display:inline}

  /* horarios: el dia manda su propio renglon y las horas van a la par */
  .ngp-dia{grid-template-columns:1fr 1fr;gap:9px}
  .ngp-dia .mini-switch{grid-column:1/-1}
  .ngp-hora{height:46px;font-size:16px;border-radius:10px;padding:0 10px}

  .ngp-caja{padding:13px}
  .ngp-fila .btn{flex:1 1 100%;justify-content:center;height:44px}

  /* el aviso de guardado se queda pegado abajo: si no, en un panel tan largo
     el "Guardado" aparece a dos pantallas de distancia y nunca se ve */
  .ngp-estado{position:sticky;bottom:0;margin:12px -13px -14px;padding:11px 13px;
    background:var(--card);border-top:1px solid var(--line);font-size:13px}
  .ngp-estado:empty{display:none}

  .ngp-sello{display:block;margin-bottom:8px}
  .ngp-w textarea.ngp-in{height:auto;padding:11px 13px}
  .ngp-ayuda{align-self:stretch;font-size:13px;padding:12px 13px}
  .ngp-nota{font-size:12.5px;line-height:1.45}
  .ngp-agregar{width:100%;height:46px;font-size:14px}
  .ngp-fila-top{display:block}
  .ngp-fila-top .ngp-agregar{margin-top:11px}
  .ngp-fila-tx strong{font-size:14px}
  .ngp-solo{width:100%}
  .ngp-logo-quitar{margin-top:0;margin-left:auto;font-size:12.5px;padding:8px 12px}
  .ngp-lista{gap:10px}
}