/* Tarjetas públicas + editores del panel — adaptación móvil */

/* ── Vista pública (pagina_tarjetapersonal.php) ── */
body.df-tp-public-page {
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body.df-tp-public-page .container,
body.df-tp-public-page .df-gm-page-shell {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}
.df-user-content,
.tp-desc-comercio,
.app-desc-inner,
.accordion-one,
.card-premium {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}
.df-user-content img,
.df-user-content iframe,
.df-user-content video,
.df-user-content embed,
.app-desc-inner img,
.accordion-one img,
.accordion-one iframe,
.accordion-one video,
.card-premium img {
    max-width: 100% !important;
    height: auto !important;
}
.df-user-content table,
.accordion-one table,
.card-premium table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.df-user-content pre,
.accordion-one pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
}

body.df-tp-public-page .app-title {
    font-size: clamp(1.25rem, 5.5vw, 1.8rem);
    line-height: 1.2;
    padding: 0 12px;
    word-break: break-word;
}
body.df-tp-public-page .app-category {
    font-size: clamp(0.68rem, 2.8vw, 0.8rem);
    letter-spacing: 0.8px;
    padding: 0 10px;
}
body.df-tp-public-page .app-logo-wrapper {
    width: clamp(100px, 28vw, 150px);
    height: clamp(100px, 28vw, 150px);
    margin-top: clamp(-50px, -14vw, -75px);
}
body.df-tp-public-page .app-banner {
    height: clamp(200px, 52vw, 340px);
}
body.df-tp-public-page .app-banner--placeholder {
    height: clamp(200px, 52vw, 340px) !important;
}
body.df-tp-public-page .app-header-container {
    border-bottom-left-radius: clamp(20px, 6vw, 40px);
    border-bottom-right-radius: clamp(20px, 6vw, 40px);
}
body.df-tp-public-page .card-premium {
    padding: clamp(14px, 4vw, 20px);
}
body.df-tp-public-page .card-title-app {
    font-size: clamp(1rem, 4.2vw, 1.2rem);
    flex-wrap: wrap;
}

.accordion-one .card {
    width: 100% !important;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
/* Mientras se edita con Summernote, no recortar dropdowns (fuentes/emojis) */
.accordion-one .card:has(.note-editor),
.accordion-one .card-body:has(.note-editor),
.card:has(.note-editor),
.card-body:has(.note-editor),
.gourmet-form-card:has(.note-editor) {
    overflow: visible !important;
}
.accordion-one .card-header,
.accordion-one .card-body {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.accordion-one .card-body:has(.note-editor) {
    overflow: visible !important;
}
.accordion-one .card-header h5,
.accordion-one .card-title {
    word-break: break-word;
    line-height: 1.35;
}
.accordion-one .precio-ia,
.accordion-one .float-right {
    float: none !important;
    display: block;
    text-align: right;
    margin-top: 4px;
}

@media (max-width: 575.98px) {
    body.df-tp-public-page .app-desc-block {
        padding: 0 10px;
    }
    body.df-tp-public-page .app-desc-inner {
        padding: 14px 12px;
        font-size: 0.92rem;
    }
    body.df-gourmet .df-gm-brand-name {
        font-size: clamp(1.2rem, 5.5vw, 1.65rem);
        padding: 0 8px;
    }
    body.df-gourmet .df-gm-section-title {
        font-size: clamp(1.35rem, 6vw, 2rem);
        letter-spacing: 1px;
        line-height: 1.1;
        word-break: break-word;
    }
    body.df-gourmet .df-gm-dishes {
        gap: 8px;
        padding: 10px 8px 20px;
    }
    body.df-gourmet .df-gm-qr-panel .btn-qr-download {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    body.df-gourmet .df-gm-brand-bar {
        padding: 18px 12px 14px;
    }
    body.df-gourmet .df-gm-page-shell {
        max-width: 100%;
        overflow-x: hidden;
    }
    body.df-gourmet .df-gm-dish-name {
        font-size: 0.72rem;
    }
}

@media (max-width: 380px) {
    body.df-gourmet .df-gm-dishes {
        grid-template-columns: 1fr;
    }
}

/* ── Panel cliente (fragmentos en index.php) ── */
.cuadrocentralcontenido {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}
.cuadrocentralcontenido .row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}
.cuadrocentralcontenido [class*="col-"] {
    padding-left: 12px;
    padding-right: 12px;
    min-width: 0;
}
.cuadrocentralcontenido .card,
.cuadrocentralcontenido .card-body,
.cuadrocentralcontenido section,
.cuadrocentralcontenido form {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.cuadrocentralcontenido img,
.cuadrocentralcontenido video,
.cuadrocentralcontenido iframe {
    max-width: 100%;
    height: auto;
}
.cuadrocentralcontenido .note-editor {
    max-width: 100%;
    overflow: visible !important;
    position: relative;
    z-index: 2;
}
.cuadrocentralcontenido .note-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    max-width: 100%;
    overflow: visible !important;
    position: relative;
    z-index: 50;
}
@media (max-width: 767.98px) {
    .cuadrocentralcontenido .note-toolbar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}
.cuadrocentralcontenido .note-toolbar .note-btn-group {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0;
    float: none !important;
    width: auto !important;
    margin: 0 2px 0 0 !important;
    position: relative;
    z-index: 51;
}
.cuadrocentralcontenido .note-editing-area,
.cuadrocentralcontenido .note-editable {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
    position: relative;
    z-index: 1;
}
.cuadrocentralcontenido .form-control,
.cuadrocentralcontenido input,
.cuadrocentralcontenido textarea,
.cuadrocentralcontenido select {
    max-width: 100%;
    box-sizing: border-box;
}

#df-editor-pro-root #constructorTabs,
#df-editor-legacy-root #constructorTabs,
#df-gourmet-wizard-root #constructorTabs,
#df-gourmet-wizard-root #constructorTabs.gourmet-wizard-tabs {
    flex-wrap: wrap;
}
#df-gourmet-wizard-root .gourmet-form-card .card-header {
    flex-wrap: wrap;
    gap: 8px;
}
#df-gourmet-wizard-root .gourmet-form-card .card-header h2 {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
#df-gourmet-wizard-root .gourmet-form-card .card-header .gourmet-cat-toggle {
    white-space: normal;
    text-align: left;
    word-break: break-word;
}
#df-gourmet-wizard-root .gourmet-form-card .card-header .btn-outline-danger {
    flex-shrink: 0;
}
#df-gourmet-wizard-root .gourmet-card,
#df-gourmet-wizard-root .item-plato-inactivo {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
#df-gourmet-wizard-root .precio-gourmet {
    float: none !important;
    display: inline-block;
}

.df-pro-wizard {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}
.df-pro-wizard .wizard-steps {
    flex-wrap: wrap;
    border-radius: 20px !important;
    gap: 6px;
    padding: 8px !important;
}
.df-pro-wizard .section-title {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    flex-wrap: wrap;
}
.df-pro-wizard .card {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .cuadrocentralcontenido {
        padding-left: max(6px, env(safe-area-inset-left, 0px));
        padding-right: max(6px, env(safe-area-inset-right, 0px));
    }
    #df-editor-pro-root #constructorTabs,
    #df-editor-legacy-root #constructorTabs,
    #df-gourmet-wizard-root #constructorTabs {
        flex-direction: column;
    }
    #df-editor-pro-root #constructorTabs .nav-item,
    #df-editor-legacy-root #constructorTabs .nav-item,
    #df-gourmet-wizard-root #constructorTabs .nav-item {
        width: 100% !important;
        margin: 0 0 8px 0 !important;
    }
    #df-editor-pro-root #constructorTabs .nav-link,
    #df-editor-legacy-root #constructorTabs .nav-link,
    #df-gourmet-wizard-root #constructorTabs .nav-link {
        font-size: 0.95rem !important;
        white-space: normal;
        line-height: 1.3;
        padding: 10px 12px;
    }
    #df-editor-pro-root .card-body.p-5,
    #df-editor-legacy-root .card-body.p-5,
    #df-gourmet-wizard-root .card-body.p-5 {
        padding: 1.15rem !important;
    }
    #df-gourmet-wizard-root .card-header h1 {
        font-size: 1.35rem;
        line-height: 1.25;
        word-break: break-word;
    }
    .df-pro-wizard .wizard-steps {
        flex-direction: column;
        border-radius: 16px !important;
    }
    .df-pro-wizard .step-item {
        flex: none;
        width: 100%;
        font-size: 13px;
        padding: 10px 8px;
        white-space: normal;
        line-height: 1.3;
    }
    .df-pro-wizard .card {
        padding: 16px !important;
    }
    .df-pro-wizard .btn-next,
    .df-pro-wizard .btn-prev {
        width: 100%;
        margin: 4px 0 !important;
        display: block;
    }
    .cuadrocentralcontenido .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 8px;
    }
    #df-gourmet-wizard-root .gourmet-form-card .card-header {
        flex-direction: column;
        align-items: stretch !important;
    }
    #df-gourmet-wizard-root .gourmet-form-card .card-header .btn-outline-danger {
        align-self: flex-end;
    }
    #df-gourmet-wizard-root .gourmet-header {
        font-size: 0.95rem;
        letter-spacing: 0.5px;
        word-break: break-word;
    }
    #df-gourmet-wizard-root > .row > .col-lg-12 .card-header button {
        width: 100%;
        white-space: normal;
        margin-top: 8px;
    }
    #df-editor-legacy-root .card-header,
    #df-editor-pro-root .card-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    #df-editor-legacy-root .card-header button,
    #df-editor-pro-root .card-header button {
        width: 100%;
        white-space: normal;
    }
}

/* Summernote UX: dropdowns por encima del texto/imagenes */
.note-editor.note-frame {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: visible !important;
  position: relative;
  z-index: 2;
}
.note-editor.note-frame .note-editing-area {
  overflow: hidden;
  border-radius: 0 0 12px 12px;
  position: relative;
  z-index: 1;
}
.note-editor.note-frame .note-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  margin: 0;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  overflow: visible !important;
  position: relative;
  z-index: 50;
}
@media (max-width: 767.98px) {
  .note-editor.note-frame .note-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}
/* Tooltips de Bootstrap/Summernote no deben capturar el mouse (causa parpadeo en PC) */
.tooltip,
.bs-tooltip-top,
.bs-tooltip-bottom,
.bs-tooltip-left,
.bs-tooltip-right,
.note-tooltip {
  pointer-events: none !important;
  display: none !important;
}
.note-editor .dropdown-menu,
.note-editor .note-dropdown-menu,
.note-editor .note-color-palette,
.note-fontsize-menu,
.df-emoji-dropdown {
  z-index: 10060 !important;
  /* position handled by Bootstrap + df-sn-menu-float */
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}
.df-emoji-dropdown {
  min-width: 300px !important;
}
.note-editor.note-frame .note-toolbar .note-btn-group {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0;
  float: none !important;
  margin: 0 2px 0 0 !important;
  width: auto !important;
  position: relative;
  z-index: 51;
}
.note-editor.note-frame .note-toolbar .note-btn {
  padding: 6px 9px;
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  border-color: #e2e8f0;
  background: #fff;
}
.note-editor.note-frame .note-editing-area .note-editable {
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.35;
  min-height: 200px;
}
.note-editor.note-frame .note-editing-area .note-editable p,
.note-editor.note-frame .note-editing-area .note-editable div {
  margin: 0 0 0.45em 0;
  line-height: inherit;
}
.note-editor.note-frame .note-editing-area .note-editable p:last-child,
.note-editor.note-frame .note-editing-area .note-editable div:last-child {
  margin-bottom: 0;
}
.app-desc-inner,
.accordion-one .card-body,
.df-user-content {
  line-height: 1.4;
}
.app-desc-inner p,
.app-desc-inner div,
.accordion-one .card-body p,
.df-user-content p {
  margin: 0 0 0.5em 0;
  line-height: inherit;
}
@media (max-width: 767.98px) {
  .note-editor.note-frame .note-toolbar .note-btn {
    min-width: 38px;
    height: 38px;
  }
  .note-editor.note-frame .note-editing-area .note-editable {
    font-size: 16px;
  }
}

/* Imagenes en secciones desplegables (contenido HTML) */
.accordion-one .card-body,
.df-user-content,
.app-desc-inner {
  overflow: hidden;
}
.accordion-one .card-body::after,
.df-user-content::after,
.app-desc-inner::after {
  content: "";
  display: table;
  clear: both;
}
.accordion-one .card-body img,
.df-user-content img,
.app-desc-inner img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 8px 0;
}
.accordion-one .card-body img.df-img-full,
.df-user-content img.df-img-full {
  width: 100%;
  display: block;
  float: none;
}
.accordion-one .card-body img.df-img-half,
.df-user-content img.df-img-half {
  width: 48%;
  max-width: 48%;
  display: inline-block;
  vertical-align: top;
  margin: 6px 1%;
}
.accordion-one .card-body img.df-img-left,
.df-user-content img.df-img-left,
.accordion-one .card-body img.note-float-left,
.df-user-content img.note-float-left {
  float: left;
  width: 46%;
  max-width: 46%;
  margin: 4px 12px 8px 0;
}
.accordion-one .card-body img.df-img-right,
.df-user-content img.df-img-right,
.accordion-one .card-body img.note-float-right,
.df-user-content img.note-float-right {
  float: right;
  width: 46%;
  max-width: 46%;
  margin: 4px 0 8px 12px;
}
@media (max-width: 767.98px) {
  .accordion-one .card-body img.df-img-half,
  .accordion-one .card-body img.df-img-left,
  .accordion-one .card-body img.df-img-right,
  .accordion-one .card-body img.note-float-left,
  .accordion-one .card-body img.note-float-right,
  .df-user-content img.df-img-half,
  .df-user-content img.df-img-left,
  .df-user-content img.df-img-right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    margin: 8px 0;
  }
}
/* Menus Summernote flotantes (fuente/emoji) encima del contenido */
.dropdown-menu.df-sn-menu-float {
  position: fixed !important;
  z-index: 20050 !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.2) !important;
  max-height: 320px;
  overflow-y: auto;
}
.df-emoji-panel {
  display: none;
  min-width: 300px;
  max-width: 92vw;
  padding: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  z-index: 20060;
}
.df-emoji-panel.show { display: block; }

/* DF summernote dropdown force visible */
.note-editor.note-frame,
.note-editor.note-frame .note-toolbar,
.cuadrocentralcontenido .note-editor,
.cuadrocentralcontenido .note-toolbar {
  overflow: visible !important;
}
.note-editor .note-btn-group.show {
  z-index: 20050 !important;
}
.note-editor .dropdown-menu.show,
.dropdown-menu.df-sn-menu-float {
  z-index: 20060 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important;
}