/* ==========================================================================
   UpSocial — capa propia mínima (Tailwind + DaisyUI + Font Awesome).
   Marca: morado sólido (#6d28d9), acento verde lima (#CDFA3C), gris humo.
   Sin degradados. Sin animaciones de movimiento (solo color en botones).
   ========================================================================== */

:root { color-scheme: light; }

/* Nada desborda a los lados */
html, body { max-width: 100%; overflow-x: hidden; }
body { -webkit-font-smoothing: antialiased; }

/* Fondo morado plano */
.bg-page { background-color: #6d28d9; }

/* Gris humo para contenedores (en vez de marcos/bordes) */
.bg-smoke { background-color: #f4f4f7; }

/* Sin movimiento: solo transiciones de color */
*, *::before, *::after {
  animation: none !important;
  transition-property: background-color, border-color, color, fill, stroke, opacity !important;
  transition-duration: .15s !important;
}
*:hover { transform: none !important; }

/* Inputs sin marco: fondo gris humo */
.field-input {
  width: 100%; background: #f4f4f7; border: 1.5px solid #e2e2ec; border-radius: .75rem;
  padding: .8rem 1rem; font: inherit; font-size: .95rem; color: #1e2438;
}
.field-input::placeholder { color: #9aa0b4; }
.field-input:focus { outline: none; border-color: #6d28d9; background: #fff; box-shadow: 0 0 0 3px rgba(109,40,217,.12); }

/* Selector de paquetes */
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack .pack-foot { background: #f4f4f7; }
.pack input:checked ~ .pack-foot { background: #6d28d9; }
.pack input:checked ~ .pack-foot .pack-price { color: #fff; }
.pack input:checked ~ .pack-foot .pack-anchor { color: #d8b4fe; }
.pack input:focus-visible ~ .pack-head { outline: 3px solid #CDFA3C; outline-offset: 2px; }

/* Tablas anchas */
.table-scroll { scrollbar-width: thin; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: #c9c2dc; border-radius: 99px; }

/* Colores planos por red social */
.bg-instagram { background-color: #e1306c; } .text-instagram { color: #e1306c; }
.bg-tiktok    { background-color: #010101; } .text-tiktok    { color: #010101; }
.bg-facebook  { background-color: #1877f2; } .text-facebook  { color: #1877f2; }
.bg-youtube   { background-color: #ff0000; } .text-youtube   { color: #ff0000; }
.bg-twitter   { background-color: #000000; } .text-twitter   { color: #000000; }
.bg-twitch    { background-color: #9146ff; } .text-twitch    { color: #9146ff; }
.bg-telegram  { background-color: #0088cc; } .text-telegram  { color: #0088cc; }

/* Logotipo tipográfico */
.wordmark span { color: #7c3aed; }
.wordmark--light span { color: #c4b5fd; }

/* ---- Paquetes: cabecera con gradiente (solo aquí se permiten gradientes) ---- */
.pg-instagram { background: linear-gradient(135deg,#feda75,#fa7e1e 25%,#d62976 60%,#6228d7); }
.pg-tiktok    { background: linear-gradient(135deg,#25f4ee,#111 50%,#fe2c55); }
.pg-facebook  { background: linear-gradient(135deg,#4293ff,#1877f2 55%,#0b3d9e); }
.pg-youtube   { background: linear-gradient(135deg,#ff6a6a,#ff0000 55%,#a80f0f); }
.pg-twitter   { background: linear-gradient(135deg,#3a4759,#000); }
.pg-twitch    { background: linear-gradient(135deg,#a970ff,#9146ff 55%,#5a19cc); }
.pg-telegram  { background: linear-gradient(135deg,#4fc3f7,#0088cc); }

/* Footer del paquete: verde lima al pasar el ratón (si no está seleccionado) */
.pack:hover input:not(:checked) ~ .pack-foot { background: #CDFA3C; }
.pack:hover input:not(:checked) ~ .pack-foot .pack-price  { color: #31420a; }
.pack:hover input:not(:checked) ~ .pack-foot .pack-anchor { color: #31420a; opacity: .55; }

/* Desplegables con diseño propio del sistema (chevron consistente) */
.field-select {
  width: 100%; background-color: #f4f4f7; color: #1e2438;
  border: 1.5px solid #e2e2ec; border-radius: .75rem;
  padding: .8rem 2.5rem .8rem 1rem; font: inherit; font-size: .95rem;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.field-select:focus { outline: none; border-color: #6d28d9; background-color: #fff; box-shadow: 0 0 0 3px rgba(109,40,217,.12); }