/* Identidad compartida: landing, acceso, plataforma del cliente, pantalla de pago y panel de administración.
   Clara y fresca: blanco y menta, verde profundo, acento lima. Tipografía de sistema (en Apple se ve SF Pro; en el resto, Inter). */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --blanco: #FFFFFF;
  --nieve: #F5F8F6;       /* fondo de página */
  --menta: #E7F1E9;       /* secciones y superficies suaves */
  --menta-2: #D3E6D8;
  --tinta: #0D1B14;       /* texto principal */
  --bosque: #0F3D2E;      /* verde profundo: barras, botones oscuros */
  --bosque-2: #165A43;
  --musgo: #5A6F63;       /* texto secundario (AA sobre blanco y nieve) */
  --linea: #E1E9E3;
  --noche: #0B2A20; --pino: #1C5E48;
  --lima: #C9F23D;        /* acento */
  --lima-osc: #B4DE24;
  --cielo: #5B9BD5;       /* secundario, con moderación */
  --lavanda: #DCD5F7;
  --ok: #1E7A4C; --ok-bg: #DCF2E4;
  --aviso: #8A5300; --aviso-bg: #FFF0C7;
  --error: #B3261E; --error-bg: #FBE0DC;
  --info-bg: #EAF0EC;
  --r-xl: 32px; --r-lg: 24px; --r: 18px; --r-sm: 12px;
  --sombra: 0 1px 2px rgba(13,27,20,.04), 0 18px 40px -22px rgba(13,27,20,.28);
  --sombra-s: 0 1px 2px rgba(13,27,20,.05), 0 8px 20px -14px rgba(13,27,20,.3);
  --sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Alias de la versión anterior: las pantallas que aún los usan siguen viéndose bien */
  --crema: var(--nieve); --lino: var(--menta); --musgo-old: var(--musgo);
  --terracota: var(--lima); --terracota-osc: var(--lima-osc); --mostaza: var(--lima);
  --serif: var(--sans); --mano: var(--sans); --radio: var(--r);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nieve); color: var(--tinta); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; margin: 0; }
em.ital { font-style: normal; }
a { color: var(--bosque); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--lima-osc); outline-offset: 2px; border-radius: 8px; }

/* Etiqueta de sección: píldora blanca con punto lima */
.kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--sans); color: var(--bosque); background: var(--blanco); border: 1px solid var(--linea); padding: 8px 14px; border-radius: 999px; box-shadow: var(--sombra-s); }
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lima-osc); }

/* Resaltador lima detrás de una palabra */
.resaltado { background: linear-gradient(transparent 12%, var(--lima) 12%, var(--lima) 92%, transparent 92%); padding: 0 .14em; border-radius: .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Botones */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta); font: 600 14px/1 var(--sans); padding: 13px 22px; border-radius: 999px; cursor: pointer; text-decoration: none; transition: transform .14s ease, background .14s ease, box-shadow .14s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--sombra-s); }
.btn.pri { background: var(--lima); border-color: var(--lima); color: var(--tinta); }
.btn.pri:hover { background: var(--lima-osc); border-color: var(--lima-osc); }
.btn.dark { background: var(--bosque); border-color: var(--bosque); color: #fff; }
.btn.dark:hover { background: var(--bosque-2); }
.btn.del { color: var(--error); border-color: #F1C4BF; }
.btn.sm { padding: 9px 15px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Chips de estado (siempre con texto, nunca solo color) */
.chip { display: inline-block; font: 600 12px/1 var(--sans); padding: 6px 11px; border-radius: 999px; background: var(--info-bg); color: var(--tinta); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.aviso { background: var(--aviso-bg); color: var(--aviso); }
.chip.error { background: var(--error-bg); color: var(--error); }
.chip.lima { background: var(--lima); color: var(--tinta); }

/* Formularios */
.campo { display: grid; gap: 7px; margin-bottom: 14px; }
.campo label { font: 600 12.5px/1 var(--sans); color: var(--musgo); }
.campo input, .campo select, .campo textarea { font: 400 15px/1.3 var(--sans); padding: 13px 15px; border: 1.5px solid var(--linea); border-radius: 14px; background: var(--blanco); color: var(--tinta); width: 100%; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--bosque); outline: none; box-shadow: 0 0 0 4px rgba(201,242,61,.5); }

/* Tarjeta y tabla */
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg); box-shadow: var(--sombra); }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font: 600 12px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--musgo); padding: 13px 14px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }

/* Mini pantalla del producto (para componer sobre fotos y tarjetas) */
.widget { background: var(--blanco); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sombra); border: 1px solid var(--linea); font-size: 13px; }

/* Foto con esquinas grandes */
.foto { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--menta); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Modo oscuro (solo se activa donde la pagina pone data-theme="dark": plataforma del cliente y administración) */
html[data-theme="dark"] { color-scheme: dark; --blanco: #111C16; --nieve: #09110D; --menta: #192A21; --menta-2: #25382E; --tinta: #E7F0EA; --musgo: #8FA597; --linea: #243830;
  --ok: #4CD08A; --ok-bg: #12382A; --aviso: #F0B94A; --aviso-bg: #3A2E10; --error: #FF8F85; --error-bg: #3D1A18; --info-bg: #192A21;
  --sombra: 0 1px 2px rgba(0,0,0,.35), 0 18px 40px -22px rgba(0,0,0,.7); --sombra-s: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px -14px rgba(0,0,0,.7); }
html[data-theme="dark"] a { color: #8DE0B0; } html[data-theme="dark"] .btn.dark { background: #1F6B4F; border-color: #1F6B4F; } html[data-theme="dark"] .btn.pri { color: #0D1B14; }
html[data-theme="dark"] { --bosque: #2E9A72; --bosque-2: #36AE82; }

.lgimg { display: block; height: 32px; width: auto; }