/* =========================
   QARD · Base
   ========================= */
:root{
  /* default (equivale al tema oscuro actual) */
  color-scheme: light dark;

  --bg:#0b0f14;
  --text:#e8eef7;
  --card:#101826;
  --border:#1c2a40;

  --input_bg:#0b1220;
  --btn_bg:#0f1726;
  --btn_border:#2a3b57;

    --accent:#3a7bd5;
  --accent_text:#e8eef7;

  --muted: rgba(232,238,247,0.82);

  /* tokens extra para evitar hardcodes */
  --link_color: var(--text);
  --link_underline: rgba(232,238,247,0.35);
  --link2_underline: rgba(127,127,127,0.35);

  --qr_bg: #fff;
  --scroll_thumb: rgba(127,127,127,0.25);

  --cta_border: rgba(255,200,80,0.22);
  --cta_bg: rgba(255,200,80,0.05);

  --modal_backdrop: rgba(0,0,0,0.68);
  --modal_shadow: rgba(0,0,0,0.55);

    /* --- Font stacks (PASO 3) --- */
  --stack_sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --stack_serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --stack_mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* --- Typography vars (PASO 3) defaults --- */
  --ff_brand: var(--stack_sans);
  --fs_brand: 14px;
  --fw_brand: 400;
  --fst_brand: normal;

  --ff_name: var(--stack_sans);
  --fs_name: 28px;
  --fw_name: 700;
  --fst_name: normal;

  --ff_headline: var(--stack_sans);
  --fs_headline: 14px;
  --fw_headline: 400;
  --fst_headline: normal;

  --ff_section: var(--stack_sans);
  --fs_section: 13px;
  --fw_section: 800;
  --fst_section: normal;

  --ff_labels: var(--stack_sans);
  --fs_labels: 12px;
  --fw_labels: 600;
  --fst_labels: normal;

  --ff_values: var(--stack_sans);
  --fs_values: 14px;
  --fw_values: 700;
  --fst_values: normal;

  --ff_buttons: var(--stack_sans);
  --fs_buttons: 14px;
  --fw_buttons: 800;
  --fst_buttons: normal;

  --ff_meta: var(--stack_sans);
  --fs_meta: 12px;
  --fw_meta: 600;
  --fst_meta: normal;

}

body.page{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
}

/* =========================
   Layout containers
   ========================= */
.card,
.qrwrap{
  max-width: 520px;
  margin: 24px auto;
  padding: 18px;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 14px;
}

/* Admin necesita más ancho para que “Acciones” no se vuelva torre */
.admin{
  max-width: 1100px;
  margin: 24px auto;
  padding: 18px;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 14px;
}

/* =========================
   Typography (public)
   ========================= */
.brand{
  font-family: var(--ff_brand);
  font-size: var(--fs_brand);
  font-weight: var(--fw_brand);
  font-style: var(--fst_brand);

  opacity:.85;
  letter-spacing:.08em;
  text-transform: uppercase;
}

.name{
  font-family: var(--ff_name);
  font-size: var(--fs_name);
  font-weight: var(--fw_name);
  font-style: var(--fst_name);

  margin-top: 6px;
}

.headline{
  font-family: var(--ff_headline);
  font-size: var(--fs_headline);
  font-weight: var(--fw_headline);
  font-style: var(--fst_headline);

  margin-top: 8px;
  opacity:.9;
}

/* =========================
   Buttons & actions
   ========================= */
.btns{
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.btn{
  font-family: var(--ff_buttons);
  font-size: var(--fs_buttons);
  font-weight: var(--fw_buttons);
  font-style: var(--fst_buttons);

  display:block;
  text-align:center;
  padding: 12px 14px;
  border-radius: 12px;
  border:1px solid var(--btn_border);
  color: var(--text);
  text-decoration:none;
  background: var(--btn_bg);
}
.btn.primary{
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent_text);
}

/* Small buttons (admin) */
.btn.sm{
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
}

/* =========================
   Meta
   ========================= */
.meta{
  font-family: var(--ff_meta);
  font-size: var(--fs_meta);
  font-weight: var(--fw_meta);
  font-style: var(--fst_meta);

  margin-top: 14px;
  opacity:.8;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* =========================
   Forms
   ========================= */
.row{
  display:flex;
  align-items:center;
  gap: 10px;

  /* FIX: evita que 3er elemento (hint) se salga por space-between */
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* En formularios: label con ancho estable, controles con flex */
/* En formularios: aplicar flex SOLO a filas normales (NO tipografía grid) */
.form .row:not(.typoRow) > label{
  flex: 0 0 160px;
  min-width: 140px;
}

.form .row:not(.typoRow) > input,
.form .row:not(.typoRow) > select,
.form .row:not(.typoRow) > textarea{
  flex: 1 1 240px;
  min-width: 180px;

  /* clave: evita cápsulas kilométricas */
  max-width: 520px;
  width: 100%;
}

/* Hints dentro de filas normales: abajo y full width */
.form .row:not(.typoRow) > .hint{
  flex: 0 0 100%;
  margin: 6px 0 0;
}

/* Normaliza “cápsulas” del editor: iguala altura con .typoRow sin tocar tipografías */
.form .row:not(.typoRow) > input,
.form .row:not(.typoRow) > select{
  height: 38px;            /* igual que .row.typoRow */
  padding: 8px 10px;       /* ya es el default, lo dejamos explícito */
  width: 100%;
  box-sizing: border-box;
}

/* Textareas: no forzamos height fijo (porque deben crecer), solo base consistente */
.form .row:not(.typoRow) > textarea{
  min-height: 38px;        /* base consistente con inputs */
  width: 100%;
  box-sizing: border-box;
}

/* Editor · Tipografía por sección (ajuste fino de proporciones) */
.row.typoRow{
  /* Controles de ancho por columna (PC) */
  --col_label: 170px;   /* etiqueta */
  --col_size: 58px;     /* número */
  --col_style: 90px;   /* tipo (Bold/Regular/Italic) */
  /* familia toma el resto */
  --col_gap: 10px;
  --col_right_pad: 3px;

  display: grid;
  grid-template-columns:
    var(--col_label)
    minmax(0, 1fr)
    var(--col_size)
    var(--col_style);
  gap: var(--col_gap);
  align-items: center;
  padding-right: var(--col_right_pad);
}

/* Clave: el select de estilo NO debe heredar width:100% (si no, se “infla”) */
.row.typoRow select[name*="_style"]{
  width: auto;
  justify-self: end;
}

/* Aire visual a la derecha SOLO para el selector de tipo */
.row.typoRow select:last-child{
  margin-right: 3px;
}

/* FIX: en CSS Grid, sin min-width:0 los inputs/select pueden forzar overflow */
.row.typoRow > *{
  min-width: 0;
}

/* Inputs de tipografía: coherencia visual */
.row.typoRow select,
.row.typoRow input{
  height: 38px;
  font-size: 14px;
  padding: 8px 10px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.row.typoRow input[type="number"]{
  text-align: center;
  font-weight: 700;
}

/* Tipografía (grid): permitir shrink real, evitar encimados */
.row.typoRow > label{
  min-width: 0;
}

.form{
  display:grid;
  gap: 10px;
}
label{
  display:grid;
  gap: 6px;
  font-size: 13px;
}
input,
select,
textarea{
  padding: 8px 10px;
  border-radius: 10px;
  border:1px solid var(--btn_border);
  background: var(--input_bg);
  color: var(--text);
  box-sizing: border-box;
}

#editForm select option{
  background: #101826;
  color: #e8eef7;
}

/* Editor (solo UI): sube contraste de “cápsulas” en PC sin tocar tipografías */
#editForm input,
#editForm select,
#editForm textarea{
  background: rgba(255,255,255,0.035); /* más visible que --input_bg sobre --bg */
  border-color: rgba(58,123,213,0.28); /* sutil, consistente con acento */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.25),
    0 1px 0 rgba(255,255,255,0.03);
}

/* FIX: input[type="file"] visible en editor (no forzar height) */
#editForm input[type="file"]{
  height: auto;
  padding: 6px 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* =========================
   Tables (admin)
   ========================= */
.tbl{
  width:100%;
  border-collapse: collapse;
  margin-top: 12px;
}
.tbl th,
.tbl td{
  border-bottom:1px solid var(--border);
  padding:10px;
  font-size: 13px;
  vertical-align: top;
}

/* =========================
   QR view
   ========================= */
.qrtitle{ text-align:center; font-weight:700; }
.qrimg{
  width: min(78vw, 360px);
  height:auto;
  display:block;
  margin: 14px auto;
  border-radius: 12px;
  background: var(--qr_bg);
  padding:10px;
}

.qrlink{
  text-align:center;
  font-size:12px;
  opacity:.8;
  word-break: break-all;
}

/* =========================
   Public card · Info section
   ========================= */
.section{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.section-title{
  font-family: var(--ff_section);
  font-size: var(--fs_section);
  font-weight: var(--fw_section);
  font-style: var(--fst_section);

  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}

.info{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}
.info-row{
  display: grid;
  grid-template-columns: 80px 1fr; /* un poco más de aire que 70 */
  gap: 10px;
  align-items: baseline;
}
.info-label{
  opacity: .75;
  font-size: 12px;
}
.info-value{
  font-size: 14px;
  word-break: break-word;
}
.link{
  color: var(--link_color);
  text-decoration: none;
  border-bottom: 1px dashed var(--link_underline);
}
.link:active{ opacity: .85; }

/* =========================
   Admin · Compact actions
   ========================= */
.inline{
  display: inline-block;
  margin: 0;
}
.actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.renewrow{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.input-sm{
  width: 140px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--btn_border);
  background: var(--input_bg);
  color: var(--text);
}

/* =========================
   Mobile guardrails
   ========================= */
@media (max-width: 640px){
  .admin{ max-width: 520px; } /* en móvil vuelve a card width */
}
.pill-ok { opacity: 0.95; }
.pill-warn { opacity: 0.75; }
td.editor { white-space: nowrap; }

/* =========================
   Themes (per-card) via data-palette
   ========================= */
body.page[data-palette="dark"]{
  color-scheme: dark;
}

/* 1) Blanca */
body.page[data-palette="white"]{
  color-scheme: light;
  --bg:#ffffff;
  --text:#0b1220;
  --card:#ffffff;
  --border:#d7dde6;
  --input_bg:#ffffff;
  --btn_bg:#f6f8fb;
  --btn_border:#cfd7e3;
  --accent:#1e5eff;
    --accent_text:#ffffff;
  --muted: rgba(11,18,32,0.72);
  --link_underline: rgba(11,18,32,0.28);
  --scroll_thumb: rgba(11,18,32,0.22);
}

/* 2) Azul (claro) */
body.page[data-palette="blue"]{
  color-scheme: light;
  --bg:#eef4ff;
  --text:#0b1220;
  --card:#ffffff;
  --border:#cfdcf5;
  --input_bg:#ffffff;
  --btn_bg:#f3f7ff;
  --btn_border:#c6d6f5;
  --accent:#2456ff;
    --accent_text:#ffffff;
  --muted: rgba(11,18,32,0.72);
  --link_underline: rgba(11,18,32,0.28);
  --scroll_thumb: rgba(11,18,32,0.22);
}

/* 3) Negra (alto contraste) */
body.page[data-palette="black"]{
  color-scheme: dark;
  --bg:#05070a;
  --text:#f2f6ff;
  --card:#0b0f14;
  --border:#1c2a40;
  --input_bg:#0b1220;
  --btn_bg:#0f1726;
  --btn_border:#2a3b57;
  --accent:#4aa3ff;
  --accent_text:#061018;
  --muted: rgba(242,246,255,0.78);
  --link_underline: rgba(242,246,255,0.30);
  --scroll_thumb: rgba(242,246,255,0.22);
}

/* 4) Gris claro */
body.page[data-palette="lightgray"]{
  color-scheme: light;
  --bg:#f2f4f7;
  --text:#0b1220;
  --card:#ffffff;
  --border:#d7dde6;
  --input_bg:#ffffff;
  --btn_bg:#f7f8fa;
  --btn_border:#cfd7e3;
  --accent:#1f7a5b;
  --accent_text:#ffffff;
  --muted: rgba(11,18,32,0.72);
  --link_underline: rgba(11,18,32,0.28);
  --scroll_thumb: rgba(11,18,32,0.22);
}

/* 5) Sand (papel cálido) */
body.page[data-palette="sand"]{
  color-scheme: light;
  --bg:#fbf6ea;
  --text:#1b1b1b;
  --card:#ffffff;
  --border:#e2d8c4;
  --input_bg:#ffffff;
  --btn_bg:#fff7e6;
  --btn_border:#e2d8c4;
  --accent:#b24a2a;
  --accent_text:#ffffff;
  --muted: rgba(11,18,32,0.72);
  --link_underline: rgba(11,18,32,0.28);
  --scroll_thumb: rgba(11,18,32,0.22);
}
@media (max-width: 520px){
  .row.typoRow{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "label label"
      "family family"
      "size style";
    /* Editor: filas normales en móvil => label arriba, cápsula full width */
  .form .row:not(.typoRow){
    flex-direction: column;
    align-items: stretch;
  }

  .form .row:not(.typoRow) > label{
    flex: 0 0 auto;
    min-width: 0;
  }

  .form .row:not(.typoRow) > input,
  .form .row:not(.typoRow) > select,
  .form .row:not(.typoRow) > textarea{
    max-width: none;
  }

  .form .row:not(.typoRow) > .hint{
    flex: 0 0 auto; /* ya era 100% en desktop; aquí solo evitamos rarezas */
    width: 100%;
  }
    
  }

  .row.typoRow > label{
    grid-area: label;
  }

  .row.typoRow select[name*="_family"]{
    grid-area: family;
  }

  .row.typoRow input[type="number"]{
    grid-area: size;
  }

  .row.typoRow select[name*="_style"]{
    grid-area: style;
  }
}
/* =========================
   Admin · Fix tabla acciones (payments approve)
   ========================= */

/* Asegura que la celda de Acciones no “infle” la tabla */
.tbl td.actions-cell{
  min-width: 360px;          /* evita que se colapse */
  max-width: 520px;          /* evita que empuje columnas */
}

/* Convierte el TD de acciones en un contenedor flexible real */
.tbl td.actions-cell .actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Los forms inline deben poder romper línea */
.tbl td.actions-cell .inline{
  display: inline-flex;      /* en vez de inline-block */
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Input de pref_id: nunca debe forzar el ancho de la tabla */
.tbl td.actions-cell input[name="preference_id"]{
  width: 220px;
  max-width: 100%;
}

/* En pantallas medianas/chicas: que el input baje a 100% */
@media (max-width: 1100px){
  .tbl td.actions-cell{
    min-width: 300px;
    max-width: 420px;
  }
  .tbl td.actions-cell input[name="preference_id"]{
    width: 100%;
  }
}
/* Admin: arreglar columna Acciones para que no rompa la tabla */
.tbl2 td.actions{
  vertical-align: top;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 340px;
  max-width: 520px;
}

/* forms en acciones deben poder wrappear */
.tbl2 td.actions .inline{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* input pref_id no debe forzar ancho */
.tbl2 td.actions input.prefid{
  width: 220px;
  max-width: 100%;
}

/* en pantallas medianas: que el input baje a 100% */
@media (max-width: 1100px){
  .tbl2 td.actions{
    min-width: 300px;
    max-width: 420px;
  }
  .tbl2 td.actions input.prefid{
    width: 100%;
  }
}