/* =====================================================================
   MiesApp — AJUSTES (panel de Configuración)  [feature aislada]
   ===================================================================== */

/* La tuerca usa la base .bk de los otros botones del header; nada extra. */

/* Lista de secciones del menú de config */
.cfg-menu { display: flex; flex-direction: column; }
/* El sheet-body tiene padding-top 16px y el primer ítem otros 14px → quedaba un
   hueco exagerado bajo el título del menú. Lo compensamos para el menú (Avisar,
   el + de Caja, Configuración): el primer ítem queda cerca de la línea del header. */
.sheet-body > .cfg-menu:first-child { margin-top: -14px; }
.cfg-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 2px;
  background: none; border: none; border-bottom: 1px solid var(--border);
  cursor: pointer; text-align: left; font-family: inherit;
}
.cfg-item:last-child { border-bottom: none; }
.cfg-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--surf); color: var(--sec);
  display: flex; align-items: center; justify-content: center;
}
/* Tints para el selector de Caja (Cobro/Pago/Recibo). */
.cfg-ico.ok   { background: var(--okbg);  color: var(--ok); }
.cfg-ico.bad  { background: var(--badbg); color: var(--bad); }
.cfg-ico.mies { background: #2684ff14;    color: var(--mies); }
.cfg-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cfg-t { font-size: 15px; font-weight: 600; color: var(--text); }
.cfg-s { font-size: 12.5px; color: var(--muted); }
.cfg-chev { flex: 0 0 auto; color: var(--muted); display: flex; }

/* ---- Reservas: editor de disponibilidad ---- */
.rlink { display: flex; gap: 8px; }
.rlink input { flex: 1; min-width: 0; }
.rlink-btn { flex: 0 0 auto; height: 40px; border: 1px solid var(--border); background: var(--surf); color: var(--text);
  font-family: inherit; font-weight: 600; font-size: 13.5px; border-radius: var(--rad); padding: 0 16px; cursor: pointer; }
.rlink-btn:active { transform: scale(.96); }
.rlink-btn.logo-del { background: none; color: var(--bad); }
.rdia { padding: 8px 0; border-bottom: 1px solid var(--border); }
.rdia:last-child { border-bottom: none; }
.rdia-h { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
/* Restaurar el checkbox nativo (el reset global le pone appearance:none). */
.rdia-h input[type="checkbox"], .rchk input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto; width: 20px; height: 20px;
  border: none; border-radius: 0; background: none; accent-color: var(--mies); flex: 0 0 auto;
}
.rdia-fr { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px 28px; }
.rfr { display: flex; align-items: center; gap: 8px; }
.rfr input { flex: 1; min-width: 0; height: 42px; }
.rfr span { color: var(--muted); font-size: 13px; }
.rchk { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text); margin: 6px 0 16px; cursor: pointer; }
.rchk input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }

/* Volver del formulario al menú */
.cfg-back {
  border: none; background: none; font-family: inherit;
  color: var(--mies); font-size: 14px; font-weight: 600;
  padding: 0 0 14px; cursor: pointer;
}

/* Logo del perfil (para recibos) */
.logo-row { display: flex; align-items: center; gap: 14px; }
.logo-prev { flex: 0 0 auto; width: 64px; height: 64px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-ph { font-size: 11px; color: var(--muted); }
.logo-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.logo-del { color: var(--bad, #d64545); }