/*
AMELIAPOS_R11D_FIX2_UI_ANDROID_R1FIX4
Alcance: ficha de producto Android / móvil.
Sólo presentación responsive. No altera lógica, API, IndexedDB, tickets,
caja, recetas, inventario, precios, businessMode ni datos.
*/
@media (max-width: 760px) {
  /* Base: permitir que grid/flex realmente encojan dentro del viewport. */
  #productAdminForm,
  #productAdminForm .amelia-product-scroll,
  #productAdminForm .amelia-product-section,
  #productAdminForm .amelia-product-section-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #productAdminForm *,
  #productAdminForm *::before,
  #productAdminForm *::after {
    box-sizing: border-box;
  }

  #productAdminForm .amelia-product-scroll {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #productAdminForm .amelia-product-section,
  #productAdminForm .amelia-product-section > *,
  #productAdminForm .amelia-product-section-content > * {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Acordeones: una sola flecha, sin controles superpuestos. */
  #productAdminForm details.amelia-product-section > summary {
    list-style: none !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    grid-template-areas:
      "ui_title ui_title"
      "ui_toggle ui_state" !important;
    column-gap: 10px !important;
    row-gap: 5px !important;
    align-items: center !important;
    position: relative !important;
    min-height: 78px !important;
    padding: 14px !important;
  }

  #productAdminForm details.amelia-product-section > summary::-webkit-details-marker {
    display: none !important;
  }

  #productAdminForm details.amelia-product-section > summary::marker {
    content: "" !important;
  }

  #productAdminForm details.amelia-product-section > summary > [class*="caret"],
  #productAdminForm details.amelia-product-section > summary [class*="section-caret"],
  #productAdminForm details.amelia-product-section > summary > [class*="toggle"] {
    display: none !important;
  }

  #productAdminForm details.amelia-product-section > summary::before {
    content: "›";
    grid-area: ui_toggle;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    transform: rotate(0deg);
    transition: transform .16s ease;
    background: rgba(15, 42, 61, .055);
    color: inherit;
  }

  #productAdminForm details.amelia-product-section[open] > summary::before {
    transform: rotate(90deg);
  }

  #productAdminForm .amelia-product-section-title {
    grid-area: ui_title !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  #productAdminForm .amelia-product-section-title > strong,
  #productAdminForm .amelia-product-section-title > small {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #productAdminForm .amelia-product-section-title > small {
    line-height: 1.35 !important;
  }

  #productAdminForm .amelia-product-section-state {
    grid-area: ui_state !important;
    justify-self: start !important;
    align-self: center !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
  }

  #productAdminForm .amelia-product-section-content {
    padding: 14px !important;
  }

  /* Inputs/selects: nunca más anchos que su contenedor. */
  #productAdminForm input:not([type="checkbox"]):not([type="radio"]),
  #productAdminForm select,
  #productAdminForm textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #productAdminForm button,
  #productAdminForm .button {
    max-width: 100%;
    min-width: 0;
  }

  /* Grillas de formulario: una columna cuando el ancho móvil no alcanza. */
  #productAdminForm :is(
    .form-grid,
    .amelia-product-grid,
    .product-form-grid,
    .recipe-grid,
    .recipe-admin-grid,
    .production-grid,
    .product-production-grid,
    .cost-grid,
    .production-cost-grid,
    .r205k-use-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Roles de restaurante. */
  #productAdminForm .r205k-use-grid {
    gap: 10px !important;
  }

  #productAdminForm .r205k-use-card {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #productAdminForm .r205k-use-card > span,
  #productAdminForm .r205k-use-card strong,
  #productAdminForm .r205k-use-card small {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Receta: la fila producto + cantidad/unidad no puede salir del viewport. */
  #productAdminForm #productRecipeEditor,
  #productAdminForm #productRecipeEditor > *,
  #productAdminForm .recipe-admin,
  #productAdminForm .recipe-admin > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #productAdminForm :is(
    .recipe-row,
    .recipe-admin-row,
    .recipe-component-row,
    .recipe-component-line,
    .recipe-line,
    [data-recipe-row]
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #productAdminForm :is(
    .recipe-row,
    .recipe-admin-row,
    .recipe-component-row,
    .recipe-component-line,
    .recipe-line,
    [data-recipe-row]
  ) > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #productAdminForm [data-recipe-component],
  #productAdminForm [data-recipe-qty],
  #productAdminForm [data-recipe-unit] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #productAdminForm .restaurant-recipe-changeable {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #productAdminForm .restaurant-changeable-check,
  #productAdminForm .restaurant-changeable-category {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Resúmenes de costo/rendimiento: separar etiqueta y valor. */
  #productAdminForm :is(
    .cost-summary,
    .recipe-cost-summary,
    .production-cost-summary,
    .recipe-summary,
    .production-summary
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #productAdminForm :is(
    .cost-summary,
    .recipe-cost-summary,
    .production-cost-summary,
    .recipe-summary,
    .production-summary
  ) > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #productAdminForm :is(
    .cost-summary,
    .recipe-cost-summary,
    .production-cost-summary,
    .recipe-summary,
    .production-summary
  ) > * > :is(span, small, strong, b) {
    margin-inline: 0 !important;
  }

  /* Grupos de elección: botones compactos y sin partir texto. */
  #productAdminForm #productChoiceGroupsEditor,
  #productAdminForm details[data-product-section="choiceGroups"] .amelia-product-section-content {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #productAdminForm #productChoiceGroupsEditor :is(header, .toolbar, .actions, [class*="head"], [class*="toolbar"], [class*="actions"]),
  #productAdminForm details[data-product-section="choiceGroups"] :is(header, .toolbar, .actions, [class*="head"], [class*="toolbar"], [class*="actions"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #productAdminForm #productChoiceGroupsEditor button,
  #productAdminForm details[data-product-section="choiceGroups"] .amelia-product-section-content button {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 9px 14px !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    flex: 0 0 auto !important;
  }

  #productAdminForm #productChoiceGroupsEditor :is(p, small, span, strong),
  #productAdminForm details[data-product-section="choiceGroups"] .amelia-product-section-content :is(p, small, span, strong) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  /* Adicionales y otros bloques reutilizables. */
  #productAdminForm .r205k-linked-addons,
  #productAdminForm .r205k-addon-assign-list,
  #productAdminForm .r205k-addon-assignment,
  #productAdminForm .r205k-addon-assignment-main,
  #productAdminForm .r205k-addon-price {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #productAdminForm .r205k-addon-assignment {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  #productAdminForm .r205k-addon-price {
    grid-column: 2 !important;
    width: 100% !important;
  }

  /* Textos largos nunca deben forzar ancho extra. */
  #productAdminForm :is(
    p, small, strong, b, label, .help, .hint, .description,
    .r205k-use-help, .r205k-use-intro
  ) {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  #productAdminForm .amelia-product-scroll {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #productAdminForm details.amelia-product-section > summary {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    padding: 12px !important;
  }

  #productAdminForm details.amelia-product-section > summary::before {
    width: 38px;
    height: 38px;
  }

  #productAdminForm .amelia-product-section-content {
    padding: 12px !important;
  }

  #productAdminForm #productChoiceGroupsEditor button,
  #productAdminForm details[data-product-section="choiceGroups"] .amelia-product-section-content button {
    padding-inline: 12px !important;
  }
}


/* =========================================================
   R1FIX4 · EXPLICIT DOM INDICATOR
   La flecha deja de depender de ::before/::after.
   Un JS puramente visual inserta un <span> real por summary.
   ========================================================= */
@media (max-width: 760px) {
  #productAdminForm details.amelia-product-section > summary {
    list-style: none !important;
    display: block !important;
    position: relative !important;
    min-height: 78px !important;
    padding: 14px 14px 14px 70px !important;
  }

  #productAdminForm details.amelia-product-section > summary::-webkit-details-marker {
    display: none !important;
  }

  #productAdminForm details.amelia-product-section > summary::marker {
    content: "" !important;
  }

  /* Anular pseudo-flechas anteriores o de otras capas. */
  #productAdminForm details.amelia-product-section > summary::before,
  #productAdminForm details.amelia-product-section > summary::after {
    content: none !important;
    display: none !important;
  }

  /* Ocultar indicadores heredados conocidos, nunca el indicador R1FIX4. */
  #productAdminForm details.amelia-product-section > summary > :is(
    .r205k-section-caret,
    [class*="chevron"],
    [class*="Chevron"],
    [class*="caret"],
    [class*="Caret"],
    [data-chevron],
    [data-caret]
  ):not(.amelia-r11d-indicator) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #productAdminForm details.amelia-product-section > summary > .amelia-r11d-indicator {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    place-items: center !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: rgba(15, 42, 61, .055) !important;
    color: #22384e !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    transform: translateY(-50%) rotate(0deg) !important;
    transform-origin: 50% 50% !important;
    transition: transform .16s ease !important;
    box-shadow: none !important;
    z-index: 5 !important;
  }

  #productAdminForm details.amelia-product-section[open] > summary > .amelia-r11d-indicator {
    transform: translateY(-50%) rotate(90deg) !important;
  }

  #productAdminForm .amelia-product-section-title,
  #productAdminForm .amelia-product-section-state {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #productAdminForm .amelia-product-section-title {
    margin-bottom: 7px !important;
  }
}

@media (max-width: 420px) {
  #productAdminForm details.amelia-product-section > summary {
    padding: 12px 12px 12px 64px !important;
  }

  #productAdminForm details.amelia-product-section > summary > .amelia-r11d-indicator {
    left: 12px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
  }
}