/*
 * NEMIK · RESPONSIVE (2026-10-24)
 *
 * UNA sola interfaz para la web y el Escritorio: estas reglas solo cambian la
 * PRESENTACIÓN según el ancho, nunca el comportamiento. Va la última (después
 * de bob-skin.css) para que mande sobre las reglas de escritorio sin tocarlas:
 * por encima de 1024 px no hay ni una regla de aquí que aplique, así que el
 * escritorio aprobado queda tal cual.
 *
 * Tres cortes nuevos, elegidos por el contenido y no por un teléfono concreto:
 *
 *   ≤ 719.98 px   COMPACTO     ventana estrecha / teléfono: una columna,
 *                              Passwords en vista secuencial (lista → detalle),
 *                              Configuración a pantalla casi completa.
 *   ≤ 479.98 px   TELÉFONO     Finance · Passwords · Files pasan a una barra
 *                              inferior (arriba no caben con el contexto, la
 *                              sincronización y el candado: hacen falta ~480 px).
 *   ≤ 379.98 px   MUY ESTRECHO 320–360 px: se compacta lo que aún no cabe.
 *
 * La TABLETA (720–1023 px) no necesita reglas nuevas: el diseño de escritorio
 * ya cabe ahí con los ajustes de 1024/820 de bob-skin.css (métricas en dos
 * columnas, selector compacto), y Passwords mantiene lista + detalle en
 * paralelo (768 y 820 en vertical incluidos). Es también el rango del
 * Escritorio estrecho (su ventana mínima es de 820 px): queda tal cual.
 *
 * Lo que no hace este archivo: zoom ni transform: scale, ocultar funciones,
 * ni tocar la tabla de Finance (AG Grid) más allá de su contenedor.
 */

/* El botón «volver a la lista» de Passwords solo existe en la vista secuencial. */
.pw-back {
  display: none;
}

/* La puerta ocupa la altura VISIBLE (en el móvil 100vh incluye las barras del navegador). */
.bob-gate {
  min-height: 100dvh;
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPACTO · ≤ 719.98 px
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 719.98px) {
  /* Red de seguridad: si algo se sale, no arrastra la página en horizontal.
     (`clip`, no `hidden`: no crea un contenedor de scroll y las barras siguen pegadas.) */
  body {
    overflow-x: clip;
  }

  /* ─── Shell · barra de producto ─────────────────────────────────────── */
  /* Contexto | Finance · Passwords · Files | estado y candado. Las columnas
     laterales siguen siendo iguales (el selector, centrado en la ventana),
     pero nunca más estrechas que su contenido: el candado no se sale. */
  .bob {
    --bob-bar-height: 56px;
  }

  .bob-bar {
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    column-gap: 8px;
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }

  .product-switch {
    min-width: 0;
    max-width: 100%;
    justify-self: center;
  }

  .product-switch-option {
    min-width: 0;
    height: 36px;
    gap: 6px;
    padding: 0 11px;
    font-size: 13px;
  }

  /* La sincronización, solo con su icono (el texto sigue en aria-label y title). */
  .bob-sync > span {
    display: none;
  }

  .bob-sync {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
  }

  .bob-lock {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
  }

  .context-avatar {
    height: 40px;
  }

  /* ─── Navegación del producto (categorías / bóvedas + Configuración) ── */
  /* Las categorías ocupan el ancho que queda y se desplazan dentro de su
     píldora; Configuración, siempre a la vista a la derecha. */
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  }

  .topbar-start {
    display: none;
  }

  .topbar-center {
    min-width: 0;
    justify-content: flex-start;
  }

  .topbar-tabs {
    display: flex;
    min-width: 0;
  }

  .tabbar {
    min-width: 0;
    max-width: 100%;
  }

  .tab {
    height: 36px;
  }

  .tab-icon {
    width: 36px;
  }

  .topbar-vault .vault-switcher {
    max-width: 44vw;
  }

  .topbar-vault .vault-switcher > span:not([class*="icon"]):not([class*="chevron"]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-icon-button {
    width: 42px;
    height: 42px;
  }

  /* Botones de la app y de sus diálogos: 40 px de alto como mínimo (táctil).
     La puerta de acceso no entra aquí: tiene sus propias medidas. */
  .bob .bob-ui-button,
  .modal-backdrop .bob-ui-button,
  .popover .bob-ui-button {
    min-height: 40px;
  }

  /* ─── Página ─────────────────────────────────────────────────────────── */
  .page {
    padding: 20px max(12px, env(safe-area-inset-right, 0px)) calc(88px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }

  .bob-notice {
    padding: 0 12px;
  }

  /* ─── Finance · métricas ────────────────────────────────────────────── */
  /* Dos columnas (una por debajo de 380 px, abajo); las cifras se ajustan
     al hueco en vez de cortarse. */
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
  }

  .metric {
    padding: 14px 14px 12px;
  }

  .metric:nth-child(3) {
    border-left: 1px solid var(--line);
  }

  /* Con un número impar de tarjetas (General: tres), la última ocupa la fila. */
  .metric:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .metric > .metric-value {
    font-size: clamp(17px, 5.2vw, 22px);
  }

  /* ─── Finance · General (lista de categorías) ───────────────────────── */
  .overview-list {
    width: 100%;
  }

  .overview-row {
    grid-template-columns: 36px minmax(0, 1fr) auto 44px;
    gap: 10px;
    padding-right: 10px;
  }

  .overview-chevron {
    display: none;
  }

  /* El asa de reordenar es de ratón (aparece al pasar por encima y vive fuera
     de la fila); en pantalla táctil se reordena desde las pestañas. */
  .overview-drag {
    display: none;
  }

  /* ─── Finance · tabla ───────────────────────────────────────────────── */
  /* La tabla es AG Grid (edición en celda, editores, arrastre): en el móvil
     la primera columna (el nombre) queda fija a la izquierda (ExpenseTable,
     corte de shared/viewport.js) y el resto se desplaza en horizontal DENTRO
     de la tarjeta; la página no se mueve. La tarjeta gana ancho útil. */
  .table-surface {
    width: 100%;
    min-width: 0;
    padding: 8px 8px 6px;
  }

  .width-handle {
    display: none;
  }

  /* La cabecera de una sección vive en la columna fija: el recuento cede su
     sitio antes que el título. */
  .section-title {
    flex-shrink: 0;
    max-width: 100%;
  }

  .section-count {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ─── Passwords · vista secuencial (lista → detalle) ────────────────── */
  /* El mismo estado de siempre (elemento elegido, modo); `data-pane` solo
     dice qué panel se ve. La página se desplaza con naturalidad: sin alto
     fijo ni scroll dentro de los paneles. */
  .pw-preview-notice {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .passwords {
    width: 100%;
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .passwords[data-pane="list"] .pw-detail-pane,
  .passwords[data-pane="detail"] .pw-list-pane {
    display: none;
  }

  .passwords[data-pane="detail"] .pw-back {
    display: inline-flex;
  }

  .pw-pane {
    overflow: visible;
  }

  .pw-list,
  .pw-detail-pane {
    overflow: visible;
  }

  .pw-list-pane {
    min-height: min(420px, 60dvh);
  }

  .pw-list-head {
    padding: 14px 12px 10px 16px;
  }

  .pw-search {
    min-height: 40px;
  }

  .pw-search kbd {
    display: none;
  }

  .pw-list-item {
    min-height: 58px;
  }

  .pw-back {
    align-items: center;
    justify-self: start;
    gap: 4px;
    min-height: 40px;
    max-width: 100%;
    padding: 0 14px 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }

  .pw-back > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pw-back:hover {
    background: var(--hover);
  }

  .pw-back:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .pw-detail {
    padding: 18px 16px 20px;
  }

  /* Cabecera del detalle: baldosa y nombre arriba; las acciones (Editar /
     Eliminar · Cancelar / Guardar) en su propia fila, completas. */
  .pw-detail-head {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
  }

  .pw-head-actions {
    min-width: 0;
    flex: 1 0 100%;
    justify-content: flex-end;
    gap: 8px;
  }

  .pw-detail-name,
  input.pw-inline.pw-detail-name {
    font-size: 19px;
  }

  .pw-field dd {
    flex-wrap: wrap;
    gap: 4px 12px;
  }

  .pw-field dd > .pw-value {
    flex: 1 1 160px;
  }

  .pw-field-actions {
    margin-left: auto;
    gap: 4px;
  }

  /* Objetivos táctiles: el icono no crece, el área sí. */
  .pw-action {
    min-height: 40px;
    padding: 0 12px;
  }

  .pw-detail-pane .icon-button.small {
    width: 40px;
    height: 40px;
  }

  /* El autenticador: el código grande nunca se sale de su panel. */
  .pw-totp dd {
    flex-wrap: wrap;
  }

  /* ─── Files ─────────────────────────────────────────────────────────── */
  .files {
    padding: 16px 14px 18px;
  }

  .files-item {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
  }

  /* Los nombres largos se leen en dos líneas (cortan en cualquier punto). */
  .files-item .document-name {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .files-item .document-actions {
    flex-wrap: nowrap;
    gap: 2px;
  }

  /* «Descargar» con su icono; el texto sigue para los lectores de pantalla. */
  .files-download {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
  }

  .files-download > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .files-item .icon-button.small,
  .document-item .icon-button.small {
    width: 40px;
    height: 40px;
  }

  /* ─── Diálogos ──────────────────────────────────────────────────────── */
  /* Dentro de la vista siempre; los grandes ocupan casi toda la pantalla y
     se desplazan por dentro, con la cabecera (y la ✕) a la vista. */
  .modal-backdrop {
    padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  }

  .modal {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .modal-header {
    padding: 14px 10px 12px 18px;
  }

  .modal-body {
    padding: 14px 16px 18px;
    overflow-y: auto;
  }

  .modal-close {
    width: 40px;
    height: 40px;
  }

  /* Configuración: hoja casi completa; secciones en una fila desplazable
     arriba (la regla de 720 px de app.css la pisaba bob-skin: aquí se fija). */
  .bob-settings-modal {
    width: 100%;
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
  }

  .bob-settings-modal .modal-header {
    padding: 14px 10px 12px 18px;
  }

  .bob-settings-modal .modal-body {
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .bob-settings {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .bob-settings-nav {
    display: flex;
    gap: 4px;
    padding: 8px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    scrollbar-width: none;
  }

  .bob-settings-nav::-webkit-scrollbar {
    display: none;
  }

  .bob-settings-grupo {
    display: none;
  }

  .bob-settings-tab {
    flex: 0 0 auto;
    min-height: 38px;
  }

  .bob-settings-panes {
    padding: 14px 16px 20px;
  }

  .bob-settings-detalle-cabecera {
    padding: 10px 16px 10px;
  }

  .bob-settings-detalle-cuerpo {
    padding: 14px 16px 20px;
  }

  /* Filas de ajustes: el texto arriba y la acción debajo si no caben juntos. */
  .settings-row {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .settings-row > .settings-text {
    flex: 1 1 200px;
  }

  .settings-actions,
  .settings-row > .bob-ui-button,
  .settings-row > select {
    margin-left: auto;
  }

  .settings-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Las secciones son rejillas de una columna: que la columna no crezca con
     lo que no cabe (una fila de pestañas, un selector) y empuje el panel. */
  .bob-settings-panes .settings,
  .bob-settings-panes .settings-section,
  .bob-settings-detalle-cuerpo .settings,
  .bob-settings-detalle-cuerpo .settings-section {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ─── Configuración → Grupos ────────────────────────────────────────── */
  /* Pestañas Miembros · Bóvedas · Configuración: se desplazan si no caben. */
  .family-tabs > [role="tablist"] {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .family-tabs > [role="tablist"]::-webkit-scrollbar {
    display: none;
  }

  .family-tabs [role="tab"] {
    flex: 0 0 auto;
    height: 40px;
  }

  /* Una persona: cara y nombre arriba; rol, permiso y «Quitar…» debajo
     (alineados a la derecha) cuando no caben en la misma línea. */
  .vault-member-list > li.vault-member {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .vault-member .bob-list-text {
    flex: 1 1 140px;
  }

  .vault-member .bob-list-trailing {
    min-width: 0;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
  }

  .vault-member .bob-list-trailing select {
    min-width: 0;
    max-width: 100%;
  }

  /* Invitar: el rol y «Crear invitación», uno debajo del otro si hace falta. */
  .vault-invite {
    flex-wrap: wrap;
  }

  .vault-invite > * {
    flex: 1 1 160px;
  }

  /* ─── Menús emergentes ──────────────────────────────────────────────── */
  /* Nunca más anchos que la pantalla (el alto lo ajusta Popover.js). */
  .popover {
    max-width: calc(100vw - 16px);
  }

  .menu-item {
    min-height: 40px;
  }

  /* ─── Avisos ────────────────────────────────────────────────────────── */
  .toast-region {
    width: max-content;
    max-width: calc(100vw - 24px);
  }

  /* El texto del aviso se parte en líneas; la acción («Deshacer», «Abrir»)
     se queda entera a su lado. */
  .toast {
    max-width: 100%;
    white-space: normal;
  }

  .toast-message {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
  }

  .toast-action {
    flex: 0 0 auto;
    min-height: 36px;
    white-space: nowrap;
  }

  /* ─── Pantallas de acceso ───────────────────────────────────────────── */
  /* (Sus medidas de escritorio no cambian: aquí solo el móvil.) Los botones
     secundarios de la puerta —el del autenticador, por ejemplo— también
     llegan a 40 px; el principal ya mide 42. */
  .bob-gate .bob-ui-button {
    min-height: 40px;
  }

  /* Las acciones de los Kits («Descargar el Kit … en PDF»): el texto puede
     partirse en dos líneas en vez de ensanchar la tarjeta. */
  .gate-actions-row .bob-ui-button {
    max-width: 100%;
    height: auto;
    padding-block: 8px;
    white-space: normal;
    text-align: center;
  }

  /* Los pasos entran deslizándose unos píxeles desde el lado: en una pantalla
     estrecha eso no puede ensanchar la página ni un instante (el navegador del
     móvil la alejaría). `clip` recorta solo en horizontal y no crea scroll. */
  .bob-gate {
    overflow-x: clip;
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
    padding-left: max(18px, env(safe-area-inset-left, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TELÉFONO · ≤ 479.98 px
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 479.98px) {
  /* Finance · Passwords · Files, abajo: una barra fija con icono y nombre,
     como en cualquier app del móvil. Con cuenta, arriba ya no caben el
     contexto, la sincronización, el candado Y los tres productos en una fila.
     Es el MISMO selector (mismos botones, mismo manejador); solo cambia dónde
     se dibuja. Arriba quedan el contexto (izquierda) y el estado y el candado
     (derecha). */
  .bob-bar-start {
    grid-column: 1;
  }

  .bob-bar-end {
    grid-column: 3;
  }

  .product-switch {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: flex;
    max-width: none;
    justify-self: stretch;
    gap: 4px;
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
    box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, 0.22);
  }

  .product-switch-option {
    height: 52px;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0 4px;
    border-radius: var(--radius-lg);
    font-size: 11.5px;
  }

  .product-switch-option .vault-option-icon svg {
    width: 20px;
    height: 20px;
  }

  /* Lo que vive abajo sube por encima de la barra. */
  .page {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .toast-region {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MUY ESTRECHO · ≤ 379.98 px (320–360)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 379.98px) {
  /* Métricas: una columna, cifras sin cortar. */
  .metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .metric:nth-child(3) {
    border-left: 1px solid var(--line);
  }

  /* General: el porcentaje, debajo del importe. */
  .overview-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
      "icono nombre importe"
      "icono nombre parte";
    row-gap: 0;
  }

  .overview-icon {
    grid-area: icono;
  }

  .overview-name {
    grid-area: nombre;
  }

  .overview-amount {
    grid-area: importe;
    justify-self: end;
  }

  .overview-share {
    grid-area: parte;
    justify-self: end;
  }

  /* Grupos: las tres pestañas caben enteras. */
  .family-tabs [role="tab"] {
    padding: 0 8px;
    font-size: 13.5px;
  }

  /* Detalle de Passwords: Copiar / Ver / Abrir con su icono (el texto sigue
     para los lectores de pantalla) para que el valor tenga sitio. */
  .pw-action {
    width: 40px;
    justify-content: center;
    padding: 0;
  }

  .pw-action > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}