/* ============================================================
   Maioris Pan Pro - STYLE.CSS v8.8 (NAV-BAR ALINEADA + BOTONES AJUSTADOS)
   ============================================================ */

/* --- 1. GENERAL Y FONDO --- */
.cpp-wrapper {
    max-width: 700px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #444;
    background-color: #fcfbf9;
    border-radius: 24px;
    padding: 25px;
    padding-bottom: 140px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
    box-sizing: border-box;
}
.cpp-view {
    width: 100%;
    animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- 2. DASHBOARD / CABECERA --- */

.cpp-header-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
    position: relative; 
}

.cpp-title-main,
.cpp-app-title {
    font-family: "Baloo 2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #4b342c;
    margin: 0;
}

.cpp-subtitle,
.cpp-login-greeting {
    font-size: 0.95rem;
    color: #555;
    margin: 0 0 2px 0;
}

.cpp-header-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.cpp-header-search { width: 100%; }

/* Botón Login */
.cpp-login-btn {
    border: none;
    background-color: #2563eb;
    color: #fff;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(37,99,235,0.35);
}
.cpp-login-btn .icon-login { font-size: 1rem; }
.cpp-login-btn:hover { background-color: #1d4ed8; }

/* Botón Crear Nueva */
.cpp-btn-primary-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: linear-gradient(145deg, #2563eb, #3b82f6);
    color: #fff;
    box-shadow: 0 10px 25px rgba(37,99,235,0.35);
    white-space: nowrap;
}
.cpp-btn-primary-large:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(37,99,235,0.4);
}

/* Buscador */
.cpp-search-input {
    width: 100%;
    border-radius: 999px;
    border: 2px solid #e5e7eb;
    padding: 10px 14px;
    font-size: 0.95rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-color: #fff;
}
.cpp-search-input::placeholder { color: #9ca3af; }
.cpp-search-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }

/* MÓVIL DASHBOARD */


/* ESCRITORIO DASHBOARD */



/* --- 3. LISTADO / BIBLIOTECA --- */

.cpp-section-title { display: flex; align-items: center; gap: 8px; margin: 15px 0 10px; font-size: 0.95rem; color: #555; }
.cpp-section-title-icon { font-size: 1.1rem; }
.cpp-section-title-text { font-weight: 600; }
.cpp-grid { display: flex; flex-direction: column; gap: 10px; } /* 🔥 REDUCIDO: 14px → 10px */
.cpp-card-recipe {
    background-color: #fff; border-radius: 22px; padding: 12px 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.04); border: 2px solid #fbbf24; position: relative; overflow: visible; 
}
.cpp-card-title { margin: 0 0 4px 0; font-size: 1.02rem; font-weight: 800; color: #1f2933; letter-spacing: 0.01em; text-transform: none; }
.cpp-card-top-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cpp-card-top-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.cpp-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.cpp-card-header-actions { display: flex; align-items: center; gap: 6px; position: relative; }
.cpp-favorite-btn {
    width: 30px; height: 30px; border-radius: 999px; border: 2px solid #e5e7eb;
    display: inline-flex; align-items: center; justify-content: center; background: #fff;
    cursor: pointer; transition: all 0.2s ease;
}
.cpp-favorite-btn .star-icon { color: #9ca3af; font-size: 1.1rem; }
.cpp-favorite-btn:hover { border-color: #f97316; }
.cpp-favorite-btn.active { background: #f97316; border-color: #ea580c; box-shadow: 0 0 0 3px rgba(249,115,22,0.35); }
.cpp-favorite-btn.active .star-icon { color: #fff; }
.cpp-card-actions { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.cpp-btn-options {
    width: 28px; height: 28px; padding: 0; margin: 0; border-radius: 999px; background: #ffffff;
    border: 1px solid #e2e8f0; color: #94a3b8; box-sizing: border-box; box-shadow: none;
    line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.cpp-btn-options:hover { background: #f1f5f9; border-color: #cbd5e1; color: #1f2937; transform: translateY(-1px); }
.cpp-card-body { display: flex; flex-direction: column; gap: 6px; }
.cpp-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 600; color: #4b5563; background-color: #f3f4f6; white-space: nowrap;
}
.cpp-tag-icon { font-size: 0.95rem; }
.cpp-tag-time-medium { background-color: #fef3c7; color: #92400e; }
.cpp-tag-time-long { background-color: #fee2e2; color: #b91c1c; }
.cpp-tag-time-fast { background-color: #e0f2fe; color: #075985; }
.cpp-tag-level-beginner { background-color: #e0edff; color: #1d4ed8; }
.cpp-tag-level-intermediate { background-color: #e0f2fe; color: #0369a1; }
.cpp-tag-format-hogaza, .cpp-tag-format-panecillo { background-color: #fee2e2; color: #b91c1c; }
.cpp-tag-format-barra { background-color: #fce7f3; color: #9d174d; }

/* 🔥 ARREGLO AUTOR DERECHA: SEPARADOR Y ALINEACIÓN */
.cpp-card-bottom-line { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; font-size: 0.8rem; color: #4b5563; }
.cpp-info-group { display: inline-flex; align-items: center; gap: 6px; }
.cpp-info-item { display: inline-flex; align-items: center; gap: 4px; }
.cpp-info-value { font-weight: 700; color: #2563eb; }

/* El separador o el propio autor empuja todo a la derecha */
.cpp-divider { margin-left: auto; margin-right: 6px; color: #9ca3af; }
.cpp-card-author { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: #4b5563; }

/* Si el autor está en el footer */
.cpp-card-footer { margin-top: 6px; display: flex; justify-content: flex-end; align-items: center; font-size: 0.78rem; color: #6b7280; gap: 4px; }
.cpp-card-footer .author-icon { font-size: 0.9rem; color: #2563eb; }



/* --- BARRA INFERIOR FIJA (CALCULADORA DE PRODUCCIÓN) --- */
#view-calculator .cpp-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    z-index: 100;
}

#view-calculator .cpp-btn-menu,
#view-calculator .cpp-btn-save {
    flex: 1;
    height: 44px;
    border-radius: 999px;
    border: none;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}

#view-calculator .cpp-btn-menu {
    background: #64748b;
    color: #fff;
}

#view-calculator .cpp-btn-menu:hover {
    background: #475569;
}

#view-calculator .cpp-btn-save {
    background: linear-gradient(145deg, #2563eb, #3b82f6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

#view-calculator .cpp-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37,99,235,0.4);
}

/* Móvil */


/* Filtros */
.cpp-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.cpp-filter-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 600; border: 1px solid #e5e7eb; background-color: #fff; color: #6b7280;
    cursor: pointer; transition: all 0.15s ease;
    /* 🔥 MEJORAS PARA TÁCTIL */
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.1); /* Feedback táctil iOS */
    touch-action: manipulation; /* Evita doble-tap zoom */
    user-select: none; /* Evita selección de texto accidental */
    -webkit-user-select: none;
}
.cpp-filter-chip:hover { background-color: #f9fafb; }
.cpp-filter-chip:active { 
    background-color: #e5e7eb; /* 🔥 Feedback visual al tocar */
    transform: scale(0.98); /* 🔥 Efecto de presión */
}
.cpp-filter-chip.active { background-color: #2563eb; border-color: #1d4ed8; color: #fff; }
.cpp-filter-chip.active:active {
    background-color: #1d4ed8; /* 🔥 Feedback cuando ya está activo */
}
.cpp-clear-filters-btn { font-size: 0.78rem; color: #6b7280; border: none; background: none; cursor: pointer; text-decoration: underline; }
#cpp-btnFilterFavorites {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 12px 26px; border-radius: 999px; background: #cbd5e1; color: #111827;
    border: none; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    cursor: pointer; transition: all 0.15s ease; white-space: nowrap;
}
#cpp-btnFilterFavorites .star-icon { color: #fbbf24; font-size: 1rem; margin-right: 8px; }
#cpp-btnFilterFavorites:hover { background: #9ca3af; transform: translateY(-1px); }

/* Menú Dropdown */
.cpp-dropdown-menu {
    display: none; position: absolute; right: 0; top: 36px; background: #ffffff;
    min-width: 190px; max-width: 230px; border-radius: 12px; border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(15,23,42,0.18); z-index: 50; overflow: hidden;
}
.cpp-dropdown-menu.show { display: block; }
.cpp-dropdown-menu .cpp-menu-item {
    all: unset; box-sizing: border-box; display: flex !important; align-items: center !important; gap: 8px !important;
    width: 100% !important; padding: 8px 14px !important; cursor: pointer !important; font-family: inherit !important;
    font-size: 0.9rem !important; font-weight: 500 !important; color: #374151 !important; background: transparent !important;
}
.cpp-dropdown-menu .cpp-menu-item svg, .cpp-dropdown-menu .cpp-menu-item span.icon { width: 18px !important; height: 18px !important; flex-shrink: 0; color: #6b7280; }
.cpp-dropdown-menu .cpp-menu-item:hover { background: #f3f4f6; color: #111827; }
.cpp-dropdown-menu .cpp-menu-item.danger { border-top: 1px solid #e5e7eb; color: #ef4444 !important; }

.mpp-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: flex; align-items: center; justify-content: space-around; gap: 8px;
    padding: 8px 16px 12px; background: #ffffff; box-shadow: 0 -6px 20px rgba(15,23,42,0.12);
    border-radius: 16px 16px 0 0;
}
.mpp-nav-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; font-size: 0.75rem; font-weight: 500; color: #6b7280; white-space: nowrap; }
.mpp-nav-item.is-active { color: #111827; font-weight: 700; }

#btn-clear-tag-filters.cpp-btn-clear-filters {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px;
    background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
#btn-clear-tag-filters.cpp-btn-clear-filters::before { content: "✕"; font-size: 0.75rem; }

/* --- 4. ELEMENTOS FÓRMULA --- */
#view-formula input[type="text"], #view-formula input[type="number"] {
    border-radius: 8px; border: 1px solid #d1d5db; padding: 6px 8px; font-size: 0.9rem; box-sizing: border-box;
}
#view-formula input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.18); outline: none; }
#view-formula .frm-label-category { font-weight: 700; margin-top: 12px; margin-bottom: 4px; color: #111827; }
#view-formula label, #view-formula .frm-category-option {
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 0.95rem; color: #374151;
}
#view-formula input[type="radio"] { margin: 0; accent-color: #2563eb; }
#view-formula .frm-label-tags, #view-formula .frm-tags-title {
    display: flex; align-items: center; gap: 6px; margin: 6px 0 4px; font-weight: 600; color: #111827; cursor: pointer;
}

/* --- BOTONES DE AÑADIR (EN LÍNEA 50% - 50% Y COLORES PASTEL) --- */

/* 1. Estilo Común y Estructura */
#frm-btnAddHarina, 
#frm-btnAddHarinaNote, 
#frm-btnAddOtro, 
#frm-btnAddOtroNote {
    display: inline-flex !important;
    
    /* TRUCO PARA QUE QUEPAN EN UNA LÍNEA: */
    width: 48% !important;        /* Cada uno ocupa casi la mitad */
    max-width: 48% !important;    /* No dejamos que crezcan más */
    box-sizing: border-box !important;
    
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    
    /* Espaciado */
    padding: 8px 4px !important;  /* Padding lateral pequeño para que quepa el texto */
    border-radius: 12px !important;
    
    /* Texto */
    font-size: 0.8rem !important; /* Letra ajustada para móviles */
    font-weight: 700 !important;
    white-space: nowrap !important; /* Prohibido romper el texto en dos líneas */
    text-overflow: ellipsis !important; /* Si no cabe, puntos suspensivos */
    
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Margen derecho solo al primero de cada pareja para separarlos */
#frm-btnAddHarina, #frm-btnAddOtro {
    margin-right: 2% !important; /* Hueco central */
}
#frm-btnAddHarinaNote, #frm-btnAddOtroNote {
    margin-right: 0 !important;
}

/* 2. COLOR AZUL PASTEL (Añadir Elemento) */
#frm-btnAddHarina, 
#frm-btnAddOtro {
    background-color: #e0f2fe !important; /* Azul cielo muy suave */
    border: 1px solid #bae6fd !important;
    color: #0284c7 !important;             /* Texto azul fuerte */
}
#frm-btnAddHarina:hover, #frm-btnAddOtro:hover {
    background-color: #bae6fd !important;
    transform: translateY(-1px) !important;
}

/* 3. COLOR AMARILLO PASTEL (Añadir Nota) */
#frm-btnAddHarinaNote, 
#frm-btnAddOtroNote {
    background-color: #fffbeb !important; /* Amarillo crema */
    border: 1px solid #fde68a !important;
    color: #d97706 !important;             /* Texto ámbar/naranja */
}
#frm-btnAddHarinaNote:hover, #frm-btnAddOtroNote:hover {
    background-color: #fef3c7 !important;
    transform: translateY(-1px) !important;
}

/* En móviles muy estrechos (<360px), permitimos que bajen si no caben */

#view-formula .frm-btn-del {
    width: 26px; 
    height: 26px; 
    border-radius: 999px; 
    border: none; 
    margin-left: 4px;
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    background: #fee2e2; 
    color: #b91c1c; 
    font-size: 0.9rem;
    cursor: pointer; 
    transition: background 0.15s ease;
    flex-shrink: 0; /* 🔥 FIREFOX FIX: Evitar que el botón se comprima */
}
#view-formula .frm-btn-del:hover { background: #fecaca; transform: translateY(-1px); }

/* Grid Fórmula - Márgenes reducidos */
#view-formula .cpp-container { padding: 0 12px 30px; display: grid; grid-template-columns: 1fr; gap: 12px; box-sizing: border-box; }
#view-formula .cpp-box { background: #ffffff; border-radius: 18px; box-shadow: 0 10px 25px rgba(15,23,42,0.06); padding: 10px 12px 12px; }
#view-formula .cpp-box .cpp-titulo {
    font-family: "Baloo 2", system-ui, sans-serif; font-size: 0.8rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: #9ca3af; margin-bottom: 4px;
}
#view-formula .cpp-box p { font-size: 0.8rem; color: #6b7280; }


/* FILAS DE LISTAS (Harinas/Ingredientes) - Márgenes reducidos */
#frm-listaHarinas > div, #frm-listaOtros > div { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    margin-bottom: 3px;
    width: 100%; /* 🔥 FIREFOX FIX: Asegurar ancho completo */
    box-sizing: border-box; /* 🔥 FIREFOX FIX: Incluir padding en el ancho */
}
#frm-listaHarinas input[type="number"], #frm-listaOtros input[type="number"] {
    flex: 0 0 60px !important; 
    max-width: 60px !important; 
    text-align: center !important; 
    padding-left: 0 !important; 
    padding-right: 0 !important;
}
#frm-listaHarinas input[type="text"], #frm-listaOtros input[type="text"] { 
    flex: 1 1 auto !important; 
    min-width: 0 !important; /* 🔥 FIREFOX FIX: Permitir que el input se comprima */
}

/* Prefermento / Escaldado - ESTRUCTURA IGUALADA */
#view-formula .cpp-note-icon {
    border: 1px solid #e5e7eb; border-radius: 999px; background: #f9fafb; width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; cursor: pointer;
}
#view-formula #frm-notes {
    width: 100%; border-radius: 14px; border: 1px solid #e5e7eb; padding: 8px 12px; background: #f9fafb;
    min-height: 70px; resize: vertical;
}
.cpp-pref-placeholder { 
    text-align: center; padding: 20px 10px; border-radius: 14px; background: #f9fafb; border: 2px dashed #d1d5db; 
}
.cpp-pref-placeholder svg, .cpp-pref-placeholder p { 
    display: block !important; opacity: 1 !important; color: #6b7280 !important; 
}


/* Checkbox header - Estructura igual en ambos */
#view-formula #frm-boxMM .cpp-pref-header,
#view-formula #frm-boxEsc .cpp-chk-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

#view-formula #frm-boxMM .cpp-pref-header span,
#view-formula #frm-boxEsc .cpp-chk-row span {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
}

/* Selectores */
#view-formula #frm-divMM select.cpp-input-full, 
#view-formula #frm-divEsc select.cpp-input-full {
    height: 44px; 
    border-radius: 14px; 
    border: 1px solid #e5e7eb; 
    padding: 0 12px; 
    font-size: 0.9rem;
    background: #fff;
    margin-bottom: 8px;
    /* Forzar apertura hacia abajo */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* En móvil, usar dropdown personalizado con JavaScript */


/* Filas de inputs */
#view-formula #frm-boxMM .cpp-compact-row,
#view-formula #frm-boxEsc .cpp-compact-row {
    display: flex; 
    flex-wrap: nowrap; 
    gap: 10px; 
    margin-top: 10px; 
    margin-bottom: 8px;
}

#view-formula #frm-boxMM .cpp-input-group, 
#view-formula #frm-boxEsc .cpp-input-group { 
    flex: 1 1 0; 
    min-width: 0;
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
}

/* Labels - sin altura mínima */
#view-formula #frm-boxMM .cpp-input-group label,
#view-formula #frm-boxEsc .cpp-input-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0;
    line-height: 1.2;
}

/* Inputs numéricos con margen superior automático para compensar labels de diferente altura */
#view-formula #frm-boxMM .cpp-input-group .cpp-input-clean, 
#view-formula #frm-boxEsc .cpp-input-group .cpp-input-clean {
    height: 44px; 
    border-radius: 14px; 
    border: 1px solid #e5e7eb; 
    padding: 0 12px; 
    text-align: center; 
    font-size: 0.95rem;
    background: #fff;
    box-sizing: border-box;
    margin-top: auto; /* Empuja el input hacia abajo */
}

/* Distribución de campos */
#view-formula #frm-boxMM .cpp-compact-row .cpp-input-group { 
    flex: 1 1 33.333%; 
    min-width: 0; 
}

#view-formula #frm-boxEsc .cpp-compact-row .cpp-input-group { 
    flex: 1 1 33.333%; 
    min-width: 0; 
}

/* Texto explicativo */
#view-formula #frm-boxMM p,
#view-formula #frm-boxEsc p {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
    margin: 6px 0 8px 0;
}

/* Textareas de notas - AMBAS AL FINAL */
#view-formula #frm-mmNote,
#view-formula #frm-escNotes {
    width: 100%;
    border-radius: 14px; 
    border: 1px solid #e5e7eb; 
    padding: 8px 12px; 
    background: #f9fafb;
    font-size: 0.8rem;
    min-height: 45px;
    resize: vertical;
    line-height: 1.4;
    margin-top: 8px;
    margin-bottom: 0;
    font-family: inherit;
    box-sizing: border-box;
}

/* Cajas compactas - Márgenes reducidos */
#view-formula #frm-boxMM.cpp-box,
#view-formula #frm-boxEsc.cpp-box {
    padding: 10px 12px 12px;
}

/* Responsive móvil */


/* ==========================================================================
   VISTA FÓRMULA - CABECERA
   ========================================================================== */

#view-formula .cpp-formula-bar,
#view-formula #cpp-btnBackFormula,
#view-formula #frm-btnSaveFormula,
#view-formula .cpp-nav-title {
    position: static !important; transform: none !important; box-sizing: border-box !important;
}
#view-formula .cpp-topBar-formula { display: contents !important; }
#view-formula .cpp-formula-bar { padding-bottom: 0px !important; }
#view-formula .cpp-category-wrapper { padding-top: 0px !important; padding-bottom: 6px !important; }

/* Input Nombre */
#view-formula #frm-inpNombreFormula {
    background: #ffffff; border: 1px solid #e5e7eb; border-radius: 999px; padding: 0 14px; font-size: 0.95rem; box-sizing: border-box;
}
#view-formula #frm-inpNombreFormula:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.25); outline: none; }

/* Botones (Volver/Guardar) - Colores Suaves */
#view-formula #cpp-btnBackFormula {
    border-radius: 999px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background-color: #f3f4f6 !important; border: 1px solid #e5e7eb !important; color: #4b5563 !important;
}
#view-formula #cpp-btnBackFormula:hover { background-color: #e5e7eb !important; }

#view-formula #frm-btnSaveFormula {
    border-radius: 999px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background-color: #eff6ff !important; border: 1px solid #bfdbfe !important; color: #1d4ed8 !important;
}
#view-formula #frm-btnSaveFormula:hover { background-color: #dbeafe !important; }

/* Categorías (ESTRUCTURA) - Márgenes reducidos */
#view-formula .cpp-category-wrapper { padding: 0 12px 6px; }
#view-formula .cpp-category-box-compact {
    background: #ffffff; border-radius: 18px; box-shadow: 0 8px 20px rgba(15,23,42,0.06);
    padding: 8px 12px; display: flex; align-items: center; gap: 10px;
}
#view-formula .cpp-category-label-compact {
    margin: 0; font-size: 0.9rem; font-weight: 600; color: #4b5563; text-transform: none;
}
#view-formula .cpp-category-option-compact input[type="radio"] { display: none; }

/* Estilo botón categoría */
#view-formula .cpp-category-btn {
    border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 999px;
    font-size: 0.85rem; font-weight: 600; color: #374151; cursor: pointer;
    transition: all 0.15s ease; user-select: none;
}
#view-formula .cpp-category-option-compact input[type="radio"]:checked + .cpp-category-btn {
    background: linear-gradient(135deg, #f97316, #fbbf24); border-color: #f97316; color: #ffffff; transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   2. MÓVIL (FÓRMULA) - ULTRA COMPACTO
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   3. ESCRITORIO (FÓRMULA) - FIXED
   -------------------------------------------------------------------------- */


/* ============================================================
   👇 FIX QUIRÚRGICO: ETIQUETAS DOBLES (SOLUCIÓN DEFINITIVA)
   Esto anula la duplicidad causada por el HTML anidado
   ============================================================ */

/* 1. Eliminar la caja exterior que sobra */
.cpp-tag-options .cpp-tag-label {
    display: contents !important; 
}

/* 2. Ocultar el checkbox nativo dentro del label */
.cpp-tag-options input[type="checkbox"],
.cpp-tag-options .cpp-tag-checkbox {
    display: none !important;
}

/* 3. Dar estilo de botón SÓLO al texto (span) */
.cpp-tag-text {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
    cursor: pointer;
    margin: 4px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 4. Estado seleccionado */
.cpp-tag-label input:checked + .cpp-tag-text {
    background: #eff6ff !important;
    border-color: #2563eb !important;
    color: #2563eb !important;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.2);
}

/* ============================================================
   PARCHE FINAL SEGURO (Añadir al final del archivo de 600 líneas)
   ============================================================ */

/* 1. ARREGLAR NOTAS DE LA FÓRMULA (Caja que se sale)
   Esto evita que el cuadro de texto gris se salga de la tarjeta blanca */
#view-formula #frm-notes,
#view-formula .cpp-textarea {
    box-sizing: border-box !important; /* Obligatorio para que no se salga */
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    margin: 0 !important;
    min-height: 240px !important;
}

/* 2. NOTAS VISUALES - Ocultar icono y ocupar todo el ancho */
/* Ocultar el icono/emoji que aparece antes del input */
.cpp-row-note .cpp-note-separator > span:first-child,
.cpp-row-note .cpp-note-separator > *:not(input):not(button) {
    display: none !important;
}

/* Input de nota visual ocupa todo el ancho */
.frm-input-note,
input.frm-input-note {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Contenedor de la nota visual sin flex para evitar espacios */
.cpp-note-separator {
    display: block !important;
    width: 100% !important;
}

/* Fila de nota visual alineada con los demás campos */
.cpp-row-note {
    display: flex !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

/* ==========================================================================
   VISTA CALCULADORA DE PRODUCCIÓN
   ========================================================================== */

/* --- CONTENEDOR CALCULADORA --- */
#view-calculator .cpp-container {
    padding: 0 16px 40px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
}

/* --- BARRA DE NAVEGACIÓN CALCULADORA --- */
#view-calculator .cpp-nav-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 16px !important; /* 🔥 Mismo que container */
    background: transparent !important; /* 🔥 SIN FONDO BLANCO */
    box-shadow: none !important; /* 🔥 SIN SOMBRA */
    margin-bottom: 10px;
    box-sizing: border-box;
}

#view-calculator .cpp-btn-back {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0; /* 🔥 No se encoge */
}

#view-calculator .cpp-btn-back:hover {
    background: #e5e7eb;
}

#view-calculator .cpp-nav-title {
    font-family: "Baloo 2", system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    text-align: center; /* 🔥 CENTRADO en su espacio flex */
    flex: 1; /* 🔥 Ocupa todo el espacio disponible después del botón */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- TARJETAS CALCULADORA --- */
#view-calculator .cpp-box {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(15,23,42,0.06);
    padding: 14px 16px 16px;
}

#view-calculator .cpp-box .cpp-titulo {
    font-family: "Baloo 2", system-ui, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1e3a8a;
    margin-bottom: 10px;
    font-weight: 800;
    background: #f1f5f9;
    padding: 8px 12px;
    border-radius: 6px;
}

/* Tarjeta de prefermento sin borde azul */
#view-calculator .cpp-mm-box {
    /* Banda azul eliminada */
    padding: 14px 16px 16px; /* Mismo padding que las otras tarjetas */
}

/* --- BOTONES CALCULADORA --- */
#view-calculator .cpp-btn-add {
    width: 100%;
    background: #dbeafe;
    color: #1d4ed8;
    border: none;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.15s ease;
}

#view-calculator .cpp-btn-add:hover {
    background: #bfdbfe;
    transform: translateY(-1px);
}

/* --- TEXTAREA NOTAS CALCULADORA --- */
#view-calculator .cpp-textarea {
    width: 100%;
    min-height: 240px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.5;
    background: #f9fafb;
    color: #374151;
}

#view-calculator .cpp-textarea:focus {
    border-color: #3b82f6;
    outline: none;
    background: #fff;
}

#view-calculator .cpp-textarea::placeholder {
    color: #9ca3af;
}

/* --- TÍTULO PREFERMENTO CON ICONO NOTA --- */
#view-calculator .cpp-pref-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

#view-calculator .cpp-pref-title span:first-child {
    font-family: "Baloo 2", system-ui, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1e3a8a;
    font-weight: 800;
    background: #f1f5f9;
    padding: 8px 12px;
    border-radius: 6px;
}

/* --- TÍTULO ESCALDADO --- */
#view-calculator .cpp-esc-box .cpp-chk-row span {
    font-family: "Baloo 2", system-ui, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1e3a8a;
    font-weight: 800;
    background: #f1f5f9;
    padding: 8px 12px;
    border-radius: 6px;
}

/* Icono nota calculadora - solo visible si hay nota */
#view-calculator .cpp-note-icon {
    position: relative;
    cursor: help;
    font-size: 1rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

#view-calculator .cpp-note-icon:hover {
    opacity: 1;
}

/* Tooltip nota calculadora - solo visible en hover */
#view-calculator .cpp-note-tooltip {
    display: none; /* 🔥 OCULTO por defecto */
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    max-width: 250px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#view-calculator .cpp-note-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2937;
}

/* Mostrar tooltip al hacer hover sobre el icono */
#view-calculator .cpp-note-icon:hover .cpp-note-tooltip {
    display: block; /* 🔥 VISIBLE solo en hover */
}

/* Móvil: mostrar en touch (usando :active) */


/* --- INPUTS ESPECÍFICOS CALCULADORA --- */
/* Estilos generales de inputs calculadora */
#view-calculator input[type="number"],
#view-calculator input[type="text"],
#view-calculator select {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem; /* 🔥 REDUCIDO: 0.95rem → 0.9rem */
    background: #fff;
    color: #1f2937;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

/* 🔥 OCULTAR SPINNERS solo en inputs READONLY (no editables) en calculadora */
#view-calculator input[type="number"][readonly]::-webkit-outer-spin-button,
#view-calculator input[type="number"][readonly]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#view-calculator input[type="number"][readonly] {
    -moz-appearance: textfield; /* Firefox */
}

#view-calculator input[type="number"]:focus,
#view-calculator input[type="text"]:focus,
#view-calculator select:focus {
    border-color: #3b82f6;
    outline: none;
}

/* Input de porcentaje - MÁS VISIBLE */
#view-calculator .cpp-pct {
    flex: 0 0 70px;
    max-width: 70px;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
    font-weight: 700; /* 🔥 MÁS BOLD: 600 → 700 */
    color: #111827; /* 🔥 MÁS OSCURO: #1f2937 → #111827 */
    font-size: 0.95rem; /* 🔥 Ligeramente más grande */
}

#view-calculator .cpp-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem; /* 🔥 REDUCIDO */
}

/* Input de gramos (5 dígitos) - MÁS VISIBLE */
#view-calculator .cpp-row input[type="number"]:not(.cpp-pct) {
    flex: 0 0 85px;
    max-width: 85px;
    text-align: center;
    font-weight: 700; /* 🔥 MÁS BOLD: 600 → 700 */
    color: #111827; /* 🔥 MÁS OSCURO */
}

/* --- FILAS COMPACTAS Y INPUT GROUPS (PREFERMENTO) --- */
.cpp-compact-row {
    display: flex;
    gap: 12px; /* 🔥 Compacto: 15px → 12px */
    margin-bottom: 12px;
}

.cpp-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cpp-input-group label {
    font-size: 0.68rem; /* 🔥 REDUCIDO: 0.75rem → 0.68rem */
    color: #64748b;
    font-weight: 700;
    margin-bottom: 4px; /* 🔥 Compacto: 5px → 4px */
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.cpp-input-full,
.cpp-input-clean {
    width: 100%;
    padding: 10px 12px; /* 🔥 Compacto: 12px → 10px 12px */
    border: 1px solid #e2e8f0;
    border-radius: 8px; /* 🔥 Compacto: 10px → 8px */
    font-size: 0.9rem; /* 🔥 REDUCIDO: 1rem → 0.9rem */
    background: #fff;
    color: #1f2937;
    box-sizing: border-box;
}

.cpp-input-clean {
    font-weight: 700; /* 🔥 MÁS BOLD */
    color: #3b82f6;
    text-align: center;
}

.cpp-input-clean:focus,
.cpp-input-full:focus {
    border-color: #3b82f6;
    outline: none;
}

/* --- BARRA DE RESULTADOS PREFERMENTO --- */
.cpp-mm-result-bar {
    background: #f1f5f9;
    color: #1e40af;
    padding: 8px 10px; /* 🔥 Compacto: 10px 12px → 8px 10px */
    border-radius: 8px; /* 🔥 Compacto: 10px → 8px */
    text-align: right;
    font-size: 0.8rem; /* 🔥 REDUCIDO: 0.9rem → 0.8rem */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    gap: 8px; /* 🔥 Para separación entre elementos */
}

#cpp-divMM {
    margin-top: 10px;
    padding-top: 10px;
}

#cpp-txtHyd {
    background: #ecfdf5;
    color: #059669;
    padding: 5px 10px; /* 🔥 Compacto: 6px 12px → 5px 10px */
    border-radius: 6px; /* 🔥 Compacto: 8px → 6px */
    font-size: 0.95rem; /* 🔥 REDUCIDO: 1.1rem → 0.95rem */
    font-weight: 600;
}

/* --- INPUT GRANDE (PESO MASA) --- */
.cpp-big-input {
    width: 100%;
    font-size: 3rem;
    text-align: center;
    border: none;
    background: transparent;
    color: #3b82f6;
    font-weight: 800;
    outline: none;
}

.cpp-big-input-wrapper {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

/* --- RESUMEN / SUMMARY BOX --- */
.cpp-summary-box {
    display: flex;
    justify-content: center;
    gap: 15px; /* 🔥 Compacto: 20px → 15px */
    margin-top: 8px; /* 🔥 Compacto: 10px → 8px */
    margin-bottom: 8px;
    font-size: 0.8rem; /* 🔥 REDUCIDO: 0.85rem → 0.8rem */
    color: #555;
}

.cpp-summary-box div {
    background: #f8fafc;
    padding: 4px 8px; /* 🔥 Compacto: 5px 10px → 4px 8px */
    border-radius: 6px;
    border: 1px solid #eee;
}

.cpp-summary-box span {
    font-weight: bold;
    color: #333;
}

/* --- FILAS CALCULADORA --- */
.cpp-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #f7f7f7;
    width: 100%;
    box-sizing: border-box;
}

.cpp-row:last-child {
    border-bottom: none;
}

/* --- BARRA INFERIOR FIJA (CALCULADORA) --- */
#view-calculator .cpp-bottom-bar {
    position: fixed;
    bottom: 100px; /* 🔥 30px → 100px para no tapar navegación inferior */
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    padding: 10px;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: flex;
    gap: 5px;
    z-index: 999;
    width: 90%;
    max-width: 400px;
    justify-content: center;
}

#view-calculator .cpp-btn-save,
#view-calculator .cpp-btn-menu {
    background: #10b981;
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 100px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1rem;
    flex: 1;
    text-align: center;
}

#view-calculator .cpp-btn-save:hover {
    background: #059669;
}

#view-calculator .cpp-btn-menu {
    background: #475569;
}

#view-calculator .cpp-btn-menu:hover {
    background: #334155;
}

/* --- PLACEHOLDER PREFERMENTO --- */
.cpp-pref-placeholder {
    margin-top: 12px;
    padding: 14px 12px;
    border-radius: 16px;
    border: 1px dashed #e2e8f0;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #94a3b8;
    font-size: 0.8rem;
    min-height: 170px;
}

.cpp-pref-placeholder svg {
    width: 70px;
    height: 70px;
    opacity: 0.55;
    margin-bottom: 6px;
}

.cpp-pref-placeholder p {
    margin: 0;
    line-height: 1.3;
}

/* ==========================================================================
   RESPONSIVE - CALCULADORA MÓVIL
   ========================================================================== */


/* ==========================================================================
   LAYOUTS GRID - CALCULADORA DESKTOP (≥900px)
   ========================================================================== */

/* ==== OPTIMIZACIÓN FILAS CALCULADORA ==== */

/* 1. Reducir la separación general de la fila */
#view-calculator .cpp-row {
    gap: 6px !important;        /* antes 10px */
    margin-bottom: 6px !important; /* antes 10px */
    padding: 4px 0 !important;
}

/* 2. %: acercarlo al nombre */
#view-calculator .cpp-pct {
    margin-right: 4px !important;  /* antes demasiado margen */
    flex: 0 0 60px !important;      /* ya lo tienes en 70, lo ajustamos a 60 */
    max-width: 60px !important;
}

/* 3. Nombre del ingrediente: hacerlo más ancho */
#view-calculator .cpp-name {
    flex: 1 1 auto !important;
    min-width: 130px !important; /* ampliamos columna central */
}

/* 4. Gramos: acercarlo al nombre y reducir ancho fijo */
#view-calculator .cpp-row input[type="number"]:not(.cpp-pct) {
    margin-left: 4px !important;
    flex: 0 0 70px !important;   /* antes 85px, liberamos espacio para nombre */
    max-width: 70px !important;
    text-align: center !important;
}

/* 5. Compactar aún más en móvil */

/* =========================================================
   ULTRA COMPACTO HARINAS / INGREDIENTES – CALCULADORA
   ========================================================= */

/* 1. Reducir espacio entre filas (pastillas) */
#view-calculator .cpp-card-harinas .cpp-row,
#view-calculator .cpp-card-ingredientes .cpp-row {
    gap: 6px !important;          /* antes 10px */
    margin-bottom: 4px !important;/* antes 10px */
    padding: 2px 0 !important;    /* antes 5px 0 */
}

#view-calculator .cpp-card-harinas .cpp-row:last-child,
#view-calculator .cpp-card-ingredientes .cpp-row:last-child {
    margin-bottom: 0 !important;
}

/* 2. % un poco más compacto para ganar sitio al nombre */
#view-calculator .cpp-card-harinas .cpp-pct,
#view-calculator .cpp-card-ingredientes .cpp-pct {
    flex: 0 0 55px !important;
    max-width: 55px !important;
}

/* 3. Nombre con más aire (columna central más ancha) */
#view-calculator .cpp-card-harinas .cpp-name,
#view-calculator .cpp-card-ingredientes .cpp-name {
    flex: 1 1 auto !important;
    min-width: 110px !important;
}

/* 4. Gramos: alineados a la derecha como en las tarjetas superiores */
#view-calculator .cpp-card-harinas .cpp-row input[type="number"]:not(.cpp-pct),
#view-calculator .cpp-card-ingredientes .cpp-row input[type="number"]:not(.cpp-pct) {
    flex: 0 0 70px !important;    /* ancho fijo cómodo */
    max-width: 70px !important;
    margin-left: auto !important; /* empuja el bloque de gramos al borde derecho */
    text-align: center !important;
}

/* 5. Versión aún más compacta en móvil */

/* =========================================================
   RESET GLOBAL: para que prefermento vuelva a la alineación original
   ========================================================= */

/* Fila base de la calculadora */
#view-calculator .cpp-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    padding: 5px 0;
}

/* Porcentaje SIEMPRE con ancho suficiente (no se oculta) */
#view-calculator .cpp-pct {
    flex: 0 0 65px !important;
    max-width: 65px !important;
    min-width: 65px !important;
    text-align: center;
    font-weight: 700;
}

/* =========================================================
   AJUSTE SOLO PARA 1. HARINAS y 2. INGREDIENTES
   (no toca prefermento ni la parte de arriba)
   ========================================================= */

/* Filas más compactas en estas dos tarjetas */
#view-calculator .cpp-card-harinas .cpp-row,
#view-calculator .cpp-card-ingredientes .cpp-row {
    gap: 6px !important;
    margin-bottom: 4px !important;
    padding: 2px 0 !important;
}

/* Nombre con algo más de ancho */
#view-calculator .cpp-card-harinas .cpp-name,
#view-calculator .cpp-card-ingredientes .cpp-name {
    flex: 1 1 auto !important;
    min-width: 120px !important;
}

/* Gramos: alineados a la derecha, como los inputs superiores */
#view-calculator .cpp-card-harinas .cpp-row input[type="number"]:not(.cpp-pct),
#view-calculator .cpp-card-ingredientes .cpp-row input[type="number"]:not(.cpp-pct) {
    flex: 0 0 80px !important;    /* ancho similar a los otros campos de gramos */
    max-width: 80px !important;
    margin-left: auto !important; /* empuja el campo hasta el borde derecho de la tarjeta */
    text-align: center !important;
}

/* Un pelín más compacto en móvil */

/* ================================================
   ALINEAR GRAMOS AL BORDE DERECHO DE LA TARJETA
   ================================================ */

/* Eliminamos el padding lateral para que la fila pueda llegar al borde */
#view-calculator .cpp-card-harinas .cpp-row,
#view-calculator .cpp-card-ingredientes .cpp-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Nombre con flex que permite empujar gramos hacia la derecha */
#view-calculator .cpp-card-harinas .cpp-name,
#view-calculator .cpp-card-ingredientes .cpp-name {
    flex: 1 1 auto !important;
}

/* GRAMOS: empujar completamente a la derecha */
#view-calculator .cpp-card-harinas .cpp-row input[type="number"]:not(.cpp-pct),
#view-calculator .cpp-card-ingredientes .cpp-row input[type="number"]:not(.cpp-pct) {
    margin-left: auto !important;   /* obliga a tocar el borde derecho */
    flex: 0 0 88px !important;       /* mismo ancho que los inputs superiores */
    max-width: 88px !important;
}
/* ================================================
   Quitar el espaciador de 28px al final de cada fila
   en Harinas e Ingredientes (para que los gramos
   lleguen al borde derecho de la tarjeta)
   ================================================ */

#view-calculator .cpp-card-harinas .cpp-row > div[style*="width:28px"],
#view-calculator .cpp-card-ingredientes .cpp-row > div[style*="width:28px"] {
    display: none !important;
}
/* Ocultar botones sin dejar espacio vacío */
#view-calculator #frm-btnAddHarina,
#view-calculator #frm-btnAddOtro {
    display: none !important;
}

/* Eliminar también su espacio contenedor si existiera */
#view-calculator #frm-btnAddHarina:empty,
#view-calculator #frm-btnAddOtro:empty {
    margin: 0 !important;
    padding: 0 !important;
}

/* Algunos temas envuelven el botón en un div → lo eliminamos si queda vacío */
#view-calculator #frm-btnAddHarina + *:empty,
#view-calculator #frm-btnAddOtro + *:empty {
    display: none !important;
    height: 0 !important;
}
/* ==========================================
   OCULTAR "AÑADIR HARINAS" EN CALCULADORA
   ========================================== */
#view-calculator #cpp-btnAddHarina {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================
   OCULTAR "AÑADIR INGREDIENTE" EN CALCULADORA
   ========================================== */
#view-calculator #cpp-btnAddOtro,
#view-calculator #cpp-btnAddIngrediente {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* ==========================================
   CENTRAR CABECERAS EN PREFERMENTO (CALCULADORA)
   ========================================== */

/* Alinear verticalmente los 3 grupos */
#view-calculator .cpp-card-prefermento .cpp-compact-row {
    align-items: flex-end;
}

/* Centrar contenido de cada columna */
#view-calculator .cpp-card-prefermento .cpp-input-group {
    align-items: center;
}

/* Títulos encima de cada input centrados */
#view-calculator .cpp-card-prefermento .cpp-input-group label {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Por si los títulos llevan dos líneas (HIDRATACIÓN + %) */
#view-calculator .cpp-card-prefermento .cpp-input-group label span {
    display: block;
}

/* Inputs del prefermento bien centrados también */
#view-calculator .cpp-card-prefermento .cpp-input-clean,
#view-calculator .cpp-card-prefermento .cpp-input-full {
    text-align: center;
}
/* ===============================================
   FIX URGENTE - PEGAR AL FINAL DEL ARCHIVO
   =============================================== */

#view-calculator .cpp-nav-bar {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#view-calculator .cpp-bottom-bar {
    bottom: 100px !important;
}



/* ============================================================
   Mundo Panarra - Estilos (mpp-mundo-*)
   ============================================================ */

.mpp-mundo-wrapper {
  max-width: 700px;
  margin: 0 auto;
  padding: 18px 16px 110px;
  box-sizing: border-box;
}

.mpp-mundo-header h1 {
  font-size: 2.6rem;
  line-height: 1.05;
  margin: 0 0 10px;
  font-weight: 800;
  color: #111;
}

.mpp-mundo-subtitle {
  margin: 0 0 18px;
  font-size: 1.05rem;
  color: #555;
  line-height: 1.45;
}

/* Secciones */
.mpp-mundo-section {
  margin: 18px 0 22px;
}

.mpp-mundo-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 2px 10px;
}

.mpp-mundo-section-header h2 {
  font-size: 1.55rem;
  margin: 0;
  font-weight: 800;
  color: #111;
}

.mpp-mundo-vermas {
  font-size: 0.95rem;
  color: #c0392b;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

/* Grid tarjetas (vertical) */
.mpp-mundo-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Tarjeta */
.mpp-mundo-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fbf6ee;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.mpp-mundo-card:active {
  transform: scale(0.99);
}

/* Imagen */
.mpp-mundo-card-img {
  width: 92px;
  min-width: 92px;
  height: 68px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
  position: relative; /* badge */
}

.mpp-mundo-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texto */
.mpp-mundo-card-text {
  flex: 1;
  min-width: 0;
}

.mpp-mundo-card-text h3 {
  font-size: 1.18rem;
  line-height: 1.2;
  margin: 0 0 6px;
  font-weight: 800;
  color: #111;
}

.mpp-mundo-card-text p {
  font-size: 1rem;
  margin: 0;
  color: #666;
  line-height: 1.35;
}

/* Badge Nuevo */
.mpp-mundo-badge-nuevo {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 8px;
  border-radius: 999px;
  line-height: 1;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Responsive */

/* ============================================================
   MUNDO PANARRA – VISOR ARTÍCULO (HTML WP remoto)
   Pegar al final de style.css
   ============================================================ */

/* 1) Contenedor general del visor */
.mpp-mundo-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 18px 120px 18px; /* 👈 deja aire para el menú inferior */
  box-sizing: border-box;
}

/* 2) Cabecera (título + fecha + volver) */
.mpp-mundo-header h1 {
  margin: 0 0 6px 0;
  line-height: 1.05;
}

.mpp-mundo-subtitle {
  margin: 0;
  color: #64748b;
  font-size: 0.95rem;
}

.mpp-mundo-vermas {
  color: #c0392b;
  font-weight: 700;
  text-decoration: none;
}

.mpp-mundo-vermas:hover {
  text-decoration: underline;
}

/* 3) Imagen destacada en visor */
.mpp-mundo-wrapper .mpp-mundo-card-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* 4) Contenido del artículo (HTML de WP remoto) */
.mpp-mundo-article-content {
  color: #1f2937;
  font-size: 1.05rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* Párrafos */
.mpp-mundo-article-content p {
  margin: 0 0 14px 0;
}

/* Títulos dentro del contenido */
.mpp-mundo-article-content h2,
.mpp-mundo-article-content h3,
.mpp-mundo-article-content h4 {
  margin: 22px 0 10px 0;
  line-height: 1.2;
  color: #111827;
}

.mpp-mundo-article-content h2 { font-size: 1.35rem; }
.mpp-mundo-article-content h3 { font-size: 1.18rem; }
.mpp-mundo-article-content h4 { font-size: 1.05rem; }

/* Separadores */
.mpp-mundo-article-content hr {
  border: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.15);
  margin: 22px 0;
}

/* Listas */
.mpp-mundo-article-content ul,
.mpp-mundo-article-content ol {
  margin: 0 0 14px 20px;
}

.mpp-mundo-article-content li {
  margin: 6px 0;
}

/* Enlaces dentro del contenido */
.mpp-mundo-article-content a {
  color: #c0392b;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mpp-mundo-article-content a:hover {
  opacity: 0.9;
}

/* Imágenes dentro del contenido (galerías / insertadas) */
.mpp-mundo-article-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 14px;
}

/* Alineaciones WP clásicas */
.mpp-mundo-article-content .aligncenter {
  display: block;
  margin: 16px auto;
}

.mpp-mundo-article-content .alignleft {
  float: left;
  margin: 8px 16px 8px 0;
  max-width: 50%;
}

.mpp-mundo-article-content .alignright {
  float: right;
  margin: 8px 0 8px 16px;
  max-width: 50%;
}

/* Limpiar floats para que no se rompa el layout */
.mpp-mundo-article-content::after {
  content: "";
  display: block;
  clear: both;
}

/* Citas */
.mpp-mundo-article-content blockquote {
  margin: 16px 0;
  padding: 12px 14px;
  border-left: 4px solid rgba(192, 57, 43, 0.35);
  background: rgba(250, 244, 230, 0.6);
  border-radius: 12px;
}

/* Tablas (si las hubiera) */
.mpp-mundo-article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  overflow: hidden;
  border-radius: 12px;
}

.mpp-mundo-article-content th,
.mpp-mundo-article-content td {
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 10px;
  vertical-align: top;
}

/* Código */
.mpp-mundo-article-content code {
  background: rgba(15, 23, 42, 0.06);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.95em;
}

/* 5) Ajuste móvil */

/* =========================================
   MUNDO PANARRA – IMÁGENES
   - Tarjetas: miniatura fija
   - Visor: hero con contain y altura controlada
   ========================================= */

/* -------- TARJETAS (HOME + LISTADO) -------- */
.mpp-mundo-wrapper:not(.mpp-mundo-viewer) .mpp-mundo-card-img{
  width: 88px;                 /* ajusta si quieres */
  height: 66px;
  flex: 0 0 88px;
  border-radius: 14px;
  overflow: hidden;
  background: #f1ece4;
}

.mpp-mundo-wrapper:not(.mpp-mundo-viewer) .mpp-mundo-card-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* aquí tiene sentido */
  display: block !important;
}

/* -------- VISOR ARTÍCULO -------- */
.mpp-mundo-viewer .mpp-mundo-card-img{
  background: #f3efe8;
  border-radius: 16px;
  overflow: hidden;
}

.mpp-mundo-viewer .mpp-mundo-card-img img{
  width: 100% !important;
  height: 42vh !important;
  max-height: 420px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}



/* Imágenes dentro del contenido del artículo */
.mpp-mundo-viewer .mpp-mundo-article-content img{
  max-width: 100% !important;
  height: auto !important;
  max-height: 70vh !important;
  object-fit: contain !important;
  display: block !important;
  margin: 16px auto !important;
  border-radius: 14px;
}
/* ============================================================
   MUNDO PANARRA — VISOR ARTÍCULO (LECTURA EN APP)
   ============================================================ */

/* 1) Contenedor: limitar ancho de lectura */
.mpp-mundo-article-content{
  max-width: 720px;         /* lectura cómoda en desktop/tablet */
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.75;
  color: #3d3a35;
}

/* En móvil, un pelín más compacto */


/* 2) Títulos dentro del contenido */
.mpp-mundo-article-content h1,
.mpp-mundo-article-content h2,
.mpp-mundo-article-content h3{
  color: #1f1f1f;
  line-height: 1.2;
  margin: 22px 0 10px 0;
}

.mpp-mundo-article-content h2{
  font-size: 22px;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 16px;
}

.mpp-mundo-article-content h3{
  font-size: 18px;
}

/* 3) Párrafos y listas */
.mpp-mundo-article-content p{
  margin: 0 0 14px 0;
}

.mpp-mundo-article-content ul,
.mpp-mundo-article-content ol{
  margin: 0 0 16px 22px;
}

.mpp-mundo-article-content li{
  margin: 8px 0;
}

/* 4) Imágenes dentro del contenido (tope + contain) */
.mpp-mundo-article-content img{
  max-width: 100%;
  max-height: 360px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 16px auto;
  border-radius: 14px;
}

/* 5) Imágenes con caption (WordPress) */
.mpp-mundo-article-content figure{
  margin: 18px auto;
}

.mpp-mundo-article-content figcaption{
  font-size: 13px;
  opacity: 0.75;
  margin-top: 8px;
  text-align: center;
}

/* 6) Bloques típicos WP */
.mpp-mundo-article-content blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 4px solid rgba(192,57,43,0.5);
  background: rgba(0,0,0,0.03);
  border-radius: 14px;
}

.mpp-mundo-article-content hr{
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin: 22px 0;
}

/* 7) Enlaces */
.mpp-mundo-article-content a{
  color: #c0392b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mpp-mundo-article-content a:visited{
  color: #8f2b22;
}
/* =========================================
   VISOR ARTÍCULO – ALINEACIÓN EDITORIAL
   ========================================= */

/* Limitar ancho del header igual que el contenido */
.mpp-mundo-viewer .mpp-mundo-header{
  max-width: 720px;
  margin: 0 auto 12px auto;
}

/* Ajuste fino del botón volver */
.mpp-mundo-viewer .mpp-mundo-header a{
  font-size: 14px;
}

/* Espacio más natural entre header e imagen */
.mpp-mundo-viewer .mpp-mundo-card-img{
  margin: 12px auto 20px auto;
  max-width: 720px;
}

/* FORZAR COLUMNA CENTRADA EN VISOR */
.mpp-mundo-wrapper.mpp-mundo-viewer{
  width: 100% !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
/* ============================================================
   MUNDO PANARRA — PARCHE FINAL (PEGA AL FINAL)
   - Centra cabecera/columna en visor
   - Limita tamaños de imágenes (hero + contenido)
   - Mantiene tarjetas con miniatura fija
   ============================================================ */

/* ---------- TARJETAS (HOME + LISTADOS) ---------- */
.mpp-mundo-wrapper:not(.mpp-mundo-viewer) .mpp-mundo-card-img{
  width: 88px !important;
  height: 66px !important;
  flex: 0 0 88px !important;
  border-radius: 14px;
  overflow: hidden;
  background: #f1ece4;
}
.mpp-mundo-wrapper:not(.mpp-mundo-viewer) .mpp-mundo-card-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ---------- VISOR (REMOTE + LOCAL) ---------- */
/* 1) El wrapper del visor: centrado y con padding correcto */
.mpp-mundo-wrapper.mpp-mundo-viewer{
  width: 100% !important;
  max-width: 760px !important;          /* ancho cómodo */
  margin: 0 auto !important;
  padding: 18px 16px 120px !important;  /* aire para menú inferior */
  box-sizing: border-box !important;
}

/* 2) Cabecera del visor (volver + título + fecha) */
.mpp-mundo-viewer .mpp-mundo-article-header{
  max-width: 720px;
  margin: 0 auto 10px auto;
}
.mpp-mundo-viewer .mpp-mundo-back{
  display: inline-block;
  margin: 0 0 10px 0;
  text-decoration: none;
  font-weight: 700;
}
.mpp-mundo-viewer .mpp-mundo-article-title{
  margin: 0 0 8px 0;
  line-height: 1.08;
}
.mpp-mundo-viewer .mpp-mundo-article-meta{
  margin: 0;
  opacity: .75;
  font-size: 14px;
}

/* 3) HERO (imagen destacada): contener y con altura limitada */
.mpp-mundo-viewer .mpp-mundo-article-hero{
  max-width: 720px;
  margin: 12px auto 18px auto;
  border-radius: 16px;
  overflow: hidden;
  background: #f3efe8;
}
.mpp-mundo-viewer .mpp-mundo-article-hero img{
  width: 100% !important;
  height: min(42vh, 420px) !important;
  object-fit: contain !important;
  display: block !important;
}

/* 4) Contenido: columna centrada y lectura cómoda */
.mpp-mundo-viewer .mpp-mundo-article-content{
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.75;
  color: #3d3a35;
  overflow-wrap: anywhere;
}

/* 5) Imágenes dentro del contenido: tope y contain */
.mpp-mundo-viewer .mpp-mundo-article-content img{
  max-width: 100% !important;
  height: auto !important;
  max-height: 360px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 16px auto !important;
  border-radius: 14px;
}

/* Móvil */



/* ============================================================
   CLASE PARA FILTRADO - Con !important para móvil
   ============================================================ */
.cpp-filtered-hidden {
    display: none !important;
}

/* ==========================================
   FIX iOS: colocación correcta (no encima del menú)
   PÉGALO AL FINAL
   ========================================== */



/* ============================================================
   FIX CHROME iOS - SOLO ELIMINAR TRANSFORM
   ============================================================ */

/* El problema: la animación .cpp-view usa transform, y eso rompe position:fixed en Chrome iOS */
.cpp-view {
  /* Solo fade de opacidad, SIN transform */
  animation: fadeInOpacityOnly 0.25s ease !important;
}

@keyframes fadeInOpacityOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Asegurar que el menú y sus ancestros no tengan transform */
.mpp-bottom-nav {
  transform: none !important;
  -webkit-transform: none !important;
}

body, html, .cpp-wrapper, .mpp-mundo-wrapper {
  transform: none !important;
  -webkit-transform: none !important;
}

/* ============================================================
   ENCABEZADOS DE COLUMNAS - HARINAS E INGREDIENTES
   ============================================================ */

.cpp-ingredients-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.75rem;
    font-weight: 800;
    color: #1e3a8a;
    letter-spacing: 0.5px;
    background: #f1f5f9;
    border-radius: 6px;
}

.cpp-header-pct {
    width: 60px;
    text-align: center;
}

.cpp-header-name {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 1px;
    font-weight: 800;
}

.cpp-header-gram {
    width: 80px;
    text-align: center;
}

/* Ajustes responsive para móvil */


/* ============================================================
   NOTAS VISUALES EN CALCULADOR - FONDO DESTACADO
   ============================================================ */

/* Notas en el calculador de producción */
#view-calculator .cpp-row-note {
    margin-bottom: 12px !important;
    padding: 0 !important;
}

#view-calculator .cpp-note-prod {
    background: #eff6ff;
    padding: 12px 16px !important;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
    font-weight: 600;
    color: #1e3a8a;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    width: 100% !important;
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.08);
}

/* Responsive para móvil */


/* ============================================================
   DRAG AND DROP - REORDENAR INGREDIENTES (SortableJS)
   ============================================================ */

/* Icono de agarre para arrastrar */
.drag-handle {
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
    cursor: grab !important;
}

.drag-handle:active {
    cursor: grabbing !important;
}

.drag-handle:hover {
    color: #64748b !important;
}

/* Clases de SortableJS */
.sortable-ghost {
    opacity: 0.4;
    background: #f0f9ff;
}

.sortable-chosen {
    cursor: grabbing !important;
}

.sortable-drag {
    opacity: 1;
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Efecto hover en filas arrastrables */
#view-formula .cpp-row:hover {
    background: #f8fafc;
}


/* ============================================================
   SUBCATEGORÍAS (FORMULARIO)
   ============================================================ */

.cpp-subcategory-wrapper{
  margin: 10px 0 14px 0;
}

.cpp-subcategory-box{
  background: #FFF8F0;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 10px 12px;
}

.cpp-subcategory-label{
  display:block;
  font-weight: 700;
  margin-bottom: 8px;
  color:#4B342C;
}

.cpp-subcategory-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.cpp-subcat-chip{
  display:inline-flex;
  align-items:center;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  cursor:pointer;
  user-select:none;
}

.cpp-subcat-chip input{
  display:none;
}

.cpp-subcat-chip.is-active{
  border-color: rgba(75,52,44,0.35);
  background: #FFF2E6;
}

.cpp-subcat-chip-text{
  font-weight: 600;
  color:#4B342C;
  font-size: 0.95rem;
}
/* =========================================================
   MPP - VIDEOS
   ========================================================= */

.mpp-videos-page{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 14px 40px;
}

.mpp-page-title{
  font-size: 44px;
  line-height: 1.05;
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Acordeón */
.mpp-acc{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  overflow: hidden;
  margin: 0 0 16px;
  border: 1px solid rgba(0,0,0,0.04);
}

.mpp-acc-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px;
  cursor: pointer;
  user-select: none;
  background: #fff;
}

.mpp-acc-title{
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Iconos del acordeón (si usas spans con texto) */
.mpp-acc-icon{
  font-size: 18px;
  opacity: .6;
}

/* Contenido acordeón */
.mpp-acc-body{
  padding: 12px 14px 16px;
  background: #fff;
}

/* Estado vacío */
.mpp-empty{
  padding: 16px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
  color: rgba(15,23,42,0.7);
  font-weight: 600;
}

/* Tarjeta vídeo */
.mpp-video-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  margin: 10px 0;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform .12s ease, box-shadow .12s ease;
}

.mpp-video-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.mpp-video-thumb{
  width: 150px;
  min-width: 150px;
  height: 84px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
  position: relative;
}

.mpp-video-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play “suave” encima */
.mpp-video-thumb::after{
  content: "▶";
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 14px;
}

.mpp-video-title{
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

/* Móvil */

/* =========================================================
   MPP - VIDEOS (MEJORAS / OVERRIDES)
   Pegar al final del CSS
   ========================================================= */

/* Acordeón: pequeño ajuste de aire */
.mpp-acc-body{
  padding: 10px 14px 14px;
}

/* Icono del acordeón: consistencia visual */
.mpp-acc-icon{
  font-size: 18px;
  opacity: .55;
  line-height: 1;
}

/* Tarjeta: un pelín menos de padding para que “respire” mejor */
.mpp-video-card{
  padding: 12px;
}



/* Títulos: máximo 2 líneas para mantener armonía */
.mpp-video-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Play overlay: más sutil y fino */
.mpp-video-thumb::after{
  width: 32px;
  height: 32px;
  font-size: 13px;
  background: rgba(0,0,0,0.38);
}

/* Accesibilidad: foco bonito (sin aspecto “enlace”) */
.mpp-video-card:focus{
  outline: none;
}
.mpp-video-card:focus-visible{
  box-shadow: 0 0 0 3px rgba(15,23,42,0.12), 0 8px 22px rgba(0,0,0,0.08);
}

/* Por si algún tema fuerza estilos de enlaces */
.mpp-video-card,
.mpp-video-card:hover,
.mpp-video-card:visited,
.mpp-video-card:active{
  text-decoration: none !important;
  color: inherit !important;
}
.mpp-video-card{
  align-items: center;
}
.mpp-acc-body{
  transition: all .25s ease;
}
/* Estado acordeón por clase */
.mpp-video-section .mpp-section-content { display: none; }
.mpp-video-section.is-open .mpp-section-content { display: block; }

/* === FIX NOTAS: respetar saltos de línea === */

#cpp-print-notes {
  white-space: pre-line;
}


/* ============================================================
   SISTEMA PROGRESIVO DE CATEGORÍAS Y TAGS - v1.0
   Diseño limpio y compacto sin acordeones
   ============================================================ */

/* CONTENEDOR PRINCIPAL */
.cpp-selection-wrapper {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* CAJAS DE SELECCIÓN */
.cpp-selection-box {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 12px 14px;
    border: 1px solid #f0f0f0;
}

.cpp-selection-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
    display: block;
}

/* ============================================================
   CATEGORÍAS (PASO 1) - Sistema Progresivo
   ============================================================ */

#view-formula .cpp-category-selector {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

.cpp-category-option {
    position: relative;
}

.cpp-category-option input[type="radio"] {
    display: none;
}

#view-formula .cpp-category-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 12px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    text-align: center !important;
    min-height: 55px !important;
    width: 100% !important;
}

.cpp-category-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.cpp-category-name {
    font-size: 0.85rem;
    line-height: 1.2;
}

#view-formula .cpp-category-btn:hover {
    border-color: #f97316 !important;
    background: #fff7ed !important;
    transform: translateY(-1px) !important;
}

#view-formula .cpp-category-option input[type="radio"]:checked + .cpp-category-btn {
    background: linear-gradient(135deg, #f97316, #fbbf24) !important;
    border-color: #f97316 !important;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* ============================================================
   SUBCATEGORÍAS (PASO 2) - Sistema Progresivo
   ============================================================ */

#view-formula .cpp-subcategory-selector {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
}

#view-formula .cpp-subcategory-option {
    position: relative;
}

#view-formula .cpp-subcategory-option input[type="radio"] {
    display: none;
}

#view-formula .cpp-subcategory-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 20px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
}

.cpp-subcategory-btn:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    transform: translateY(-1px);
}

.cpp-subcategory-option input[type="radio"]:checked + .cpp-subcategory-btn {
    background: #3b82f6;
    border-color: #2563eb;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ============================================================
   TAGS (PASO 3 y 4) - Sistema Progresivo
   ============================================================ */

#view-formula .cpp-tags-selector {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
}

#view-formula .cpp-tag-option {
    position: relative;
}

#view-formula .cpp-tag-option input[type="radio"] {
    display: none;
}

#view-formula .cpp-tag-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 20px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none;
}

.cpp-tag-icon {
    font-size: 1rem;
    line-height: 1;
}

.cpp-tag-name {
    font-size: 0.85rem;
}

.cpp-tag-btn:hover {
    border-color: #8b5cf6;
    background: #f5f3ff;
    transform: translateY(-1px);
}

.cpp-tag-option input[type="radio"]:checked + .cpp-tag-btn {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    border-color: #7c3aed;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* ============================================================
   RESUMEN COMPACTO
   ============================================================ */

.cpp-selection-summary {
    background: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: 14px;
    padding: 10px 12px;
}

.cpp-summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cpp-summary-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.cpp-summary-text {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #166534;
}

.cpp-summary-edit {
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.cpp-summary-edit:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* ============================================================
   MÓVIL - AJUSTES COMPACTOS
   ============================================================ */



/* ============================================================
   ESCRITORIO - LAYOUT EXPANDIDO
   ============================================================ */



/* ============================================================
   ANIMACIONES
   ============================================================ */

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cpp-selection-box,
.cpp-selection-summary {
    animation: slideIn 0.3s ease;
}

/* ============================================================
   ESTADOS DE CARGA
   ============================================================ */

.cpp-selection-box.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.cpp-selection-box.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #3b82f6;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

.cpp-category-btn:focus-visible,
.cpp-subcategory-btn:focus-visible,
.cpp-tag-btn:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

.cpp-summary-edit:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ============================================================
   SISTEMA DE ENTRADA POR GRAMOS - ESTILOS
   ============================================================ */

/* Modal de selección */
.mpp-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpp-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.mpp-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mpp-modal-header {
    padding: 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mpp-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #1e293b;
}

.mpp-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.mpp-modal-close:hover {
    background: #f1f5f9;
    color: #64748b;
}

.mpp-modal-body {
    padding: 24px;
}

.mpp-modal-description {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 20px;
}

/* Opciones de modo */
.mpp-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.mpp-mode-option:hover {
    border-color: #3b82f6;
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.mpp-mode-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.mpp-mode-details {
    flex: 1;
}

.mpp-mode-details h3 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    color: #1e293b;
}

.mpp-mode-details > p {
    margin: 0 0 8px 0;
    color: #64748b;
    font-size: 0.9rem;
}

.mpp-mode-hint {
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}

.mpp-mode-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #dbeafe;
    color: #1e40af;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.mpp-modal-note {
    margin-top: 20px;
    padding: 16px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #166534;
}

.mpp-modal-note strong {
    color: #15803d;
}

/* Vista de gramos */
.grams-mode-indicator {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.grams-total-display {
    background: #f0f9ff;
    border-left: 4px solid #3b82f6;
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
    font-size: 1.1rem;
    color: #1e40af;
}

.grams-total-display strong {
    font-weight: 700;
}

#grams-total-flour {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e40af;
}

.grams-info-badge {
    background: #f0fdf4;
    border: 1px solid #86efac;
    padding: 10px;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 0.9rem;
    color: #166534;
    text-align: center;
}

.cpp-section-hint {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: -8px;
    margin-bottom: 16px;
}

.grams-ingredient-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
}

.grams-ingredient-row input[type="text"] {
    flex: 2;
}

.grams-ingredient-row input[type="number"] {
    flex: 1;
}

.grams-ingredient-row button {
    flex: 0 0 40px;
    height: 40px;
    background: #fee2e2;
    border: none;
    border-radius: 8px;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.2rem;
}

.grams-ingredient-row button:hover {
    background: #fca5a5;
}

/* Responsive móvil */


/* Botones toggle para modo % / g */
.grams-mode-toggle {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    background: white;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.grams-mode-toggle:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.grams-mode-toggle.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.grams-info-badge strong {
    color: #1e40af;
}

/* ==========================================================================
   VISTA DE GRAMOS - NAV BAR
   ========================================================================== */

/* Nav bar para vista de gramos (escritorio) */
#mpp-grams-form-view .cpp-nav-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 12px 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 16px !important;
}

#mpp-grams-form-view .cpp-btn-back {
    flex: 0 0 auto !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #4b5563 !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

#mpp-grams-form-view .cpp-btn-back:hover {
    background: #e5e7eb !important;
}

#mpp-grams-form-view .cpp-nav-title {
    flex: 1 1 auto !important;
    text-align: center !important;
}

#mpp-grams-form-view .cpp-nav-title .cpp-app-title {
    margin: 0 !important;
    font-size: 1.2rem !important;
}

#mpp-grams-form-view .cpp-btn-primary-small {
    flex: 0 0 auto !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

#mpp-grams-form-view .cpp-btn-primary-small:hover {
    background: #dbeafe !important;
}

/* Nav bar para vista de gramos (móvil) */


/* Botones de añadir en vista de gramos */
#mpp-grams-form-view .cpp-btn-add {
    width: 100% !important;
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border: none !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

#mpp-grams-form-view .cpp-btn-add:hover {
    background: #bfdbfe !important;
    transform: translateY(-1px);
}

/* ============================================================
   SISTEMA DE NOTAS CON SECCIONES
   ============================================================ */

.mpp-notes-sections {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

/* Sección individual */
.mpp-note-section {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.mpp-note-section:hover {
    border-color: #cbd5e1;
}

/* Header de sección */
.mpp-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.mpp-section-header:hover {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.mpp-section-header:active {
    transform: scale(0.98);
}

.mpp-section-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.mpp-section-title {
    flex: 1;
    font-weight: 600;
    font-size: 0.9rem;
    color: #334155;
}

.mpp-toggle-icon {
    font-size: 0.8rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

/* Sección colapsada */
.mpp-note-section.collapsed .mpp-toggle-icon {
    transform: rotate(-90deg);
}

.mpp-note-section.collapsed .mpp-section-content {
    display: none;
}

/* Contenido de sección */
.mpp-section-content {
    padding: 12px 16px;
    background: #ffffff;
}

.mpp-section-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #334155;
    resize: vertical;
    transition: all 0.2s ease;
}

.mpp-section-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.mpp-section-textarea::placeholder {
    color: #94a3b8;
    font-style: italic;
}

/* Sección de Advertencia/Importante */
.mpp-section-warning {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.mpp-section-warning .mpp-section-header {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.mpp-section-warning .mpp-section-content {
    background: #fffbeb;
}

.mpp-section-warning .mpp-section-textarea {
    border-color: #fbbf24;
    background: #ffffff;
}

.mpp-section-warning .mpp-section-textarea:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* Botón añadir sección */
.mpp-btn-add-section {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 2px dashed #3b82f6;
    border-radius: 12px;
    color: #1d4ed8;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mpp-btn-add-section:hover {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.mpp-btn-add-section:active {
    transform: translateY(0);
}

/* Sección personalizada */
.mpp-note-section.custom {
    border-color: #a78bfa;
}

.mpp-note-section.custom .mpp-section-header {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
}

.mpp-note-section.custom .mpp-section-title {
    color: #7c3aed;
}

/* Botón eliminar sección personalizada */
.mpp-btn-remove-section {
    padding: 4px 10px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mpp-btn-remove-section:hover {
    background: #fecaca;
    border-color: #f87171;
}

/* Input para título de sección personalizada */
.mpp-custom-section-title {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #7c3aed;
    background: transparent;
}

.mpp-custom-section-title:focus {
    outline: none;
    border-color: #a78bfa;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.1);
}

/* Responsive */


/* Animaciones */
@keyframes sectionExpand {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

.mpp-section-content {
    animation: sectionExpand 0.3s ease;
}

/* ============================================================
   NOTAS EN CALCULADORA
   ============================================================ */

/* Secciones de solo lectura */
.mpp-note-section.mpp-readonly {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.mpp-note-section.mpp-readonly .mpp-section-header {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    cursor: pointer;
}

.mpp-note-section.mpp-readonly .mpp-section-header:hover {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

.mpp-readonly-note {
    padding: 12px;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #334155;
    white-space: pre-wrap;
    min-height: 50px;
}

.mpp-readonly-note:empty::before {
    content: "Sin notas";
    color: #94a3b8;
    font-style: italic;
}

/* Sección Panadero en calculadora */
.mpp-calculator-notes .mpp-section-panadero {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.mpp-calculator-notes .mpp-section-panadero .mpp-section-header {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.mpp-calculator-notes .mpp-section-panadero .mpp-section-content {
    background: #ecfdf5;
}

.mpp-calculator-notes .mpp-section-panadero .mpp-section-textarea {
    border-color: #10b981;
    background: #ffffff;
}

.mpp-calculator-notes .mpp-section-panadero .mpp-section-textarea:focus {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Badge "Editable" */
.mpp-badge-editable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #10b981;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: auto;
    margin-right: 8px;
}

/* Botón guardar notas panadero */
.mpp-btn-save-panadero {
    padding: 8px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.mpp-btn-save-panadero:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.mpp-btn-save-panadero:active {
    transform: translateY(0);
}

/* Responsive para calculadora */


/* Sección Panadero en vista de fórmula */
.mpp-note-section.mpp-section-panadero {
    border-color: #10b981;
}

.mpp-note-section.mpp-section-panadero .mpp-section-header {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.mpp-note-section.mpp-section-panadero .mpp-section-title {
    color: #059669;
}

.mpp-note-section.mpp-section-panadero .mpp-section-content {
    background: #ecfdf5;
}

.mpp-note-section.mpp-section-panadero .mpp-section-textarea {
    border-color: #a7f3d0;
}

.mpp-note-section.mpp-section-panadero .mpp-section-textarea:focus {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* ============================================================
   PAGINACIÓN DE BIBLIOTECA
   ============================================================ */

.cpp-pagination-select {
    transition: border-color 0.2s;
}

.cpp-pagination-select:hover {
    border-color: #94a3b8 !important;
}

.cpp-pagination-select:focus {
    outline: none;
    border-color: #1e3a8a !important;
}

.cpp-pagination-btn {
    transition: all 0.2s;
}

.cpp-pagination-btn:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

.cpp-pagination-btn:active {
    background: #e2e8f0 !important;
    transform: scale(0.98);
}

.cpp-library-section {
    margin-bottom: 0;
}

.cpp-recipes-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}



/* ============================================================
   FORMULARIO POR GRAMOS
   ============================================================ */

.grams-ingredient-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.grams-ingredient-row input[type="text"] {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    padding: 10px 12px;
}

.grams-ingredient-row input[type="number"] {
    width: 60px;
    max-width: 60px;
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 4px;
    color: #1e3a8a;
    text-align: center;
}

.grams-ingredient-row .grams-remove-btn {
    background: #fee2e2;
    border: none;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s;
    flex-shrink: 0;
}

.grams-ingredient-row .grams-remove-btn:hover {
    background: #fecaca;
}

/* ============================================================
   SISTEMA DE COLECCIONES
   ============================================================ */

/* Pestañas de biblioteca */
.cpp-library-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e2e8f0;
}

.cpp-library-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 1rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

.cpp-library-tab:hover {
    color: #1e3a8a;
    background: #f1f5f9;
}

.cpp-library-tab.active {
    color: #1e3a8a;
    border-bottom-color: #1e3a8a;
}

/* Pestaña YouTube - Estilo especial */
.cpp-tab-youtube:hover {
    color: #ff0000;
    background: #fff5f5;
}

.cpp-tab-youtube.active {
    color: #ff0000;
    border-bottom-color: #ff0000;
}

/* Grid de colecciones */
.cpp-collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

/* Tarjeta de colección */
.cpp-collection-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.cpp-collection-card:hover {
    border-color: #1e3a8a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.1);
}

.cpp-collection-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.cpp-collection-info h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1e293b;
}

.cpp-collection-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
}

/* Modal de colecciones */
.cpp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.cpp-modal {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.cpp-modal-header {
    padding: 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cpp-modal-header h3 {
    margin: 0;
    color: #1e293b;
}

.cpp-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s;
}

.cpp-modal-close:hover {
    background: #f1f5f9;
}

.cpp-modal-body {
    padding: 20px;
}

.cpp-modal-footer {
    padding: 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Grid de iconos */
.cpp-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.cpp-icon-btn {
    width: 50px;
    height: 50px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpp-icon-btn:hover {
    border-color: #cbd5e1;
    transform: scale(1.05);
}

.cpp-icon-btn.active {
    border-color: #1e3a8a;
    background: #eff6ff;
}

/* Lista de checkboxes de colecciones */
.cpp-collections-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.cpp-collection-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.cpp-collection-checkbox:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.cpp-collection-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.cpp-collection-checkbox span {
    font-size: 0.95rem;
    color: #1e293b;
}

/* Botones de colecciones */
.cpp-btn-new-collection {
    padding: 10px 20px;
    background: #1e3a8a;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.cpp-btn-new-collection:hover {
    background: #1e40af;
}

.cpp-btn-back {
    padding: 8px 16px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.cpp-btn-back:hover {
    background: #e2e8f0;
}

/* Responsive colecciones */

/* Botones de editar/eliminar en tarjetas de colecciones */
.cpp-collection-card {
    position: relative;
}

.cpp-collection-actions {
    opacity: 0;
    transition: opacity 0.2s;
}

.cpp-collection-card:hover .cpp-collection-actions {
    opacity: 1;
}

.cpp-btn-edit-collection,
.cpp-btn-delete-collection {
    transition: all 0.2s;
}

.cpp-btn-edit-collection:hover {
    background: #2563eb !important;
    transform: scale(1.1);
}

.cpp-btn-delete-collection:hover {
    background: #dc2626 !important;
    transform: scale(1.1);
}
/* ============================================================
   BOTONES DE MODALES - MEJORADOS
   ============================================================ */

/* Botón primario (Crear, Guardar, Cerrar principal) */
.cpp-btn-primary,
button[id*="btn-create"],
button.cpp-btn-save-collection {
    transition: all 0.2s ease;
}

.cpp-btn-primary:hover,
button[id*="btn-create"]:hover,
button.cpp-btn-save-collection:hover {
    background: #2563eb !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.cpp-btn-primary:active,
button[id*="btn-create"]:active,
button.cpp-btn-save-collection:active {
    transform: translateY(0);
}

/* Botón secundario (Cancelar) */
.cpp-btn-secondary {
    transition: all 0.2s ease;
}

.cpp-btn-secondary:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px);
}

.cpp-btn-secondary:active {
    transform: translateY(0);
}

/* Footer de modales */
.cpp-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid #e2e8f0;
}

/* Cuando solo hay un botón (ej: Cerrar), centrarlo */
.cpp-modal-footer:has(button:only-child) {
    justify-content: center;
}
/* ============================================================
   FIX BOTÓN CANCELAR - Máxima especificidad
   ============================================================ */

/* Estilos base con !important para forzar aplicación */
.cpp-modal .cpp-modal-footer button.cpp-btn-cancel-unique,
button.cpp-btn-cancel-unique.cpp-modal-close,
.cpp-btn-cancel-unique {
    background: #f1f5f9 !important;
    color: #475569 !important;
    padding: 12px 24px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Hover state */
.cpp-modal .cpp-modal-footer button.cpp-btn-cancel-unique:hover,
button.cpp-btn-cancel-unique.cpp-modal-close:hover,
.cpp-btn-cancel-unique:hover {
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px) !important;
}

/* Active state */
.cpp-modal .cpp-modal-footer button.cpp-btn-cancel-unique:active,
button.cpp-btn-cancel-unique.cpp-modal-close:active,
.cpp-btn-cancel-unique:active {
    transform: translateY(0) !important;
}

/* Focus state */
.cpp-modal .cpp-modal-footer button.cpp-btn-cancel-unique:focus,
button.cpp-btn-cancel-unique.cpp-modal-close:focus,
.cpp-btn-cancel-unique:focus {
    outline: 2px solid #cbd5e1 !important;
    outline-offset: 2px !important;
}

/* ============================================================
   VISTA RESUMEN
   ============================================================ */

.cpp-modal-resumen {
    max-width: 600px !important;
}

.ingredient-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #cbd5e1;
    transition: all 0.2s;
}

.ingredient-item:hover {
    background: #f1f5f9;
    transform: translateX(2px);
}

.ingredient-item.prefermento {
    border-left-color: #f59e0b;
    background: #fff3e0;
}

.ingredient-item.prefermento:hover {
    background: #ffe0b2;
}

.ingredient-item.escaldado {
    border-left-color: #ec4899;
    background: #fdf2f8;
}

.ingredient-item.escaldado:hover {
    background: #fce7f3;
}

.ingredient-item.harina {
    border-left-color: #eab308;
    background: #fefce8;
}

.ingredient-item.harina:hover {
    background: #fef9c3;
}

.ingredient-name {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.ingredient-percentage {
    font-weight: 700;
    color: #3b82f6;
    min-width: 50px;
    font-size: 14px;
}

.ingredient-text {
    font-size: 15px;
    color: #1e293b;
    font-weight: 500;
}

.ingredient-amount {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    min-width: 80px;
    text-align: right;
}

/* Responsive */


/* ============================================================
   TAG YOUTUBE - ICONO Y FILTRO
   ============================================================ */

/* Icono YouTube en el título de las tarjetas */
.mpp-youtube-icon {
    display: inline-block;
    width: 20px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
    background-image: url('youtube.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Tag YouTube en las tarjetas (cuando se muestra como tag) */
.cpp-tag[data-tag="youtube"] {
    background-color: #ff0000;
    color: white;
    border: 1px solid #cc0000;
}

/* Tag YouTube en los filtros */
.cpp-filter-chip[data-tag="youtube"] {
    background-color: #ff0000;
    color: white;
    border-color: #cc0000;
}

.cpp-filter-chip[data-tag="youtube"].active {
    background-color: #cc0000;
    border-color: #990000;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.2);
}

/* Checkbox YouTube en el editor (solo visible para admin) */
#tag-youtube-checkbox-container {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

#tag-youtube-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background-color: #ffffff;
    color: #1e293b;
    border: 2px solid #ff0000;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

#tag-youtube-checkbox-label:hover {
    background-color: #fff5f5;
    border-color: #cc0000;
    transform: translateY(-1px);
}

#tag-youtube-checkbox {
    margin: 0;
    cursor: pointer;
}

/* Icono YouTube en el label del checkbox */
#tag-youtube-checkbox-label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 17px;
    background-image: url('youtube.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* =====================================
   VIDEOS – HEADER DE SECCION CON FONDO
===================================== */

/* El botón completo (toda la fila) */
body.page-id-19 .mpp-section-header{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 12px;

  padding: 10px 14px;
  margin: 10px 0 12px 0;

  box-sizing: border-box;
}

/* Quita estilos heredados raros del botón */
body.page-id-19 .mpp-section-header:focus{
  outline: none;
  box-shadow: none;
}

/* El texto */
body.page-id-19 .mpp-section-title{
  margin: 0;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}

/* El chevron */
body.page-id-19 .mpp-section-chevron{
  margin-left: 12px;
  opacity: .75;
}
/* === YouTube icon más grande en tarjetas === */
.mpp-youtube-icon{
  width: 28px;
  height: 20px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
/* === MPP MOBILE COMPACT HEADER (auto) === */

/* === END MPP MOBILE COMPACT HEADER (auto) === */

.mpp-agradecimientos a {
  color: #0f766e;           /* verde sobrio */
  text-decoration: none;
  font-weight: 600;
}

.mpp-agradecimientos a:hover {
  text-decoration: underline;
}

/* ===================================================
   MPP Static Pages (About / Legal / Acknowledgements)
   =================================================== */

.mpp-static-page {
  background: #FAF4E6; /* crema cálido */
  border-radius: 22px;
  padding: 28px;
  max-width: 860px;
  margin: 16px auto 90px auto; /* hueco para bottom bar */
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

/* Títulos */
.mpp-static-page h1 {
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 18px 0;
  color: #2a1f16;          /* marrón muy oscuro */
  font-weight: 800;
}

.mpp-static-page h2 {
  margin: 22px 0 12px 0;
  font-size: 16px;
  font-weight: 800;
  color: #2a1f16;
}

/* Texto */
.mpp-static-page p {
  margin: 0 0 18px 0;
  line-height: 1.85;       /* más respiración */
  font-size: 15px;
  color: #2b2b2b;
}

/* Listas (por coherencia, aunque aquí no se usen mucho) */
.mpp-static-page ul {
  margin: 0 0 18px 0;
  padding-left: 18px;
}

/* ============================================================
   ICONOS DE INGREDIENTES (🌾 harina, 💧 líquidos)
   ============================================================ */
.mpp-icon {
    display: inline-block;
    margin-right: 4px;
    font-size: 0.9em;
    vertical-align: middle;
    line-height: 1;
}

/* Ajuste para móviles */


.mpp-static-page li {
  margin: 6px 0;
  line-height: 1.7;
  color: #2b2b2b;
  font-size: 15px;
}

/* Enlaces: calidez de marca (adiós morado frío) */
.mpp-static-page a {
  color: #8b5e3c;          /* marrón pan */
  font-weight: 600;
  text-decoration: none;
}

.mpp-static-page a:hover {
  text-decoration: underline;
}

/* Bloque destacado estilo “callout” / cita */
.mpp-static-page blockquote {
  margin: 24px 0 26px 0;
  padding: 18px 20px;
  background: #FFF2E6;
  border-left: 5px solid #C0392B;
  border-radius: 14px;
  color: #2b2b2b;
  font-style: italic;
  line-height: 1.7;
}

/* Ajuste fino: más aire antes de subtítulos */
.mpp-static-page p + h2 {
  margin-top: 28px;
}

/* Responsive */



/* ============================================================
   RESPONSIVE - MEDIA QUERIES CONSOLIDADAS
   ============================================================ */

@media (max-width: 360px) {
    #frm-btnAddHarina, 
        #frm-btnAddHarinaNote, 
        #frm-btnAddOtro, 
        #frm-btnAddOtroNote {
            width: 100% !important;
            float: none !important;
            display: flex !important;
            margin-right: 0 !important;
        }
}

@media (max-width: 480px) {
    .mpp-mundo-viewer .mpp-mundo-card-img img{
        height: 34vh !important;
        max-height: 320px !important;
      }
    .mpp-mundo-article-content{
        font-size: 16px;
        line-height: 1.7;
        max-width: 100%;
      }
    .mpp-mundo-viewer .mpp-mundo-header,
      .mpp-mundo-viewer .mpp-mundo-card-img{
        max-width: 100%;
      }
    .mpp-mundo-viewer .mpp-mundo-article-hero img{
        height: min(34vh, 320px) !important;
      }
      .mpp-mundo-viewer .mpp-mundo-article-content{
        font-size: 16px;
        line-height: 1.7;
      }
      .mpp-mundo-viewer .mpp-mundo-article-content img{
        max-height: 300px !important;
      }
}

@media (max-width: 600px) {
    .cpp-header-wrapper { gap: 4px; margin-bottom: 12px; }
        .cpp-title-main,
        .cpp-app-title { font-size: 2rem; max-width: 65%; } /* 🔥 MÁS GRANDE: 1.55rem → 2rem */
        .cpp-login-btn { position: absolute; top: 0; right: 0; padding: 6px 14px; font-size: 0.8rem; }
        .cpp-header-actions { flex-wrap: nowrap; gap: 10px; margin-top: 8px; }
        .cpp-header-actions .cpp-btn-primary-large,
        #cpp-btnFilterFavorites {
            flex: 1 1 50% !important; width: auto !important; min-width: 0 !important;
            height: 40px; font-size: 0.8rem; padding: 0 10px; justify-content: center; /* 🔥 MÁS COMPACTOS: 44px → 40px, 0.85rem → 0.8rem */
        }
        .cpp-header-search { width: 100%; margin-top: 0; }
    .cpp-card-recipe { padding: 10px 12px; border-radius: 20px; } .cpp-card-title { font-size: 0.98rem; } 
        /* 🔥 FILTROS MÁS GRANDES EN MÓVIL (área táctil mínima 44px) */
        .cpp-filter-chip {
            padding: 8px 14px; /* 🔥 Más padding para área táctil más grande */
            font-size: 0.85rem; /* 🔥 Texto un poco más grande */
            min-height: 38px; /* 🔥 Altura mínima para fácil toque */
        }
    #view-calculator .cpp-bottom-bar {
            padding: 8px 12px;
        }

        #view-calculator .cpp-btn-menu,
        #view-calculator .cpp-btn-save {
            height: 40px;
            font-size: 0.85rem;
        }
    .mpp-bottom-nav { padding: 10px 14px 12px; } .mpp-nav-item { font-size: 0.78rem; }
    #view-formula #frm-pref-placeholder, 
        #view-formula #frm-esc-placeholder, 
        .cpp-pref-placeholder { display: none !important; }
    /* Ocultar espaciadores */
        .cpp-select-spacer {
            display: none;
        }
    #view-formula #frm-boxMM .cpp-compact-row,
        #view-formula #frm-boxEsc .cpp-compact-row {
            flex-wrap: wrap;
            gap: 10px;
        }

        #view-formula #frm-boxMM .cpp-input-group,
        #view-formula #frm-boxEsc .cpp-input-group {
            flex: 1 1 100%;
        }

        #view-formula #frm-boxMM .cpp-input-group .cpp-input-clean,
        #view-formula #frm-boxEsc .cpp-input-group .cpp-input-clean {
            height: 42px;
        }

        #view-formula #frm-divMM select.cpp-input-full,
        #view-formula #frm-divEsc select.cpp-input-full {
            height: 42px;
        }
    /* CONTENEDOR Y CAJAS MÁS COMPACTOS */
        #view-formula .cpp-container { 
            padding: 0 8px 20px !important; 
            gap: 6px !important; /* 🔥 8px → 6px */
        }

        #view-formula .cpp-box { 
            padding: 8px 10px 10px !important; 
            border-radius: 16px !important;
        }

        /* TÍTULOS DE SECCIÓN MÁS PEQUEÑOS */
        #view-formula .cpp-box .cpp-titulo {
            margin-bottom: 3px !important;
            font-size: 0.7rem !important; /* 🔥 0.75rem → 0.7rem */
        }

        /* TEXTAREA DE NOTAS MÁS GRANDE */
        #view-formula #frm-notes,
        #view-formula .cpp-textarea {
            min-height: 200px !important;
        }

        /* TEXTOS EXPLICATIVOS MÁS COMPACTOS */
        #view-formula .cpp-box p {
            margin: 3px 0 5px 0 !important; /* 🔥 4px/6px → 3px/5px */
            font-size: 0.68rem !important; /* 🔥 0.72rem → 0.68rem */
            line-height: 1.3 !important;
        }

        /* Reducir espacio en listas de harinas/ingredientes */
        #frm-listaHarinas > div, 
        #frm-listaOtros > div { 
            margin-bottom: 2px !important; 
            gap: 4px !important;
        }

        /* BOTONES AÑADIR MÁS COMPACTOS */
        #frm-btnAddHarina, 
        #frm-btnAddHarinaNote, 
        #frm-btnAddOtro, 
        #frm-btnAddOtroNote {
            margin-top: 4px !important;
            padding: 7px 10px !important; /* 🔥 8px 12px → 7px 10px */
            font-size: 0.75rem !important; /* 🔥 0.8rem → 0.75rem */
            height: 34px !important; /* 🔥 36px → 34px */
        }

        /* Etiquetas de sección más compactas */
        #view-formula .frm-label-tags, 
        #view-formula .frm-tags-title {
            margin: 4px 0 2px !important;
            font-size: 0.85rem !important;
        }

        /* Categorías más compactas */
        #view-formula .cpp-category-wrapper { 
            padding: 0 8px 4px !important; 
        }

        #view-formula .cpp-category-box-compact { 
            padding: 6px 10px !important; 
            gap: 6px !important;
        }

        /* Cajas de Prefermento y Escaldado más compactas */
        #view-formula #frm-boxMM.cpp-box,
        #view-formula #frm-boxEsc.cpp-box {
            padding: 8px 10px 10px !important;
        }

        /* Filas de inputs más compactas */
        #view-formula #frm-boxMM .cpp-compact-row,
        #view-formula #frm-boxEsc .cpp-compact-row {
            margin-top: 6px !important;
            margin-bottom: 6px !important;
            gap: 8px !important;
        }

        /* Textos explicativos más compactos */
        #view-formula #frm-boxMM p,
        #view-formula #frm-boxEsc p {
            margin: 4px 0 6px 0 !important;
            font-size: 0.72rem !important;
        }

        /* Textareas de notas más compactas */
        #view-formula #frm-mmNote,
        #view-formula #frm-escNotes {
            margin-top: 6px !important;
            min-height: 40px !important;
            font-size: 0.75rem !important;
        }

        /* BARRA SUPERIOR Y CATEGORÍAS */
        #view-formula .cpp-formula-bar {
            display: flex !important; flex-wrap: wrap !important;
            justify-content: space-between !important; align-items: center !important;
            padding: 8px 10px 2px !important; gap: 6px !important;
        }
        #view-formula .cpp-nav-title { order: 1 !important; flex: 1 1 100% !important; width: 100% !important; margin-bottom: 2px !important; }
        #view-formula #frm-inpNombreFormula { width: 100% !important; height: 40px !important; }
        #view-formula #cpp-btnBackFormula,
        #view-formula #frm-btnSaveFormula {
            order: 2 !important; flex: 1 1 48% !important; width: auto !important; height: 40px !important; margin: 0 !important;
            font-size: 0.85rem !important;
        }

        #view-formula .cpp-category-box-compact { flexDirection: column !important; align-items: flex-start !important; gap: 6px !important; }

        /* 🔥 CATEGORÍAS MÓVIL REFINADAS */
        #view-formula .cpp-category-selector-compact {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 8px !important;
            width: 100% !important;
            margin-top: 3px !important;
        }
        #view-formula .cpp-category-btn {
            width: 100% !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            padding: 4px 2px !important;
            font-size: 0.68rem !important;
            min-height: 28px !important;
            height: auto !important;
        }
        #view-formula .cpp-category-icon-compact {
            font-size: 0.75rem !important; margin-right: 3px !important; position: relative !important; top: 1px !important;
        }
    /* Contenedor más compacto */
        #view-calculator .cpp-container {
            padding: 0 8px 80px;
            gap: 10px; /* 🔥 Más compacto: 12px → 10px */
        }

        /* Tarjetas más compactas */
        #view-calculator .cpp-box {
            padding: 10px 12px 12px;
            border-radius: 14px; /* 🔥 Más pequeño: 16px → 14px */
        }

        #view-calculator .cpp-box .cpp-titulo {
            font-size: 0.7rem;
            margin-bottom: 8px;
        }

        /* Barra de navegación móvil */
        #view-calculator .cpp-nav-bar {
            padding: 8px 8px !important; /* 🔥 Mismo que container móvil */
            gap: 8px;
            background: transparent !important; /* 🔥 SIN FONDO */
            box-shadow: none !important; /* 🔥 SIN SOMBRA */
        }

        #view-calculator .cpp-btn-back {
            padding: 6px 12px;
            font-size: 0.85rem;
        }

        #view-calculator .cpp-nav-title {
            font-size: 0.9rem; /* 🔥 Más pequeño en móvil */
            text-align: center; /* 🔥 Centrado en su espacio flex */
        }

        /* Inputs más compactos */
        #view-calculator input[type="number"],
        #view-calculator input[type="text"],
        #view-calculator select {
            padding: 8px 10px; /* 🔥 Más compacto: 10px 12px → 8px 10px */
            font-size: 0.85rem; /* 🔥 REDUCIDO: 0.9rem → 0.85rem */
            border-radius: 6px; /* 🔥 Más pequeño: 8px → 6px */
        }

        /* Labels más pequeños en móvil */
        .cpp-input-group label {
            font-size: 0.65rem; /* 🔥 MÁS PEQUEÑO: 0.68rem → 0.65rem */
            margin-bottom: 3px;
        }

        /* Inputs clean más compactos */
        .cpp-input-clean,
        .cpp-input-full {
            padding: 8px 10px;
            font-size: 0.85rem;
        }

        /* Big input más pequeño en móvil */
        .cpp-big-input {
            font-size: 2rem; /* 🔥 MÁS PEQUEÑO: 2.2rem → 2rem */
        }

        /* Summary box responsive */
        .cpp-summary-box {
            flex-direction: column;
            gap: 6px; /* 🔥 Más compacto: 8px → 6px */
            font-size: 0.78rem;
        }

        /* Botones añadir más compactos */
        #view-calculator .cpp-btn-add {
            padding: 8px 12px;
            font-size: 0.8rem;
            margin-top: 8px;
        }

        /* Textarea notas más compacta */
        #view-calculator .cpp-textarea {
            min-height: 200px;
            padding: 10px 12px;
            font-size: 0.85rem;
        }

        /* Barra inferior más compacta */
        #view-calculator .cpp-bottom-bar {
            bottom: 85px; /* 🔥 20px → 85px para no tapar navegación inferior */
            width: 94%;
            padding: 8px;
        }

        #view-calculator .cpp-btn-save,
        #view-calculator .cpp-btn-menu {
            padding: 12px 10px;
            font-size: 0.9rem;
        }

        /* Prefermento: barra en UNA línea (horizontal) */
        .cpp-mm-result-bar {
            flex-direction: row; /* 🔥 HORIZONTAL: column → row */
            justify-content: space-between;
            align-items: center;
            gap: 6px; /* 🔥 Compacto */
            font-size: 0.75rem; /* 🔥 MÁS PEQUEÑO: 0.85rem → 0.75rem */
            text-align: right;
            flex-wrap: nowrap; /* 🔥 No romper en dos líneas */
        }

        .cpp-mm-result-bar > div {
            white-space: nowrap; /* 🔥 Evitar que el texto se rompa */
        }

        /* Ajuste columnas en móvil */
        #view-calculator .cpp-pct {
            flex: 0 0 40px; /* 🔥 REDUCIDO: 48px → 40px en móvil */
            max-width: 40px;
        }

        #view-calculator .cpp-row input[type="number"]:not(.cpp-pct) {
            flex: 0 0 75px; /* 🔥 Gramos más compactos en móvil */
            max-width: 75px;
        }
    #view-calculator .cpp-row {
            gap: 4px !important;
            margin-bottom: 4px !important;
            padding: 3px 0 !important;
        }

        #view-calculator .cpp-pct {
            flex: 0 0 55px !important;
            max-width: 55px !important;
        }

        #view-calculator .cpp-name {
            min-width: 100px !important;
        }

        #view-calculator .cpp-row input[type="number"]:not(.cpp-pct) {
            flex: 0 0 60px !important;
            max-width: 60px !important;
        }
    #view-calculator .cpp-card-harinas .cpp-row,
        #view-calculator .cpp-card-ingredientes .cpp-row {
            gap: 4px !important;
            margin-bottom: 3px !important;
            padding: 1px 0 !important;
        }

        #view-calculator .cpp-card-harinas .cpp-pct,
        #view-calculator .cpp-card-ingredientes .cpp-pct {
            flex: 0 0 50px !important;
            max-width: 50px !important;
        }

        #view-calculator .cpp-card-harinas .cpp-row input[type="number"]:not(.cpp-pct),
        #view-calculator .cpp-card-ingredientes .cpp-row input[type="number"]:not(.cpp-pct) {
            flex: 0 0 60px !important;
            max-width: 60px !important;
        }
    #view-calculator .cpp-card-harinas .cpp-row,
        #view-calculator .cpp-card-ingredientes .cpp-row {
            gap: 4px !important;
            margin-bottom: 3px !important;
            padding: 1px 0 !important;
        }

        #view-calculator .cpp-card-harinas .cpp-row input[type="number"]:not(.cpp-pct),
        #view-calculator .cpp-card-ingredientes .cpp-row input[type="number"]:not(.cpp-pct) {
            flex: 0 0 70px !important;
            max-width: 70px !important;
        }
    #view-calculator .cpp-bottom-bar {
            bottom: 85px !important;
        }
    .cpp-ingredients-header {
            font-size: 0.7rem;
        }

        .cpp-header-pct {
            width: 50px;
        }

        .cpp-header-name {
            font-size: 0.75rem;
        }

        .cpp-header-gram {
            width: 70px;
        }
    #view-calculator .cpp-note-prod {
            font-size: 0.8rem;
            padding: 10px 14px !important;
        }
    .cpp-selection-wrapper {
            padding: 0 8px 8px;
            gap: 8px;
        }

        .cpp-selection-box {
            padding: 10px 12px;
            border-radius: 14px;
        }

        .cpp-selection-label {
            font-size: 0.85rem;
            margin-bottom: 8px;
        }

        /* Categorías más compactas en móvil */
        #view-formula .cpp-category-selector {
            gap: 12px !important;
        }

        #view-formula .cpp-category-btn {
            padding: 12px 10px !important;
            font-size: 0.75rem !important;
            flex-direction: column !important;
            gap: 4px !important;
            min-height: 65px !important;
        }

        #view-formula .cpp-category-icon {
            font-size: 1rem !important;
        }

        .cpp-category-name {
            font-size: 0.7rem;
            line-height: 1.1;
        }

        /* Subcategorías más pequeñas */
        .cpp-subcategory-btn {
            padding: 8px 14px; /* Aumentado de 6px 12px a 8px 14px */
            font-size: 0.8rem;
        }

        /* Tags más compactos */
        .cpp-tag-btn {
            padding: 8px 14px; /* Aumentado de 6px 12px a 8px 14px */
            font-size: 0.8rem;
            gap: 4px;
        }

        .cpp-tag-icon {
            font-size: 0.9rem;
        }

        .cpp-tag-name {
            font-size: 0.8rem;
        }

        /* Resumen más compacto */
        .cpp-selection-summary {
            padding: 8px 10px;
        }

        .cpp-summary-text {
            font-size: 0.85rem;
        }

        .cpp-summary-edit {
            font-size: 0.9rem;
        }
    .mpp-modal-content {
            width: 95%;
            max-height: 95vh;
        }

        .mpp-mode-option {
            flex-direction: column;
            text-align: center;
        }

        .mpp-mode-badge {
            position: static;
            display: inline-block;
            margin-top: 8px;
        }

        .grams-ingredient-row {
            flex-direction: column;
            gap: 8px;
        }

        .grams-ingredient-row input[type="text"],
        .grams-ingredient-row input[type="number"] {
            width: 100%;
        }
    #mpp-grams-form-view .cpp-nav-bar {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding: 8px 10px 2px !important;
            gap: 6px !important;
        }

        #mpp-grams-form-view .cpp-nav-title {
            order: 1 !important;
            flex: 1 1 100% !important;
            width: 100% !important;
            margin-bottom: 2px !important;
            text-align: center !important;
        }

        #mpp-grams-form-view .cpp-nav-title .cpp-app-title {
            font-size: 1.1rem !important;
        }

        #mpp-grams-form-view .cpp-btn-back,
        #mpp-grams-form-view .cpp-btn-primary-small {
            order: 2 !important;
            flex: 1 1 48% !important;
            width: auto !important;
            height: 40px !important;
            margin: 0 !important;
            font-size: 0.85rem !important;
        }
    .ingredient-percentage {
            min-width: 40px;
            font-size: 13px;
        }

        .ingredient-text {
            font-size: 14px;
        }

        .ingredient-amount {
            min-width: 60px;
            font-size: 15px;
        }
}

@media (max-width: 768px) {
    .mpp-section-header {
            padding: 10px 12px;
        }

        .mpp-section-content {
            padding: 10px 12px;
        }

        .mpp-section-icon {
            font-size: 1rem;
        }

        .mpp-section-title {
            font-size: 0.85rem;
        }

        .mpp-section-textarea {
            font-size: 0.85rem;
            padding: 10px;
        }
    .mpp-calculator-notes .mpp-section-header {
            padding: 10px 12px;
        }

        .mpp-badge-editable {
            font-size: 0.65rem;
            padding: 2px 6px;
        }

        .mpp-btn-save-panadero {
            width: 100%;
            padding: 10px;
        }
    .cpp-recipes-container {
            grid-template-columns: 1fr;
        }
    .cpp-collections-grid {
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        }

        .cpp-collection-card {
            padding: 15px;
        }

        .cpp-collection-icon {
            width: 50px;
            height: 50px;
            font-size: 1.5rem;
        }

        .cpp-modal {
            max-width: 100%;
            margin: 0;
            border-radius: 0;
        }
    .mpp-icon {
            margin-right: 3px;
            font-size: 0.85em;
        }
}

@media (min-width: 900px) {
    #view-formula .cpp-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #view-calculator .cpp-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 30px;
            row-gap: 30px;
        }

        #view-calculator .cpp-container .cpp-box,
        #view-calculator .cpp-container .cpp-mm-box {
            margin-bottom: 0 !important;
        }

        /* Layout: Sin prefermento ni escaldado */
        #view-calculator .cpp-container.layout-none .cpp-card-config { 
            grid-column: 1 / -1; 
            grid-row: 1; 
        }
        #view-calculator .cpp-container.layout-none .cpp-card-harinas { 
            grid-column: 1; 
            grid-row: 2; 
        }
        #view-calculator .cpp-container.layout-none .cpp-card-ingredientes { 
            grid-column: 2; 
            grid-row: 2; 
        }
        #view-calculator .cpp-container.layout-none .cpp-card-notas { 
            grid-column: 1 / -1; 
            grid-row: 3; 
        }
        #view-calculator .cpp-container.layout-none .cpp-card-prefermento,
        #view-calculator .cpp-container.layout-none .cpp-card-escaldado { 
            display: none; 
        }

        /* Layout: Solo masa madre */
        #view-calculator .cpp-container.layout-mm-only .cpp-card-config { 
            grid-column: 1; 
            grid-row: 1; 
        }
        #view-calculator .cpp-container.layout-mm-only .cpp-card-prefermento { 
            grid-column: 2; 
            grid-row: 1; 
            display: block; 
        }
        #view-calculator .cpp-container.layout-mm-only .cpp-card-escaldado { 
            display: none; 
        }
        #view-calculator .cpp-container.layout-mm-only .cpp-card-harinas { 
            grid-column: 1; 
            grid-row: 2; 
        }
        #view-calculator .cpp-container.layout-mm-only .cpp-card-ingredientes { 
            grid-column: 2; 
            grid-row: 2; 
        }
        #view-calculator .cpp-container.layout-mm-only .cpp-card-notas { 
            grid-column: 1 / -1; 
            grid-row: 3; 
        }

        /* Layout: Solo escaldado */
        #view-calculator .cpp-container.layout-esc-only .cpp-card-config { 
            grid-column: 1; 
            grid-row: 1; 
        }
        #view-calculator .cpp-container.layout-esc-only .cpp-card-escaldado { 
            grid-column: 2; 
            grid-row: 1; 
            display: block; 
        }
        #view-calculator .cpp-container.layout-esc-only .cpp-card-prefermento { 
            display: none; 
        }
        #view-calculator .cpp-container.layout-esc-only .cpp-card-harinas { 
            grid-column: 1; 
            grid-row: 2; 
        }
        #view-calculator .cpp-container.layout-esc-only .cpp-card-ingredientes { 
            grid-column: 2; 
            grid-row: 2; 
        }
        #view-calculator .cpp-container.layout-esc-only .cpp-card-notas { 
            grid-column: 1 / -1; 
            grid-row: 3; 
        }

        /* Layout: Masa madre + Escaldado */
        #view-calculator .cpp-container.layout-mm-esc .cpp-card-config { 
            grid-column: 1 / -1; 
            grid-row: 1; 
        }
        #view-calculator .cpp-container.layout-mm-esc .cpp-card-prefermento { 
            grid-column: 1; 
            grid-row: 2; 
            display: block; 
        }
        #view-calculator .cpp-container.layout-mm-esc .cpp-card-escaldado { 
            grid-column: 2; 
            grid-row: 2; 
            display: block; 
        }
        #view-calculator .cpp-container.layout-mm-esc .cpp-card-harinas { 
            grid-column: 1; 
            grid-row: 3; 
        }
        #view-calculator .cpp-container.layout-mm-esc .cpp-card-ingredientes { 
            grid-column: 2; 
            grid-row: 3; 
        }
        #view-calculator .cpp-container.layout-mm-esc .cpp-card-notas { 
            grid-column: 1 / -1; 
            grid-row: 4; 
        }
}

@media (min-width: 960px) {
    .cpp-header-wrapper {
            display: grid; grid-template-columns: minmax(0, 1fr) auto;
            grid-template-rows: auto auto auto; column-gap: 24px; row-gap: 4px; align-items: center;
        }
        .cpp-title-main { grid-column: 1; grid-row: 1; margin: 0; }
        .cpp-subtitle { grid-column: 1; grid-row: 2; margin: 0; }
        .cpp-header-actions {
            grid-column: 2; grid-row: 1 / span 2; display: flex; justify-content: flex-end; width: 100%;
        }
        .cpp-header-actions .cpp-btn-primary-large,
        #cpp-btnFilterFavorites { flex: 0 0 auto; width: auto; min-width: 190px; height: 48px; }
        .cpp-header-search { grid-column: 1 / 3; grid-row: 3; width: 100%; margin-top: 8px; }
}

@media (min-width: 1200px) {
    .cpp-header-actions { max-width: 700px; margin: 0 auto; }
}

@media (min-width: 601px) {
    #view-formula .cpp-formula-bar {
            display: flex !important; flex-wrap: nowrap !important;
            align-items: center !important; justify-content: flex-start !important;
            gap: 12px !important; padding: 12px 20px 4px !important;
        }
        #view-formula #cpp-btnBackFormula { order: 1 !important; flex: 0 0 110px !important; width: 110px !important; height: 38px !important; }
        #view-formula .cpp-nav-title { order: 2 !important; flex: 1 1 auto !important; margin: 0 !important; }
        #view-formula #frm-inpNombreFormula { width: 100% !important; height: 38px !important; }
        #view-formula #frm-btnSaveFormula { order: 3 !important; flex: 0 0 110px !important; width: 110px !important; height: 38px !important; }

        /* CATEGORÍAS ESTIRADAS */
        #view-formula .cpp-category-selector-compact {
            display: flex !important; flex: 1 1 auto !important; width: 100% !important; gap: 12px !important;
        }
        #view-formula .cpp-category-selector-compact > label,
        #view-formula .cpp-category-selector-compact .cpp-category-option-compact {
            flex: 1 1 0 !important; display: flex !important; width: auto !important; margin: 0 !important;
        }
        #view-formula .cpp-category-btn {
            width: 100% !important; flex: 1 !important; height: 38px !important;
            display: inline-flex !important; align-items: center !important; justify-content: center !important;
        }
        #view-formula .cpp-category-icon-compact { font-size: 1.1rem !important; margin-right: 6px !important; position: relative !important; top: 1px !important; }
    .cpp-selection-wrapper {
            padding: 0 20px 16px;
        }

        .cpp-selection-box {
            padding: 14px 18px;
        }

        /* Categorías en fila - Sistema Progresivo */
        #view-formula .cpp-category-selector {
            gap: 16px !important;
        }

        #view-formula .cpp-category-btn {
            padding: 14px 12px !important;
            font-size: 0.85rem !important;
        }

        #view-formula .cpp-category-icon {
            font-size: 1.1rem !important;
        }

        /* Subcategorías */
        #view-formula .cpp-subcategory-btn {
            padding: 10px 16px !important;
            font-size: 0.85rem !important;
        }

        /* Tags */
        #view-formula .cpp-tag-btn {
            padding: 10px 16px !important;
            font-size: 0.85rem !important;
        }
}

@media (hover: none) and (pointer: coarse) {
    #view-calculator .cpp-note-icon:active .cpp-note-tooltip {
            display: block;
        }
}

@media (max-width: 420px) {
    .mpp-mundo-wrapper { padding: 16px 14px 110px; }
      .mpp-mundo-card-img { width: 82px; min-width: 82px; height: 62px; }
      .mpp-mundo-card-text h3 { font-size: 1.12rem; }
      .mpp-mundo-card-text p { font-size: 0.95rem; }
}

@media (max-width: 640px) {
    .mpp-mundo-wrapper {
        padding: 16px 14px 120px 14px;
      }

      .mpp-mundo-article-content {
        font-size: 1.02rem;
        line-height: 1.65;
      }

      .mpp-mundo-article-content .alignleft,
      .mpp-mundo-article-content .alignright {
        float: none;
        max-width: 100%;
        margin: 12px 0;
      }
}

@media (max-width: 900px) and (pointer: coarse) {
    /* La tarjeta manda: todo absoluto se posiciona respecto a ella */
      .cpp-card-recipe {
        position: relative !important;
      }

      /* Contenedor de acciones: en flujo normal (no absoluto) */
      .cpp-card-actions {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

        /* IMPORTANTE: no infinito, para que no tape el menú inferior */
        z-index: 20 !important;
      }

      /* Botones (3 puntos + estrella) mismo tamaño */
      .cpp-btn-options,
      .cpp-btn-fav {
        position: static !important; /* evita que uno se “descoloque” */
        width: 25px !important;
        height: 25px !important;
        border-radius: 999px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        background: rgba(0,0,0,0.06) !important;
        z-index: 1 !important;
      }

      /* Si el icono de los 3 puntos es SVG, que se pinte bien */
      .cpp-btn-options svg {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
      }
      .cpp-btn-options svg * {
        stroke: currentColor !important;
        fill: none !important;
      }
}

@media (max-width: 560px) {
    .mpp-page-title{ font-size: 36px; }
      .mpp-video-thumb{
        width: 132px;
        min-width: 132px;
        height: 74px;
      }
      .mpp-video-title{ font-size: 18px; }
    .mpp-video-card{ padding: 10px; }
}

@media (max-width: 520px) {
    /* Contenedor principal: menos “aire” arriba y laterales */
      .cpp-wrapper {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        padding: 14px 14px 120px;
        box-shadow: none;
      }

      /* Cabecera: más compacta */
      .cpp-header-wrapper {
        gap: 8px;
        margin-bottom: 12px;
      }

      .cpp-title-main,
      .cpp-app-title {
        font-size: 1.55rem;
        line-height: 1.05;
      }

      /* Fila de acciones (crear/favoritas/login) */
      .cpp-header-actions {
        gap: 8px;
        margin-bottom: 8px;
        justify-content: space-between;
      }

      /* Login compacto y pegado a la derecha */
      .cpp-login-btn {
        padding: 6px 12px;
        font-size: 0.78rem;
        margin-left: auto;
      }

      /* Botón principal (Crear nueva) más pequeño */
      .cpp-btn-primary-large {
        padding: 9px 14px;
        font-size: 0.82rem;
        font-weight: 700;
      }

      /* Cualquier otro botón/enlace dentro de la fila (Favoritas) */
      .cpp-header-actions button:not(.cpp-login-btn),
      .cpp-header-actions a:not(.cpp-login-btn) {
        padding: 9px 14px;
        font-size: 0.82rem;
        border-radius: 999px;
      }

      /* Ajustes finos para que “suba” todo */
      .cpp-header-search {
        margin-top: -2px;
      }
    .mpp-static-page {
        padding: 18px;
        margin: 12px 12px 90px 12px;
        border-radius: 16px;
      }

      .mpp-static-page h1 {
        font-size: 20px;
      }
}

/* ============================================================
   FIX ZOOM ANDROID - Sin cambiar font-size
   ============================================================ */
@media (max-width: 768px) {
    /* Evitar zoom automático en inputs sin cambiar tamaño de fuente */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        /* NO cambiar font-size, solo prevenir zoom */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        touch-action: manipulation;
    }
}


/* ============================================================
   FIX ANDROID (FÓRMULA) — evita desbordes/recortes en Chrome Android
   Causa: overflow horizontal mínimo en filas (drag + inputs + X) + auto text sizing
   ============================================================ */

/* 1) Evitar "font boosting" / auto text sizing (Android/Chrome) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 2) Nunca permitir overflow horizontal en la vista de fórmula */
#view-formula,
#view-formula .cpp-container,
#view-formula .cpp-box {
  max-width: 100%;
  overflow-x: hidden;
}

/* 3) Filas de harinas/ingredientes: forzar que todo quepa */
#view-formula #frm-listaHarinas > div,
#view-formula #frm-listaOtros > div,
#view-formula .mpp-formula-row {
  max-width: 100%;
  overflow: hidden;      /* corta cualquier pixel que sobresalga */
}

/* El "drag handle" en Android puede crecer y empujar el layout */
#view-formula .drag-handle {
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  line-height: 1;
}

/* Inputs dentro de flex: permitir encoger (clave en Chrome Android) */
#view-formula .frm-input-pct {
  flex: 0 0 56px !important;
  max-width: 56px !important;
}
#view-formula .frm-input-name,
#view-formula .frm-input-note {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Botón X: tamaño fijo, sin empujar */
#view-formula .frm-btn-del {
  flex: 0 0 26px;
  min-width: 26px;
}

/* 4) Botoneras "Añadir": usar wrapper flex (sin % + márgenes) */
#view-formula .mpp-btn-row {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin-top: 6px;
}

#view-formula .mpp-btn-row #frm-btnAddHarina,
#view-formula .mpp-btn-row #frm-btnAddHarinaNote,
#view-formula .mpp-btn-row #frm-btnAddOtro,
#view-formula .mpp-btn-row #frm-btnAddOtroNote {
  width: auto !important;
  max-width: none !important;
  margin-right: 0 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.mpp-app-version-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.8rem;
  color: #6b7280;
  opacity: 0.9;
}

.mpp-app-version-footer span:not(:last-child)::after {
  content: "·";
  margin-left: 10px;
}