/* ---------------------------------------------------------------------------
   Las tipografías de Gestya

   Se sirven desde este servidor y no desde Google: así ninguna visita queda
   registrada en un tercero, y la página no depende de que otro dominio
   responda para poder dibujarse.

   League Spartan es una fuente variable —un solo archivo trae todos los
   grosores— y por eso las dos juntas pesan 45 KB.

   `font-display: swap` muestra el texto con la tipografía del sistema mientras
   la propia carga. Se lee desde el primer instante; después cambia. La
   alternativa es una página en blanco esperando una fuente.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'League Spartan';
  src: url('../fuentes/league-spartan.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Questrial';
  src: url('../fuentes/questrial.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Los dos colores del logo, exactos. Todo lo demás sale de acá. */
  --marca-verde: #34b193;
  --marca-azul: #09264d;

  --fuente-titulos: 'League Spartan', 'Segoe UI', system-ui, sans-serif;
  --fuente-texto: 'Questrial', 'Segoe UI', system-ui, sans-serif;

  --bg: #f5f5f9;
  --surface: #ffffff;
  --text: #16151a;
  --muted: #6b6b76;
  --border: #e7e5ee;
  --dark: #09264d;
  --dark-2: #0e3566;
  --accent: #09264d;
  --accent-2: #34b193;
  /* El mismo acento en componentes, para poder hacerlo translúcido. CSS no
     sabe sacarle transparencia a un color ya armado, así que se guardan los
     números sueltos y las sombras se calculan con rgba(var(--accent-rgb), …).
     Antes cada transparencia era un rosa escrito a mano en veinte lugares. */
  --accent-rgb: 9, 38, 77;
  /* Qué color usar para el texto que va ENCIMA de un relleno de --accent.
     Sin esto, cada cambio de paleta deja letras ilegibles en los botones. */
  --accent-contraste: #ffffff;
  --info: #0ea5e9;
  --info-bg: #e4f5fd;
  --purple: #8b5cf6;
  --purple-bg: #f1ecfe;
  --success: #17b26a;
  --success-bg: #e7f8ef;
  --danger: #e5484d;
  --danger-bg: #fdecec;
  --warning: #f59e0b;
  --warning-bg: #fef3e0;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 10, 30, 0.05), 0 4px 14px rgba(20, 10, 30, 0.07);

  /* Fondos que en modo día son claros y en modo noche se oscurecen */
  --page-bg: linear-gradient(180deg, #f8f6fc 0%, #f5f5f9 260px);
  --surface-2: #f6f4fa;
  --input-bg: #ffffff;
}

/* ---------- Modo noche ----------
   Solo se redefinen las variables: el resto de la hoja ya las usa, así que
   ninguna regla de layout necesita duplicarse. Los colores de estado
   (éxito, peligro...) se aclaran un poco para que contrasten sobre fondo
   oscuro, y sus fondos suaves pasan a ser translúcidos. */
:root[data-theme="oscuro"] {
  --bg: #131217;
  --surface: #1c1b22;
  --text: #ece9f2;
  --muted: #a09daf;
  --border: #302e3a;
  --dark: #061a35;
  --dark-2: #0e3566;
  /* Sobre fondo oscuro manda el verde: el azul marino del logo se confunde
     con el fondo. Es el mismo criterio con que existen las dos versiones del
     logo, aplicado al resto de la interfaz. */
  --accent: #34b193;
  --accent-2: #6fd0b8;
  --accent-rgb: 52, 177, 147;
  --accent-contraste: #09264d;
  --info: #38bdf8;
  --info-bg: rgba(56, 189, 248, .16);
  --purple: #a78bfa;
  --purple-bg: rgba(167, 139, 250, .16);
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, .16);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, .16);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, .16);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .30);

  --page-bg: linear-gradient(180deg, #17161d 0%, #131217 260px);
  --surface-2: #26242e;
  --input-bg: #17161d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--fuente-texto);
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- Títulos y negritas ----------
   Questrial viene en un solo grosor: no tiene negrita. Si se la pidiéramos,
   el navegador la inventaría engordando los trazos, y eso se nota —las letras
   quedan embarradas—. Así que todo lo que va en negrita usa League Spartan,
   que sí trae los grosores dibujados.

   No es un parche: es el sistema tipográfico. Questrial para leer, League
   Spartan para lo que tiene que pesar. */
h1, h2, h3, h4, h5, h6,
strong, b, th, label, legend,
.btn, .kpi .value, .badge {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1, h2 { font-weight: 700; letter-spacing: -0.02em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 224px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #071d3a 0%, #09264d 55%, #0b2c5a 100%);
  color: #fff;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: transform .2s ease;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.25rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar .brand img {
  height: 26px;
  width: auto;
  max-width: 100%;
  display: block;
  /* El teñido a blanco ya no va acá: lo decide logo_clase() y solo se aplica
     cuando el negocio no subió un logo propio para fondo oscuro. */
}
.sidebar .brand span { font-weight: 700; letter-spacing: .02em; }

.sidebar nav { flex: 1; overflow-y: auto; padding: .75rem 0; }

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem 1.1rem;
  color: #cfcfd4;
  font-size: .92rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease;
}

.sidebar nav a .nav-icon { font-size: 1.05rem; line-height: 1; width: 1.3rem; text-align: center; flex-shrink: 0; }
.sidebar nav a .nav-label { flex: 1; }

.sidebar nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }

.sidebar nav a.active {
  color: #fff;
  border-left-color: var(--accent);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.04));
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contraste);
  font-size: .68rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18);
}

.sidebar .user-box {
  padding: 1rem 1.1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .85rem;
  color: #b7b7bd;
}

.sidebar .user-box a { color: var(--accent-2); }
.sidebar .user-box-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.sidebar .user-box-row span { color: #e5e5ea; font-weight: 600; }
.sidebar .gear-link {
  font-size: 1rem;
  text-decoration: none;
  opacity: .8;
  transition: opacity .15s ease, transform .15s ease;
}
.sidebar .gear-link:hover { opacity: 1; transform: rotate(45deg); text-decoration: none; }

.main {
  margin-left: 220px;
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.75rem 3rem;
}

.topbar {
  display: none;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.topbar .menu-toggle {
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .5rem .7rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; padding: 1.1rem 1rem 3rem; }
  .topbar { display: flex; }
  .sidebar-backdrop.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 30;
  }
}

/* ---------- Components ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

/* Tarjetas apiladas una debajo de otra necesitan separación... */
.card + .card { margin-top: 1rem; }

/* ...pero dentro de una grilla el `gap` ya la da. Sin esta excepción, la 2ª,
   3ª y 4ª tarjeta de cada fila quedaban empujadas 1rem hacia abajo: por eso
   se veían desalineadas y la primera parecía más alta que el resto.
   Quitando el margen, la grilla estira todas las tarjetas de la fila a la
   misma altura por sí sola. */
.grid > .card + .card { margin-top: 0; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.kpi { display: flex; flex-direction: column; gap: .25rem; }
.kpi .label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.kpi .value { font-size: 1.6rem; font-weight: 700; }
.kpi .value.accent { color: var(--accent); }

.kpi-row { display: flex; align-items: flex-start; gap: .85rem; }
.kpi-icon {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.kpi-icon.pink { background: rgba(var(--accent-rgb),.12); }
.kpi-icon.green { background: var(--success-bg); }
.kpi-icon.blue { background: var(--info-bg); }
.kpi-icon.purple { background: var(--purple-bg); }
.kpi-icon.amber { background: var(--warning-bg); }
.kpi-icon.red { background: var(--danger-bg); }

.level-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, var(--surface) 60%, var(--purple-bg) 140%);
}
.level-icon {
  flex-shrink: 0;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 4px 14px rgba(139,92,246,.3);
}
.level-info { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.level-title { font-size: 1.1rem; font-weight: 700; }

.progress-bar {
  width: 100%;
  height: .5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin: .3rem 0;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  border-radius: 999px;
  transition: width .4s ease;
}

.meta-dots { display: flex; gap: .35rem; margin: .3rem 0; }
.meta-dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
}
.meta-dot.filled {
  background: linear-gradient(135deg, var(--success), #0f9e5b);
  border-color: transparent;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.page-acciones { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Varias casillas en una línea. Sueltas no se puede: las etiquetas son de
   bloque, así que se apilan y cualquier separación horizontal se lee como una
   sangría —una casilla más adentro que la otra sin motivo—. */
.casillas { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.casillas label {
  display: flex; align-items: center; gap: .4rem; margin: 0; cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .55rem 1rem;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: var(--dark-2); text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.btn:active { transform: translateY(0); box-shadow: none; }
/* El botón que queremos que aprieten va en el verde de la marca, con la tinta
   azul encima. Verde con letras blancas da un contraste de 2,7 a 1 y no se lee;
   con el azul del logo sube a 5,6 y además es la combinación que ya existe en
   la marca. El mismo par en modo día y en modo noche: el llamado a la acción
   no tiene por qué cambiar de color según el tema. */
.btn-accent {
  background: linear-gradient(135deg, var(--marca-verde), #46c4a6);
  color: var(--marca-azul);
}
.btn-accent:hover {
  background: linear-gradient(135deg, #2aa082, var(--marca-verde));
  box-shadow: 0 4px 14px rgba(52, 177, 147, .38);
  color: var(--marca-azul);
}
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { background: var(--bg); box-shadow: none; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #cc3438; box-shadow: 0 4px 12px rgba(229,72,77,.3); }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }

.badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-muted { background: var(--surface-2); color: var(--muted); }

.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #25D366;
  font-weight: 600;
  white-space: nowrap;
}
.whatsapp-link:hover { text-decoration: underline; }
.whatsapp-link svg { flex-shrink: 0; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover { background: var(--bg); }
.table-wrap { overflow-x: auto; }

form .field { margin-bottom: 1rem; }
label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
input, select, textarea {
  width: 100%;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .92rem;
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
}
/* Una casilla mide lo que mide. El `width: 100%` de arriba también le llegaba,
   así que ocupaba toda la línea disponible y empujaba a su propio texto a
   partirse en tres renglones al costado. Se veía como un descuadre del diseño
   y en realidad era esto. */
input[type="checkbox"], input[type="radio"] { width: auto; }

/* El selector de color no es una caja de texto: estirado a toda la línea se
   lee como un campo vacío en vez de como una muestra del color elegido. */
input[type="color"] {
  width: 46px; height: 34px; padding: 2px; flex-shrink: 0;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15);
}
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.help-text { color: var(--muted); font-size: .78rem; margin-top: .25rem; }

.combobox { position: relative; }
.combobox-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: var(--shadow);
  z-index: 50;
}
.combobox-results.open { display: block; }
.combobox-result-item { padding: .5rem .65rem; cursor: pointer; font-size: .88rem; }
.combobox-result-item:hover { background: var(--bg); }

.alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.alert-success { background: var(--success-bg); color: var(--success); }
.alert-danger { background: var(--danger-bg); color: var(--danger); }

.empty-state { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }

/* ---------- Toasts (alertas que requieren atención) ---------- */
.toast-container {
  position: fixed;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  width: 340px;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--danger);
  border-radius: 10px;
  padding: .8rem .9rem;
  box-shadow: 0 10px 30px rgba(20,10,30,.18);
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  opacity: 0;
  transform: translateX(16px);
  animation: toast-in .25s ease forwards;
}
.toast.toast-warning { border-left-color: var(--warning); }
.toast.toast-celebracion {
  border-left-color: var(--purple);
  background: linear-gradient(135deg, var(--surface) 55%, var(--purple-bg) 160%);
}
.toast.toast-inspiracion {
  border-left-color: var(--accent-2);
  background: linear-gradient(135deg, var(--surface) 55%, rgba(var(--accent-rgb),.10) 160%);
}
.toast .toast-icon { font-size: 1.15rem; line-height: 1.3; flex-shrink: 0; }
.toast .toast-body { flex: 1; font-size: .85rem; }
.toast .toast-body strong { display: block; margin-bottom: .15rem; font-size: .88rem; }
.toast .toast-body a { font-weight: 600; }
.toast .toast-close {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 1rem; line-height: 1; padding: 0 0 0 .25rem; flex-shrink: 0;
}
.toast .toast-close:hover { color: var(--text); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---------- Ayuda por sección ---------- */
.help-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 150;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--purple), #6d3ce0);
  color: #fff;
  border: none;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(139,92,246,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
.help-fab:hover { transform: translateY(-2px) scale(1.04); }

.help-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,8,15,.5);
  z-index: 160;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.help-modal-overlay.open { display: flex; }

.help-modal {
  background: var(--surface);
  border-radius: 14px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.help-modal h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--purple);
}
.help-modal ul { margin: 0; padding-left: 1.2rem; }
.help-modal li { margin-bottom: .55rem; line-height: 1.45; }
.help-modal .help-close {
  float: right;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}
.help-modal .help-close:hover { color: var(--text); }

/* ---------- Login ---------- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  padding: 1rem;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.auth-card .brand-mark {
  text-align: center;
  margin-bottom: 1.5rem;
}
.auth-card .brand-mark img { height: 36px; width: auto; max-width: 100%; }
.auth-card .brand-mark span {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .02em;
}
.auth-card .accent-bar {
  height: 4px;
  width: 48px;
  background: var(--accent);
  border-radius: 4px;
  margin: 0 auto 1.25rem;
}


/* ---------- Galería del admin (productos/imagenes.php) ---------- */
.galeria-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.galeria-item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.galeria-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.galeria-item-body { padding: .6rem; display: flex; flex-direction: column; gap: .45rem; }
.galeria-item-body select { width: 100%; padding: .35rem; border: 1px solid var(--border); border-radius: 7px; font-size: .85rem; background: var(--input-bg); color: var(--text); }
.galeria-acciones { display: flex; flex-wrap: wrap; gap: .25rem; }

/* ---------- Vista previa de la portada del catálogo (configuracion/catalogo.php) ---------- */
.portada-preview {
  position: relative; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--surface-2);
}
.portada-preview img { width: 100%; height: 220px; object-fit: cover; display: block; }
.portada-preview-texto {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: .3rem;
  color: #fff; padding: 1rem;
  background: linear-gradient(180deg, rgba(11,11,12,.15) 0%, rgba(11,11,12,.62) 100%);
}
.portada-preview-texto strong { font-size: 1.5rem; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.portada-preview-texto span { font-size: .9rem; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.portada-vacia {
  height: 220px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: .9rem;
}

/* ---------- Logo según el fondo ----------
   Si el negocio subió el logo para ese fondo, se muestra tal cual (respeta
   sus colores). Si no lo subió, se tiñe el que haya para que igual se lea. */
.logo-a-blanco { filter: brightness(0) invert(1); }
.logo-a-negro  { filter: brightness(0); }

/* Pareja de logos: se muestra el que corresponde al tema activo */
.logo-en-noche { display: none; }
:root[data-theme="oscuro"] .logo-en-dia { display: none; }
:root[data-theme="oscuro"] .logo-en-noche { display: block; }

/* ---------- Botón de modo día / noche ---------- */
.tema-toggle {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 0;
  transition: border-color .15s ease, background .15s ease;
}
.tema-toggle:hover { border-color: var(--accent); }

/* Dentro del menú lateral, que siempre es oscuro */
.sidebar .tema-toggle {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: #e5e5ea;
}
.sidebar .tema-toggle:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }

/* ---------- Atributos del producto (productos/ver.php) ---------- */
.atributos-lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.atributo-chip {
  display: flex; align-items: center; gap: .35rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); padding: .25rem .35rem .25rem .7rem;
}
.atributo-chip .atributo-nombre { margin: 0; }
.atributo-chip input[type="text"] {
  border: 0; background: none; color: inherit; font-size: .9rem; font-weight: 600;
  padding: 0; width: 8.5ch; min-width: 4ch;
}
.atributo-chip input[type="text"]:focus { outline: none; border-bottom: 1px dashed var(--accent); }
.atributo-acciones { display: flex; gap: .2rem; }
.atributo-acciones form { display: inline; }
.atributo-acciones .btn-sm { padding: .1rem .4rem; line-height: 1.4; }

/* ---------- Selector de base de prueba (solo en local) ---------- */
.bd-demo {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed rgba(255,255,255,.15);
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.bd-demo-titulo {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8b8b95;
  margin-bottom: .15rem;
}
.bd-demo a {
  color: #cfcfd4 !important;
  font-size: .82rem;
  padding: .25rem .45rem;
  border-radius: 6px;
  text-decoration: none;
}
.bd-demo a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.bd-demo a.activa { background: rgba(var(--accent-rgb),.2); color: #fff !important; font-weight: 600; }

/* ---------- Elección del perfil de negocio ---------- */
.perfil-pantalla {
  max-width: 780px;
  margin: 6vh auto;
  padding: 1.5rem;
  text-align: center;
}
.perfil-pantalla .brand-mark img { height: 40px; width: auto; margin: 0 auto 1.5rem; object-fit: contain; }
.perfil-pantalla h1 { font-size: 1.6rem; margin-bottom: .5rem; }
.perfil-intro { color: var(--muted); max-width: 52ch; margin: 0 auto 1.75rem; }
.perfil-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.perfil-tarjeta {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 1.75rem 1.25rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  text-align: center;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.perfil-tarjeta:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.perfil-tarjeta.elegido { border-color: var(--success); }
.perfil-icono { font-size: 2.6rem; line-height: 1; }
.perfil-tarjeta strong { font-size: 1.15rem; }
.perfil-desc { color: var(--muted); font-size: .9rem; }
.perfil-ejemplos { color: var(--muted); font-size: .78rem; opacity: .8; }
.perfil-nota { color: var(--muted); font-size: .85rem; margin: 1.5rem auto .75rem; max-width: 52ch; }
@media (max-width: 560px) { .perfil-opciones { grid-template-columns: 1fr; } }

/* ---------- Comanda (pantalla de cocina) ---------- */
.comanda-tablero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
.comanda-columna { display: flex; flex-direction: column; gap: .6rem; }
.comanda-columna-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .9rem; border-radius: 10px; font-weight: 700; font-size: .92rem;
  background: var(--surface-2); border: 1px solid var(--border);
}
.comanda-columna-head.estado-info    { background: var(--info-bg);    color: var(--info); }
.comanda-columna-head.estado-warning { background: var(--warning-bg); color: var(--warning); }
.comanda-columna-head.estado-success { background: var(--success-bg); color: var(--success); }
.comanda-contador {
  background: rgba(0,0,0,.12); border-radius: 999px; padding: 0 .5rem; font-size: .8rem;
}
.comanda-vacia { text-align: center; color: var(--muted); padding: 1rem 0; margin: 0; }

.comanda-ticket {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 10px; padding: .8rem; box-shadow: var(--shadow);
}
.comanda-ticket.urgente { border-left-color: var(--danger); }
.comanda-ticket-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; }
.comanda-ticket-head strong { font-size: 1.05rem; }
.comanda-tiempo { font-size: .8rem; color: var(--muted); }
.comanda-tiempo.urgente { color: var(--danger); font-weight: 700; }
.comanda-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .82rem; color: var(--muted); margin-bottom: .5rem; }
.comanda-items { list-style: none; margin: 0 0 .5rem; padding: 0; font-size: .92rem; }
.comanda-items li { padding: .15rem 0; }
.comanda-cant { font-weight: 700; color: var(--accent); margin-right: .25rem; }
/* Lo que el cliente pidió sobre el plato: salsas, extras, "sin cebolla" */
.comanda-opciones {
  display: block; font-size: .82rem; color: var(--muted);
  padding-left: 1.35rem; line-height: 1.3;
}
.comanda-notas {
  background: var(--warning-bg); color: var(--warning);
  padding: .4rem .6rem; border-radius: 8px; font-size: .82rem; margin: 0 0 .5rem;
}
.comanda-direccion { font-size: .82rem; color: var(--muted); margin: 0 0 .5rem; }
.comanda-acciones { display: flex; gap: .35rem; flex-wrap: wrap; }
.comanda-acciones form { display: inline; }

@media (max-width: 900px) { .comanda-tablero { grid-template-columns: 1fr; } }

/* ---------- Toma de pedido del mozo ---------- */
.mozo-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; align-items: start; }
.mozo-carta { display: flex; flex-direction: column; gap: 1rem; }
.mozo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.mozo-item {
  display: flex; flex-direction: column; gap: .15rem; text-align: left;
  padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: inherit; cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, transform .1s ease;
}
.mozo-item:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.mozo-item:active:not(:disabled) { transform: scale(.98); }
.mozo-item.agotado { opacity: .45; cursor: not-allowed; }
.mozo-variante { font-size: .78rem; color: var(--muted); }
.mozo-precio { font-weight: 700; color: var(--accent); }
.mozo-disp { font-size: .72rem; color: var(--muted); }

.mozo-cuenta { position: sticky; top: 1rem; }
.mozo-lineas { margin: .75rem 0; display: flex; flex-direction: column; gap: .4rem; }
.mozo-linea {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .55rem; border: 1px solid var(--border); border-radius: 8px;
}
.mozo-linea-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mozo-linea-info strong { font-size: .88rem; }
.mozo-linea-info span { font-size: .76rem; color: var(--muted); }
.mozo-linea-ctrl { display: flex; align-items: center; gap: .3rem; }
.mozo-linea-ctrl button {
  width: 1.9rem; height: 1.9rem; border: 1px solid var(--border); border-radius: 7px;
  background: var(--input-bg); color: inherit; cursor: pointer; font-size: 1rem; line-height: 1;
}
.mozo-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 0; border-top: 1px solid var(--border); font-size: 1.05rem;
}
.mozo-total strong { color: var(--accent); font-size: 1.3rem; }
.btn-full { width: 100%; }

@media (max-width: 900px) {
  .mozo-layout { grid-template-columns: 1fr; }
  .mozo-cuenta { position: static; }
}
/* Comentario que el cliente escribió para ese plato */
.comanda-nota-item { font-style: italic; }

/* ---------- Agenda ---------- */
.agenda-tabla { table-layout: fixed; }
.agenda-tabla th, .agenda-tabla td { vertical-align: top; padding: .2rem .3rem; }
.agenda-hora-col {
  width: 4.5rem; white-space: nowrap; color: var(--muted);
  font-size: .82rem; font-weight: 500; text-align: right;
}
.agenda-punto {
  display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  margin-right: .35rem; vertical-align: middle;
}
.agenda-celda-libre { padding: 0 !important; }
.agenda-libre {
  display: block; min-height: 2rem; line-height: 2rem; text-align: center;
  color: transparent; border-radius: 6px; transition: background .12s ease, color .12s ease;
}
.agenda-libre:hover {
  background: var(--surface-2); color: var(--accent); text-decoration: none; font-weight: 700;
}
/* Fuera del horario de atención: se ve que ahí no se agenda */
.agenda-celda-cerrada {
  background: repeating-linear-gradient(45deg,
    transparent, transparent 5px, var(--surface-2) 5px, var(--surface-2) 10px);
}
.agenda-celda-ocupada { padding: .15rem !important; }
.agenda-cita {
  display: block; height: 100%; padding: .4rem .55rem; border-radius: 8px;
  border-left: 4px solid var(--accent); background: var(--surface-2);
  color: var(--text); font-size: .84rem; line-height: 1.3;
}
.agenda-cita:hover { text-decoration: none; filter: brightness(1.04); }
.agenda-cita strong { display: block; }
.agenda-cita-servicio { display: block; color: var(--muted); font-size: .78rem; }
.agenda-cita-pie { display: block; color: var(--muted); font-size: .72rem; margin-top: .15rem; }
.agenda-cita.estado-warning { background: var(--warning-bg); }
.agenda-cita.estado-success { background: var(--success-bg); }
.agenda-cita.estado-info    { background: var(--info-bg); }
.agenda-cita.estado-purple  { background: var(--purple-bg); }
.agenda-cita.estado-danger  { background: var(--danger-bg); }

/* ---------- Historia clínica y evolución ---------- */
.linea-tiempo {
  border-left: 3px solid var(--border);
  padding: .35rem 0 .85rem 1rem;
  margin-left: .35rem;
}
.linea-tiempo:last-child { padding-bottom: 0; }
.linea-tiempo-cabeza {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: space-between; align-items: baseline;
}
/* Tarjeta que pide atención: un internado sin anotar, una mascota adentro */
.card-alerta { border-left: 4px solid var(--warning); }
.hospital-indicaciones {
  background: var(--surface-2); border-radius: 10px; padding: .85rem 1rem;
  margin: 0; font-size: .95rem; line-height: 1.5;
}

/* ---------- Odontograma ---------- */
.odo-tablero {
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1.25rem;
  justify-items: center; overflow-x: auto; padding-bottom: .5rem;
}
.odo-cuadrante { display: flex; gap: .3rem; }
/* Los cuadrantes de abajo se separan con una línea, como en la ficha de papel */
.odo-cuadrante-3, .odo-cuadrante-4,
.odo-cuadrante-7, .odo-cuadrante-8 {
  border-top: 1px solid var(--border); padding-top: .5rem; margin-top: .25rem;
}
.odo-cuadrante-1, .odo-cuadrante-5 { justify-self: end; }
.odo-cuadrante-2, .odo-cuadrante-6 { justify-self: start; }
.odo-cuadrante-4, .odo-cuadrante-8 { justify-self: end; }
.odo-cuadrante-3, .odo-cuadrante-7 { justify-self: start; }

.odo-diente { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.odo-numero {
  font-size: .68rem; font-weight: 700; line-height: 1;
  border: 1px solid var(--border); border-radius: 5px;
  padding: .2rem .3rem; cursor: pointer; min-width: 1.9rem;
  font-variant-numeric: tabular-nums;
}
.odo-numero:hover { border-color: var(--accent); }
.odo-marcado .odo-numero { box-shadow: 0 0 0 2px var(--accent); }

.odo-caras {
  display: grid; grid-template-columns: repeat(3, 12px); grid-template-rows: repeat(3, 12px);
  gap: 1px; padding: 1px; background: var(--border); border-radius: 4px;
}
/* Un diente ausente o con implante no admite hallazgos por cara */
.odo-caras.odo-bloqueado { opacity: .3; pointer-events: none; }
.odo-cara { border: 0; padding: 0; cursor: pointer; }
.odo-cara:hover { outline: 2px solid var(--accent); outline-offset: -1px; z-index: 1; }
.odo-hueco { background: var(--surface); }

.odo-leyenda { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .odo-leyenda { grid-template-columns: 1fr; } }
.odo-chip {
  display: inline-block; padding: .2rem .5rem; border-radius: 999px;
  font-size: .75rem; margin: .2rem .2rem 0 0; border: 1px solid var(--border);
}

.odo-modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 50; }
.odo-modal {
  position: fixed; z-index: 51; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, 92vw); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem;
}
.odo-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; margin-bottom: .75rem;
}
.odo-opciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.odo-opcion {
  border: 1px solid var(--border); border-radius: 8px; padding: .45rem .7rem;
  font-size: .85rem; cursor: pointer;
}
.odo-opcion.activo { box-shadow: 0 0 0 2px var(--accent); font-weight: 700; }

/* ---------- Vitrina y panel de la plataforma ---------- */
.auth-screen-ancha .auth-card,
.auth-card-ancha { max-width: 780px; }
.demo-grid {
  display: grid; gap: .75rem; margin: 1rem 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.demo-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; text-align: center; background: var(--surface-2);
  display: flex; flex-direction: column; gap: .4rem;
}
.demo-icono { font-size: 2rem; line-height: 1; }
.demo-card strong { font-size: 1rem; }
.demo-card p { color: var(--muted); font-size: .82rem; margin: 0 0 .5rem; flex: 1; }
.auth-alt { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 1rem; }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85em; }

.perfil-grid {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.perfil-opcion { display: block; cursor: pointer; }
.perfil-opcion input { position: absolute; opacity: 0; }
.perfil-opcion > span {
  display: block; border: 1px solid var(--border); border-radius: var(--radius);
  padding: .85rem; background: var(--surface);
}
.perfil-opcion input:checked + span {
  border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.18);
}
.perfil-icono { font-size: 1.6rem; display: block; }
.perfil-opcion strong { display: block; margin: .2rem 0; }
.perfil-opcion em { color: var(--muted); font-size: .8rem; font-style: normal; }

/* ---------- Selector de módulos de un plan ---------- */
.modulo-grid { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.modulo-chip { cursor: pointer; }
.modulo-chip input { position: absolute; opacity: 0; }
.modulo-chip > span {
  display: inline-block; border: 1px solid var(--border); border-radius: 999px;
  padding: .35rem .75rem; font-size: .85rem; background: var(--surface);
}
.modulo-chip input:checked + span {
  border-color: var(--accent); background: var(--accent); color: var(--accent-contraste);
}

/* ---------- Elegir la direccion web ---------- */
.direccion-campo {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--input-bg);
  margin-bottom: .5rem;
}
.direccion-campo:focus-within { border-color: var(--accent); }
.direccion-campo input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: .7rem .85rem;
  font-size: 1.05rem;
  color: var(--text);
  text-align: right;
  min-width: 0;
}
.direccion-campo input:focus { outline: none; }
.direccion-dominio {
  display: flex;
  align-items: center;
  padding: 0 .85rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  white-space: nowrap;
}
.direccion-estado { min-height: 1.4rem; font-size: .9rem; margin-bottom: .75rem; }
.direccion-estado.libre { color: var(--success); }
.direccion-estado.ocupada { color: var(--danger); }
.direccion-estado.comprobando { color: var(--muted); }
.perfil-pantalla .perfil-aviso { color: var(--warning); }

/* ---------- Personalizar la página pública ---------- */

/* Un formulario que se estira a 1500 px obliga a barrer la pantalla con la
   vista para juntar una etiqueta con su campo, y deja la mitad derecha vacía.
   Se corta antes: se lee de un vistazo. */
.cfg-ancho { max-width: 1080px; }

/* Tres filas fijas —etiqueta, campo, ayuda— y cada campo reparte sus partes
   entre ellas. Es la única forma de que todas las etiquetas queden a la misma
   altura y todos los campos también cuando uno lleva texto de ayuda debajo y
   el de al lado no: alineando por arriba o por abajo, siempre se escalona uno
   de los dos. */
.cfg-fila {
  display: grid;
  grid-template-rows: auto auto auto;
  align-items: start;
  gap: .3rem 1.2rem;
}
.cfg-fila > .field { display: contents; }
.cfg-fila > .field > label { grid-row: 1; align-self: end; }
.cfg-fila > .field > input,
.cfg-fila > .field > select,
.cfg-fila > .field > img { grid-row: 2; }
.cfg-fila > .field > .help-text { grid-row: 3; margin-top: 0; }
.cfg-fila .btn { grid-row: 2; justify-self: start; }
.cfg-foto { grid-template-columns: auto minmax(240px, 1fr) 220px auto; }
.cfg-alta { grid-template-columns: minmax(240px, 1.1fr) 1fr 1fr auto; }
/* Elegir una sección es un desplegable corto: estirarlo a media pantalla le da
   una importancia que no tiene. */
.cfg-agregar { grid-template-columns: minmax(220px, 340px) auto; justify-content: start; }
.cfg-enlace { grid-template-columns: minmax(260px, 1fr) auto auto; }

/* En una columna hay que deshacer el reparto en tres filas. Si no, el segundo
   campo no encuentra su lugar en la fila de etiquetas —ya lo ocupa el primero—
   y el navegador le inventa una columna al costado: la pantalla se va de ancho
   justo donde menos sobra. */
@media (max-width: 980px) {
  .cfg-fila { grid-template-columns: 1fr; grid-template-rows: none; gap: 1rem; }
  .cfg-fila > .field { display: block; }
}

.portadas-lista { display: grid; gap: .6rem; margin-bottom: .5rem; }
.portada-fila {
  display: flex; align-items: flex-start; gap: .9rem; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .7rem .8rem; background: var(--surface-2);
}
.portada-fila.apagada { opacity: .55; }
.portada-editor { display: flex; align-items: flex-start; gap: .9rem; flex: 1; min-width: 0; }

/* La miniatura es el botón para cambiar la imagen: es lo que uno señala cuando
   quiere cambiarla, y así no hace falta un campo de archivo suelto por fila. */
.portada-imagen { position: relative; display: block; margin: 0; cursor: pointer; flex-shrink: 0; }
.portada-imagen input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.portada-imagen span {
  display: block; text-align: center; margin-top: .25rem;
  font-size: .72rem; font-weight: 600; color: var(--muted);
}
.portada-imagen:hover span, .portada-imagen input:focus + span { color: var(--accent); }
.portada-mini { width: 112px; height: 68px; object-fit: cover; border-radius: 8px; display: block; }

.portada-campos {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .5rem .9rem; flex: 1; min-width: 0;
}
.portada-campos > .field { margin-bottom: 0; }
.portada-campos .casillas { grid-column: 1 / -1; }
@media (max-width: 760px) { .portada-campos { grid-template-columns: 1fr; } }

.portada-acciones { display: flex; gap: .35rem; flex-shrink: 0; align-items: center; }

.seccion-bloque {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: .8rem;
  background: var(--surface-2);
}
/* Una sección apagada se ve apagada. Sin esta señal, el negocio la edita, la
   guarda y no entiende por qué no aparece en su página. */
.seccion-bloque.apagada { opacity: .55; }
.seccion-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .35rem; flex-wrap: wrap;
}
.seccion-interruptor {
  display: flex; align-items: center; gap: .4rem;
  font-size: .9rem; font-weight: 600; cursor: pointer;
}

/* El título va ancho y el color angosto: un selector de color no necesita
   media pantalla, y dejarle media pantalla es lo que hacía ver el bloque
   desbalanceado. El texto largo cruza las dos columnas. */
.seccion-campos {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1rem 1.2rem; align-items: start;
}
.seccion-campos > .field { margin-bottom: 0; }
.seccion-campos .campo-ancho { grid-column: 1 / -1; }
@media (max-width: 760px) { .seccion-campos { grid-template-columns: 1fr; } }

/* Guardar a un lado y las acciones que cambian de sitio o quitan al otro:
   separados, nadie aprieta Quitar creyendo que guarda. */
.seccion-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border);
}
.seccion-pie-orden { display: flex; gap: .4rem; }

.color-fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.color-opcion {
  display: flex; align-items: center; gap: .4rem; margin: 0;
  font-size: .8rem; font-weight: 400; color: var(--muted);
  white-space: nowrap; cursor: pointer;
}
.foto-perfil-mini {
  width: 62px; height: 62px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--border);
}

/* ---------- Previsualizador del catálogo ---------- */

/* Un poco más grande que los botones vecinos y con el ojo delante. La sombra
   verde lo despega del fondo: en esta pantalla todo es gris y azul, así que
   basta con eso para que la vista vaya ahí primero. */
.btn-previa {
  gap: .45rem;
  padding: .6rem 1.15rem;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(52, 177, 147, .3);
}
.btn-previa svg { flex-shrink: 0; }

.previa {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.previa[hidden] { display: none; }

.previa-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.previa-acciones { display: flex; gap: .4rem; align-items: center; }

.previa-dispositivos {
  display: inline-flex; gap: .25rem; padding: .25rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
}
.previa-dispositivos button {
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: .88rem;
  padding: .35rem 1rem; border-radius: 999px; cursor: pointer;
}
.previa-dispositivos button[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-contraste); font-weight: 600;
}

/* El lienzo: fondo neutro para que el marco del teléfono se recorte contra él
   y se entienda dónde termina la página. */
.previa-lienzo {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: var(--surface-2);
  overflow: auto;
}
.previa-lienzo iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* En modo teléfono el marco se estrecha y toma forma de aparato: sin esa
   silueta, una franja angosta en el medio de la pantalla no se lee como un
   celular y cuesta juzgar si lo que se ve está bien. */
.previa.en-telefono .previa-lienzo iframe {
  height: min(844px, 100%);
  border-radius: 26px;
  border: 8px solid #0c1a2e;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

@media (max-width: 560px) {
  .previa-barra { justify-content: center; }
  .previa-lienzo { padding: .5rem; }
}