/* ============================================================
   Synoikia — Sistema de diseño del sitio público y la consola
   Sin Tailwind. CSS propio, auto-contenido, sin webfonts externos
   (pila de fuentes de sistema — nada que descargar).
   ============================================================ */

/* --- Tokens ------------------------------------------------ */
:root {
  /* Fondo cálido claro — ni blanco puro ni el azul/blanco "clásico" */
  --bg:           #fbf7f0;
  --bg-soft:      #fdf0e6;   /* durazno pastel para secciones alternas   */
  --bg-soft-2:    #eaf7f2;   /* menta pastel para secciones alternas     */
  --surface:      #ffffff;
  --ink:          #1f2a24;   /* tinta cálida, casi negro con tono verde  */
  --ink-soft:     #3a473f;
  --muted:        #6b7a70;
  --muted-2:      #94a39a;
  --line:         #e7ded0;
  --line-strong:  #d6c9b3;

  /* Acento primario — teal/esmeralda fresco: confianza + eficiencia */
  --accent:       #0f9d8b;
  --accent-hover: #0c7f70;
  --accent-soft:  #e1f5f1;
  --accent-line:  #b7e4dc;
  --accent-ink:   #06342c;

  /* Acento secundario — coral cálido, para CTAs: energía, cercanía */
  --coral:        #ff7a55;
  --coral-hover:  #e85f3a;
  --coral-soft:   #ffe9e0;
  --coral-line:   #ffc7b0;

  --danger:       #b3402f;
  --danger-soft:  #fbe9e6;
  --ok:           #1f8a5f;

  /* Typography — pila de sistema, sin descargas */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;

  /* Layout */
  --container:        1160px;
  --container-narrow: 720px;

  /* Radios grandes — look "redondo" y amigable */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(31,42,36,.06);
  --shadow:    0 10px 30px rgba(31,42,36,.08);
  --shadow-lg: 0 20px 50px rgba(31,42,36,.12);
  --transition: 180ms ease;
}

/* --- Reset --------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.section-tight { padding: 2rem 0 0; }
@media (max-width: 720px) { .section { padding: 3.25rem 0; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-hover); background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: .35rem .85rem; border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.2rem; }
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 56ch; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mark { color: var(--coral); }

/* --- Buttons ------------------------------------------------*/
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.7rem; border-radius: var(--radius-pill);
  font-size: .95rem; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  line-height: 1;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 8px 20px rgba(255,122,85,.32); }
.btn-primary:hover { background: var(--coral-hover); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(15,157,139,.28); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink-soft); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: transparent; }
.btn-ghost:hover { background: var(--bg-soft-2); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: .55rem 1.1rem; font-size: .85rem; }
.btn-lg { padding: 1.05rem 2.2rem; font-size: 1.05rem; }
.btn[disabled], .btn-disabled { opacity: .55; cursor: default; pointer-events: none; }

/* --- Cards ----------------------------------------------------*/
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.card-soft { background: var(--bg-soft-2); border-color: var(--accent-line); }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* --- Navbar (public site) -------------------------------------*/
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,247,240,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1.5rem; }
.nav-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 1.3rem; font-weight: 800; color: var(--ink); text-decoration: none;
  letter-spacing: -.02em;
}
.nav-brand:hover { text-decoration: none; }
.nav-brand .accent { color: var(--accent); }
.nav-links.desktop { display: flex; align-items: center; gap: 1.75rem; }
.nav-links.desktop li { display: flex; align-items: center; }
.nav-links a:not(.btn) { color: var(--ink-soft); font-weight: 600; font-size: .93rem; }
.nav-links a:not(.btn):hover { color: var(--ink); text-decoration: none; }
.nav-toggle {
  display: none; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); padding: .5rem 1rem; font-weight: 700; cursor: pointer;
}
.nav-mobile { display: none; border-bottom: 1px solid var(--line); background: var(--surface); }
.nav-mobile.open { display: block; }
.nav-mobile .container { display: flex; flex-direction: column; gap: .9rem; padding: 1.25rem 1.5rem; }
.nav-mobile a { color: var(--ink-soft); font-weight: 600; }
@media (max-width: 860px) {
  .nav-links.desktop { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* --- Hero -------------------------------------------------------*/
.hero {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 0;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center;
  padding-bottom: 3rem;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-art {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  min-height: 260px;
}
.hero-art svg { width: 100%; height: 100%; display: block; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: .5rem 1rem;
  font-size: .82rem; font-weight: 700; color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* --- Feature rows / sections -------------------------------------*/
.section-soft { background: var(--bg-soft-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 640px; margin: 0 auto 2.75rem; text-align: center; }
.section-head.left { margin: 0 0 2.75rem; text-align: left; }

.feature-card { display: flex; flex-direction: column; gap: .85rem; }
.feature-icon {
  width: 52px; height: 52px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-hover);
  font-size: 1.4rem;
}
.feature-icon.coral { background: var(--coral-soft); color: var(--coral-hover); }

/* Dos "pilares" del producto (centro de administración / app para todos) */
.pillar-card {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.pillar-card.accent { background: var(--accent-soft); border-color: var(--accent-line); }
.pillar-card.coral { background: var(--coral-soft); border-color: var(--coral-line); }
.pillar-icon {
  width: 56px; height: 56px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; background: var(--surface); box-shadow: var(--shadow-sm);
}
.pillar-card h3 { font-size: 1.25rem; margin-bottom: 0; }

/* Grid compacto de capacidades (muchas cajitas chicas) */
.grid-mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.1rem;
}
.mini-card {
  display: flex; align-items: flex-start; gap: .85rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.mini-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft-2); font-size: 1.05rem;
}
.mini-card h4 { font-size: .92rem; font-weight: 700; margin: 0 0 .25rem; }
.mini-card p { font-size: .82rem; color: var(--muted); margin: 0; line-height: 1.45; }

/* Precios */
.pricing-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
  max-width: 780px; margin: 0 auto;
}
@media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.pricing-card.highlight {
  border-color: var(--accent); border-width: 2px;
  box-shadow: var(--shadow-lg);
}
.pricing-badge {
  position: absolute; top: -13px; right: 1.5rem;
  background: var(--accent); color: #fff;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .3rem .75rem; border-radius: var(--radius-pill);
}
.pricing-name { font-size: 1.05rem; font-weight: 800; }
.pricing-price { display: flex; align-items: baseline; gap: .35rem; }
.pricing-price .amount { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; }
.pricing-price .period { font-size: .85rem; color: var(--muted); }
.pricing-list { display: flex; flex-direction: column; gap: .65rem; }
.pricing-list li { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; color: var(--ink-soft); list-style:none; }
.pricing-list li svg { flex: 0 0 auto; margin-top: .15rem; color: var(--accent); }
.pricing-list li.muted-item svg { color: var(--muted-2); }
.pricing-note { font-size: .78rem; color: var(--muted); margin: 0; }

.scale-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.scale-step {
  flex: 1; min-width: 150px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1rem; box-shadow: var(--shadow-sm);
}
.scale-step .num { font-size: 1.9rem; font-weight: 800; color: var(--accent); }
.scale-arrow { color: var(--muted-2); font-size: 1.5rem; flex: 0 0 auto; }
@media (max-width: 720px) { .scale-arrow { transform: rotate(90deg); } }

/* --- CTA band ------------------------------------------------*/
.cta-band {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent) 0%, #0c7f70 100%);
  color: #fff; padding: 3rem; text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.86); }
.cta-band .btn-primary { box-shadow: 0 10px 24px rgba(0,0,0,.2); }

/* --- Footer -------------------------------------------------------*/
.footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; padding: 3.5rem 0 2.5rem; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
.footer h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 1rem; }
.footer ul li { margin-bottom: .6rem; }
.footer a { color: var(--ink-soft); font-size: .92rem; }
.footer a:hover { color: var(--accent-hover); }
.footer-bottom {
  border-top: 1px solid var(--line); padding: 1.5rem 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  font-size: .82rem; color: var(--muted);
}

/* --- Session widget (nav account) ---------------------------------*/
.nav-account { display: flex; align-items: center; gap: .65rem; }
.account-wrap { position: relative; }
.account-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .7rem .4rem .4rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  cursor: pointer; font-size: .88rem; color: var(--ink); transition: border-color var(--transition);
}
.account-btn:hover { border-color: var(--ink-soft); }
.account-initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: .72rem; font-weight: 700; color: var(--accent-ink);
  background: var(--accent-soft);
}
.account-name { font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; z-index: 200;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.account-header { padding: 1rem; text-align: center; border-bottom: 1px solid var(--line); }
.account-name-full { font-weight: 700; font-size: .95rem; }
.account-meta { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.account-menu { padding: .4rem; }
.account-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem; border-radius: var(--radius-sm);
  font-size: .88rem; color: var(--ink); text-decoration: none;
}
.account-item:hover { background: var(--bg-soft-2); text-decoration: none; }
.account-logout {
  margin: .75rem auto 0; display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft);
  padding: .4rem .9rem; border-radius: var(--radius-pill); font-size: .78rem; cursor: pointer;
}
.account-logout:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* --- Auth card (/acceso) -----------------------------------------*/
.auth-shell { min-height: calc(100vh - 72px); display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.auth-card { width: 100%; max-width: 420px; text-align: center; }
.auth-card .card { padding: 2.5rem 2rem; }
.auth-logo { width: 56px; height: 56px; margin: 0 auto 1.25rem; border-radius: var(--radius); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; }
#g_id_onload, .g_id_signin { display: flex; justify-content: center; margin-top: 1.5rem; }
.auth-message { margin-top: 1rem; font-size: .85rem; color: var(--danger); display: none; }
.auth-message.visible { display: block; }
.auth-fineprint { margin-top: 1.5rem; font-size: .78rem; color: var(--muted-2); }

/* --- Consola shell -----------------------------------------------*/
.app-shell { display: flex; min-height: 100vh; background: var(--bg-soft-2); }
.app-sidebar {
  width: 250px; flex: 0 0 auto; background: var(--surface);
  border-right: 1px solid var(--line); padding: 1.5rem 1rem;
  display: flex; flex-direction: column; gap: .3rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.app-brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.1rem; padding: 0 .6rem 1.25rem; color: var(--ink); text-decoration: none; }
.app-brand .accent { color: var(--accent); }
.app-nav-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem; border-radius: var(--radius); font-size: .9rem; font-weight: 600;
  color: var(--ink-soft); text-decoration: none;
}
.app-nav-item:hover { background: var(--bg-soft-2); text-decoration: none; }
.app-nav-item.active { background: var(--accent-soft); color: var(--accent-ink); }
.app-nav-item.disabled { color: var(--muted-2); cursor: default; pointer-events: none; }
.app-nav-item .soon {
  margin-left: auto; font-size: .65rem; font-weight: 700; text-transform: uppercase;
  background: var(--bg-soft); color: var(--muted); padding: .15rem .45rem; border-radius: var(--radius-pill);
}
.app-nav-sep { height: 1px; background: var(--line); margin: .85rem .6rem; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.75rem; border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 50;
}
.app-menu-toggle { display: none; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .4rem .6rem; cursor: pointer; }
.app-content { flex: 1 1 auto; padding: 2rem 1.75rem 3rem; }
.app-content-inner { max-width: 980px; margin: 0 auto; }
@media (max-width: 900px) {
  .app-sidebar { position: fixed; left: -260px; top: 0; z-index: 300; transition: left var(--transition); box-shadow: var(--shadow-lg); }
  .app-sidebar.open { left: 0; }
  .app-menu-toggle { display: inline-flex; }
}

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.5rem; margin-bottom: .3rem; }
.page-head p { color: var(--muted); margin: 0; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); }
.panel-head { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel-title { font-size: .95rem; font-weight: 700; color: var(--ink); }
.panel-sub { font-size: .8rem; color: var(--muted); margin-top: .15rem; }
.panel-body { padding: 1.4rem; }

.empty-state { text-align: center; padding: 3.5rem 1.5rem; }
.empty-state .icon {
  width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent-hover);
  display: flex; align-items: center; justify-content: center;
}
.empty-state h3 { margin-bottom: .4rem; }
.empty-state p { color: var(--muted); max-width: 40ch; margin: 0 auto; }

.field-row { display: grid; grid-template-columns: 220px 1fr; gap: 1rem 1.5rem; padding: .9rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.field-row:last-child { border-bottom: none; }
.field-row label { font-weight: 600; font-size: .88rem; color: var(--ink-soft); }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; gap: .4rem; } }

.input {
  width: 100%; max-width: 380px; padding: .65rem .9rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: .92rem; font-family: inherit; color: var(--ink);
  background: var(--surface); transition: border-color var(--transition);
}
.input:focus { outline: none; border-color: var(--accent); }
.input.textarea { max-width: 100%; width: 100%; resize: vertical; line-height: 1.5; font-family: inherit; }

.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 700; }
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge-coral { background: var(--coral-soft); color: var(--coral-hover); }

.table-simple { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table-simple th { text-align: left; font-weight: 700; color: var(--muted); padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.table-simple td { padding: .65rem .9rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.table-simple tbody tr:last-child td { border-bottom: none; }

.inline-message { margin-top: .75rem; padding: .65rem 1rem; border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600; display: none; }
.inline-message.visible { display: block; }
.inline-message.ok { background: var(--accent-soft); color: var(--accent-ink); }
.inline-message.error { background: var(--danger-soft); color: var(--danger); }

/* --- Dashboard: estado vacío, 2 botones grandes ------------------- */
.empty-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
@media (max-width: 640px) { .empty-actions { grid-template-columns: 1fr; } }
.big-choice-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
  padding: 2rem 1.5rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 2px solid var(--line);
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
a.big-choice-btn:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.big-choice-btn.disabled { color: var(--muted-2); cursor: default; opacity: .7; }
.big-choice-icon { font-size: 2rem; }
.big-choice-title { font-weight: 800; font-size: 1.05rem; }
.big-choice-sub { font-size: .82rem; color: var(--muted); }
.big-choice-btn .soon {
  position: absolute; top: .85rem; right: .85rem;
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  background: var(--bg-soft); color: var(--muted); padding: .2rem .55rem; border-radius: var(--radius-pill);
}

/* --- Wizard "crear macro" (mapa primero, luego el resto) ---------- */
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.map-shell { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.map-search { display: flex; gap: .6rem; padding: .9rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.map-search .input { max-width: none; flex: 1; }
#edificio-map { width: 100%; height: 360px; background: var(--bg-soft-2); }
.map-hint { font-size: .82rem; color: var(--muted); margin-top: .6rem; }

.location-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--accent-soft);
  border: 1px solid var(--accent-line); margin-bottom: 1.5rem; flex-wrap: wrap;
}
.location-summary .addr { font-weight: 600; font-size: .9rem; color: var(--accent-ink); }

.duplicate-notice {
  border-radius: var(--radius); border: 1px solid var(--coral-line); background: var(--coral-soft);
  padding: 1.25rem; margin-top: 1.25rem;
}
.duplicate-notice h4 { margin-bottom: .35rem; font-size: .98rem; }
.duplicate-notice p { color: var(--ink-soft); font-size: .88rem; margin-bottom: 1rem; }
.duplicate-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.duplicate-message-box { margin-top: 1rem; display: none; }
.duplicate-message-box.visible { display: block; }
.duplicate-message-box textarea {
  width: 100%; min-height: 90px; padding: .7rem .9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); font-family: inherit; font-size: .88rem; resize: vertical;
}
.duplicate-message-box .actions { margin-top: .65rem; display: flex; gap: .6rem; }

.photo-drop {
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  padding: 1.5rem; text-align: center; cursor: pointer; color: var(--muted);
  transition: border-color var(--transition), background var(--transition);
}
.photo-drop:hover { border-color: var(--accent); background: var(--bg-soft-2); }
.photo-drop input[type="file"] { display: none; }
.photo-preview { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.photo-preview .thumb {
  width: 76px; height: 76px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft-2);
}
.photo-preview .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hidden { display: none !important; }