/* =====================================================================
   Móvil
   =====================================================================
   El panel se diseñó para una pantalla de escritorio y en un móvil de
   6" se quedaba en una versión encogida de sí mismo: letra de 11 px,
   siete pestañas cortadas y tablas de cinco columnas en 390 píxeles.

   Esto no es «hacer que quepa». Son tres cosas distintas:

     1. La letra sube. En escritorio se mira a 60 cm y con el ratón; en
        el móvil, a 30 cm y con el pulgar. 16 px es el mínimo para leer
        cómodo, y además evita que Safari haga zoom al tocar un campo.

     2. Lo que no cabe cambia de forma. Una tabla se convierte en fichas,
        la rejilla de la agenda en una lista del día, y las siete
        pestañas en cinco más «Más». Nada se esconde: cambia de sitio.

     3. Todo lo que se toca mide 44 px. Es el mínimo por debajo del cual
        se falla el objetivo con el dedo.
   ===================================================================== */

/* En escritorio caben las siete, así que «Más» sobra. Se crea siempre
   para que girar el móvil no obligue a recargar. */
.nav-mas { display: none; }

/* Sin zoom con los dedos: se desplaza en vertical y horizontal, pero ni
   pellizco ni doble toque. En el iPhone es lo único que lo frena. */
@media (pointer: coarse) {
  /* También en cada elemento: en el iPhone, un pellizco que empieza dentro
     de una lista con su propio scroll se saltaba el de html y body. (Lo que
     lleva su propio touch-action, como el botón de grabar, manda: es más
     específico.) */
  html:not([data-zoom]), html:not([data-zoom]) body, html:not([data-zoom]) body * { touch-action: pan-x pan-y; }
}
/* Panel 316 · Con «Ampliar con los dedos» (o letra grande), el pellizco se deja (html[data-zoom], sin-zoom.js). */

@media (max-width: 860px) {
  .nav-mas { display: flex; }

  /* ---------------------------------------------------------------
     Escala de texto
     --------------------------------------------------------------- */
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }

  .tabla td, .tabla th { font-size: 15px; }
  .dato dt { font-size: 13.5px; }
  .dato dd { font-size: 15.5px; }
  .nota-privada { font-size: 14px; line-height: 1.55; }
  .chip { font-size: 12.5px; padding: 4px 10px; }

  /* Un campo por debajo de 16 px hace que iOS haga zoom al tocarlo, y
     luego la página se queda desplazada. */
  /* Las casillas y los interruptores quedan fuera: con 46 px de alto un
     interruptor de 22 se estira y se convierte en un cuadrado. */
  .campo, select, textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) { font-size: 16px; min-height: 46px; }
  textarea.campo { min-height: 84px; }

  /* Lo de arriba y lo de abajo de la pantalla es de la app, no de la
     vista: el tema, la firma, la sesión y el aviso de demo pasan a «Más».
     Cada franja fija en un móvil son 40 px menos de agenda. */
  .franja-proveedor, .pie { display: none; }

  /* Filtros: uno por línea y a todo el ancho; los botones se reparten. */
  .barra > select.campo, .barra > .buscador { flex: 1 1 100%; max-width: none !important; width: 100%; }
  .barra > .btn { flex: 1 1 auto; }

  .btn { min-height: 46px; font-size: 15px; padding: 0 20px; }
  .icono-btn { min-width: 44px; min-height: 44px; }

  /* ---------------------------------------------------------------
     Barra de abajo · cinco pestañas y «Más»
     --------------------------------------------------------------- */
  .nav-secundaria { display: none !important; }

  .nav-sidebar {
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .nav-items { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .nav-item {
    flex-direction: column; gap: 3px; font-size: 11.5px; letter-spacing: -.01em;
    padding: 8px 2px; min-height: 52px; justify-content: center; text-align: center;
    border-radius: 16px;
  }
  .nav-item svg { width: 22px; height: 22px; }
  /* Las etiquetas no se parten: o caben enteras o el nombre está mal
     elegido. Ninguna de las cinco pasa de doce caracteres. */
  .nav-item span { white-space: nowrap; }
  .nav-badge { position: absolute; margin: -6px 0 0 20px; }

  /* ---- la hoja de «Más» ---- */
  .mas-hoja { position: fixed; inset: 0; z-index: 90; }
  .mas-fondo {
    position: absolute; inset: 0; background: rgba(9, 24, 26, .42);
    backdrop-filter: blur(2px); animation: mas-entra .18s ease;
  }
  .mas-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--card-bg);
    backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque);
    border-radius: 24px 24px 0 0; box-shadow: var(--sombra-flota);
    animation: mas-sube .22s cubic-bezier(.2, .8, .3, 1);
  }
  .mas-asa {
    width: 40px; height: 4px; border-radius: 999px; background: var(--divider);
    margin: 4px auto 12px;
  }
  .mas-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .mas-panel button {
    width: 100%; display: flex; align-items: center; gap: 14px;
    min-height: 54px; padding: 0 14px; border: 0; border-radius: 16px;
    background: none; font: inherit; font-size: 16px; color: var(--text-dark);
    cursor: pointer; text-align: left;
  }
  .mas-panel button:hover { background: var(--dash-bg); }
  .mas-panel button[aria-current="true"] { background: var(--marca-clara); color: var(--marca-oscura); font-weight: 600; }
  .mas-panel svg { width: 22px; height: 22px; flex: none; }
  .mas-grupo { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
               padding: 12px 14px 2px; }
  .mas-grupo:first-child { padding-top: 2px; }
  .mas-panel { max-height: calc(var(--alto-app, 100vh) * .88); overflow-y: auto; overscroll-behavior: contain; }

  /* Quién ha entrado y cómo salir. En escritorio vive abajo del menú
     lateral; en el móvil ese menú no existe y no había forma de salir. */
  .mas-usuario {
    display: flex; align-items: center; gap: 12px;
    padding: 4px 6px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--divider);
  }
  .mas-usuario .avatar { width: 40px; height: 40px; font-size: 14px; }
  .mas-usuario > span:not(.avatar) { flex: 1; min-width: 0; display: grid; }
  .mas-usuario strong { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mas-usuario small { font-size: 13px; color: var(--text-muted); }
  .mas-panel .mas-usuario button {
    width: auto; min-height: 40px; padding: 0 14px; font-size: 14px; font-weight: 600;
    border-radius: 999px; background: var(--dash-bg); color: var(--text-dark); flex: none;
  }
  .mas-demo {
    margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; font-size: 13px;
    color: var(--aviso); background: var(--aviso-claro);
  }
  .mas-pie {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-top: 8px; padding: 12px 6px 0; border-top: 1px solid var(--divider);
  }
  .mas-panel .mas-pie button {
    width: auto; min-height: 40px; padding: 0 14px; font-size: 14px;
    border-radius: 999px; background: var(--dash-bg); color: var(--text-dark);
  }
  .mas-pie .firma { font-size: 11.5px; }
  /* Arriba: tema a la izquierda y privacidad a la derecha; la firma, debajo en su línea. */
  .mas-pie .firma:not(.pie-privacidad) { order: 2; flex-basis: 100%; }
  .mas-pie .pie-privacidad, .mas-pie .pie-web { font-size: 12.5px; }

  @keyframes mas-entra { from { opacity: 0; } }
  @keyframes mas-sube { from { transform: translateY(100%); } }

  /* ---------------------------------------------------------------
     Tablas · en el móvil son fichas
     ---------------------------------------------------------------
     Cinco columnas en 390 px parten los nombres en tres líneas y el
     teléfono en cuatro. Cada fila pasa a ser una ficha y cada celda
     lleva su etiqueta delante, sacada de data-col.
     --------------------------------------------------------------- */
  .tabla-wrap { overflow: visible; }
  .tabla { display: block; }
  .tabla thead { display: none; }
  .tabla tbody { display: grid; gap: 10px; }
  .tabla tr {
    display: grid; gap: 4px; padding: 13px 15px;
    background: var(--dash-bg); border-radius: 16px; border: 0;
    /* Panel 274 · sin pista fija, la columna medía lo que el texto más largo sin partir (en Cobros, 500 px). */
    grid-template-columns: minmax(0, 1fr);
  }
  .tabla td { min-width: 0; overflow-wrap: break-word; }
  .tabla td > * { min-width: 0; max-width: 100%; }
  .cb-cuando { white-space: normal; }
  .tabla td { display: flex; gap: 10px; align-items: baseline; border: 0; padding: 0; }
  .tabla td::before {
    content: attr(data-col); flex: none; width: 8.5em;
    font-size: 13px; color: var(--text-muted);
  }
  /* La primera celda es el título de la ficha: sin etiqueta y más grande. */
  .tabla td:first-child { display: block; font-size: 16.5px; margin-bottom: 2px; }
  .tabla td:first-child::before { content: none; }
  /* Una celda sin etiqueta (el nombre de un documento, los botones) no
     lleva hueco de etiqueta delante: si no, se queda sangrada 8,5em y
     lo que va detrás se aprieta en una columna estrecha. */
  .tabla td:not([data-col]) { display: block; }
  .tabla td:not([data-col])::before { content: none; }
  .tabla td.doc-ico { display: none; }
  .tabla td.doc-tit { font-size: 16.5px; margin-bottom: 2px; }
  .tabla td.doc-acciones { margin-top: 6px; }
  .tabla td.doc-acciones .btn { min-height: 40px; }
  .tabla tr.inactivo { opacity: .55; }

  /* Almacenamiento: cada archivo en una ficha compacta. Antes la casilla,
     el icono, el nombre, el tamaño y los botones iban cada uno en su
     línea y un archivo ocupaba media pantalla. */
  .alm-tabla tr {
    grid-template-columns: 24px 46px minmax(0, 1fr) auto;
    grid-template-areas: "sel mini nombre peso" "sel mini origen origen" "sel mini fecha fecha" "acc acc acc acc";
    column-gap: 10px; row-gap: 1px; align-items: center; padding: 11px 13px;
  }
  .alm-tabla td:nth-child(1) { grid-area: sel; font-size: inherit; margin: 0; }
  .alm-tabla td:nth-child(2) { grid-area: mini; align-self: start; }
  .alm-tabla td:nth-child(3) { grid-area: nombre; min-width: 0; }
  .alm-tabla td:nth-child(4) { grid-area: origen; font-size: 13px; color: var(--text-muted); }
  .alm-tabla td:nth-child(5) { grid-area: fecha; font-size: 13px; color: var(--text-muted); }
  .alm-tabla td:nth-child(6) { grid-area: peso; font-size: 13.5px; }
  .alm-tabla td:nth-child(7) { grid-area: acc; display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
  .alm-tabla td:nth-child(7) .btn { min-height: 38px; }
  .alm-tabla td.vacio { grid-column: 1 / -1; grid-row: auto; }
  .alm-tabla .alm-nombre { max-width: 100%; display: block; }
  .alm-tabla input[type="checkbox"] { width: 20px; height: 20px; }

  /* Inicio · próximas citas: el estado pasa debajo del nombre. En tres
     columnas el nombre de una pareja se partía en tres líneas. */
  .lista { padding: 0 2px 6px; }
  .lista li { grid-template-columns: 50px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 10px 8px; }
  .lista li > .chip { grid-column: 2; justify-self: start; }
  .tabla .vacio { display: block; text-align: left; }
  .tabla .vacio::before { content: none; }

  /* Ajustes → Avisos automáticos: celdas con controles. La etiqueta va
     encima y el control ocupa el ancho; si no, la etiqueta vacía de 8,5em
     empujaba todo fuera de la pantalla. */
  .av-tabla td { display: block; }
  .av-tabla td::before { display: block; width: auto; margin-bottom: 4px; }
  .av-tabla td:not([data-col])::before { content: none; }
  .av-tabla select.campo, .av-tabla input.campo { max-width: 100%; }

  /* ---------------------------------------------------------------
     Agenda · la rejilla no cabe, así que se lee como lista
     ---------------------------------------------------------------
     Cinco profesionales por columnas en 390 px da 60 px cada una: no
     entra ni la hora. La rejilla sigue existiendo para el escritorio;
     aquí se enseña la misma información en vertical.
     --------------------------------------------------------------- */
  /* .ag-scroll también: si solo se oculta la rejilla, su contenedor
     sigue midiendo el alto de doce horas y deja un agujero enorme. */
  /* Día: una columna por profesional no cabe → la lista del día.
     Semana: la rejilla en pequeño, siete columnas estrechas como el
     calendario del móvil. Mes, Año y Planificación tienen su propia forma. */
  #agenda-root[data-vista="dia"] .ag-scroll { display: none; }
  #agenda-root[data-vista="dia"] .ag-lista { display: grid; }
  .ag-leyenda { display: none !important; }

  #agenda-root[data-vista="semana"] { --ag-col-min: 0px; --ag-hora-w: 38px; }
  #agenda-root[data-vista="semana"] .ag-rejilla { min-width: 0; width: 100%; }
  #agenda-root[data-vista="semana"] .ag-cab { padding: 6px 3px; align-items: center; text-align: center; }
  #agenda-root[data-vista="semana"] .ag-cab strong { font-size: 12px; justify-content: center; }
  #agenda-root[data-vista="semana"] .ag-cab strong i { display: none; }
  #agenda-root[data-vista="semana"] .ag-cab span { font-size: 10.5px; }
  #agenda-root[data-vista="semana"] .ag-hora { right: 4px; font-size: 10.5px; }
  #agenda-root[data-vista="semana"] .ag-cita { left: 1px; right: 1px; padding: 3px 3px 3px 6px; font-size: 10.5px; border-radius: 7px; }
  #agenda-root[data-vista="semana"] .ag-cita .m,
  #agenda-root[data-vista="semana"] .ag-cita .s,
  #agenda-root[data-vista="semana"] .ag-cita .wa { display: none; }
  #agenda-root[data-vista="semana"] .ag-cita .n { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  #agenda-root[data-vista="semana"] .ag-junto { padding: 3px 3px 3px 9px; }
  #agenda-root[data-vista="semana"] .ag-junto .n { -webkit-line-clamp: 1; white-space: nowrap; }
  #agenda-root[data-vista="semana"] .ag-junto-rayas { width: 5px; }
  /* Varias profesionales a la misma hora en una columna de 55 px: el texto
     se partía letra a letra. Bloques de color, como el calendario del
     móvil; se pulsan para ver la cita. */
  #agenda-root[data-vista="semana"] .ag-cita.estrecha { padding: 0; font-size: 0; border-radius: 5px; }
  #agenda-root[data-vista="semana"] .ag-cita.estrecha > * { display: none; }
  #agenda-root[data-vista="semana"] .ag-libre.solo-online::before { content: none; }
  #agenda-root[data-vista="semana"] .ag-ausencia { font-size: 10px; writing-mode: vertical-rl; padding-top: 6px; }

  /* Panel 227 · Equipo: todas las profesionales a la vez, como Organízate. Columnas de 23 px o más (trece caben en
     390 px); si hay más, se desliza de lado con la hora fija. En cada cita, solo el nombre. */
  #agenda-root[data-vista="equipo"] { --ag-col-min: 23px; --ag-hora-w: 32px; }
  #agenda-root[data-vista="equipo"] .ag-rejilla { min-width: 0; width: max(100%, calc(var(--ag-hora-w) + var(--ag-n, 1) * var(--ag-col-min))); }
  #agenda-root[data-vista="equipo"] .ag-cab { padding: 5px 0 4px; }
  #agenda-root[data-vista="equipo"] .ag-cab strong { font-size: 10.5px; overflow: hidden; text-overflow: clip; }
  #agenda-root[data-vista="equipo"] .ag-cab span { display: none; }
  #agenda-root[data-vista="equipo"] .ag-hora { right: 3px; font-size: 10px; }
  #agenda-root[data-vista="equipo"] .ag-cita { padding: 2px 1px 2px 4px; font-size: 9px; line-height: 1.15; border-radius: 4px; }
  #agenda-root[data-vista="equipo"] .ag-cita .t,
  #agenda-root[data-vista="equipo"] .ag-cita .ag-primera { display: none; }
  #agenda-root[data-vista="equipo"] .ag-cita .n { -webkit-line-clamp: 4; font-weight: 650; }

  /* Mes: en 390 px no caben nombres. Número del día, puntos de color y
     cuántas citas hay, como el calendario del móvil; se pulsa para verlo. */
  .agm-rejilla { min-height: 0; }
  .agm-dia { min-height: 64px; padding: 4px 2px 6px; align-items: center; gap: 4px; }
  .agm-cab span { padding: 6px 2px; text-align: center; font-size: 10.5px; }
  .agm-num { font-size: 12.5px; width: 24px; height: 24px; }
  .agm-citas { display: none; }
  .agm-puntos { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
  .agm-puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-color); }
  .agm-n { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-muted); }

  /* Año: dos meses por fila. */
  .ag-anio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding: 12px; }
  .aga-titulo { font-size: 14px; padding: 2px 4px; }
  .aga-dia { font-size: 10px; }
  .aga-dias > span { font-size: 9.5px; }

  /* La barra: menú y flechas arriba, fecha y «Nueva cita» debajo. */
  .ag-menu-btn { height: 44px; }
  .ag-menu { width: min(320px, calc(100vw - 24px)); max-height: 70vh; }
  #agenda-root .ag-lista { padding: 4px 8px 12px; }

  .ag-barra { gap: 8px; padding: 10px 12px; }
  .ag-barra .ag-fecha { font-size: 17px; }
  .ag-nav { gap: 6px; }
  .ag-flecha { min-width: 44px; min-height: 44px; }

  /* ---------------------------------------------------------------
     Conversaciones
     --------------------------------------------------------------- */
  .msg-item { padding: 12px 14px; }
  .msg-item-nombre { font-size: 16px; }
  .msg-item-previa { font-size: 14.5px; }
  .burbuja { font-size: 15.5px; }
  /* «Elige una conversación de la izquierda»: en el móvil no hay
     izquierda, la lista ocupa la pantalla. */
  .msg:not(.abierta) .msg-vacio { display: none; }

  /* ---------------------------------------------------------------
     Videollamadas
     --------------------------------------------------------------- */
  .vc-t-valor { font-size: 1.9rem; }
  .vc-t-titulo { font-size: .72rem; }
  .vc-t-pie { font-size: .8rem; }
  .vc-cuando strong, .vc-quien strong { font-size: 16px; }
  .vc-cuando small, .vc-quien small { font-size: 13.5px; }

  /* Cajones a pantalla casi completa: un cajón estrecho en un móvil es
     un cajón donde no cabe nada. */
  /* Sube desde abajo, de borde a borde. Con el ancho al 100 % pero los
     14 px de margen del escritorio se salía 14 px por la izquierda. */
  .cajon {
    top: max(24px, env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0;
    width: auto; max-width: none; border-radius: 22px 22px 0 0;
    animation-name: cajon-sube;
  }
  .cajon header { padding: 18px 18px 12px; }
  .cajon-cuerpo { padding: 16px 18px; }
  .cajon-pie { padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .cajon-pie .btn { flex: 1 1 auto; }
  @keyframes cajon-sube { from { transform: translateY(40px); opacity: 0; } }
}

/* En pantallas muy estrechas el texto largo de las tarjetas se ahoga. */
@media (max-width: 400px) {
  .tabla td::before { width: 7.5em; font-size: 12.5px; }
  .nav-item { font-size: 11px; }
  .vc-tarjetas { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   La agenda en vertical
   =====================================================================
   Vive fuera de la media query porque el JS la pinta siempre; es el
   bloque de arriba el que decide cuándo se ve. Así, si algún día hace
   falta enseñarla en escritorio (una tablet en recepción, por ejemplo),
   ya está hecha.
   ===================================================================== */
.ag-lista { display: none; gap: 8px; padding: 4px 2px 8px; }

.agl-dia {
  display: flex; align-items: baseline; gap: 10px;
  padding: 16px 4px 4px; border-bottom: 1px solid var(--divider); margin-bottom: 4px;
}
.agl-dia h2 { margin: 0; font-size: 16px; font-weight: 600; }
.agl-dia h2 span {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--marca); background: var(--marca-clara);
  padding: 2px 8px; border-radius: 999px; vertical-align: 2px;
}
.agl-dia small { margin-left: auto; font-size: 13px; color: var(--text-muted); }

.agl-vacio { margin: 6px 4px 12px; color: var(--text-muted); font-size: 14.5px; }

.agl-ausencia {
  padding: 10px 14px; border-radius: 14px; font-size: 14px;
  background: repeating-linear-gradient(135deg, var(--divider) 0 4px, transparent 4px 9px);
  color: var(--text-muted);
}

/* El hueco entre citas es lo que se busca cuando alguien pregunta si
   queda sitio, así que se ve, pero discreto. */
.agl-hueco {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--text-muted); padding: 2px 4px;
}
.agl-hueco::before, .agl-hueco::after {
  content: ""; flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--divider) 0 4px, transparent 4px 8px);
}

.agl-cita {
  display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: start;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 13px 14px; border-radius: 16px;
  background: var(--card-bg); border: 1px solid var(--divider);
  box-shadow: inset 3px 0 0 var(--ag-color, var(--marca));
}
.agl-cita:active { transform: scale(.995); }
.agl-cita.pendiente { border-style: dashed; border-color: var(--aviso); }
.agl-cita.realizada { background: var(--dash-bg); box-shadow: inset 3px 0 0 var(--divider); }
.agl-cita.no_presentada { background: var(--peligro-claro); box-shadow: inset 3px 0 0 var(--peligro); }

.agl-hora { display: grid; gap: 1px; }
.agl-hora strong { font-size: 16.5px; font-variant-numeric: tabular-nums; color: var(--text-dark); }
.agl-hora small { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.agl-cuerpo { display: grid; gap: 3px; min-width: 0; }
.agl-cuerpo > strong {
  font-size: 15.5px; color: var(--text-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agl-cuerpo > small { font-size: 13px; color: var(--text-muted); }

.agl-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.agl-lugar {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--dash-bg); color: var(--text-muted);
}
.agl-lugar.online { background: var(--accion-clara); color: var(--accion); }
.agl-wa {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in oklab, #25D366 20%, transparent); color: #0b7a3b;
}
html[data-theme="dark"] .agl-wa { color: #7ae2a5; }

/* =====================================================================
   Métricas en móvil
   ---------------------------------------------------------------------
   Lo mismo de siempre: en una pantalla de 6 pulgadas las rejillas de
   dos y tres columnas dejan los números en 9px. Aquí van a una columna
   y las tarjetas se aplanan: el título a la izquierda, la cifra a la
   derecha, que es como se lee una lista de cifras en un móvil.
   ===================================================================== */
@media (max-width: 720px) {
  #metricas-root { gap: 14px; }

  .mt-cab { flex-direction: column; align-items: stretch; gap: 12px; }
  .mt-cab h1 { font-size: 1.25rem; }

  /* Los periodos en una sola fila. Son cinco: en rejilla de cuatro «Mes
     anterior» se quedaba sola en otra línea. Si no caben, la fila se
     desliza con el dedo en vez de partirse. */
  .mt-rangos { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mt-rangos::-webkit-scrollbar { display: none; }
  .mt-rango  { flex: 1 0 auto; padding: 10px 10px; font-size: .82rem; text-align: center; min-height: 40px; white-space: nowrap; }

  .mt-veredicto { padding: 18px; }
  .mt-cifra { font-size: 2.1rem; }
  .mt-veredicto p { font-size: .92rem; }

  /* Una columna: dos tarjetas por fila dejan la cifra ilegible. */
  .mt-tarjetas { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mt-tarjeta {
    display: grid; grid-template-columns: 1fr auto; align-items: baseline;
    gap: 2px 12px; padding: 13px 16px; border-radius: 0;
    border-bottom: 1px solid var(--divider);
  }
  .mt-tarjetas .mt-tarjeta:first-child { border-radius: var(--r-lg, 18px) var(--r-lg, 18px) 0 0; }
  .mt-tarjetas .mt-tarjeta:last-child  { border-radius: 0 0 var(--r-lg, 18px) var(--r-lg, 18px);
                                         border-bottom: 0; }
  .mt-t-titulo { font-size: .78rem; text-transform: none; letter-spacing: 0; font-weight: 600;
                 color: var(--text-dark); }
  .mt-t-valor  { grid-row: 1 / 3; grid-column: 2; font-size: 1.45rem; }
  .mt-t-pie    { font-size: .74rem; }
  /* Panel 275 · «Cómo han pagado» iba apretado en tres líneas al lado de las cifras: ahora, una forma por línea. */
  .mt-tarjeta .cb-reparto { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; margin-top: 6px; }
  .mt-tarjeta .cb-reparto > span { display: contents; }

  .mt-bloque { padding: 16px; }

  /* La cuenta: la operación debajo, el importe a la derecha. */
  .mt-cuenta li { grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 0; }
  .mt-cuenta span   { font-size: .88rem; }
  .mt-cuenta em     { font-size: .74rem; line-height: 1.4; }
  .mt-cuenta strong { font-size: 1.05rem; }
  .mt-cuenta li.mt-total strong { font-size: 1.35rem; }

  .mt-lista-plana li { padding: 10px 0; }

  /* Una debajo de otra, y 16px de fuente en los input: con menos, iOS
     hace zoom al tocarlos y deja la pantalla torcida. */
  .mt-campos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mt-c-entrada input { font-size: 16px; min-height: 44px; }
  .mt-acciones .btn { flex: 1 1 auto; min-height: 44px; }
}

/* ---- histórico en móvil ---- */
@media (max-width: 720px) {
  .mt-acumulado strong { font-size: 1.5rem; }
  .mt-leyenda { gap: 4px 14px; }
  .mt-leyenda span { font-size: .78rem; }

  /* El SVG se estira solo, pero con doce meses las etiquetas quedan
     apretadas: se sube el tipo del eje para que sigan leyendose. */
  .mt-eje-x, .mt-eje-y, .mt-coste-rotulo { font-size: 13px; }

  /* El tooltip es de raton. En un movil no hay hover: se fija abajo y
     ocupa el ancho, que es lo que funciona al tocar. */
  .mt-tip { position: static; min-width: 0; margin-top: 10px; }
}

/* Panel 184 · Dedos, no cursor: pestañas y enlaces de las listas, con 44 px de alto. */
@media (max-width: 860px) {
  .mt-pestana, .mt-rango, .es-est { min-height: 44px; }
  [data-mas].btn-enlace { min-height: 44px; padding: 0 8px; }
}