/* ── TOKENS: DARK (default) ── */
:root {
  --bg-rgb: 26, 18, 18;
  --bg:         #1d0c0c;
  --card:       #261212;
  --card2:      #2e1919;
  --border:     rgba(239,68,68,0.18);
  --border2:    rgba(239,68,68,0.12);
  --border3:    rgba(239,68,68,0.07);
  --text:       #f5e6e6;
  --text2:      #c28080;

  --text3:      #935353;
  --text4:      #6d4646;
  --label:      #c28080;
  --accent:     #ef4444;
  --accent2:    #eb1414;
  --accent-dim: rgba(239,68,68,0.18);
  --header-bg:  rgba(239,68,68,0.10);
  --chip-bg:    rgba(239,68,68,0.08);
  --stat-bg:    rgba(239,68,68,0.06);
  --section-hd: rgba(239,68,68,0.05);

  /* Gradiente del botón primario — derivado del acento */
  --accent-gradient-from: #f55b5b;
  --accent-gradient-to:   #d81313;
  --badge-ok-bg:    rgba(134,234,134,0.16);
  --badge-ok-color: #86ea86;
  --badge-ok-border:rgba(134,234,134,0.35);

  /* Overlays — fijos, no dependen del color primario */
  --overlay-dark:   rgba(0,0,0,0.85);
  --overlay-medium: rgba(0,0,0,0.60);
  --overlay-light:  rgba(0,0,0,0.50);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-rgb: 252, 240, 240;
    --bg:         #faf5f5;
    --card:       #ffffff;
    --card2:      #f5efef;
    --border:     rgba(231,35,35,0.15);
    --border2:    rgba(231, 35, 35, 0.10);
    --border3:    rgba(231,35,35,0.06);
    --text:       #1c0a0a;
    --text2:      #913030;
    --text3:      #ba5e5e;
    --text4:      #c89898;
    --label:      #ba5e5e;
    --accent:     #e72323;
    --accent2:    #d31717;
    --accent-dim: rgba(231,35,35,0.10);
    --header-bg:  rgba(231,35,35,0.08);
    --chip-bg:    rgba(231,35,35,0.07);
    --stat-bg:    rgba(231,35,35,0.05);
    --section-hd: rgba(231,35,35,0.04);

    --accent-gradient-from: #f22121;
    --accent-gradient-to:   #c51111;

    --overlay-dark:   rgba(0,0,0,0.85);
    --overlay-medium: rgba(0,0,0,0.60);
    --overlay-light:  rgba(0,0,0,0.50);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root { --font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html, body { font-family: var(--font); }
input, button, select, textarea { font-family: var(--font); }

html, body {
  width: 100%; height: 100%; max-height: 100%;
  background: var(--bg);
  font-family: var(--font);
  font-size: 16px; color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
  margin: 0; padding: 0;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-y;
  transition: background 1s ease, color 1s ease;
}
/* Barra de gestos inferior: mismo color que el fondo */
body::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: env(safe-area-inset-bottom, 0px);
  background: var(--bg);
  z-index: 99998;
  pointer-events: none;
}

/* ══ COLOR SCHEME: informa al sistema el esquema de colores ══ */
/* Hace que la nav bar del teléfono y otros elementos del sistema
   adopten el esquema claro/oscuro correcto */
:root { color-scheme: dark; }
@media (prefers-color-scheme: light) { :root { color-scheme: light; } }

/* ══ FONT + TAP HIGHLIGHT: globales ══ */
* {
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  /* Evitar selección de texto al mantener presionado */
  -webkit-user-select: none;
  user-select: none;
}
input, button, select, textarea { font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, sans-serif !important; }
/* Restaurar selección solo en inputs para copiar/pegar */
input[type="text"], input[type="tel"], input[type="email"], input[type="search"], textarea {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* ══ AJUSTES — ESTILOS NUEVOS ══ */

/* ── Header settings button ── */
.header-settings-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: transparent; display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
}
.header-settings-btn .material-icons {
  font-size: 22px !important; color: var(--text3) !important;
  -webkit-text-fill-color: var(--text3) !important;
}
.header-settings-btn:active { background: var(--chip-bg); }

/* ── ico-green, ico-gray (nuevos colores de icono) ── */
.ico-green { background: rgba(34,197,94,0.14); }
.ico-green .material-icons { color: #4ade80 !important; -webkit-text-fill-color: #4ade80 !important; }
.ico-gray  { background: rgba(148,163,184,0.14); }
.ico-gray  .material-icons { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; }

/* ── sec-label-header — título de sección flotante ── */
.sec-label-header {
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.8px !important;
  color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important;
  padding: 20px 4px 0; margin-bottom: 10px;
}

/* ── sec-note — nota informativa ── */
.sec-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--card);
  border-radius: 14px; padding: 14px 16px;
  font-size: 13px !important; font-weight: 400 !important;
  color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important;
  line-height: 1.55 !important;
}
.sec-note-top { margin-bottom: 4px; }

.sec-note-icon {
  font-size: 16px !important;
  opacity: 0.5;
  flex-shrink: 0;
}

/* ── sec-row-danger ── */
.sec-row-danger:active { background: rgba(239,68,68,0.06) !important; }

/* ── Temas forzados (override de prefers-color-scheme) ── */
html.theme-light {
  --bg-rgb: 252, 240, 240;
  --bg: #fcf0f0; --card: #ffffff; --card2: #fff5f5;
  --border: rgba(180,0,0,0.10); --border2: rgba(180,0,0,0.07); --border3: rgba(180,0,0,0.05);
  --text: #1c0a0a; --text2: #6b3030; --text3: #9e5050; --text4: #bb8080;
  --label: #9e5050; --accent: #c62828; --accent2: #b71c1c;
  --accent-dim: rgba(198,40,40,0.10); --header-bg: rgba(252,240,240,0.80);
  --chip-bg: rgba(198,40,40,0.07); --stat-bg: rgba(198,40,40,0.05);
  --section-hd: rgba(198,40,40,0.04);
  --accent-gradient-from: #e53935;
  --accent-gradient-to:   #b71c1c;
  --overlay-dark:   rgba(0,0,0,0.85);
  --overlay-medium: rgba(0,0,0,0.60);
  --overlay-light:  rgba(0,0,0,0.50);
  color-scheme: light;
}
html.theme-dark {
  --bg-rgb: 26, 18, 18;
  --bg: #1a1212; --card: #251a1a; --card2: #2e1f1f;
  --border: rgba(255,200,200,0.10); --border2: rgba(255,200,200,0.07); --border3: rgba(255,200,200,0.05);
  --text: #f5e6e6; --text2: #c4a0a0; --text3: #8c6464; --text4: #6b4a4a;
  --label: #c4a0a0; --accent: #ef4444; --accent2: #dc2626;
  --accent-dim: rgba(239,68,68,0.18); --header-bg: rgba(26,18,18,0.80);
  --chip-bg: rgba(239,68,68,0.08); --stat-bg: rgba(239,68,68,0.06);
  --section-hd: rgba(239,68,68,0.05);
  --accent-gradient-from: #ff4d4d;
  --accent-gradient-to:   #d61f1f;
  --overlay-dark:   rgba(0,0,0,0.85);
  --overlay-medium: rgba(0,0,0,0.60);
  --overlay-light:  rgba(0,0,0,0.50);
  color-scheme: dark;
}

/* ── UNAUTHORIZED ── */
#unauthorized { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 100; }

/* ── MISC ── */
input[type="file"] { display: none !important; }
.hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.pf-scroll { padding-top: 72px; padding-bottom: 48px; display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
#perfil-error { display: none; width: 100%; max-width: 600px; margin: 0 auto 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent-dim); color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; font-size: 13px !important; font-weight: 500 !important; }
.error-box { margin: 12px 16px 0; padding: 12px 16px; background: var(--accent-dim); border: 1px solid rgba(239,68,68,0.4); border-radius: 10px; color: var(--accent); font-size: 13px; line-height: 1.4; }

/* ── CHIPS ── */
.chip-wrapper { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding-top: 4px !important; }
.chip { padding: 6px 14px !important; border-radius: 9999px !important; font-size: 12px !important; font-weight: 700 !important; border: 1px solid var(--border) !important; cursor: pointer !important; white-space: nowrap !important; line-height: 1 !important; -webkit-tap-highlight-color: transparent !important; transition: all 0.15s ease !important; }
.chip-inactive { background: var(--chip-bg) !important; color: var(--text2) !important; -webkit-text-fill-color: var(--text2) !important; }
.chip-active { background: var(--accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: var(--accent) !important; }
.chip.opacity-50 { opacity: 0.35 !important; cursor: default !important; }
/* Chips hidden by default in section views — shown via JS */
.chip-wrapper { display: none; }

/* ══ CROP MODAL ══ */
#modal-crop { position: fixed; inset: 0; z-index: 9999; display: none; align-items: flex-end; justify-content: center; background: var(--overlay-dark); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#modal-crop[style*="flex"] { display: flex; }
.crop-sheet { width: 100%; max-width: 520px; background: var(--bg); border-radius: 24px 24px 0 0; padding: 12px 0 0; display: flex; flex-direction: column; animation: crop-sheet-in 0.32s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes crop-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.crop-handle { width: 36px; height: 4px; border-radius: 99px; background: var(--border); margin: 0 auto 14px; }
.crop-title { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--text2) !important; -webkit-text-fill-color: var(--text2) !important; text-align: center; margin: 0 0 14px !important; }
.crop-area { width: 100%; aspect-ratio: 1/1; background: var(--bg); overflow: hidden; position: relative; }
.crop-area img { display: block; max-width: 100%; }
.crop-hint { font-size: 11px !important; font-weight: 500 !important; color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important; text-align: center; margin: 10px 0 0 !important; letter-spacing: 0.02em !important; }
.crop-actions { display: flex; align-items: center; gap: 10px; padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
.crop-btn-cancel { flex: 1; padding: 16px; border-radius: 14px; border: none; background: var(--chip-bg); border: 1px solid var(--border); color: var(--text2) !important; -webkit-text-fill-color: var(--text2) !important; font-size: 13px !important; font-weight: 700 !important; font-family: inherit !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.crop-btn-rotate .material-icons { font-size: 22px !important; color: var(--text2) !important; -webkit-text-fill-color: var(--text2) !important; }
.crop-btn-confirm { flex: 1.6; padding: 16px; border-radius: 14px; border: none; background: linear-gradient(135deg, var(--accent-gradient-from) 0%, var(--accent-gradient-to) 100%); color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 13px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-family: inherit !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.crop-btn-cancel:active { opacity: 0.7; }
.crop-btn-confirm:active { transform: scale(0.97); }

/* ══ BOTTOM SHEET SELECTOR ══ */
.bs-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; -webkit-overflow-scrolling: auto; }
.bs-overlay.active { opacity: 1; pointer-events: all; touch-action: none; }
.bs-panel { position: fixed; z-index: 1001; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.95); width: calc(100% - 48px); max-width: 340px; background: var(--card2); border-radius: 20px; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; max-height: 65vh; display: flex; flex-direction: column; overflow: hidden; }
.bs-panel.active { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.bs-handle { display: none; }
.bs-title { font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important; padding: 16px 20px 12px; flex-shrink: 0; border-bottom: 1px solid var(--border2); }
.bs-search-wrapper { padding: 10px 14px; border-bottom: 1px solid var(--border2); flex-shrink: 0; }
.bs-search { width: 100%; padding: 10px 16px; background: var(--chip-bg); border: 1px solid var(--border); border-radius: 9999px; outline: none; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; font-size: 16px !important; -webkit-appearance: none; }
.bs-search::placeholder { color: var(--text3); }
.bs-search:focus { border-color: var(--accent); outline: none; }
.bs-options { overflow-y: scroll; flex: 1; -webkit-overflow-scrolling: touch; }
.bs-option { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 20px; background: transparent; border: none; border-bottom: 1px solid var(--border3); color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; font-size: 16px !important; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bs-option:active { background: var(--chip-bg); }
.bs-option.selected { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; font-weight: 700 !important; }
.bs-option.selected::after { content: '✓'; }
.bs-empty { text-align: center; color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important; font-size: 14px !important; padding: 32px 0; }

/* ══ TOGGLE SWITCH ══ */
.toggle-wrap { display: flex; align-items: center; flex-shrink: 0; }
.toggle-btn { position: relative; width: 52px; height: 30px; border-radius: 9999px; border: none; cursor: pointer; transition: background 0.25s ease; padding: 0; -webkit-tap-highlight-color: transparent; flex-shrink: 0; outline: none; }
.toggle-off { background: var(--border); }
.toggle-on  { background: var(--accent); }
.toggle-thumb { position: absolute; width: 24px; height: 24px; background: #fff; border-radius: 9999px; top: 50%; transform: translateY(-50%); transition: left 0.22s cubic-bezier(0.4,0,0.2,1); }
.toggle-off .toggle-thumb { left: 3px; }
.toggle-on  .toggle-thumb { left: calc(100% - 27px); }
.toggle-text { display: none; }

/* ══ NAVIGATION SYSTEM ══ */
#appContent {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden; overscroll-behavior: none;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.3s ease;
}
#appContent.visible { opacity: 1; }
#appContent.color-transition-out { opacity: 0; transition: opacity 0.25s ease; }
.app-view {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: none; flex-direction: column;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  /* El app-view NO scrollea — solo .app-scroll scrollea */
  overflow: hidden;
}
/* Safe-area: el header absorbe env(safe-area-inset-top) con padding-top.
   El fondo del body cubre el espacio restante con el mismo color. */

html {
  background: var(--bg);
}
.app-view.active { display: flex; transform: translateX(0); }
.app-view.slide-out { transform: translateX(-30%); }

/* ── APP HEADER ──
   Absorbs safe-area-inset-top so there's no gap between status bar and nav */
.app-header {
  /* No necesita sticky — el app-view es el scroll container, header queda arriba */
  position: relative; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: stretch; justify-content: space-between;
  padding-left: 0; padding-right: 0; padding-bottom: 0;
  background: var(--bg);
  border-bottom: none;
  flex-shrink: 0;
  flex-direction: column;
}
/* Section headers use stacked layout */
.app-header-section {
  flex-direction: column !important;
  align-items: stretch !important;
  height: auto !important;
  padding: env(safe-area-inset-top, 0px) 0 0 0 !important;
  gap: 0 !important;
  border-bottom: none !important;
}
.header-row-top {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 60px;
  padding: 19px 12px 0px 8px;
}
.header-row-top .app-header-title { flex: 1; }
/* Sin overrides en header-back — hereda align-items:center del padre */
.header-row-top .header-back {
  flex-shrink: 0;
}

/* ── APP SCROLL ── */
.app-scroll {
  flex: 1 1 0;
  min-height: 0; /* crítico para que flex no desborde */
  overflow-y: scroll; -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
  overscroll-behavior-y: contain; overflow-x: hidden; box-sizing: border-box;
  scrollbar-width: none;
}
.app-scroll::-webkit-scrollbar { display: none; }

/* CSS chevrons */
.settings-row-arrow, .sec-row-arrow, .sec-select-arrow {
  font-family: none !important; font-size: 0 !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  width: 20px; height: 20px;
  display: flex !important; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}
.settings-row-arrow::after, .sec-row-arrow::after {
  content: ''; display: block; width: 8px; height: 8px;
  border-right: 2px solid var(--text3); border-top: 2px solid var(--text3);
  transform: rotate(45deg) translateX(-2px); border-radius: 1px;
}
.sec-row--nav .sec-row-arrow { width: 16px; height: 16px; display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; }
.sec-row--nav .sec-row-arrow::after { width: 7px; height: 7px; border-right: 2px solid var(--text3); border-top: 2px solid var(--text3); transform: rotate(45deg) translateX(-2px); border-radius: 1px; }
.sec-select-arrow { display: none !important; }

/* ══ SECTION VIEWS ══ */
.sec-group { background: var(--card); border-radius: 20px;}
.sec-group > .sec-row:first-child  { border-radius: 20px 20px 0 0; }
.sec-group > .sec-row:last-child   { border-radius: 0 0 20px 20px; }
.sec-group > .sec-row:only-child   { border-radius: 20px; }
.sec-group > .sec-row-toggle:first-child { border-radius: 20px 20px 0 0; }
.sec-group > .sec-row-toggle:last-child  { border-radius: 0 0 20px 20px; }
.sec-group > .sec-row-toggle:only-child  { border-radius: 20px; }

.sec-row {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 20px;
  border-bottom: 1px solid var(--border3); min-height: 68px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.12s; user-select: none; height: auto !important;
}
.sec-row:active { background: var(--card) !important; }
.sec-row:last-child { border-bottom: none; }
.sec-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.sec-row-label {
  font-size: 10px !important; font-weight: 700 !important;
  font-style: normal !important; text-transform: uppercase !important; letter-spacing: 0.8px !important;
  color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important;
  line-height: 1 !important; transition: color 0.2s;
}
.app-view.is-editing .sec-row-label { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }

/* Value display */
.sec-val { font-size: 15px; color: var(--text); font-weight: 400; line-height: 1.4; display: block; padding: 0; min-height: 20px; }
.sec-val-bold { font-size: 17px; font-weight: 700; color: var(--text); }
.sec-val.sec-input-empty { color: var(--text4); font-style: italic; font-size: 13px; }

.sec-input {
  display: block !important; width: 100% !important;
  background: transparent !important; border: none !important; outline: none !important;
  padding: 0 !important; margin: 0 !important;
  font-size: 17px !important; font-weight: 500 !important;
  font-style: normal !important; text-transform: none !important;
  font-family: "Be Vietnam Pro", sans-serif !important;
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important;
  line-height: 1.3 !important; border-radius: 0 !important;
  -webkit-appearance: none !important; opacity: 1 !important;
}
.sec-input-bold   { font-weight: 800 !important; }
.sec-input-normal { font-weight: 400 !important; }
.sec-input-empty, .sec-input-empty:disabled { color: var(--text4) !important; font-style: italic; font-size: 13px; }
.sec-input:disabled { -webkit-text-fill-color: var(--text) !important; opacity: 1 !important; cursor: default !important; }
.is-editing .sec-input:not(:disabled) { border-bottom: 1.5px solid rgba(239,68,68,0.5) !important; padding-bottom: 2px !important; }
.is-editing .sec-input:not(:disabled):focus { border-bottom-color: var(--accent) !important; }

/* Toggle row */
.sec-row-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; min-height: 64px; gap: 16px; border-bottom: 1px solid var(--border3); height: auto !important; }
.sec-row-toggle:last-child { border-bottom: none; }
.sec-toggle-label { font-size: 16px !important; font-weight: 500 !important; font-style: normal !important; text-transform: none !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; flex: 1; line-height: 1.3 !important; }
.app-view.is-editing .sec-toggle-label { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; }
.sec-row-toggle[onclick] { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.12s; }
.sec-row-toggle[onclick]:active { background: var(--card); }

/* Tappable rows */
.sec-row-tappable, .sec-row-tappable * { pointer-events: none; }
.sec-row-tappable { pointer-events: all !important; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0.06); user-select: none; transition: background 0.1s; }
.sec-row-tappable:active { background: var(--card) !important; }
.sec-row-tappable > .sec-row-arrow, .sec-row-tappable > span.material-icons { pointer-events: none; color: var(--text4); font-size: 20px; flex-shrink: 0; }
.sec-row-tappable .sec-row-arrow, .sec-row .sec-row-arrow { display: flex !important; color: var(--text4); }

/* Avatar row */
.sec-row-avatar { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sec-row-avatar:active { background: var(--chip-bg); }
.sec-avatar-preview { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--card2); flex-shrink: 0; position: relative; }
.sec-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sec-avatar-edit-ico { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.is-editing .sec-avatar-edit-ico { opacity: 1; }
.sec-avatar-edit-ico .material-icons { font-size: 20px !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.sec-row-title { font-size: 16px !important; font-weight: 600 !important; font-style: normal !important; text-transform: none !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; font-family: var(--font) !important; }
.sec-row-sub { font-size: 12px !important; font-weight: 400 !important; font-style: normal !important; text-transform: none !important; color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important; font-family: var(--font) !important; }
.sec-row--nav .sec-row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px !important; }

/* Select trigger */
.custom-select-trigger {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  width: 100% !important; background: transparent !important; border: none !important; outline: none !important;
  padding: 0 !important; cursor: default !important; text-align: left !important;
  font-size: 17px !important; font-weight: 500 !important;
  font-style: normal !important; text-transform: none !important;
  font-family: "Be Vietnam Pro", sans-serif !important;
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important;
  -webkit-appearance: none !important; border-radius: 0 !important;
}
.custom-select-trigger::before, .custom-select-trigger::after { display: none !important; }
.is-editing .custom-select-trigger { cursor: pointer !important; }
.is-editing .custom-select-trigger::after {
  content: "" !important; display: inline-block !important;
  width: 7px !important; height: 7px !important;
  border-right: 2px solid var(--accent) !important; border-top: 2px solid var(--accent) !important;
  transform: rotate(45deg) translateY(-1px) !important; border-radius: 1px !important;
  margin-left: 8px !important; flex-shrink: 0 !important; font-family: none !important; vertical-align: middle !important;
}

/* Multiselect trigger */
.multiselect-trigger { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 0 !important; background: transparent !important; border: none !important; cursor: default !important; font-style: normal !important; text-transform: none !important; font-size: 17px !important; font-weight: 500 !important; font-family: "Be Vietnam Pro", sans-serif !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; }
.multiselect-trigger.multiselect-editable { cursor: pointer !important; }
.ms-value { font-size: 17px !important; font-weight: 500 !important; font-style: normal !important; text-transform: none !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; flex: 1; text-align: left; font-family: "Be Vietnam Pro", sans-serif !important; }
.ms-arrow { font-size: 22px !important; color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }

/* ══ DATE PICKER ══ */
#date-picker-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: var(--overlay-light); backdrop-filter: blur(4px); padding: 24px; }
#date-picker-modal.active { display: flex; }
.dp-card { background: var(--card); border-radius: 28px; width: 100%; max-width: 340px; overflow: hidden; }
.dp-header { padding: 24px 24px 8px; }
.dp-header-label { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important; margin-bottom: 4px; }
.dp-selected-date { font-size: 32px !important; font-weight: 400 !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; line-height: 1.2 !important; }
.dp-nav { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px; }
#dp-nav-arrows { display: none !important; }
.dp-nav-chips { display: flex; gap: 2px; align-items: center; }
.dp-nav-chip { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 8px 14px !important; border-radius: 99px !important;  background: var(--card) !important; font-size: 15px !important; font-weight: 700 !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; cursor: pointer !important; pointer-events: all !important; transition: background 0.15s, border-color 0.15s !important; -webkit-tap-highlight-color: transparent !important; }
.dp-nav-chip:active { background: var(--chip-bg) !important; border-color: var(--accent) !important; }
.dp-nav-chip::after { content: none; }
.dp-nav-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.dp-nav-btn:active { background: var(--chip-bg); }
.dp-nav-btn .material-icons { font-size: 20px !important; color: var(--text2) !important; -webkit-text-fill-color: var(--text2) !important; }
.dp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; padding: 4px 12px 8px; }
.dp-day-label { text-align: center; font-size: 11px !important; font-weight: 700 !important; color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important; padding: 6px 0; }
.dp-day { aspect-ratio: 1; border-radius: 50%; border: none; background: transparent; font-size: 14px !important; font-weight: 400 !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: background 0.15s; }
.dp-day:hover { background: var(--chip-bg); }
.dp-day.dp-selected { background: var(--accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 700 !important; }
.dp-day.dp-other-month { color: var(--text4) !important; -webkit-text-fill-color: var(--text4) !important; }
.dp-day.dp-today:not(.dp-selected) { border: 1.5px solid var(--accent); color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }
.dp-error { margin: 0 12px; padding: 10px 14px; border-radius: 10px; background: rgba(255,59,48,0.12); border: 1px solid rgba(255,59,48,0.3); font-size: 13px !important; font-weight: 600 !important; color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; text-align: center; animation: wiz-fade-up 0.2s ease both; }
.dp-footer { display: flex; justify-content: flex-end; gap: 12px !important; padding: 16px 20px 28px !important; }
.dp-btn { padding: 13px 24px !important; border-radius: 9999px; border: none; font-size: 14px !important; font-weight: 700 !important; cursor: pointer; -webkit-tap-highlight-color: transparent; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
.dp-btn-cancel { background: transparent; color: var(--text2) !important; -webkit-text-fill-color: var(--text2) !important; }
.dp-btn-cancel:active { background: var(--chip-bg); }
.dp-btn-ok { background: var(--accent); color: #fff !important; -webkit-text-fill-color: #fff !important; }
.dp-btn-ok:active { filter: brightness(0.9); }
.dp-year-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px !important; padding: 16px 20px !important; max-height: 220px; overflow-y: scroll; }
.dp-year-btn { padding: 14px 4px !important; border-radius: 14px !important; border: none; font-size: 15px !important; font-weight: 500 !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; background: transparent; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
.dp-year-btn.dp-year-selected { background: var(--accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 700 !important; }
.dp-year-btn:active { background: var(--chip-bg); }
.dp-month-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 8px 16px 16px; }
.dp-month-btn { padding: 14px 6px !important; border: none !important; border-radius: 12px !important; background: transparent !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; text-align: center !important; -webkit-tap-highlight-color: transparent !important; transition: background 0.15s !important; font-family: var(--font) !important; }
.dp-month-btn:active { background: var(--chip-bg) !important; }
.dp-month-selected { background: var(--accent) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 700 !important; }
#dp-days, #dp-year-grid { animation: dpFadeIn 0.18s ease; }
@keyframes dpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
#dp-grid-wrap, #dp-year-grid { transition: opacity 0.15s ease; }
#dp-month-label, #dp-year-label { display: inline-block; transition: opacity 0.12s ease; }
.dp-nav-label { background: transparent !important; border: none !important; outline: none !important; display: flex !important; align-items: center !important; gap: 2px !important; font-size: 15px !important; font-weight: 700 !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; font-family: var(--font) !important; padding: 6px 8px !important; border-radius: 8px !important; cursor: pointer !important; }

/* Date picker trigger */
.date-picker-trigger {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 8px !important; width: 100% !important;
  background: transparent !important; border: none !important;
  border-bottom: 1.5px solid transparent !important;
  padding: 0 0 2px !important; text-align: left !important;
  font-size: 17px !important; font-weight: 500 !important;
  font-style: normal !important; text-transform: none !important;
  font-family: "Be Vietnam Pro", sans-serif !important;
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important;
  cursor: pointer !important; transition: border-color 0.2s !important;
  outline: none !important; -webkit-appearance: none !important;
}
.date-picker-trigger::before, .date-picker-trigger::after { display: none !important; }
.app-view.is-editing .date-picker-trigger { border-bottom-color: rgba(239,68,68,0.5) !important; }
.date-picker-trigger .dp-trig-ico { display: none; font-size: 16px !important; color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; flex-shrink: 0; }
.app-view.is-editing .date-picker-trigger .dp-trig-ico { display: block !important; }

/* ══ HOME: DANGER ZONE ══ */
.home-danger-zone { display: flex; flex-direction: column; gap: 10px; padding: 0; margin-top: 8px; }
.home-btn-signout, .home-btn-delete { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 14px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; transition: opacity 0.15s; }
.home-btn-signout { background: var(--card); color: var(--text);  }
.home-btn-delete  { background: transparent; color: var(--accent); border: 1.5px solid var(--accent) !important; }
.home-btn-signout:active, .home-btn-delete:active { opacity: 0.7; }

/* ══ MULTISELECT MODAL ══ */
.ms-panel { max-height: 70vh; display: flex; flex-direction: column; }
.ms-options { flex: 1; overflow-y: scroll; padding: 4px 0; }
.ms-option-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; border: none; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; border-bottom: 1px solid var(--border3); transition: background 0.15s; }
.ms-option-row:last-child { border-bottom: none; }
.ms-option-row:active { background: var(--chip-bg); }
.ms-option-row.ms-selected { background: var(--accent-dim); }
.ms-opt-label { font-size: 17px !important; font-weight: 500 !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; }
.ms-check { font-size: 22px !important; color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important; }
.ms-option-row.ms-selected .ms-check { color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; }
.ms-footer { display: flex; gap: 10px; padding: 12px 16px 16px;}
.ms-footer .btn-cancel { flex: 1; padding: 14px; }
.ms-footer .btn-save   { flex: 2; padding: 14px; }
.btn-save { display: flex; align-items: center; justify-content: center; width: 100%; padding: 20px; border-radius: 9999px; font-size: 14px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-style: italic !important; cursor: pointer; border: none; line-height: 1 !important; background: linear-gradient(145deg, var(--accent-gradient-from), var(--accent-gradient-to)) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; -webkit-tap-highlight-color: transparent; }
.btn-cancel { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px; border-radius: 9999px; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; cursor: pointer; border: 1px solid var(--border) !important; line-height: 1 !important; background: var(--chip-bg) !important; color: var(--text2) !important; -webkit-text-fill-color: var(--text2) !important; -webkit-tap-highlight-color: transparent; }
.btn-save:active { transform: scale(0.98); }
.btn-cancel:active { transform: scale(0.98); }

/* ══ TAP-TO-EDIT BOTTOM SHEET ══ */
.edit-field-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0); display: flex; align-items: flex-end; justify-content: center; transition: background 0.3s ease; }
.edit-field-overlay.visible { background: rgba(0,0,0,0.5); }
@supports (height: 100dvh) { .edit-field-overlay { height: 100dvh; } }
.edit-field-sheet { width: 100%; max-width: 520px; background: var(--bg); border-radius: 24px 24px 0 0; padding: 12px 20px 60px !important; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); box-sizing: border-box; position: relative; }
.edit-field-sheet.visible { transform: translateY(0); }
.edit-field-sheet-tall { max-height: 85vh; display: flex; flex-direction: column; padding-bottom: 20px; }
.edit-field-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 16px; }
.edit-field-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.edit-field-label { font-size: 17px; font-weight: 700; color: var(--text); }
.edit-field-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--card); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text3); }
.edit-field-close .material-icons { font-size: 20px; }
.edit-field-body { margin-bottom: 20px; }
.edit-field-input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font-size: 16px; font-family: inherit; box-sizing: border-box; outline: none; transition: border-color 0.2s; }
.edit-field-input:focus { border-color: var(--accent); }
.edit-field-save { width: 100%; padding: 15px; border-radius: 14px; border: none; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer; transition: opacity 0.2s; }
.edit-field-save:disabled { opacity: 0.5; }
.edit-field-actions { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0 8px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.edit-chips-multi { display: flex; flex-wrap: wrap; gap: 8px; }
.edit-chips-grid  { display: flex; flex-wrap: wrap; gap: 8px; }
.edit-chip-btn { padding: 8px 16px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.15s; }
.edit-chip-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.edit-search-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.edit-search-item { display: flex; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--border3); font-size: 15px; color: var(--text); cursor: pointer; transition: background 0.1s; gap: 8px; }
.edit-search-item:active { background: var(--card); }
.edit-search-item.active { color: var(--accent); font-weight: 600; }
.edit-search-item:last-child { border-bottom: none; }
.toast-guardado { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(16px); background: var(--text); color: var(--bg); padding: 10px 20px; border-radius: 20px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 9999; white-space: nowrap; }
.toast-guardado .material-icons { font-size: 16px; color: #22c55e; }
.toast-guardado.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

#google-resignin-btn > div,
#google-resignin-btn iframe,
#google-resignin-btn [role="button"] {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Spacers */
/* ══ COLOR PICKER ══ */
.apr-color-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  border: 2px solid var(--border);
}
.color-picker-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0); display: flex;
  align-items: flex-end; justify-content: center;
  transition: background 0.3s ease;
  pointer-events: none;
}
.color-picker-overlay.visible {
  background: var(--overlay-medium);
  pointer-events: all;
}
.color-picker-sheet {
  width: 100%; max-width: 520px;
  background: var(--bg); border-radius: 24px 24px 0 0;
  padding: 12px 20px 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  box-sizing: border-box;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
.color-picker-sheet.visible { transform: translateY(0); }
.color-picker-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 0 auto 20px;
}
.color-picker-title {
  font-size: 11px !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: 0.8px !important;
  color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important;
  margin-bottom: 20px !important;
}
.color-picker-swatches {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 12px; margin-bottom: 24px;
}
.color-swatch-btn {
  aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
}
.color-swatch-btn.selected {
  border-color: var(--text) !important;
  transform: scale(1.15);
}
.color-swatch-btn:active { transform: scale(0.92); }
.color-picker-custom {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; background: var(--card);
  border-radius: 16px; border: 1.5px solid var(--border);
  margin-bottom: 24px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.color-picker-custom-preview {
  width: 36px; height: 36px; border-radius: 50%;
  flex-shrink: 0; border: 2px solid var(--border);
  transition: background 0.2s;
}
.color-picker-custom-label {
  flex: 1;
  font-size: 15px !important; font-weight: 500 !important;
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important;
}
.color-picker-custom-hex {
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important;
  font-family: monospace !important;
}
.color-picker-input-hidden {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.color-picker-footer { display: flex; gap: 10px; }
.color-picker-footer .btn-cancel { flex: 1; }
.color-picker-footer .btn-save   { flex: 2; }
.color-picker-saving {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 16px;
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--text3) !important; -webkit-text-fill-color: var(--text3) !important;
}
.color-picker-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: cp-spin 0.7s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

.spacer    { height: 32px; }
.spacer-lg { height: 5px; }

.sec-row--no-border { border-bottom: none !important; }

.sec-toggle-label--strong { font-weight: 700 !important; }

.sec-group--flush  { margin-bottom: 0 !important; }
.sec-group--top    { margin-top: 24px !important; }
.sec-label-header--top { margin-top: 5px; }

.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ── Pantalla ya registrada ── */
.ya-registrada-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--bg); padding: 32px;
}
.ya-registrada-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
  width: 100%; max-width: 360px; text-align: center;
}
.ya-registrada-logo {
  width: 88px; height: 88px; border-radius: 22px;
  object-fit: contain; margin-bottom: 20px;
  animation: wiz-fade-up 0.45s cubic-bezier(0.4,0,0.2,1) 0.1s both;
}
.ya-registrada-title {
  font-size: 24px !important; font-weight: 800 !important;
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important;
  margin: 0 0 10px !important;
  animation: wiz-fade-up 0.45s cubic-bezier(0.4,0,0.2,1) 0.2s both;
}
.ya-registrada-desc {
  font-size: 14px !important; color: var(--text2) !important;
  -webkit-text-fill-color: var(--text2) !important;
  line-height: 1.6 !important; margin: 0 0 28px !important;
  animation: wiz-fade-up 0.45s cubic-bezier(0.4,0,0.2,1) 0.3s both;
}
.ya-registrada-loader-wrap {
  animation: wiz-fade-up 0.45s cubic-bezier(0.4,0,0.2,1) 0.4s both;
  width: 100%;
}

/* ── Estado guardando inline ── */
.sec-val-saving {
  font-size: 12px !important; color: var(--text4) !important;
  -webkit-text-fill-color: var(--text4) !important;
  font-style: italic !important;
}

/* ── Spacer genérico ── */
.spacer-32 { height: 32px; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 20px;
  font-size: 14px !important; font-weight: 600 !important;
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important;
  z-index: 9999; white-space: nowrap; opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}