:root{
  --mpp-accent:#c0392b;
  --mpp-accent-light:rgba(192,57,43,.08);
  --mpp-accent-border:rgba(192,57,43,.25);
  --mpp-blue:#3498db;
  --mpp-yellow:#f39c12;
  --mpp-border:rgba(0,0,0,.08);
  --mpp-shadow:0 2px 8px rgba(0,0,0,.08);
  --mpp-bg-cream:#f5f5f0;
  --mpp-white-soft:#fafaf8;
}

/* ============ Layout ============ */
.mpp-ddt{
  max-width:760px;
  margin:0 auto;
  padding:14px;
  background:var(--mpp-bg-cream);
  min-height:100vh;
}

.mpp-ddt-header{ margin-bottom:14px; }
.mpp-ddt-title{ margin:0; font-size:26px; font-weight:900; }
.mpp-ddt-subtitle{ margin-top:6px; opacity:.75; }

/* ============ Goal ============ */
.mpp-ddt-goal{
  border:2px solid var(--mpp-accent-border);
  border-radius:16px;
  padding:16px 18px;
  background:var(--mpp-accent-light);
  margin-bottom:14px;
  box-shadow:var(--mpp-shadow);
}
.mpp-ddt-goal-label{
  font-weight:900;
  color:var(--mpp-accent);
  margin-bottom:10px;
  font-size:15px;
}
.mpp-ddt-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
}
.mpp-ddt-summary{ margin-top:6px; opacity:.75; }

/* ============ PASTILLAS COMPACTAS (estilo App mejorado) ============ */
.mpp-ddt-value{
  border:1px solid var(--mpp-border);
  background:var(--mpp-white-soft);
  border-radius:999px;
  padding:8px 14px;
  min-width:70px;
  max-width:95px;
  text-align:center;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  flex-shrink:0;
  transition:all 0.2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.mpp-ddt-value:hover{
  border-color:var(--mpp-accent-border);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  background:#fff;
}
.mpp-ddt-value--goal{
  border:2px solid var(--mpp-accent-border);
  color:var(--mpp-accent);
  background:var(--mpp-accent-light);
  min-width:85px;
  max-width:110px;
  font-weight:900;
}

/* ============ Cards ============ */
.mpp-ddt-card{
  border:1px solid var(--mpp-border);
  border-radius:16px;
  padding:16px 18px;
  background:#fff;
  margin-bottom:14px;
  box-shadow:var(--mpp-shadow);
}
.mpp-ddt-card-title{ 
  margin:0 0 8px; 
  font-weight:900; 
  font-size:20px;
  color:#2c3e50;
}
.mpp-ddt-row em{ font-style:normal; opacity:.6; }
.mpp-ddt-row--readonly{ padding-top:0; }
.mpp-ddt-row--actions{ padding-top:6px; padding-bottom:6px; }

.mpp-ddt-btn{
  width:100%;
  border:0;
  border-radius:14px;
  padding:14px 12px;
  font-weight:900;
  background: rgba(0,0,0,.10);
  cursor:pointer;
}
.mpp-ddt-btn-secondary{
  border:1px solid var(--mpp-border);
  background:var(--mpp-white-soft);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
  transition:all 0.2s ease;
}
.mpp-ddt-btn-secondary:hover{
  border-color:var(--mpp-accent-border);
  background:#fff;
}
.mpp-ddt-help{ margin-top:6px; opacity:.75; }

.mpp-ddt-toggle{
  display:flex;
  gap:10px;
  margin:10px 0 6px;
}
.mpp-ddt-toggle-btn{
  border:1px solid var(--mpp-border);
  background:var(--mpp-white-soft);
  border-radius:999px;
  padding:10px 16px;
  font-weight:900;
  cursor:pointer;
  transition:all 0.2s ease;
}
.mpp-ddt-toggle-btn:hover{
  border-color:var(--mpp-accent-border);
  background:#fff;
}
.mpp-ddt-toggle-btn.is-active{
  border:2px solid var(--mpp-accent);
  background:var(--mpp-accent-light);
  color:var(--mpp-accent);
}

/* ============ Result ============ */
.mpp-ddt-result{
  border:2px solid var(--mpp-blue);
  border-radius:18px;
  padding:18px 20px 16px;
  background:#fff;
  box-shadow:0 4px 12px rgba(52,152,219,.15);
}
.mpp-ddt-result-label{ 
  opacity:.8;
  font-weight:800; 
  color:var(--mpp-blue);
  font-size:14px;
}
.mpp-ddt-result-value{ 
  font-size:38px; 
  font-weight:900; 
  margin-top:8px;
  color:var(--mpp-blue);
}
.mpp-ddt-result-hint{ 
  margin-top:8px; 
  opacity:.75;
  font-size:14px;
}


/* ============ Modal / Popover ============ */
.mpp-ddt-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:999999;
}
.mpp-ddt-modal.is-open{ display:block; }

.mpp-ddt-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.04);
}

/* Panel flotante MÁS ESTRECHO */
.mpp-ddt-sheet{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(320px, calc(100vw - 32px));
  max-height:58vh;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}

/* Flecha que apunta al campo */
.mpp-ddt-sheet::before{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  background:#fff;
  transform:rotate(var(--caret-rotate, 45deg));
  top:var(--caret-top, 18px);
  left:var(--caret-left, -7px);
  box-shadow:-3px -3px 10px rgba(0,0,0,.05);
}

.mpp-ddt-sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
}
.mpp-ddt-sheet-title{ 
  font-weight:900; 
  opacity:.9; 
  font-size:18px;
  flex:1;
}

/* Contenedor de botones Cancelar/OK */
.mpp-ddt-sheet-header > div{
  display:flex;
  align-items:center;
  gap:8px;
}

.mpp-ddt-sheet-btn{
  border:0;
  background:transparent;
  font-weight:900;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.mpp-ddt-sheet-btn.is-primary{ 
  background:rgba(0,0,0,.06); 
}

/* Content areas */
.mpp-ddt-wheel,
.mpp-ddt-keypad,
.mpp-ddt-recipes{
  padding:10px 12px 12px;
}

/* ============ PICKER CON ESCALA (estilo iOS) ============ */
.mpp-ddt-wheel{
  position:relative;
}
.mpp-ddt-wheel-list{
  position:relative;
  height:240px;
  max-height:40vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:y mandatory;
  padding:88px 0;
}

/* Banda de selección central MÁS VISIBLE */
.mpp-ddt-wheel::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:50%;
  height:56px;
  transform:translateY(-50%);
  border-radius:14px;
  background:rgba(0,0,0,.08);
  pointer-events:none;
  z-index:1;
}

/* Items con ESCALA progresiva (clave del efecto iOS) */
.mpp-ddt-wheel-item{
  width:100%;
  text-align:center;
  border:0;
  background:transparent;
  padding:8px;
  font-size:22px;
  font-weight:900;
  line-height:1.2;
  cursor:pointer;
  scroll-snap-align:center;
  opacity:.35;
  transition:all 0.15s ease;
  position:relative;
  z-index:2;
}

/* Item seleccionado: GRANDE y destacado */
.mpp-ddt-wheel-item.is-selected{
  font-size:48px;
  opacity:1;
  color:#000;
}

/* Items adyacentes al seleccionado: tamaño medio */
.mpp-ddt-wheel-item.is-adjacent{
  font-size:32px;
  opacity:.65;
}

/* Items lejanos: pequeños y claros */
.mpp-ddt-wheel-item.is-far{
  font-size:24px;
  opacity:.4;
}

/* ============ TECLADO COMPACTO Y CUADRADO ============ */
.mpp-ddt-keypad-display{
  font-size:32px;
  font-weight:900;
  text-align:center;
  padding:4px 0 10px;
}
.mpp-ddt-keypad-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  padding:0 20px;
}
.mpp-ddt-keypad-grid button{
  aspect-ratio:1;
  width:100%;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Recipe picker */
.mpp-ddt-recipes input[type="search"]{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  font-weight:900;
  outline:none;
}
.mpp-ddt-recipe-status{
  margin-top:8px;
  font-size:13px;
  opacity:.75;
}
.mpp-ddt-recipe-list{
  max-height:320px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-top:6px;
}
.mpp-ddt-recipe-row{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  margin:8px 0;
  cursor:pointer;
}
.mpp-ddt-recipe-row.is-selected{
  background:rgba(192,57,43,.08);
  border-color:rgba(192,57,43,.20);
}
.mpp-ddt-recipe-row .name{ font-weight:900; margin-bottom:4px; }
.mpp-ddt-recipe-row .scope{ font-size:12px; opacity:.70; }

/* ============ Media Queries ============ */
@media (max-width:420px){
  .mpp-ddt-value{
    min-width:55px;
    max-width:75px;
    font-size:13px;
    padding:5px 8px;
  }
  .mpp-ddt-wheel-item{ font-size:20px; }
  .mpp-ddt-wheel-item.is-selected{ font-size:42px; }
  .mpp-ddt-wheel-item.is-adjacent{ font-size:28px; }
  .mpp-ddt-wheel-item.is-far{ font-size:22px; }
  .mpp-ddt-wheel-list{ height:220px; padding:80px 0; }
  .mpp-ddt-keypad-display{ font-size:34px; }
  .mpp-ddt-keypad-grid button{ height:44px; font-size:19px; }
}

@media (max-height:720px){
  .mpp-ddt-sheet{ max-height:52vh; }
  .mpp-ddt-wheel-item{ font-size:20px; }
  .mpp-ddt-wheel-item.is-selected{ font-size:40px; }
  .mpp-ddt-wheel-item.is-adjacent{ font-size:28px; }
  .mpp-ddt-wheel::after{ height:52px; }
  .mpp-ddt-keypad-grid button{ height:42px; }
}