/* DIRECTODEFABRICA Core — estilos del sitio público (plazos, aviso de checkout y seguimiento).
   Usan las variables del theme DIRECTODEFABRICA si existen y colores propios si no. */

.ddf-delivery-box { background: var(--ddf-surface, #fff); border: 1px solid var(--ddf-border, #dde1db); border-radius: var(--ddf-radius, 12px); padding: 1rem; margin: 1rem 0; display: grid; gap: 1rem; }
.ddf-delivery-box__group + .ddf-delivery-box__group { border-top: 1px dashed var(--ddf-border, #dde1db); padding-top: 1rem; }
.ddf-delivery-box__title { margin: 0 0 .4rem; font-size: .95rem; font-weight: 800; letter-spacing: .02em; color: var(--ddf-black, #0a0a0a); text-transform: none; }
.ddf-delivery-box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.ddf-delivery-box li { position: relative; padding-left: 1.2rem; font-size: .93rem; color: var(--ddf-muted, #565d57); }
.ddf-delivery-box li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ddf-green, #0f7a37); }

.ddf-delivery-notice { background: #fffbe0; border: 1px solid var(--ddf-yellow, #facc15); border-left-width: 6px; border-radius: var(--ddf-radius, 12px); padding: .9rem 1rem; margin: 1rem 0; color: var(--ddf-text, #171717); }
.ddf-delivery-notice p { margin: 0; font-size: .93rem; }
.ddf-delivery-notice__title { font-weight: 800; letter-spacing: .02em; margin-bottom: .35rem !important; color: var(--ddf-black, #0a0a0a); }
.ddf-accept { margin: .5rem 0 1rem; }
.ddf-accept label { display: flex; align-items: flex-start; gap: .5rem; font-weight: 600; }
.ddf-accept input[type="checkbox"] { margin-top: .3rem; flex: 0 0 auto; }

.ddf-tracking { background: var(--ddf-surface, #fff); border: 1px solid var(--ddf-border, #dde1db); border-radius: var(--ddf-radius, 12px); padding: 1.1rem; margin: 0 0 1.5rem; }
.ddf-tracking__title { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 800; letter-spacing: .02em; color: var(--ddf-black, #0a0a0a); }
.ddf-tracking__message { margin: 0 0 1rem; color: var(--ddf-muted, #565d57); }
.ddf-steps { list-style: none; margin: 0 0 1rem; padding: 0; }
.ddf-steps__item { display: flex; gap: .75rem; align-items: flex-start; position: relative; padding-bottom: 1rem; }
.ddf-steps__item:last-child { padding-bottom: 0; }
.ddf-steps__item::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--ddf-border, #dde1db); }
.ddf-steps__item:last-child::before { display: none; }
.ddf-steps__item.is-done::before { background: var(--ddf-green, #0f7a37); }
.ddf-steps__dot { flex: 0 0 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; background: #eceeea; color: var(--ddf-muted, #565d57); border: 2px solid var(--ddf-border, #dde1db); }
.ddf-steps__item.is-done .ddf-steps__dot { background: var(--ddf-green, #0f7a37); border-color: var(--ddf-green, #0f7a37); color: #fff; }
.ddf-steps__item.is-current .ddf-steps__dot { background: var(--ddf-yellow, #facc15); border-color: var(--ddf-black, #0a0a0a); color: var(--ddf-black, #0a0a0a); }
.ddf-steps__text { display: flex; flex-direction: column; padding-top: .15rem; min-width: 0; }
.ddf-steps__label { font-weight: 700; color: var(--ddf-muted, #565d57); overflow-wrap: anywhere; }
.ddf-steps__item.is-done .ddf-steps__label, .ddf-steps__item.is-current .ddf-steps__label { color: var(--ddf-black, #0a0a0a); }
.ddf-steps__date { font-size: .82rem; color: var(--ddf-muted, #565d57); }
.ddf-tracking__data { margin: 0; display: grid; gap: .6rem; border-top: 1px solid var(--ddf-border, #dde1db); padding-top: 1rem; }
.ddf-tracking__data div { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.ddf-tracking__data dt { font-weight: 800; flex: 0 0 11rem; max-width: 100%; }
.ddf-tracking__data dd { margin: 0; flex: 1 1 12rem; overflow-wrap: anywhere; }
.ddf-tracking__disclaimer { margin: .9rem 0 0; font-size: .85rem; color: var(--ddf-muted, #565d57); }

/* ==========================================================================
   Configurador de cajas (Etapa 4). Pensado para celular: botones de al menos 44 px.
   ========================================================================== */
.ddf-cfg { margin: 1rem 0; display: grid; gap: 1rem; border: 1px solid var(--ddf-border, #dde1db); border-radius: var(--ddf-radius, 12px); padding: 1rem; background: var(--ddf-surface, #fff); }
.ddf-cfg__title { margin: 0; font-size: 1.05rem; }
.ddf-cfg fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ddf-cfg legend, .ddf-cfg__legend { font-weight: 700; font-size: .92rem; margin: 0 0 .45rem; }
.ddf-cfg__group { display: grid; gap: .7rem; }
.ddf-cfg__group[hidden], .ddf-cfg [hidden] { display: none !important; }
.ddf-cfg__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ddf-cfg__opt { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem .6rem; border: 2px solid var(--ddf-border, #dde1db); border-radius: 10px; text-align: center; cursor: pointer; font-size: .92rem; line-height: 1.25; background: #fff; overflow-wrap: anywhere; }
.ddf-cfg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ddf-cfg__opt:focus-within { outline: 3px solid var(--ddf-yellow, #facc15); outline-offset: 2px; }
.ddf-cfg__opt.is-checked { border-color: var(--ddf-green, #0f7a37); background: #e8f6ec; font-weight: 700; color: var(--ddf-black, #0a0a0a); }
.ddf-cfg__summary { margin: 0; font-weight: 600; }
.ddf-cfg__error { margin: 0; color: #8a1313; background: #fbd5d5; padding: .5rem .7rem; border-radius: 8px; font-size: .92rem; }
.ddf-cfg__note { margin: 0; font-size: .85rem; color: var(--ddf-muted, #565d57); }
.ddf-cfg__modes-fixed { margin: 0; }
@media (max-width: 380px) { .ddf-cfg__options { grid-template-columns: 1fr; } }