/* movil.css — capa móvil común (ver movil.js). Solo actúa por debajo de 700 px:
 * en escritorio no cambia nada. Los !important son a propósito: las ventanas
 * flotantes y algunas pantallas fijan posición/tamaño con estilos en línea. */

#mv-nav, #mv-mas { display: none; }

@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
  html.mv-embed body { padding-bottom: 0 !important; }

  /* La barra superior de apps se sustituye por la inferior */
  nav.app-switch { display: none !important; }

  /* --- Barra inferior --- */
  #mv-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: #14212b; padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 10px rgba(0,0,0,.25);
  }
  #mv-nav button {
    flex: 1 1 0; min-width: 0; border: 0; background: none; color: #9fb3c2;
    font: 600 10px -apple-system, "Segoe UI", Roboto, sans-serif;
    padding: 7px 1px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px;
    border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #mv-nav button span { font-size: 19px; line-height: 1.1; }
  #mv-nav button.on { color: #fff; background: rgba(255,255,255,.12); }
  #mv-mas.on {
    display: flex; position: fixed; inset: 0; z-index: 46; background: rgba(10,20,30,.5);
    align-items: flex-end;
  }
  .mv-mas-caja {
    width: 100%; background: #fff; border-radius: 16px 16px 0 0; padding: 14px 16px calc(74px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 6px; max-height: 80vh; overflow: auto;
  }
  .mv-mas-tit { font: 700 13px -apple-system, "Segoe UI", sans-serif; color: #6b7c88; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
  .mv-mas-caja button {
    border: 1px solid #dde3e8; background: #f7f9fb; color: #1d2b36; border-radius: 10px; padding: 12px 14px;
    font: 600 15px -apple-system, "Segoe UI", sans-serif; text-align: left; display: flex; align-items: center; gap: 10px;
  }
  .mv-mas-caja button span { font-size: 20px; }
  .mv-mas-caja button small { margin-left: auto; font-weight: 500; font-size: 11px; color: #8a9aa6; }
  .mv-mas-caja .mv-mas-cerrar { justify-content: center; background: #14212b; color: #fff; border-color: #14212b; }

  /* --- Campos y botones cómodos con el dedo (16px evita el zoom de iOS) --- */
  input[type=text], input[type=search], input[type=number], input[type=date], input[type=email],
  input[type=tel], input[type=password], input:not([type]), select, textarea { font-size: 16px !important; }
  button, .btn, select { min-height: 36px; }

  /* --- Cabeceras de página --- */
  header { padding: 12px 14px !important; gap: 8px !important; }
  header h1 { font-size: 17px !important; }
  .header-actions {
    flex-wrap: nowrap !important; overflow-x: auto; width: 100%; padding-bottom: 4px; -webkit-overflow-scrolling: touch;
  }
  .header-actions > * { flex: 0 0 auto; white-space: nowrap; }
  main { padding: 12px 14px !important; }

  /* --- Tareas --- */
  .summary-bar { flex-wrap: nowrap !important; overflow-x: auto; padding: 10px 14px !important; gap: 8px !important; }
  .summary-chip { flex: 0 0 auto; white-space: nowrap; }
  .quickadd-bar { flex-wrap: wrap; padding: 10px 14px !important; gap: 8px !important; }
  .quickadd-bar input { flex: 1 1 100% !important; min-width: 0; }
  .quickadd-bar button { flex: 1 1 40%; }
  .toolbar { padding: 10px 14px !important; gap: 8px !important; }
  .toolbar input[type=text] { min-width: 0 !important; flex: 1 1 60% !important; }
  .toolbar select { flex: 1 1 44%; min-width: 0; max-width: 100%; }
  .toolbar .view-toggle { flex: 1 1 100%; margin-left: 0 !important; }
  .toolbar .view-toggle .view-btn { flex: 1; padding: 9px 4px; }
  .mv-filtros-btn { flex: 0 0 auto; background: #eef1f6; color: #1d2b36; }
  .toolbar.mv-colapsable > :not(#buscar):not(.mv-filtros-btn):not(.view-toggle) { display: none !important; }
  .toolbar.mv-colapsable.mv-abierto > :not(#buscar):not(.mv-filtros-btn):not(.view-toggle) { display: flex !important; }
  .toolbar.mv-colapsable.mv-abierto > select { display: block !important; }
  .board { padding: 12px 14px 40px !important; gap: 10px !important; grid-template-columns: 1fr !important; }   /* el JS fija las columnas en línea */
  .list-wrap { margin: 0 8px 20px !important; }
  .list-scroll { max-height: none !important; overflow: visible !important; }
  .list-asunto { max-width: none !important; }
  .cal-toolbar { padding: 10px 14px !important; gap: 8px !important; }
  .cal-range-label { min-width: 0 !important; flex: 1 1 100% !important; order: -1; }
  .cal-weekday-header { padding: 10px 8px 0 !important; gap: 3px !important; }
  .cal-grid { padding: 6px 8px 40px !important; }
  .cal-grid.cal-monthlike { gap: 3px !important; }
  .cal-day-cell { min-height: 58px !important; padding: 3px !important; border-radius: 6px !important; }
  .cal-chip { font-size: 9.5px !important; padding: 2px 3px !important; }
  .cal-cols-7 { grid-template-columns: 1fr !important; }

  /* --- Ventanas modales: pantalla completa --- */
  .overlay { padding: 0 !important; align-items: stretch !important; }
  .overlay .modal {
    max-width: none !important; width: 100% !important; max-height: none !important; min-width: 0 !important;
    height: 100% !important; border-radius: 0 !important; padding: 16px 14px !important; resize: none !important;
  }
  .task-modal { height: 100% !important; }
  .task-modal #modalTitle { margin: -16px -14px 10px !important; padding: 14px !important; border-radius: 0 !important; cursor: default !important; }
  .task-modal #modalTitle::before { content: "" !important; }
  .tm-tabs { margin: 0 -14px 10px !important; padding: 0 8px !important; flex-wrap: nowrap !important; overflow-x: auto; }
  .tm-tab { white-space: nowrap; flex: 0 0 auto; }
  .modal-actions { flex-wrap: wrap; gap: 8px; }
  .modal .fila, .modal .row, .fila { flex-wrap: wrap; }
  .velo .modal { width: 100% !important; max-height: 100vh !important; border-radius: 12px; }

  /* --- Ventanas flotantes (KPI, ficha, maestros): a pantalla completa, sin arrastrar --- */
  .vf-win, .kpi-det {
    position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    max-height: none !important; min-width: 0 !important; transform: none !important; resize: none !important;
    border-radius: 0 !important; z-index: 60 !important; margin: 0 !important;
  }
  .vf-win > h3:first-of-type { cursor: default !important; }
  .vf-win > h3:first-of-type::before { content: "" !important; }
  #ventanaFicha {
    inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
    border-radius: 0 !important; border: 0 !important;
  }
  #ventanaFicha .vf-grip, #ventanaFicha .vf-max { display: none !important; }
  #ventanaFicha .vf-barra { padding: 12px 14px !important; }
  #ventanaFicha .vf-cerrar { font-size: 22px !important; padding: 0 6px !important; }

  /* Botón 💡 de ideas: por encima de la barra inferior */
  .kz-idea-btn { bottom: calc(76px + env(safe-area-inset-bottom)) !important; right: 12px !important; }
  html.mv-embed .kz-idea-btn, body:has(.overlay.open) .kz-idea-btn { display: none !important; }

  /* --- Tablas → tarjetas (o scroll lateral si tienen muchas columnas) --- */
  table.mv-cards { display: block !important; width: 100% !important; border: 0 !important; }
  table.mv-cards > thead { display: none !important; }
  table.mv-cards > tbody, table.mv-cards > tfoot, table.mv-cards > tbody > tr, table.mv-cards > tfoot > tr { display: block !important; }
  table.mv-cards > tbody > tr, table.mv-cards > tfoot > tr {
    margin: 0 0 10px !important; padding: 6px 12px !important; border: 1px solid #dde3e8 !important;
    border-radius: 10px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  table.mv-cards > tbody > tr > td, table.mv-cards > tfoot > tr > td {
    display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    border: 0 !important; border-bottom: 1px dashed #edf0f3 !important; padding: 5px 0 !important;
    text-align: right !important; white-space: normal !important; word-break: break-word;
    position: static !important; left: auto !important;
  }
  table.mv-cards > tbody > tr > td:last-child { border-bottom: 0 !important; }
  table.mv-cards > tbody > tr > td::before {
    content: attr(data-label); flex: 0 0 38%; max-width: 38%; text-align: left; font-weight: 600;
    font-size: 11.5px; color: #6b7c88; text-transform: none; letter-spacing: 0;
  }
  table.mv-cards > tbody > tr > td[data-label=""]::before { display: none; }
  table.mv-cards > tbody > tr > td:empty { display: none !important; }
  table.mv-cards > tbody > tr > td[colspan] { display: block !important; text-align: center !important; }
  table.mv-cards > tbody > tr > td[colspan]::before { display: none; }
  table.mv-cards > tbody > tr:nth-child(even) { background: #fff !important; }
  table.mv-cards > tbody > tr { flex-direction: column; }
  table.mv-cards > tbody > tr { display: flex !important; }
  table.mv-cards td.mv-oculto { display: none !important; }
  /* la celda principal (el asunto en Tareas) va arriba, a todo lo ancho y sin etiqueta */
  table.mv-cards td.mv-titulo {
    order: -1; display: block !important; text-align: left !important; font-size: 15px; font-weight: 600;
    padding: 6px 0 8px !important; border-bottom: 1px solid #e3e8ec !important;
  }
  table.mv-cards td.mv-titulo::before { display: none !important; }

  table.mv-scroll { display: block !important; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

  /* --- Tablas → LISTA (el titular, 2026-10-24): una fila compacta por registro. Línea 1: título + importe; línea 2: el resto, pequeño --- */
  .mv-conmutador { font-size: 12px; color: #6b7c88; margin: 4px 0 6px; }
  .mv-conmutador a { color: #1f3a5f; font-weight: 600; }
  table.mv-lista { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; border: 0 !important; background: #fff; border-radius: 10px; }
  table.mv-lista > tbody > tr > td.mv-l-det { min-width: 0 !important; overflow-wrap: anywhere; }
  table.mv-lista > thead { display: none !important; }
  table.mv-lista > tbody, table.mv-lista > tfoot { display: block !important; }
  table.mv-lista > tbody > tr, table.mv-lista > tfoot > tr {
    display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px;
    padding: 9px 4px !important; border: 0 !important; border-bottom: 1px solid #e6eaee !important; background: #fff !important;
  }
  table.mv-lista > tbody > tr:active { background: #eef3f8 !important; }
  table.mv-lista > tbody > tr > td, table.mv-lista > tfoot > tr > td {
    display: inline !important; border: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important;
    position: static !important; white-space: normal !important; text-align: left !important; background: transparent !important;
  }
  table.mv-lista td.mv-l-titulo { flex: 1 1 60%; order: 1; font-size: 14.5px; font-weight: 600; color: #1d2b36; }
  table.mv-lista td.mv-l-titulo .small, table.mv-lista td.mv-l-titulo div { font-size: 11.5px; font-weight: 400; }
  table.mv-lista td.mv-l-importe { flex: 0 0 auto; order: 2; margin-left: auto; font-size: 14.5px; font-weight: 700; text-align: right !important; white-space: nowrap !important; }
  table.mv-lista td.mv-l-det { order: 4; font-size: 12px; color: #55677a; }
  table.mv-lista td.mv-l-det::before { content: attr(data-label) " "; color: #8a9aa6; }
  table.mv-lista td.mv-l-det:not(:last-child)::after { content: " ·"; color: #c3ccd4; }
  table.mv-lista td.mv-l-det[data-label=""]::before { content: ""; }
  table.mv-lista td.mv-l-dup, table.mv-lista td.mv-oculto, table.mv-lista td:empty { display: none !important; }
  /* el primer dato de la 2.ª línea empieza en línea nueva */
  table.mv-lista td.mv-l-det { flex: 0 1 auto; }
  table.mv-lista tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
  table.mv-lista > tbody > tr > td[colspan] { display: block !important; flex-basis: 100%; text-align: center !important; }

  /* Barra de exportar/columnas de tabla-plus: no tapar la lista */
  .tp-barra, .tp-toolbar { flex-wrap: wrap; }

  /* Tarjetas y rejillas de KPI a 2 columnas como máximo */
  .kpis { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .kpi { min-width: 0 !important; }
  .tablero { grid-template-columns: 1fr !important; }

  /* --- Expedientes: cada tarea en 2-3 líneas --- */
  .tarea { grid-template-columns: 26px 1fr 1fr !important; padding: 10px 2px !important; }
  .tarea > :nth-child(2) { grid-column: 2 / 4; }
  .tarea > :nth-child(3) { grid-column: 2; }
  .tarea > :nth-child(4) { grid-column: 3; }
  .tarea > :nth-child(5) { grid-column: 2 / 4; justify-content: flex-start !important; }
  .tarea select, .tarea input { padding: 8px 8px !important; }
  .tarea .btn.sm { padding: 9px 13px !important; font-size: 13px !important; }
  .sug { flex-wrap: wrap; }
  .tabs, .subtabs { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .tabs .tab, .subtabs > * { white-space: nowrap; flex: 0 0 auto; }
  .bar { gap: 8px !important; }
  .bar select, .bar input[type=text] { flex: 1 1 44%; min-width: 0 !important; }

  /* --- Kaizen: acciones de cada punto en una fila debajo del texto --- */
  .item { flex-wrap: wrap; }
  .item .cuerpo { flex: 1 1 calc(100% - 34px); }
  .item .acc { flex-direction: row !important; width: 100%; justify-content: flex-end; gap: 8px; }
  .item .acc .btn.sm { padding: 8px 14px; font-size: 13px; }

  /* --- Tesorería: la cabecera con KPIs no se queda fija (ocuparía media pantalla) --- */
  .fijo { position: static !important; }

  /* --- Cobros: tarjetas de KPI a dos columnas --- */
  .cb-kpi { flex: 1 1 calc(50% - 8px) !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box; }

  /* --- Ficha de cliente / formularios en rejilla: una columna --- */
  .field-row, .grid2, .grid3, .fila-campos { grid-template-columns: 1fr !important; }
  .field { min-width: 0; }
  .field input, .field select, .field textarea { min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
}

/* ============================================================================================================================
   Responsive de escritorio y tableta (2026-10-05, el titular: «en esta pantalla y el resto deben ser responsive, que se ajuste
   al tamaño ventana vs pantalla»). Las pantallas ocupan el ancho de la ventana (hasta 1840 px) en vez de una columna fija de
   1400/1200 px, y en ventanas estrechas las tablas se compactan. Los !important son a propósito (los estilos de cada pantalla
   fijan anchos máximos propios). Por debajo de 700 px mandan las reglas de móvil de arriba.
   ============================================================================================================================ */
main { max-width: min(1840px, 100%) !important; box-sizing: border-box; padding-left: clamp(10px, 2vw, 28px) !important; padding-right: clamp(10px, 2vw, 28px) !important; }
nav.app-switch { overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
table td select, table td input[type=text] { min-width: 0; box-sizing: border-box; }
.tablewrap, .scroll-x { max-width: 100%; }
img, canvas, video { max-width: 100%; }
@media (max-width: 1440px) {
  table { font-size: 12px; }
  table th, table td { padding-left: 4px !important; padding-right: 4px !important; }
  table th { font-size: 9.5px; letter-spacing: .6px; }
  .cards, .kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; gap: 8px !important; }
  table td select, table td input[type=text] { max-width: 112px; padding: 4px 4px; font-size: 12px; }
}
@media (max-width: 1000px) {
  table { font-size: 11.5px; }
  .field-row { grid-template-columns: 1fr !important; }
  .panel, .card { padding: 12px !important; }
  .ficha-tabs { gap: 2px; }
  .ficha-tab { padding: 7px 9px !important; font-size: 12px !important; }
}