/* =============================================
   DOCHI — Sección Fragancias
   1) Switcher de modo en el header (Kosmo / Fragancias) — global
   2) Mini home "en construcción" de /fragancias
   Usa las variables de dochi-main.css donde existen; el tono warm de
   Fragancias es propio de esta sección (crema/beis, no rosa Kosmo).
   ============================================= */

/* -----------------------------------------------
   1) SWITCHER DE MODO (header, todas las páginas)
   Mobile first — pill ocupa todo el ancho, ~34px alto
   ----------------------------------------------- */
.dochi-mode-switcher {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 420px;
    height: 34px;
    margin: 0 auto 10px;
    padding: 3px;
    box-sizing: border-box;
    background: #F0F0F0;
    border-radius: 999px;
}

.dochi-mode-pill-option {
    position: relative;
    z-index: 2;
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: var(--dochi-font, inherit);
    font-size: 12.5px;
    font-weight: 700;
    color: #777;
    text-decoration: none;
    border-radius: 999px;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.dochi-mode-pill-option.is-active {
    color: #fff;
}

.dochi-mode-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    border-radius: 999px;
    background: var(--dochi-accent, #E91E63);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
    z-index: 1;
}

.dochi-mode-thumb.is-fragancias {
    transform: translateX(100%);
    background: #C89B6E;
}

/* Header en tono warm cuando el modo activo es Fragancias */
.dochi-header--fragancias {
    background: #FBF3E7;
    transition: background 0.4s ease;
}

.dochi-header--fragancias .dochi-search-wrapper {
    background: #fff;
}

/* El buscador central no se imprime en /fragancias (tiene su propia
   búsqueda). Sin él, el layout flex del header perdía el elemento que
   empujaba los iconos (cuenta/carrito) a la derecha, y quedaban pegados
   al logo. Los forzamos al borde derecho igual, con o sin buscador. */
.dochi-header--fragancias .dochi-header-icons {
    margin-left: auto;
}

@media (min-width: 640px) {
    .dochi-mode-switcher {
        max-width: 280px;
    }
}

/* Card "Fragancias" dentro del dropdown de búsqueda de Kosmo (header.php +
   dochi-search.js) — aparece cuando el término buscado tiene coincidencias
   entre los productos de Fragancias, que ese buscador excluye por diseño
   (sesión 30). Un poco más alta que un item normal para que se note que
   es distinta, no un producto más. */
.dochi-search-item-frag {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #FBF3E7;
    border-top: 1px solid #F0E4D0;
}
.dochi-search-item-frag-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.dochi-search-item-frag-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.dochi-search-item-frag-text strong {
    color: #8A6D3B;
    font-size: 14px;
}
.dochi-search-item-frag-text small {
    color: #A08B6C;
    font-size: 12px;
}

/* -----------------------------------------------
   2) MINI HOME "EN CONSTRUCCIÓN" — /fragancias
   ----------------------------------------------- */
.dochi-frag-home {
    min-height: 56vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(180deg, #FBF3E7 0%, #FDF8F0 100%);
}

.dochi-frag-construction {
    max-width: 480px;
    text-align: center;
    animation: dochiFragIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.dochi-frag-construction.is-leaving {
    animation: dochiFragOut 0.32s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes dochiFragIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes dochiFragOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(16px); }
}

.dochi-frag-icon {
    display: block;
    font-size: 44px;
    margin-bottom: 10px;
}

.dochi-frag-kicker {
    display: inline-block;
    font-family: var(--dochi-font, inherit);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #B98A55;
    margin-bottom: 14px;
}

.dochi-frag-title {
    font-family: var(--dochi-font, inherit);
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
    color: #5C4530;
    margin: 0 0 14px;
}

.dochi-frag-lead {
    font-family: var(--dochi-font, inherit);
    font-size: 15px;
    line-height: 1.6;
    color: #7A6349;
    margin: 0 0 28px;
}

.dochi-frag-back {
    display: inline-block;
    font-family: var(--dochi-font, inherit);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #C89B6E;
    padding: 12px 26px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.dochi-frag-back:hover {
    background: #B98247;
    transform: translateY(-1px);
}


/* =============================================
   3) PANEL INTERNO /fragancias-panel
   Panel logueado (Shop Manager), no rige PageSpeed del storefront →
   acá sí van sombras/blur/transiciones, mismo criterio que /envios.
   Prefijo .dfp- (dochi fragancias panel) para no chocar con nada.
   ============================================= */

.dfp-body {
    margin: 0;
    background: #F4EEE4;
    font-family: var(--dochi-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: #3A2E20;
}

.dfp-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

/* Topbar */
.dfp-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 -16px 0;
    background: rgba(60, 44, 28, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
}

.dfp-topbar-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dfp-topbar-icon {
    font-size: 26px;
    line-height: 1;
}

.dfp-topbar-title h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
}

.dfp-topbar-sub {
    font-size: 12px;
    opacity: 0.7;
}

.dfp-topbar-back {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.85;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}
.dfp-topbar-back:hover { opacity: 1; }

/* Tabs */
.dfp-tabs {
    display: flex;
    gap: 4px;
    margin: 16px 0 20px;
    border-bottom: 2px solid #E2D6C3;
    overflow-x: auto;
}

.dfp-tab {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #8A7A63;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.dfp-tab:hover { color: #5C4530; }

.dfp-tab.is-active {
    color: #B9752E;
    border-bottom-color: #C89B6E;
}

/* Intro / textos */
.dfp-intro {
    font-size: 14px;
    line-height: 1.55;
    color: #6E5C44;
    margin: 0 0 20px;
    max-width: 680px;
}

/* Cards */
.dfp-vocab-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 720px) {
    .dfp-vocab-cols {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 940px) {
    .dfp-vocab-cols-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.dfp-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(90, 69, 48, 0.08);
}

.dfp-card-title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 800;
    color: #5C4530;
    padding-bottom: 10px;
    border-bottom: 1px solid #F0E7D8;
}

/* Vocabulario: alta */
.dfp-vocab-add {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

input[type="text"].dfp-vocab-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #3A2E20;
    background: #FBF7F0;
    border: 1px solid #E2D6C3;
    border-radius: 9px;
    box-shadow: none;
    outline: none;
    transition: border-color 0.2s ease;
}
input[type="text"].dfp-vocab-input:focus {
    border-color: #C89B6E;
    background: #fff;
}

.dfp-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    border-radius: 9px;
    padding: 10px 16px;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
.dfp-btn:disabled { opacity: 0.55; cursor: default; }

.dfp-btn-primary {
    background: #C89B6E;
    color: #fff;
}
.dfp-btn-primary:hover:not(:disabled) {
    background: #B9752E;
    transform: translateY(-1px);
}

/* Vocabulario: contador + mensajes */
.dfp-vocab-count {
    font-size: 12.5px;
    color: #9A876C;
    margin: 0 0 10px;
}
.dfp-vocab-count-n { font-weight: 800; color: #6E5C44; }

.dfp-vocab-msg {
    font-size: 13px;
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 8px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease;
}
.dfp-vocab-msg.is-visible {
    opacity: 1;
    max-height: 80px;
}
.dfp-vocab-msg.is-ok    { background: #EAF6E9; color: #2E7D32; }
.dfp-vocab-msg.is-error { background: #FBEAEA; color: #C0392B; }

/* Vocabulario: lista */
.dfp-vocab-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 420px;
    overflow-y: auto;
}

.dfp-vocab-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 4px 9px 10px;
    border-bottom: 1px solid #F4ECDF;
}
.dfp-vocab-item:last-child { border-bottom: none; }

/* Miniatura de la foto del aroma en el panel (o recuadro vacío si no tiene) */
.dfp-vocab-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 26px;
    border-radius: 6px;
    overflow: hidden;
    background: #F4ECDF;
    border: 1px solid #E7D9C0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dfp-vocab-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dfp-vocab-thumb.is-empty::after {
    content: "🖼";
    font-size: 12px;
    opacity: 0.35;
}

.dfp-vocab-name {
    font-size: 14px;
    color: #4A3B29;
    flex: 1 1 auto;
}

.dfp-vocab-actions {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}

.dfp-icon-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 7px;
    opacity: 0.65;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.dfp-icon-btn:hover {
    opacity: 1;
    background: #F4ECDF;
}

.dfp-vocab-empty {
    font-size: 13px;
    color: #B0A088;
    font-style: italic;
    margin: 10px 0 0;
    text-align: center;
    padding: 14px;
}

/* Filtros públicos de /fragancias (orden + visibilidad) */
.dfp-filtros-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
.dfp-filtros-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 4px 9px 10px;
    border-bottom: 1px solid #F4ECDF;
}
.dfp-filtros-item:last-child { border-bottom: none; }

.dfp-filtros-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4A3B29;
    cursor: pointer;
}
.dfp-filtros-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #C89B6E;
    cursor: pointer;
}

.dfp-filtros-move {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}
.dfp-icon-btn[disabled] {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

/* Placeholder "próximamente" (Marcar / Specs) */
.dfp-soon {
    text-align: center;
    padding: 60px 20px;
    color: #8A7A63;
}
.dfp-soon-icon {
    font-size: 44px;
    display: block;
    margin-bottom: 12px;
    opacity: 0.7;
}
.dfp-soon h2 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800;
    color: #5C4530;
}
.dfp-soon p {
    margin: 0 auto;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.55;
}


/* =============================================
   TAB MARCAR (dos columnas: sin asignar / marcadas)
   ============================================= */

.dfp-marcar-search {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

input[type="text"].dfp-buscar-input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #3A2E20;
    background: #fff;
    border: 1px solid #E2D6C3;
    border-radius: 10px;
    box-shadow: none;
    outline: none;
    transition: border-color 0.2s ease;
}
input[type="text"].dfp-buscar-input:focus {
    border-color: #C89B6E;
}

.dfp-marcar-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 760px) {
    .dfp-marcar-cols {
        grid-template-columns: 1fr 1fr;
    }
}

.dfp-col {
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.dfp-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F0E7D8;
}
.dfp-col-head .dfp-card-title {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dfp-col-count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    color: #B9752E;
    background: #F6EAD9;
    border-radius: 999px;
}

.dfp-selall {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: #8A7A63;
    cursor: pointer;
    white-space: nowrap;
}

.dfp-col-list {
    flex: 1;
    min-height: 120px;
    max-height: 460px;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 0 4px;
}

.dfp-col-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #F0E7D8;
}
.dfp-col-foot .dfp-btn { width: 100%; }

/* Tarjeta de producto */
.dfp-prod {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.dfp-prod:hover { background: #FBF5EC; }

.dfp-prod-check {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: #C89B6E;
}

.dfp-prod-thumb {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    background: #F4ECDF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dfp-prod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dfp-prod-noimg { font-size: 20px; opacity: 0.6; }

.dfp-prod-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dfp-prod-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #4A3B29;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.dfp-prod-marca {
    font-size: 11.5px;
    color: #A8946F;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dfp-col-empty {
    font-size: 13px;
    color: #B0A088;
    font-style: italic;
    text-align: center;
    padding: 30px 14px;
    margin: 0;
}

.dfp-btn-ghost {
    background: #F4ECDF;
    color: #8A6A3E;
}
.dfp-btn-ghost:hover:not(:disabled) {
    background: #EADBC4;
}

/* Mensaje de resultado del tab Marcar */
.dfp-marcar-msg {
    margin-top: 16px;
    font-size: 13.5px;
    padding: 0 14px;
    border-radius: 9px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.2s ease, padding 0.2s ease;
}
.dfp-marcar-msg.is-visible {
    opacity: 1;
    max-height: 70px;
    padding: 11px 14px;
}
.dfp-marcar-msg.is-ok    { background: #EAF6E9; color: #2E7D32; }
.dfp-marcar-msg.is-error { background: #FBEAEA; color: #C0392B; }


/* =============================================
   TAB SPECS (filas colapsables + form con chips)
   ============================================= */

.dfp-specs-search {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.dfp-specs-total {
    font-size: 12.5px;
    font-weight: 700;
    color: #9A876C;
    white-space: nowrap;
}

.dfp-specs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dfp-specs-row {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 5px rgba(90, 69, 48, 0.06);
    overflow: hidden;
}

.dfp-specs-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 10px 14px;
    text-align: left;
    font-family: inherit;
}
.dfp-specs-toggle:hover { background: #FBF5EC; }

.dfp-specs-status {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}
.dfp-specs-status.is-done {
    background: #E4F4E2;
    color: #2E7D32;
}
.dfp-specs-status.is-pending {
    background: #F1E9DB;
    color: #A08A62;
    font-size: 10.5px;
    letter-spacing: -0.3px;
    width: auto;
    min-width: 26px;
    padding: 0 5px;
    border-radius: 999px;
}
.dfp-specs-frac {
    font-weight: 800;
    line-height: 1;
}

/* Chip azul "+N" de atributos asignados — hermano de .dfp-specs-status,
   vive fuera del conteo 4/4 (son opcionales). Azul a propósito: ningún
   otro indicador del panel usa ese color, así no se confunde con
   completo/pendiente. */
.dfp-specs-atrib-count {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 800;
    color: #2E5FA8;
    background: #E3EDFB;
    border-radius: 999px;
    padding: 1px 6px;
    line-height: 1.5;
}

.dfp-specs-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: #F4ECDF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dfp-specs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dfp-specs-rowinfo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* Preview rápido de specs ya asignadas, al lado del nombre — solo visible
   con la fila COLAPSADA (sesión 31, pedido de Aaron: "paso mi mirada y ya
   sé que les asigné cosas", sin tener que abrir cada fila). Ultra chico,
   ultra transparente adrede: es un recordatorio de reojo, no información
   que compita con el nombre del producto. Se oculta solo con la fila
   abierta porque ahí el form ya muestra el detalle completo. */
.dfp-specs-preview {
    font-size: 9.5px;
    font-weight: 400;
    color: #4A3B29;
    opacity: 0.35;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.1px;
}
.dfp-specs-row.is-open .dfp-specs-preview {
    display: none;
}

.dfp-specs-caret {
    flex: 0 0 auto;
    color: #B8A583;
    font-size: 13px;
    transition: transform 0.2s ease;
}
.dfp-specs-row.is-open .dfp-specs-caret { transform: rotate(180deg); }

.dfp-specs-body {
    padding: 4px 16px 18px;
    border-top: 1px solid #F4ECDF;
}

.dfp-specs-loading {
    font-size: 13px;
    color: #A8946F;
    font-style: italic;
    padding: 14px 0;
    margin: 0;
}
.dfp-specs-loading.is-error { color: #C0392B; font-style: normal; }

/* Form de specs */
.dfp-specs-form { padding-top: 12px; }

.dfp-field { margin-bottom: 16px; }

.dfp-field-label {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    color: #6E5C44;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.dfp-chips-count {
    text-transform: none;
    letter-spacing: 0;
    color: #B9752E;
    font-weight: 700;
    margin-left: 4px;
}

.dfp-field-warn {
    font-size: 13px;
    color: #C0392B;
    background: #FBEAEA;
    padding: 8px 12px;
    border-radius: 8px;
    margin: 0;
}

.dfp-uso-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.dfp-uso-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #4A3B29;
    cursor: pointer;
}
.dfp-uso-check { accent-color: #C89B6E; width: 16px; height: 16px; cursor: pointer; }

.dfp-tipo-select,
.dfp-intensidad-select {
    width: 100%;
    max-width: 320px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #3A2E20;
    background: #FBF7F0;
    border: 1px solid #E2D6C3;
    border-radius: 9px;
    cursor: pointer;
}
.dfp-tipo-select option,
.dfp-intensidad-select option {
    color: #3A2E20;
    background: #fff;
}

/* Chips de fragancias */
.dfp-chips-filter {
    width: 100%;
    max-width: 320px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    color: #3A2E20;
    background: #FBF7F0;
    border: 1px solid #E2D6C3;
    border-radius: 8px;
    margin-bottom: 10px;
    outline: none;
}
.dfp-chips-filter:focus { border-color: #C89B6E; background: #fff; }

.dfp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    max-height: 220px;
    overflow-y: auto;
    padding: 2px;
}

.dfp-chip {
    border: 1px solid #E2D6C3;
    background: #fff;
    color: #6E5C44;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dfp-chip:hover { border-color: #C89B6E; }
.dfp-chip.is-on {
    background: #C89B6E;
    border-color: #C89B6E;
    color: #fff;
}

.dfp-specs-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}
.dfp-specs-msg {
    font-size: 13px;
    font-weight: 600;
}
.dfp-specs-msg.is-ok { color: #2E7D32; }
.dfp-specs-msg.is-error { color: #C0392B; }

.dfp-specs-noresult {
    font-size: 13px;
    color: #B0A088;
    font-style: italic;
    text-align: center;
    padding: 24px;
}


/* =============================================
   EDICIÓN EN LOTE (barra + modal) — tab Specs
   ============================================= */

.dfp-lote-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 11px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 5px rgba(90, 69, 48, 0.06);
}
.dfp-lote-count {
    font-size: 12.5px;
    font-weight: 700;
    color: #B9752E;
    margin-right: auto;
}
.dfp-lote-bar .dfp-btn { padding: 8px 14px; font-size: 13px; }

/* Fila: checkbox + toggle */
.dfp-specs-head {
    display: flex;
    align-items: center;
    gap: 0;
}
.dfp-specs-check {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-left: 14px;
    cursor: pointer;
    accent-color: #C89B6E;
}
.dfp-specs-head .dfp-specs-toggle { flex: 1; }

/* Modal */
.dfp-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.dfp-modal[hidden] { display: none; }

.dfp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(45, 33, 20, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.dfp-modal-box {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(50, 36, 20, 0.3);
    overflow: hidden;
}

.dfp-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #F0E7D8;
}
.dfp-modal-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #5C4530;
}
.dfp-modal-x {
    border: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    color: #A8946F;
    padding: 4px 8px;
    border-radius: 7px;
}
.dfp-modal-x:hover { background: #F4ECDF; color: #5C4530; }

.dfp-modal-sub {
    font-size: 13px;
    line-height: 1.5;
    color: #7A6349;
    margin: 0;
    padding: 12px 20px;
    background: #FBF5EC;
}
.dfp-modal-sub strong { color: #B9752E; }

.dfp-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.dfp-lote-field {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #F4ECDF;
}
.dfp-lote-field:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.dfp-lote-apply {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: #5C4530;
    cursor: pointer;
    margin-bottom: 10px;
}
.dfp-lote-check { width: 17px; height: 17px; accent-color: #C89B6E; cursor: pointer; }

.dfp-lote-controls {
    padding-left: 25px;
    transition: opacity 0.2s ease;
}
.dfp-lote-controls.is-off {
    opacity: 0.4;
    pointer-events: none;
}

.dfp-lote-modo {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}
.dfp-lote-modo label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #6E5C44;
    cursor: pointer;
}
.dfp-lote-modo input[type="radio"] { accent-color: #C89B6E; cursor: pointer; }

.dfp-modal-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #F0E7D8;
    background: #FBF7F0;
}
.dfp-modal-msg {
    font-size: 13px;
    font-weight: 600;
    margin-right: auto;
}
.dfp-modal-msg.is-error { color: #C0392B; }
.dfp-modal-msg.is-ok { color: #2E7D32; }


/* =============================================
   4) GÓNDOLA PÚBLICA /fragancias
   PÁGINA PÚBLICA → rige PageSpeed. Sin blur, sin sombras pesadas,
   sin animaciones costosas. Solo lo necesario.
   ============================================= */

.dochi-frag-gondola {
    padding: 0 14px 40px;
    position: relative;
    background: linear-gradient(180deg, #FBF3E7 0%, #FDFBF7 420px);
    overflow: hidden; /* contiene las ramitas decorativas */
}

/* Ramitas decorativas (WebP ~10KB, subida por Aaron). La imagen es la rama
   de la esquina izquierda; se refleja con scaleX(-1) para la derecha.
   Tenues y detrás de todo, no afectan PageSpeed (una sola imagen liviana). */
.dochi-frag-gondola::before,
.dochi-frag-gondola::after {
    content: "";
    position: absolute;
    top: 0;
    width: 190px;
    height: 300px;
    background-image: url("https://kosmocompras.com/wp-content/uploads/2026/09/ramitas.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
.dochi-frag-gondola::before {
    left: 0;
}
.dochi-frag-gondola::after {
    right: 0;
    transform: scaleX(-1);
}

/* Contenido por encima de las ramitas */
.dochi-frag-gondola > * {
    position: relative;
    z-index: 1;
}

/* En pantallas muy chicas, achicar las ramas para que no invadan el texto */
@media (max-width: 420px) {
    .dochi-frag-gondola::before,
    .dochi-frag-gondola::after {
        width: 120px;
        height: 200px;
        opacity: 0.4;
    }
}

/* Hero */
.dochi-frag-hero {
    text-align: center;
    padding: 26px 10px 22px;
}
.dochi-frag-hero-icon {
    display: block;
    font-size: 34px;
    margin-bottom: 6px;
}
.dochi-frag-hero-title {
    font-family: var(--dochi-font, inherit);
    font-size: 25px;
    font-weight: 800;
    color: #5C4530;
    margin: 0 0 7px;
    line-height: 1.15;
}
.dochi-frag-hero-sub {
    font-family: var(--dochi-font, inherit);
    font-size: 14px;
    line-height: 1.5;
    color: #7A6349;
    margin: 0 auto;
    max-width: 420px;
}

/* Filtros */
.dochi-frag-filtros {
    background: #fff;
    border-radius: 18px;
    padding: 14px 16px 10px;
    margin-bottom: 20px;
    border: 1px solid #E7D9C0;
    box-shadow: 0 2px 10px rgba(122, 98, 66, 0.08);
}

/* Barra superior: lupita ⇄ buscador. Uno reemplaza al otro, nunca conviven. */
.dochi-frag-topbar {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.dochi-frag-lupa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid #E0CFB2;
    background: #FBF5EA;
    color: #7A6242;
    font-family: var(--dochi-font, inherit);
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dochi-frag-lupa:hover {
    border-color: #C89B6E;
    background: #FBF3E7;
    color: #6E5C44;
}
.dochi-frag-lupa svg { flex: 0 0 auto; }

.dochi-frag-buscador {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.dochi-frag-input {
    flex: 1;
    border: 1.5px solid #C89B6E;
    border-radius: 999px;
    padding: 7px 16px;
    font-family: var(--dochi-font, inherit);
    font-size: 14px;
    color: #5E4E3A;
    background: #fff;
    outline: none;
}
.dochi-frag-input::placeholder { color: #B9A88C; }

.dochi-frag-cerrar {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #A8946F;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.dochi-frag-cerrar:hover { background: #FBF3E7; color: #6E5C44; }

.dochi-frag-filtro {
    margin-bottom: 7px;
}

.dochi-frag-filtro-label {
    display: block;
    font-family: var(--dochi-font, inherit);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #7A6242;
    margin-bottom: 4px;
}

/* Chips en fila con scroll horizontal en mobile: no rompe el alto de la
   página con 120 aromas apilados. */
.dochi-frag-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
}

.dochi-frag-chip {
    flex: 0 0 auto;
    border: 1.5px solid #E0CFB2;
    background: #FBF5EA;
    color: #5E4B33;
    font-family: var(--dochi-font, inherit);
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.dochi-frag-chip:hover {
    border-color: #C89B6E;
    background: #F4E7D2;
}
.dochi-frag-chip.is-on {
    background: #B8813F;
    border-color: #B8813F;
    color: #fff;
    box-shadow: 0 2px 6px rgba(184, 129, 63, 0.30);
}

/* === AROMA como TARJETAS (con foto de fondo o texto centrado) ===
   A mitad de alto de una card de producto: compactas. Con foto, el nombre
   va encima con sombra para leerse; sin foto, centrado sobre fondo crema. */
.dochi-frag-chips--cards {
    gap: 8px;
}
.dochi-frag-card {
    flex: 0 0 auto;
    position: relative;
    width: 104px;
    height: 62px;
    border: 1.5px solid #E0CFB2;
    border-radius: 12px;
    background: #FBF5EA;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.dochi-frag-card:hover {
    border-color: #C89B6E;
    box-shadow: 0 3px 10px rgba(122, 98, 66, 0.18);
}
.dochi-frag-card:active { transform: scale(0.97); }

/* Nombre: sin foto, centrado y marrón; con foto, abajo, blanco con sombra
   y un velo oscuro degradado para que siempre se lea. */
.dochi-frag-card-name {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    font-family: var(--dochi-font, inherit);
    font-size: 12px;
    font-weight: 700;
    color: #5E4B33;
    padding: 5px 6px;
    line-height: 1.2;
}
.dochi-frag-card.has-img {
    align-items: flex-end;
}
.dochi-frag-card.has-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 75%);
    z-index: 0;
}
.dochi-frag-card.has-img .dochi-frag-card-name {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* Sin foto: centrar vertical el nombre */
.dochi-frag-card:not(.has-img) {
    align-items: center;
}

/* Seleccionada */
.dochi-frag-card.is-on {
    border-color: #B8813F;
    box-shadow: 0 0 0 2px #B8813F, 0 3px 10px rgba(184, 129, 63, 0.30);
}
.dochi-frag-card.is-on:not(.has-img) {
    background: #F4E7D2;
}

/* === Flechas de scroll de las filas (solo desktop, las crea el JS) === */
/* === Flechas de scroll de las filas (solo desktop, las crea el JS) ===
   Planas, pegadas al borde, con un velo degradado detrás que desvanece los
   chips hacia el borde (pista de "hay más") en vez de un círculo flotante. */
.dochi-frag-chips-scroller {
    position: relative;
}
.dochi-frag-scroll-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 44px;
    border: none;
    color: #6E5C44;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.dochi-frag-scroll-arrow:hover { color: #B8813F; }

/* Velo degradado: del color de fondo del marco (blanco) hacia transparente,
   apuntando al centro, para que los chips se "fundan" bajo la flecha. */
.dochi-frag-scroll-prev {
    left: 0;
    justify-content: flex-start;
    padding-left: 4px;
    background: linear-gradient(to right, #fff 55%, rgba(255,255,255,0) 100%);
}
.dochi-frag-scroll-next {
    right: 0;
    justify-content: flex-end;
    padding-right: 4px;
    background: linear-gradient(to left, #fff 55%, rgba(255,255,255,0) 100%);
}
.dochi-frag-scroll-arrow.is-hidden { opacity: 0; pointer-events: none; }

.dochi-frag-filtros-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 7px;
    margin-top: 2px;
    border-top: 1px solid #F4ECDF;
}

.dochi-frag-count {
    font-family: var(--dochi-font, inherit);
    font-size: 12.5px;
    font-weight: 700;
    color: #9A876C;
}

.dochi-frag-limpiar {
    border: none;
    background: transparent;
    font-family: var(--dochi-font, inherit);
    font-size: 12.5px;
    font-weight: 700;
    color: #B9752E;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 7px;
}
.dochi-frag-limpiar:hover { background: #FBF3E7; }

/* Wrapper de cada producto: es el item del grid (contiene la card + los
   mini chips de specs). Antes usaba display:contents, pero al sumar los
   chips debajo tienen que quedar dentro del mismo item. */
.dochi-frag-item {
    display: flex;
    flex-direction: column;
}

.dochi-frag-item[hidden] { display: none; }

/* --- Variante compacta de la card en la góndola --- */

/* Nombre mini en 2 renglones: entra completo ("Iluminarte sahumerio x15
   Lavanda") en vez de cortarse con puntos suspensivos. */
.dochi-card-fragancia .dochi-card-name {
    font-size: 10.5px;
    line-height: 1.25;
    -webkit-line-clamp: 2;
}

/* Menos aire en el bloque de info, para compensar los chips de abajo */
.dochi-card-fragancia .dochi-card-info {
    gap: 3px;
}

/* --- Mini chips de specs (debajo de cada producto) --- */
/* Propósito/Aroma van en su PROPIA línea (renglón), primero, arriba del
   resto de los chips — no mezclados con tipo/uso/intensidad. Atributos
   siguen flotando sobre la foto (badge aparte, sin tocar — ver
   dochi-card-attrs más abajo), no entran acá. */
.dochi-frag-specs {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px 8px 0;
}
.dochi-frag-specs-linea {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.dochi-frag-minichip {
    font-family: var(--dochi-font, inherit);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    white-space: nowrap;
    background: #F4ECDF;
    color: #96805E;
}

/* Aroma: tono cálido destacado, igual que siempre. */
.dochi-frag-minichip--aroma {
    background: #C89B6E;
    color: #fff;
}
/* Propósito: fondito DISTINTO adrede — violeta, mismo criterio que ya
   tenía el badge flotante (Aaron: "el CSS del texto que dice Dulzura,
   ese"), para que no se confunda con un aroma real. */
.dochi-frag-minichip--proposito {
    background: #6B5B95;
    color: #fff;
}

.dochi-frag-minichip--tipo {
    background: #EFE3D0;
    color: #8A6A3E;
}

.dochi-frag-sinresultados,
.dochi-frag-sinbusqueda {
    text-align: center;
    font-family: var(--dochi-font, inherit);
    font-size: 14px;
    color: #A8946F;
    padding: 40px 20px;
    margin: 0;
}


/* =============================================
   Badge flotante de Atributos (Largo, Contenido, Tamaño circular…)
   Arriba-izquierda de la foto, mismo rincón que los badges de stock/
   oferta/bolsón (solo se muestra si ninguno de esos está activo). Misma
   técnica de codeo que el sticker de promo de envío gratis
   (dochi-checkout.css): position:absolute + fondo con color/opacidad
   propios, bloque prolijo de una o varias líneas.
   ============================================= */
.dochi-card-attrs {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    max-width: calc(100% - 16px);
    margin: 8px 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}
.dochi-card-attrs-line {
    font-family: var(--dochi-font, inherit);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    background: rgba(58, 46, 32, 0.72);
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    width: fit-content;
    backdrop-filter: blur(1px);
}


/* =============================================
   SESIÓN 31 — Panel: nota chica bajo un título de card
   y aclaración chica bajo un campo de specs.
   ============================================= */
.dfp-card-note {
    font-size: 12px;
    color: #96805E;
    margin: -10px 0 14px;
    line-height: 1.4;
}
.dfp-field-hint {
    font-size: 12px;
    color: #96805E;
    margin: 8px 0 0;
    line-height: 1.4;
}

/* =============================================
   SESIÓN 31, 2da vuelta — "Ocultar chip" por producto
   Tilde chica al lado del label de cada campo (Uso/Tipo/Intensidad/
   Fragancias-Propósito). El dato sigue guardado y sirve para filtros y
   búsqueda — solo no se pinta como chip en la card pública.
   ============================================= */
.dfp-field-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
}
.dfp-ocultar-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: #B0A088;
    cursor: pointer;
    white-space: nowrap;
}
.dfp-ocultar-chip:hover { color: #8A7A5C; }
.dfp-ocultar-check {
    accent-color: #B0A088;
    width: 13px;
    height: 13px;
    cursor: pointer;
}

/* =============================================
   SESIÓN 31, 2da vuelta — Alta rápida de fragancias desde Specs
   Vive arriba del filtro de chips, mismo ancho. Se oculta con JS cuando
   hay más de una fila desplegada o hay selección de lote activa.
   ============================================= */
.dfp-chips-quickadd,
.dfp-select-quickadd {
    display: flex;
    gap: 6px;
    max-width: 320px;
    margin-bottom: 8px;
}
.dfp-chips-quickadd-input,
.dfp-select-quickadd-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    font-size: 12.5px;
    font-family: inherit;
    color: #3A2E20;
    background: #fff;
    border: 1px dashed #C89B6E;
    border-radius: 8px;
    outline: none;
}
.dfp-chips-quickadd-input:focus,
.dfp-select-quickadd-input:focus { border-style: solid; }
.dfp-chips-quickadd-btn,
.dfp-select-quickadd-btn {
    padding: 7px 12px;
    font-size: 12.5px;
    white-space: nowrap;
}

/* Checkbox de "Chips ocultos" en el modal de lote — mismo acento que los
   demás checkboxes del panel. */
.dfp-lote-ocultar-check {
    accent-color: #C89B6E;
    width: 16px;
    height: 16px;
    cursor: pointer;
}


/* =============================================
   SESIÓN 31 — Panel: Atributos (vocabulario de 2 niveles)
   Alta de grupo arriba + una .dfp-card por grupo, cada una con su lista
   de valores (mismo look que .dfp-vocab-list) y su propia alta de valor.
   ============================================= */
.dfp-atrib-grupo-add {
    max-width: 480px;
    margin-bottom: 18px;
}

.dfp-atrib-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 720px) {
    .dfp-atrib-cards {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 1180px) {
    .dfp-atrib-cards {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.dfp-atrib-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F0E7D8;
}
.dfp-atrib-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #5C4530;
}

.dfp-atrib-valores {
    margin-bottom: 10px;
}
.dfp-atrib-valores-empty {
    font-size: 13px;
    color: #A8946F;
    margin: 0 0 10px;
}

.dfp-atrib-valor-add {
    margin: 0;
}
.dfp-atrib-valor-add .dfp-atrib-valor-input {
    font-size: 13px;
    padding: 8px 10px;
}

/* Grupos de chips de atributos DENTRO del form de Specs (single y lote) —
   una etiqueta de grupo chica arriba de cada tanda de chips, para que se
   entienda que "8cm" y "12cm" son variantes de "Largo", no ítems sueltos. */
.dfp-atrib-grupos {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dfp-atrib-grupo-label {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    color: #96805E;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}