/* ==========================================================================
   ShepherdOS · capa responsive (móvil)
   Se carga al final del <head> en includes/layout-start.php, después de los
   temas y de sos-type.css, para corregir el layout en pantallas pequeñas.
   Las tablas se convierten en tarjetas con assets/js/responsive.js, que
   copia el texto de cada <th> a data-label en cada <td>.
   Para excluir una tabla: class="no-stack" (se desplaza en horizontal).
   ========================================================================== */

/* ── Base: nada debe ensanchar la página ──────────────────────────────── */
.main-panel img,
.main-panel video,
.main-panel iframe,
.main-panel canvas { max-width: 100%; }
.main-panel pre { overflow-x: auto; }
.card { min-width: 0; }

@media (max-width: 768px) {
  /* ── Nada más ancho que la pantalla ────────────────────────────────── */
  html, body { max-width: 100%; overflow-x: hidden; }
  .app-shell, .main-panel { max-width: 100vw; }
  .main-panel { overflow-x: hidden !important; }
  .topbar { width: 100%; max-width: 100%; box-sizing: border-box; }
  .topbar-avatar { margin-left: 2px !important; }

  /* ── Topbar: el buscador se encoge para que quepan los iconos ──────── */
  .topbar {
    padding-left:  60px !important;
    padding-right: 10px !important;
    gap: 8px !important;
  }
  .topbar-search { flex: 1 1 auto !important; min-width: 0; }
  .topbar-search-input { width: 100% !important; min-width: 0; }
  .topbar-spacer { display: none !important; }
  .topbar-right { flex-shrink: 0; gap: 2px !important; }
  .avatar-dropdown { right: 0; max-width: calc(100vw - 20px); }

  /* ── Página ─────────────────────────────────────────────────────────── */
  main.page, .page { padding: 14px 12px 24px !important; }
  .section-head { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .section-title { font-size: 22px !important; }
  .card { padding: 14px !important; }
  .card-title { font-size: 20px !important; }

  /* Evita el zoom automático de iOS al enfocar campos */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px !important; }

  /* ── Toolbars y botones ─────────────────────────────────────────────── */
  .toolbar { flex-direction: column; align-items: stretch !important; gap: 10px; }
  .toolbar-left, .toolbar-right { min-width: 0; }
  .toolbar-right { display: flex; flex-wrap: wrap; gap: 8px; }
  .toolbar-right > .btn,
  .toolbar-right > a.btn { flex: 1 1 140px; width: auto; }
  /* min-width:auto = nunca más angosto que su texto (si es flex item) */
  .btn-inline { min-width: auto !important; }

  /* Texto de botones: menos espaciado y, si no cabe, salta de línea
     dentro del botón en lugar de salirse */
  .btn,
  .btn-ver, .btn-editar, .btn-eliminar {
    max-width: 100%;
    height: auto;
    letter-spacing: .04em !important;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }

  /* ── Filtros ────────────────────────────────────────────────────────── */
  .calendar-filters { flex-direction: column; align-items: stretch !important; gap: 10px; }
  .calendar-filters .form-control { max-width: none !important; width: 100%; }
  .calendar-filters .btn { width: 100%; }
  .form-label-check { display: flex; align-items: center; gap: 8px; }

  /* ── Modales: casi pantalla completa ────────────────────────────────── */
  .modal-dialog {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
  }
  .modal-body { max-height: calc(100dvh - 140px) !important; }
  .modal-actions { flex-direction: column-reverse; align-items: stretch; }
  .modal-actions .btn { width: 100%; }

  /* ── Grids de columnas fijas en vistas concretas ────────────────────── */
  #planCards { grid-template-columns: 1fr !important; }
  .field-header { display: none !important; }
  .field-row { grid-template-columns: 1fr auto auto !important; }
  .field-row > :first-child { grid-column: 1 / -1; }

  /* ── Pestañas que no caben: desplazamiento horizontal ───────────────── */
  .gp-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gp-tab { white-space: nowrap; flex-shrink: 0; }

  /* ── Tablas sin apilar: desplazamiento horizontal dentro de su caja ── */
  .page table:not(.is-stacked),
  .modal-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-actions { gap: 6px; }

  /* ── Tablas apiladas: cada fila es una tarjeta ──────────────────────── */
  table.is-stacked,
  table.is-stacked tbody { display: block; width: 100% !important; max-width: 100% !important; }
  table.is-stacked { background: transparent !important; border: 0 !important; }
  table.is-stacked thead { display: none; }

  table.is-stacked tbody tr {
    display: block;
    margin: 0 0 10px;
    padding: 4px 0;
    background: var(--color-surface, #fff) !important;
    border: 1px solid var(--color-rule, #e5e7eb);
    border-radius: var(--sos-r, 12px);
    overflow: hidden;
  }
  table.is-stacked tbody tr:last-child { margin-bottom: 0; }

  table.is-stacked tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: auto !important;
    min-width: 0;
    padding: 8px 14px !important;
    border: 0 !important;
    border-top: 1px solid var(--color-divider, rgba(0,0,0,.06)) !important;
    background: transparent !important;
    text-align: right !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  table.is-stacked tbody td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 38%;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--color-muted, #6b7280);
  }
  table.is-stacked tbody td > * { max-width: 100%; }

  /* Primera celda = título de la tarjeta (sin etiqueta, a todo lo ancho) */
  table.is-stacked tbody td.cell-head {
    display: block;
    border-top: 0 !important;
    text-align: left !important;
    padding-top: 10px !important;
    font-size: 15px;
  }
  table.is-stacked tbody td.cell-head::before { content: none; }
  /* Celdas con textarea/select/input: etiqueta arriba, campo a todo lo ancho */
  table.is-stacked tbody td.cell-block { display: block; text-align: left !important; }
  table.is-stacked tbody td.cell-block::before {
    display: block;
    max-width: none;
    margin-bottom: 6px;
  }
  table.is-stacked tbody td.cell-block textarea,
  table.is-stacked tbody td.cell-block select,
  table.is-stacked tbody td.cell-block input { width: 100% !important; max-width: 100%; }
  table.is-stacked tbody td.cell-block > div { justify-content: flex-end; flex-wrap: wrap; }

  /* Columna sin título en el encabezado: sin etiqueta, a todo lo ancho */
  table.is-stacked tbody td[data-label=""]::before { content: none; }
  table.is-stacked tbody td[data-label=""]:not(.cell-actions) { display: block; text-align: left !important; }

  /* Celdas de acciones: los botones ocupan el ancho y, si no caben en una
     fila, pasan a la siguiente (nunca se encogen por debajo de su texto) */
  table.is-stacked tbody td.cell-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    text-align: left !important;
    padding-bottom: 12px !important;
  }
  table.is-stacked tbody td.cell-actions::before { content: none; }
  table.is-stacked tbody td.cell-actions > div,
  table.is-stacked tbody td.cell-actions .table-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
    flex: 1 1 100%;
    width: 100%;
  }
  table.is-stacked tbody td.cell-actions a,
  table.is-stacked tbody td.cell-actions button,
  table.is-stacked tbody td.cell-actions .btn {
    flex: 1 1 auto;
    width: auto !important;
    min-width: auto !important;
    max-width: 100%;
    min-height: 38px;
    margin: 0 !important;
    padding: 8px 12px !important;
    white-space: nowrap;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Celdas vacías, mensajes ("Cargando…") y separadores de grupo */
  table.is-stacked tbody td.cell-empty { display: none; }
  table.is-stacked tbody td.cell-full {
    display: block;
    border-top: 0 !important;
    text-align: left !important;
  }
  table.is-stacked tbody td.cell-full::before { content: none; }
  table.is-stacked tbody tr.row-full { padding: 0; }
  table.is-stacked tfoot,
  table.is-stacked tfoot tr,
  table.is-stacked tfoot td,
  table.is-stacked tfoot th { display: block; text-align: left !important; }
}

/* ── Acciones como iconos ────────────────────────────────────────────
   responsive.js inserta <svg class="act-svg"> y envuelve el texto en
   <span class="act-label">. En escritorio solo se ve el texto; en móvil
   solo el icono. El texto se oculta con clip (no con font-size:0) para que
   el tamaño mínimo de letra de Android no lo vuelva a mostrar. */
.act-icon .act-svg { display: none; }

@media (max-width: 768px) {
  table.is-stacked tbody td.cell-actions,
  table.is-stacked tbody td.cell-actions > div,
  table.is-stacked tbody td.cell-actions .table-actions { justify-content: flex-end; }

  table.is-stacked tbody td .act-icon {
    position: relative;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
  }
  table.is-stacked tbody td .act-icon .act-svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
  table.is-stacked tbody td .act-icon .act-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  /* Contador ("Ver notas (3)") como globito */
  table.is-stacked tbody td .act-icon[data-act-count] { overflow: visible !important; }
  table.is-stacked tbody td .act-icon[data-act-count]::after {
    content: attr(data-act-count);
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
  }
  /* Botones-enlace (sin fondo propio): borde para que se vean como botón */
  table.is-stacked tbody td button.act-icon:not(.btn) {
    border: 1px solid var(--color-rule, #d4cfc4) !important;
    background: var(--color-surface, #fff) !important;
    color: var(--color-text, #111) !important;
    text-decoration: none !important;
  }
  /* Eliminar siempre en rojo, aunque el botón sea neutro */
  table.is-stacked tbody td .act-icon[title^="Eliminar"],
  table.is-stacked tbody td .act-icon[title^="Borrar"] {
    color: #b91c1c !important;
    background: #fee2e2 !important;
    border-color: #fecaca !important;
  }
}

/* Modo oscuro */
@media (max-width: 768px) {
  [data-theme="dark"] table.is-stacked tbody tr {
    background: var(--color-surface) !important;
    border-color: var(--color-rule);
  }
}