/* Smooth theme transition on body */
body { transition: background-color 0.5s ease, color 0.4s ease; }

/* Amanecer: el sol sube con resplandor dorado */
@keyframes icon-rise {
  0%   { transform: scale(0.4)  rotate(-40deg); color: var(--text-secondary); filter: drop-shadow(0 0 0px transparent); }
  38%  { transform: scale(1.55) rotate(14deg);  color: #ff6a00;               filter: drop-shadow(0 0 18px #ff6a00) drop-shadow(0 0 32px rgba(255,106,0,0.6)); }
  65%  { transform: scale(1.20) rotate(-4deg);  color: #fbbf24;               filter: drop-shadow(0 0 14px #fbbf24) drop-shadow(0 0 28px rgba(251,191,36,0.5)); }
  82%  { transform: scale(1.08) rotate(1deg);   color: #fde68a;               filter: drop-shadow(0 0 8px #fde68a); }
  100% { transform: scale(1)    rotate(0deg);   color: var(--text-secondary); filter: drop-shadow(0 0 0px transparent); }
}

/* Atardecer: la luna aparece con resplandor violeta */
@keyframes icon-set {
  0%   { transform: scale(0.4)  rotate(40deg);  color: var(--text-secondary); filter: drop-shadow(0 0 0px transparent); }
  38%  { transform: scale(1.55) rotate(-14deg); color: #c084fc;               filter: drop-shadow(0 0 18px #c084fc) drop-shadow(0 0 32px rgba(192,132,252,0.6)); }
  65%  { transform: scale(1.20) rotate(4deg);   color: #818cf8;               filter: drop-shadow(0 0 14px #818cf8) drop-shadow(0 0 28px rgba(129,140,248,0.5)); }
  82%  { transform: scale(1.08) rotate(-1deg);  color: #e0e7ff;               filter: drop-shadow(0 0 8px #e0e7ff); }
  100% { transform: scale(1)    rotate(0deg);   color: var(--text-secondary); filter: drop-shadow(0 0 0px transparent); }
}

#theme-toggle.icon-rise { animation: icon-rise 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards; }
#theme-toggle.icon-set  { animation: icon-set  0.55s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ── Tooltip de campos de formulario ── */
.paddock-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.3rem;
  cursor: help;
  vertical-align: middle;
}
.paddock-tooltip svg {
  width: 0.72rem; height: 0.72rem;
  color: var(--text-faint);
  transition: color 0.15s;
  flex-shrink: 0;
}
.paddock-tooltip:hover svg { color: #ef4444; }
.paddock-tooltip__text {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  max-width: 260px;
  background: var(--bg-dropdown);
  border: 1px solid var(--border-visible);
  border-radius: 0.45rem;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.45rem 0.7rem;
  line-height: 1.45;
  white-space: normal;
  z-index: 99999;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.paddock-tooltip:hover .paddock-tooltip__text { opacity: 1; }

/* ── Sistema de botones PADDOCK ── */
.paddock-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.38rem 0.85rem;
  border-radius: 0.4rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}
/* Primary — crear, guardar, confirmar, pagar */
.paddock-btn-primary {
  background: #ef4444; color: #fff; border-color: #ef4444;
}
.paddock-btn-primary:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

/* Secondary — ver, leer más, cancelar, acciones neutras */
.paddock-btn-secondary {
  background: transparent; color: var(--text-secondary); border-color: var(--border-visible);
}
.paddock-btn-secondary:hover { border-color: var(--border-strong2); color: var(--text-primary); }

/* Edit — editar registros */
.paddock-btn-edit {
  background: transparent; color: #60a5fa; border-color: rgba(96,165,250,0.35);
}
.paddock-btn-edit:hover { background: rgba(96,165,250,0.1); border-color: rgba(96,165,250,0.6); color: #93c5fd; }

/* Danger outline — trigger de eliminar */
.paddock-btn-danger {
  background: transparent; color: #f87171; border-color: rgba(239,68,68,0.3);
}
.paddock-btn-danger:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.55); color: #fca5a5; }

/* Danger solid — confirmar eliminación en modal */
.paddock-btn-danger-solid {
  background: #dc2626; color: #fff; border-color: #dc2626;
}
.paddock-btn-danger-solid:hover { background: #b91c1c; border-color: #b91c1c; }

/* Flecha para button_link */
.paddock-btn-arrow {
  width: 0.75rem; height: 0.75rem; flex-shrink: 0;
  transition: transform 0.18s;
}
.paddock-btn:hover .paddock-btn-arrow { transform: translateX(2px); }

/* ── <select> nativos: estilo unificado tipo control "Ordenar" de la tienda ── */
/* `html select` para ganarle al reset de style.min.css (font-size:100%, padding:0) */
html select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--bg-input, var(--bg-card-medium));
  border: 1px solid var(--border-medium);
  border-radius: 0.5rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.3;
  padding: 0.55rem 2.2rem 0.55rem 0.85rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.2' 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 0.8rem center;
  background-size: 0.72rem;
}
select:hover  { border-color: var(--border-strong); }
select:focus  { border-color: rgba(239,68,68,0.6); }
select option { background: var(--bg-dropdown); color: var(--text-primary); }
/* Multi-select: sin chevron ni hueco a la derecha */
select[multiple] { background-image: none; padding-right: 0.85rem; cursor: default; }
/* Editor Quill: sus <select> internos no deben heredar el estilo global */
.ql-toolbar select {
  width: auto; padding: 0; border: 0; background-image: none;
  -webkit-appearance: auto; -moz-appearance: auto; appearance: auto;
}

/* ── Dropdown personalizado (paddock-select.js) ─────────────────────────────
   Reemplaza visualmente al <select> nativo con el mismo look del control
   "Ordenar" de la tienda — incluida la lista abierta, que el navegador no deja
   estilizar. El <select> real queda oculto pero funcional (envía valor + change). */
.pdk-select { position: relative; width: 100%; }
.pdk-select__native {            /* <select> oculto, sigue enviando el valor */
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
  margin: 0; padding: 0; border: 0;
}
.pdk-select__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; box-sizing: border-box;
  padding: 0.55rem 0.85rem;
  background-color: var(--bg-input, var(--bg-card-medium));
  border: 1px solid var(--border-medium);
  border-radius: 0.5rem;
  color: var(--text-primary);
  font-family: inherit; font-size: 0.82rem; line-height: 1.3; text-align: left;
  cursor: pointer; transition: border-color 0.15s;
}
.pdk-select__btn:hover,
.pdk-select.is-open .pdk-select__btn { border-color: var(--border-strong); }
.pdk-select__btn:focus-visible { outline: none; border-color: rgba(239,68,68,0.6); }
.pdk-select__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdk-select.is-placeholder .pdk-select__label { color: var(--text-faintest); }
.pdk-select__chevron {
  width: 0.7rem; height: 0.7rem; flex-shrink: 0;
  color: var(--text-faint); transition: transform 0.15s;
}
.pdk-select.is-open .pdk-select__chevron { transform: rotate(180deg); }
.pdk-select__menu {
  display: none; position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0;
  z-index: 200; max-height: 16rem; overflow-y: auto;
  background: var(--bg-dropdown);
  border: 1px solid var(--border-medium);
  border-radius: 0.6rem;
  box-shadow: 0 16px 40px var(--shadow-dropdown);
  padding: 0.3rem 0;
}
.pdk-select__menu.is-open { display: block; }
/* Scrollbar fino y flotante (igual que el resto de la app) */
.pdk-select__menu { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.pdk-select__menu::-webkit-scrollbar { width: 8px; }
.pdk-select__menu::-webkit-scrollbar-track { background: transparent; }
.pdk-select__menu::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.pdk-select__menu::-webkit-scrollbar-thumb:hover { background-color: var(--text-faintest); }
.pdk-select__item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; box-sizing: border-box;
  padding: 0.45rem 0.9rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.8rem; text-align: left;
  color: var(--text-secondary); transition: background 0.12s;
}
.pdk-select__item:hover { background: var(--bg-card-subtle); color: var(--text-primary); }
.pdk-select__item.is-active { color: var(--text-primary); font-weight: 600; }
.pdk-select__item.is-disabled { opacity: 0.4; cursor: default; }
.pdk-select__item.is-disabled:hover { background: none; color: var(--text-secondary); }
.pdk-select__check { width: 0.62rem; height: 0.62rem; flex-shrink: 0; color: #ef4444; opacity: 0; }
.pdk-select__item.is-active .pdk-select__check { opacity: 1; }

/* ── Clase del componente field (input.html / textarea.html) ────────────────
   Estilo base estable, independiente de wrappers o CSS por página: cualquier
   campo del componente se ve bien en cualquier formulario. */
.paddock-field {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card-medium);
  border: 1px solid var(--border-medium);
  border-radius: 0.5rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.55rem 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.paddock-field::placeholder { color: var(--text-faintest2); }
.paddock-field:focus { border-color: rgba(239,68,68,0.6); }
textarea.paddock-field { resize: vertical; min-height: 5rem; }
.paddock-field[type="checkbox"],
.paddock-field[type="radio"] { width: auto; margin-right: 0.5rem; accent-color: #ef4444; }
.paddock-field[type="file"]  { padding: 0.4rem 0.6rem; color: var(--text-muted); cursor: pointer; }
.paddock-field[type="color"] { height: 2.6rem; padding: 0.2rem; cursor: pointer; }

/* Etiquetas de formulario (base estable, igual que las páginas con CSS propia) */
.paddock-form-fields label,
.paddock-register-fields label,
.paddock-order-fields label {
  display: block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.35rem;
}

/* ── Base de inputs/textarea en formularios PADDOCK ─────────────────────────
   Garantiza fondo y texto visibles aunque la página no cargue su CSS propia
   (p. ej. solicitud de membresía). Las reglas por página tienen la misma
   especificidad y cargan después, así que pueden seguir afinando el look. */
.paddock-form-fields input,
.paddock-form-fields textarea,
.paddock-register-fields input,
.paddock-register-fields textarea,
.paddock-order-fields input,
.paddock-order-fields textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card-medium);
  border: 1px solid var(--border-medium);
  border-radius: 0.5rem;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.55rem 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.paddock-form-fields input:focus,
.paddock-form-fields textarea:focus,
.paddock-register-fields input:focus,
.paddock-register-fields textarea:focus,
.paddock-order-fields input:focus,
.paddock-order-fields textarea:focus { border-color: rgba(239,68,68,0.6); }
.paddock-form-fields input::placeholder,
.paddock-form-fields textarea::placeholder,
.paddock-register-fields input::placeholder,
.paddock-register-fields textarea::placeholder,
.paddock-order-fields input::placeholder,
.paddock-order-fields textarea::placeholder { color: var(--text-faintest2); }
.paddock-form-fields textarea { resize: vertical; min-height: 5rem; }
/* Controles nativos: no deben heredar el ancho/relleno de los inputs de texto */
.paddock-form-fields input[type="checkbox"],
.paddock-form-fields input[type="radio"],
.paddock-register-fields input[type="checkbox"],
.paddock-register-fields input[type="radio"],
.paddock-order-fields input[type="checkbox"],
.paddock-order-fields input[type="radio"] {
  width: auto; margin-right: 0.5rem; accent-color: #ef4444;
}
.paddock-form-fields input[type="file"],
.paddock-register-fields input[type="file"],
.paddock-order-fields input[type="file"] {
  padding: 0.4rem 0.6rem; color: var(--text-muted); cursor: pointer;
}
.paddock-form-fields input[type="color"],
.paddock-register-fields input[type="color"],
.paddock-order-fields input[type="color"] {
  height: 2.6rem; padding: 0.2rem; cursor: pointer;
}

/* ── Checkboxes y radios (design system) ─────────────────────────────────────
   Reemplaza el control nativo por una caja propia con check/punto animado.
   `html .check-field …` para ganarle a los resets por página (0,1,1). */
.check-field, .radio-field {
  display: inline-flex; align-items: center; gap: 0.55rem;
  cursor: pointer; user-select: none;
}
.check-field__label, .radio-field__label {
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4;
}
/* Texto de ayuda del campo: pequeño y discreto, no invasivo */
.field__help-text {
  font-size: 0.72rem;
  color: var(--text-faint);
  line-height: 1.45;
  margin-top: 0.4rem;
}
html .check-field input[type="checkbox"],
html .radio-field input[type="radio"] {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 1.2rem; height: 1.2rem; margin: 0; flex-shrink: 0;
  display: inline-grid; place-content: center;
  border: 1.5px solid var(--border-strong2);
  background: var(--bg-card-medium);
  cursor: pointer; box-sizing: border-box;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
html .check-field input[type="checkbox"] { border-radius: 0.4rem; }
html .radio-field input[type="radio"]    { border-radius: 50%; }
html .check-field input[type="checkbox"]:hover,
html .radio-field input[type="radio"]:hover { border-color: #ef4444; }
html .check-field input[type="checkbox"]:focus-visible,
html .radio-field input[type="radio"]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(239,68,68,0.25);
}
html .check-field input[type="checkbox"]:checked,
html .radio-field input[type="radio"]:checked {
  background: #ef4444; border-color: #ef4444;
}
html .check-field input[type="checkbox"]::before {
  content: ""; width: 0.7rem; height: 0.7rem; background: #fff;
  transform: scale(0); transition: transform 0.12s ease-in-out;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
html .check-field input[type="checkbox"]:checked::before { transform: scale(1); }
html .radio-field input[type="radio"]::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff;
  transform: scale(0); transition: transform 0.12s ease-in-out;
}
html .radio-field input[type="radio"]:checked::before { transform: scale(1); }
html .check-field input[type="checkbox"]:disabled,
html .radio-field input[type="radio"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* Autocompletado de Chrome: evita el fondo blanco (texto invisible) en dark */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card-medium) inset;
  box-shadow: 0 0 0 1000px var(--bg-card-medium) inset;
  caret-color: var(--text-primary);
  transition: background-color 9999s ease-in-out 0s;
}

/* Smooth theme transition — applied only during the toggle */
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    fill 0.3s ease,
    stroke 0.3s ease,
    box-shadow 0.3s ease !important;
}

:root {
  --bg-page:        #0a0a0a;
  --bg-nav:         rgba(0,0,0,0.65);
  --bg-nav-mobile:  rgba(8,8,12,0.97);
  --bg-dropdown:    rgba(12,12,18,0.97);
  --bg-card-subtle: rgba(255,255,255,0.03);
  --bg-card-medium: rgba(255,255,255,0.06);
  --bg-card-hover:  rgba(255,255,255,0.08);
  --text-primary:   rgba(255,255,255,1);
  --text-secondary: rgba(255,255,255,0.65);
  --text-muted:     rgba(255,255,255,0.45);
  --text-faint:     rgba(255,255,255,0.35);
  --text-faintest:  rgba(255,255,255,0.25);
  --text-faintest2: rgba(255,255,255,0.15);
  --border-subtle:  rgba(255,255,255,0.07);
  --border-normal:  rgba(255,255,255,0.08);
  --border-medium:  rgba(255,255,255,0.1);
  --border-strong:  rgba(255,255,255,0.12);
  --border-visible: rgba(255,255,255,0.15);
  --border-strong2: rgba(255,255,255,0.3);
  --shadow-card:    rgba(0,0,0,0.5);
  --shadow-dropdown:rgba(0,0,0,0.6);
  --logo-filter:    invert(1);
}
html[data-theme="light"] {
  --bg-page:        #e4e4e4;
  --bg-nav:         rgba(232,232,232,0.92);
  --bg-nav-mobile:  rgba(236,236,238,0.98);
  --bg-dropdown:    rgba(248,248,248,0.98);
  --bg-card-subtle: rgba(0,0,0,0.04);
  --bg-card-medium: rgba(0,0,0,0.06);
  --bg-card-hover:  rgba(0,0,0,0.09);
  --text-primary:   #080808;
  --text-secondary: rgba(0,0,0,0.7);
  --text-muted:     rgba(0,0,0,0.55);
  --text-faint:     rgba(0,0,0,0.44);
  --text-faintest:  rgba(0,0,0,0.33);
  --text-faintest2: rgba(0,0,0,0.22);
  --border-subtle:  rgba(0,0,0,0.07);
  --border-normal:  rgba(0,0,0,0.08);
  --border-medium:  rgba(0,0,0,0.1);
  --border-strong:  rgba(0,0,0,0.12);
  --border-visible: rgba(0,0,0,0.15);
  --border-strong2: rgba(0,0,0,0.25);
  --shadow-card:    rgba(0,0,0,0.12);
  --shadow-dropdown:rgba(0,0,0,0.2);
  --logo-filter:    none;
}