/* NITVIBES – Mock UI Skin */
/* Paleta */
:root{
  --nv-bg: #0f1216;
  --nv-fg: #ffffff;
  --nv-muted: rgba(255,255,255,.70);
  --nv-border: rgba(255,255,255,.25);
  --nv-border-strong: rgba(255,255,255,.35);
  --nv-shadow: rgba(242,179,1,.28);
  --nv-yellow: #f2b301;
  --nv-card: rgba(255,255,255,.04);
}

/* Controles de formulario grandes y legibles */
.nv-mock input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
.nv-mock select,
.nv-mock textarea {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  height: auto;
  min-height: 50px;
  font-size: 16px;
  line-height: 1.25;
  color: var(--nv-fg);
  background: var(--nv-bg);
  border: 1px solid var(--nv-border);
  border-radius: 12px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

/* Textarea más alto por defecto */
.nv-mock textarea{ min-height: 120px; resize: vertical; }

/* Placeholder */
.nv-mock ::placeholder{ color: var(--nv-muted); opacity: 1; }

/* Focus state */
.nv-mock input:focus,
.nv-mock select:focus,
.nv-mock textarea:focus{
  border-color: var(--nv-yellow);
  box-shadow: 0 0 0 3px var(--nv-shadow);
}

/* Select con flecha custom */
.nv-mock select{
  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%,
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 42px;
}

/* Botones amarillos */
.nv-mock button,
.nv-mock input[type="button"],
.nv-mock input[type="submit"],
.nv-mock .button,
.nv-mock .wp-block-button__link,
.nv-mock a.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none !important;
  color: #111 !important;
  background: var(--nv-yellow) !important;
  border: 1px solid var(--nv-yellow) !important;
  border-radius: 12px !important;
  box-shadow: none;
  cursor: pointer;
  transition: filter .15s ease, transform .02s ease;
}
.nv-mock button:hover,
.nv-mock input[type="button"]:hover,
.nv-mock input[type="submit"]:hover,
.nv-mock .button:hover,
.nv-mock .wp-block-button__link:hover,
.nv-mock a.wp-block-button__link:hover { filter: brightness(1.02); }
.nv-mock button:active,
.nv-mock input[type="button"]:active,
.nv-mock input[type="submit"]:active,
.nv-mock .button:active,
.nv-mock .wp-block-button__link:active,
.nv-mock a.wp-block-button__link:active { transform: translateY(1px); }

/* Estados deshabilitado */
.nv-mock :disabled{
  opacity: .65;
  cursor: not-allowed;
}

/* Cards por si el theme no da contenedor */
.nv-mock .nv-card-auto {
  background: var(--nv-card);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  padding: 18px;
}

/* Ajustes típicos de tablas y listas para legibilidad */
.nv-mock table{ width: 100%; border-collapse: collapse; }
.nv-mock th, .nv-mock td{ padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }