/* Atlas: presentación común de tarjetas móviles. Solo pantalla; los estados
   y las distribuciones de cada módulo conservan sus propias reglas. */
@media screen and (max-width:700px) {
  html body {
    --atlas-mobile-card-radius:12px;
    --atlas-mobile-card-space:12px;
    --atlas-mobile-action-height:44px;
    --purchase-card-radius:var(--atlas-mobile-card-radius);
    --purchase-card-padding:var(--atlas-mobile-card-space);
    --purchase-card-gap:var(--atlas-mobile-card-space);
  }

  /* Superficies reales, incluidas las tarjetas creadas al cargar registros. */
  html body :is(
    .card,.metric,.kpi,.summary-card,.dashboard-kpi,.incident-kpi,.report-kpi,
    .temperature-kpi,.record-card,.incident-card,.review-card,.return-card,
    .supplier-card,.employee-store-card,.employee-summary-card,.entity-card,
    .format-inventory-card,.minimum-card,.notice-card,.atlas-notice-card,
    .center-store-card,.center-inventory-agenda-card,.center-task,.center-incident,
    .manager-count-status-card,.manager-stock-card,.manager-store-card,
    .production-card,.dashboard-panel,.settings-card,.form-card,
    .cleaning-card,.overview-card,.history-employee,.employee-day,
    .people>.person,.box,
    .records>.record,article.record,.inventory-period-cards>article,
    .inventory-group .inventory-item,.tenant-inventory fieldset:has([data-inventory-field]),
    .schedule-grid[data-layout="employee"] .schedule-grid-row,
    #manualLines .purchase-product,#stockLines .stock-article,.orders>.order,
    #lastStocks>.provider-stock-history,#configTable tbody tr
  ) {
    box-sizing:border-box;
    min-width:0;
    max-width:100%;
    border-radius:var(--atlas-mobile-card-radius)!important;
    overflow-wrap:anywhere;
  }
  html body :is(
    .card,.metric,.kpi,.summary-card,.dashboard-kpi,.incident-kpi,.report-kpi,
    .temperature-kpi,.record-card,.incident-card,.review-card,.return-card,
    .supplier-card,.employee-store-card,.employee-summary-card,.entity-card,
    .format-inventory-card,.minimum-card,.notice-card,.atlas-notice-card,
    .center-store-card,.center-inventory-agenda-card,.center-task,.center-incident,
    .manager-count-status-card,.manager-stock-card,.manager-store-card,
    .production-card,.dashboard-panel,.settings-card,.form-card,
    .cleaning-card,.overview-card,.history-employee,.employee-day,
    .people>.person,.box,
    .records>.record,article.record,.inventory-period-cards>article,
    .inventory-group .inventory-item,.tenant-inventory fieldset:has([data-inventory-field]),
    .schedule-grid[data-layout="employee"] .schedule-grid-row,
    #manualLines .purchase-product,#stockLines .stock-article,.orders>.order,
    #lastStocks>.provider-stock-history,#configTable tbody tr
  ):not(:is(.dirty,.is-positioning,.selected,.active,.invalid,.incomplete,.has-error,[aria-selected="true"],[aria-pressed="true"],:focus-visible)) {box-shadow:none!important}

  /* Tarjetas sencillas: mismo espacio interior, sin tocar sus columnas. */
  html body :is(
    .card,.metric,.kpi,.summary-card,.dashboard-kpi,.incident-kpi,.report-kpi,
    .temperature-kpi,.record-card,.incident-card,.review-card,.return-card,
    .employee-store-card,.employee-summary-card,
    .format-inventory-card,.notice-card,.atlas-notice-card,
    .center-store-card,.center-inventory-agenda-card,.center-task,.center-incident,
    .manager-count-status-card,.manager-stock-card,.manager-store-card,
    .production-card,.dashboard-panel,.settings-card,.form-card,
    .cleaning-card,.overview-card,.history-employee,.employee-day,
    .people>.person,.box,.records>.record,article.record,
    .schedule-grid[data-layout="employee"] .schedule-grid-row,
    #stockLines .stock-article,.orders>.order
  ) { padding:var(--atlas-mobile-card-space)!important; }

  /* Tarjetas compuestas: el relleno pertenece al contenido, no a la carcasa. */
  html body #app #manualLines .purchase-product-body,
  html body #app #entityCards[data-entity-kind] .entity-card>summary,
  html body #app #entityCards[data-entity-kind] .entity-card-form,
  html body #app .minimum-card>header,
  html body #app .supplier-card>summary,
  html body #app .supplier-card>form {
    padding:var(--atlas-mobile-card-space)!important;
  }
  html body #app #configTable tbody tr {padding:0 var(--atlas-mobile-card-space)!important}
  html body #app #configTable tbody td {padding-block:var(--atlas-mobile-card-space)!important}
  html body #app #entityCards[data-entity-kind] .entity-card {
    border-radius:var(--atlas-mobile-card-radius)!important;
  }

  html body .box {margin-block-start:var(--atlas-mobile-card-space)}

  /* Solo listas de tarjetas: las filas de conteo y los siete días son propios. */
  html body :is(
    .cards,.dashboard-kpis,.dashboard-grid,.employee-card-grid,.employee-cards,
    .supplier-grid,.notice-grid,.incident-kpis,.kpis,.report-kpis,.cleaning-kpis,
    .center-store-grid,.center-task-list,.manager-control-kpis,.center-manager-kpis,
    .overview-cards,.people,.columns:has(>.box),.inventory-period-cards,.review-list,
    .schedule-grid[data-layout="employee"] .schedule-grid-rows,
    #entityCards,#manualLines,#stockLines,#lastStocks,.orders,
    #stockProgress,#summary,#receivedOrdersSummary
  ) {gap:var(--atlas-mobile-card-space)!important}

  /* Acciones de tarjeta: altura táctil común y texto que cabe en el botón. */
  html body :is(
    .card-actions,.order-actions,.supplier-actions,.record-actions,
    .production-card-actions,.review-actions,.center-task-actions,
    .employee-card-actions,.inventory-schedule-actions
  ) :is(button,a),
  html body :is(.card,.employee-summary-card,.center-store-card,.review-card,.notice-card)>button,
  html body #app #manualLines .purchase-add,
  html body #app #manualLines .order-source-stepper :is(button,input),
  html body .inventory-period-cards article>button {
    min-height:var(--atlas-mobile-action-height)!important;
    box-sizing:border-box;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  html body :is(.card-actions,.order-actions,.supplier-actions,.record-actions,.production-card-actions,.review-actions,.center-task-actions,.employee-card-actions) {
    gap:8px;
    flex-wrap:wrap;
  }
}