/* ===== KDE Happy Hours – UX Pack (Theme) ===== */

/* Scope seguro: solo dentro del contenedor detectado por el JS (.kde-hh-root) */
.kde-hh-root, .kde-hh-root * { box-sizing: border-box; font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Texto oscuro y legible (evita herencias) */
.kde-hh-root, .kde-hh-root *:not(svg) { color: #111 !important; }

/* Título */
.kde-hh-root .kde-hh-title {
  font-weight: 800;
  font-size: 34px;
  letter-spacing: .2px;
  margin: 6px 0 18px;
}

/* Subtítulos */
.kde-hh-root h2, .kde-hh-root .hh-subtitle { font-size: 20px; font-weight: 700; margin: 14px 0 10px; color:#1f2937 !important; }

/* Inputs, selects y textareas */
.kde-hh-root input[type="text"],
.kde-hh-root input[type="number"],
.kde-hh-root input[type="time"],
.kde-hh-root input[type="date"],
.kde-hh-root input[type="search"],
.kde-hh-root select,
.kde-hh-root textarea {
  width: 100%;
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  outline: none !important;
  box-shadow: 0 1px 0 rgba(17,17,17,.03);
}
.kde-hh-root input::placeholder, .kde-hh-root textarea::placeholder { color: #9ca3af; }

/* Etiquetas */
.kde-hh-root label, .kde-hh-root .hh-label { color: #374151 !important; font-weight: 600; font-size: 14px; }

/* Chips de días y toggles */
.kde-hh-root .weekday, .kde-hh-root .day, .kde-hh-root .toggle, .kde-hh-root .chip {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 14px; margin:4px 6px 4px 0;
  border-radius:12px; background:#fff; color:#4B0B1A !important; border:2px solid #4B0B1A;
  font-weight:800; cursor:pointer; user-select:none;
}
.kde-hh-root .weekday.active, .kde-hh-root .day.active, .kde-hh-root .toggle.active, .kde-hh-root .chip.active {
  background:#4B0B1A !important; color:#fff !important;
}

/* Pestañas modo (Rango / Semanal) */
.kde-hh-root .tabs, .kde-hh-root .mode-tabs { display:inline-flex; gap:8px; margin:8px 0 16px; }
.kde-hh-root .tab, .kde-hh-root .mode-tab {
  background:#fff; color:#4B0B1A; border:2px solid #4B0B1A; padding:10px 14px; border-radius:999px; font-weight:800; cursor:pointer;
}
.kde-hh-root .tab.active, .kde-hh-root .mode-tab.active { background:#4B0B1A; color:#fff; }

/* Botón primario */
.kde-hh-root .button, .kde-hh-root button.primary, .kde-hh-root .btn-primary {
  background:#4B0B1A !important; color:#fff !important; border:none !important;
  border-radius:12px !important; padding:12px 18px !important; font-weight:800 !important; font-size:16px !important;
  box-shadow:0 8px 20px rgba(75,11,26,.25); cursor:pointer;
}
.kde-hh-root .button:hover, .kde-hh-root .btn-primary:hover { filter:brightness(1.05); }

/* Botón secundario */
.kde-hh-root .btn-secondary { background:#FFE4CF !important; color:#2b0a12 !important; }

/* Tarjetas */
.kde-hh-root .card, .kde-hh-root .hh-card { background:#fff; border:1px solid #eee; border-radius:16px; padding:16px; box-shadow:0 6px 20px rgba(0,0,0,.05); }

/* Lista de reglas */
.kde-hh-root .rules-list .rule-item { background:#fff; border:1px solid #eee; border-radius:14px; padding:12px 14px; margin:8px 0; }
.kde-hh-root .rules-list .rule-item .name { font-weight:800; color:#111; }
.kde-hh-root .rules-list .rule-item .meta { color:#6b7280; font-size:13px; }