:root {
    --shadow: rgba(71, 52, 28, 0.08);
    --shadow-soft: rgba(10, 11, 30, 0.07) 1px 1px 3px 0px;
    --modal-shadow: rgba(10, 11, 30, 0.13) 4px 4px 17px 0px;
    --placeholder: rgba(0,0,0,0.2);
    --green: #00e8ab;
    --green-solid: #00b887;
    --green-dark: #3b3c4b;
    --green-soft: #40eec0;
    --accent-yellow: #FFC94A;
    --accent-orange: #FF8A3D;
    --accent-blue: #4AA3FF;
    --border-strong: rgba(0,0,0,0.6);
    --border-color: rgba(0,0,0,0.2);
    --border-soft: rgba(0,0,0,0.1);
    --border-light: rgba(0,0,0,0.07);

    --border-strong: var(--slate-600);
    --border-color: var(--slate-300);
    --border-soft: var(--slate-200);
    --border-light: var(--slate-100);

    --error: #EF5B5B;
    --warning: #FFC94A;
    --card: #FFFFFF;
    --app-border: 1px rgba(0,0,0,0.3) solid;
    --disabled: rgba(0,0,0,0.06);
    --disabled-text: rgba(0,0,0,0.2);
    --brick-rig: rgba(0,0,0,0.08);
    --progress-bar: rgba(0,0,0,0.05);
    --transparent: rgba(0,0,0,0.05);
    --transparent-intense: rgba(255, 255, 255, 0.9);

    /* custom app colors */
    --bg: #ffffff;
    --bg-second: var(--slate-100);
    --bg-third: var(--slate-200);
    --bg-fourth: var(--slate-300);
    --card: #ffffff;
    --card-soft: var(--slate-50);
    --chip-bg: #ffffff;
    --chip-text: var(--slate-600);
    --header: linear-gradient(90deg, #f8fafc, #fff);

    --fill-color: #334155;
    --fill-soft: #475569;
    --fill-pink: #ec4899;


    --title: var(--slate-900);
    --text-strong: var(--slate-800);
    --text: var(--slate-700);
    --text-color: var(--slate-700);
    --text-soft: var(--slate-500);
    --text-light: var(--slate-400);
    --fill-strong: var(--slate-800);
    --fill-color: var(--slate-600);
    --fill-soft: var(--slate-500);
    --fill-light: var(--slate-300);

    --primary-button-soft: #f1f5f9;
    --border: #e2e8f0;
    --border-selected: #4AA3FF;
    --border-bg: #fff;

    --primary-button: var(--slate-800);
    --primary-button-text: #FFFFFF;

}
/* #263129 elevated card or popups */
.dark {
    --placeholder: rgba(255, 255, 255, 0.2);
    --bg: var(--zinc-900);
    --card: var(--zinc-800);
    --card-soft: var(--zinc-700);

    --chip-bg: var(--zinc-800);
    --chip-text: var(--zinc-200);
    --header: var(--zinc-900);
    --bg-second: var(--zinc-800);
    --bg-third: var(--zinc-700);
    --bg-fourth: var(--zinc-600);

    --title: #FFFFFF;
    --text: var(--zinc-300);
    --text-strong: var(--zinc-50);
    --text-color: var(--zinc-300);
    --text-soft: var(--zinc-400);
    --text-light: var(--zinc-600);

    --fill-color: var(--zinc-200);
    --fill-soft: var(--zinc-400);
    --fill-light: var(--zinc-600);
    --fill-strong: var(--zinc-50);

    --primary-button: #24C47A;
    --primary-button-text: #FFFFFF;
    --primary-button-soft: #163C2A;

    --border: var(--zinc-600);
    --border-strong: var(--zinc-300);
    --border-color: var(--zinc-600);
    --border-soft: var(--zinc-700);
    --border-light: var(--zinc-800);
    --shadow: rgba(0, 0, 0, 0.35);
    --app-border: 1px rgba(255,255,255,0.08) solid;
    --disabled: rgba(255,255,255,0.089);
    --brick-rig: rgba(255, 255, 255, 0.09);
    --progress-bar: rgba(255,255,255,0.089);
    --transparent: rgba(255,255,255,0.09);
    --disabled-text: rgba(255,255,255,0.4);
    --transparent-intense: rgba(255, 255, 255, 0.1);
    --border-bg: var(--zinc-900);

    --primary-button: #FFFFFF;
    --primary-button-text: var(--zinc-700);
}

.placeholder, .placeholder svg {
  fill: var(--placeholder);
  stroke: var(--placeholder);
  color: var(--placeholder);
}

.app-border {
    border: var(--app-border);
}
.transparent { background: var(--transparent); }
.transparent-intense { background-color: var(--transparent-intense); }
.background { background-color: var(--bg); }
.bg-second, .hover\:bg-second:hover { background-color: var(--bg-second); }
.bg-third, .hover\:bg-third:hover { background-color: var(--bg-third); }
.bg-fourth, .hover\:bg-fourth:hover { background-color: var(--bg-fourth); }
.bg-card { background: var(--card); }
.bg-card-soft { background: var(--card-soft); }
.bg-header { background: var(--header); }
.bg-chip { background: var(--chip-bg); color: var(--chip-text); }
.bg-dark { background: #1e293b; }

.bg-white { background-color: #fff; }
.hover\:text-white:hover, .text-white { color: #fff; }
.subtitle-color { color: var(--title); }
.text-strong, .hover\:text-strong:hover { color: var(--text-strong); }
.text-color, .hover\:text-color:hover { color: var(--text); }
.text-soft, .hover\:text-soft:hover { color: var(--text-soft); }
.text-light, .hover\:text-light:hover { color: var(--text-light); }
.text-dark { color: var(--zinc-800); }
.text-white-transparent { color: rgba(255, 255, 255, 0.1); }
.text-white-transparent\/2 { color: rgba(255, 255, 255, 0.2); }
.text-white-transparent\/3 { color: rgba(255, 255, 255, 0.3); }
.text-white-transparent\/4 { color: rgba(255, 255, 255, 0.4); }
.text-white-transparent\/5 { color: rgba(255, 255, 255, 0.5); }
.text-white-transparent\/6 { color: rgba(255, 255, 255, 0.6); }

.text-dark-transparent { color: rgba(0,0,0, 0.1); }
.text-dark-transparent\/2 { color: rgba(0,0,0, 0.2); }
.text-dark-transparent\/3 { color: rgba(0,0,0, 0.3); }
.text-dark-transparent\/4 { color: rgba(0,0,0, 0.4); }
.text-dark-transparent\/5 { color: rgba(0,0,0, 0.5); }
.text-dark-transparent\/6 { color: rgba(0,0,0, 0.6); }

.fill-white, .fill-white svg { fill: #fff; }
.fill-soft, .fill-soft svg { fill: var(--fill-soft); }
.fill-color, .fill-color svg { fill: var(--fill-color); }
.fill-indigo, .fill-indigo svg { fill: var(--indigo-500); }
.bg-dark-transparent { background: rgba(0,0,0,0.05); }

.hover\:border-strong:hover, .border-strong { border-color: var(--border-strong); }
.hover\:border-color:hover, .border-color { border-color: var(--border-color); }
.hover\:border-soft:hover, .border-soft { border-color: var(--border-soft); }
.border-dark { border-color: var(--zinc-800); }
.border-light { border-color: var(--border-light); }
.border-bg { border-color: var(--border-bg); }
.border-app { border-color: var(--border); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.modal-shadow { box-shadow: var(--modal-shadow); }
.text-transparent { color: transparent; }
.soft-blur {
    position: relative;
    isolation: isolate; /* evita que el blur escape */
    overflow: hidden;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.08);
}
/* "blobs" con blur */
.soft-blur::before,
.soft-blur::after{
  content: "";
  position: absolute;
  inset: -40%; /* se sale para que el blur no corte */
  z-index: -1;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.75;
  transform: translateZ(0); /* mejora rendimiento */
}
/* Blob principal: verde-lima */
.soft-blur::before{
  background:
    radial-gradient(300px 220px at 15% 20%, rgba(126,241,198,0.7), transparent 65%),
    radial-gradient(280px 220px at 80% 25%, rgba(185,167,255,0.65), transparent 70%);
}
/* Blob secundario: lavanda suave */
.soft-blur::after{
  opacity: 0.55;
  filter: blur(90px);
  background:
    radial-gradient(260px 200px at 85% 80%, rgba(215,200,255,0.7), transparent 65%),
    radial-gradient(260px 200px at 10% 75%, rgba(186,247,200,0.6), transparent 65%);
}
.blurred-surface{
  position: relative;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.blurred-surface::before{
  content:"";
  position:absolute;
  inset:-60px;
  z-index:-1;
  filter: blur(50px);
  opacity: 0.9;
  background:
    radial-gradient(220px 180px at 15% 20%, rgba(126,241,198,0.55), transparent 65%),
    radial-gradient(220px 180px at 85% 25%, rgba(185,167,255,0.55), transparent 70%);
}
.blurry {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    border-radius: 20px;
    text-align: center;
}
.border-selected { border-color: var(--slate-600); }
.bg-selected { 
  background-color: var(--slate-800);
  color: #fff;
}
.dark .border-selected {
  border-color: var(--gray-100);
}
.chip-selected {
  background: var(--slate-800);
  color: #fff;
}
.dark .bg-selected,
.dark .chip-selected {
  background: #fff;
  color: var(--zinc-700);
}