/* Vista docref-operaciones (#sec-docref) · las seis entradas docref-<área>.

   ESCRITORIO: nada. Es la vista modelo «Carpetas + visor» (D-230) y está
   aprobada (§5: panel + visor, buscador, confirmación al eliminar, «Nueva
   carpeta»). Su CSS sigue en index.html tal como lo dejó main; esta hoja no
   le añade ni una regla fuera de `html.mv`.

   TELÉFONO: norma M08. Lo compone movil/docs.js, que marca qué nodos se ven
   (data-mv-ver), añade las migas (.mv-dref-ruta), el «⋯» de cada fila
   (.mv-dref-mas) y la barra del visor (.mv-dref-visor-barra). Aquí va cómo se
   ven.

   ORDEN Y ESPECIFICIDAD. Esta hoja se carga en el <head>; movil/estilos.css
   (Arquetipo F, ~1826-1935) al final del <body> y con `!important`. A igual
   especificidad ganaría aquella. Por eso cada regla lleva el id de la sección
   delante (`html.mv #sec-docref.mv-docref …`): gana por especificidad, no por
   orden, y el `!important` de cada una existe para ganarle a su homóloga de
   estilos.css o del CSS de escritorio en index.html, que también lo usan. */

@media (max-width: 900px) {

  /* ── Cabecera: título arriba, botones debajo en rejilla ─────────────────
     Medido a 390: «Ocultar visor · Nueva carpeta · Leer contrato · Añadir
     archivo» en una fila que no cabía; «Leer contrato» salía cortado por la
     derecha y «Añadir archivo» quedaba fuera de la pantalla. */
  html.mv #sec-docref.mv-docref .dref-cab-sec { display: block !important; margin-bottom: 12px !important; }
  html.mv #sec-docref.mv-docref .dref-cab-tit { min-width: 0 !important; margin-bottom: 10px; }
  html.mv #sec-docref.mv-docref .dref-tb {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    width: 100%;
  }
  html.mv #sec-docref.mv-docref .dref-tb .dref-sp { display: none !important; }
  /* M08: fuera «Ocultar / Mostrar visor». En el teléfono no hay dos columnas
     que alternar: el visor ya se abre solo, a pantalla completa. */
  html.mv #sec-docref.mv-docref .dref-tb .dref-btn[onclick^="drefSoloArbol"] { display: none !important; }
  html.mv #sec-docref.mv-docref .dref-tb .dref-btn {
    width: 100%;
    min-height: 44px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    justify-content: center !important;
    border-radius: 999px !important;   /* G05: botón = pastilla */
  }
  /* La acción principal («Añadir archivo», la única azul) primero y a todo el
     ancho (M07); las secundarias debajo, a partes iguales. */
  html.mv #sec-docref.mv-docref .dref-tb .dref-btn:not(.gris) { grid-column: 1 / -1; order: -1; }
  /* G05: la primaria es azul relleno, no marino. Escritorio sigue con el
     marino de main (§5 aprobado); aquí, en la barra, en el visor
     («Descargar») y en el conmutador carpetas/lista, el azul de tokens.
     Deshabilitada conserva la opacidad que le da escritorio. */
  html.mv #sec-docref.mv-docref :is(.dref-tb, .dref-visor-cab) .dref-btn:not(.gris),
  html.mv #sec-docref.mv-docref .dref-visor-cab .dref-btn.dref-descargar,
  html.mv #sec-docref.mv-docref .dref-modo button.act {
    background: var(--blue-400, #0070B4) !important;
    border-color: var(--blue-400, #0070B4) !important;
    color: #fff !important;
  }
  /* El estado de la conversación con la obra ocupa su propia fila. */
  html.mv #sec-docref.mv-docref .dref-tb .dref-meta {
    grid-column: 1 / -1;
    font-size: 13px !important;
    white-space: normal;
  }
  /* Los estados de paso («Trayendo…», «Guardando…», «✓ Guardado en la
     obra») van en un hueco reservado bajo los botones, fuera del flujo.
     Medido: el «✓ Guardado» se borra solo a los 2,6 s y, en su propia fila,
     subía 60 px todo lo de debajo; un toque en «‹ Carpetas» en ese instante
     caía en otra cosa. El error (rojo, con «Reintentar») no es de paso: se
     queda en su fila, que para eso no se va solo. Se distingue por el color
     que escritorio le pone en línea (#b42318): no hay clase que lo diga. */
  html.mv #sec-docref.mv-docref .dref-cab-sec { position: relative !important; padding-bottom: 24px !important; margin-bottom: 8px !important; }
  html.mv #sec-docref.mv-docref .dref-tb .dref-meta:not([style*="b42318"]) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    white-space: nowrap;
  }

  /* ── Columna de carpetas: sin marco propio, las tarjetas son el marco ──
     G11: un bloque, un contenedor. Si la columna sigue siendo tarjeta, cada
     carpeta sería una tarjeta dentro de otra. */
  html.mv #sec-docref.mv-docref .dref-arbol-col {
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }
  html.mv #sec-docref.mv-docref .dref-arbol-cab {
    background: transparent !important;
    border: 0 !important;
    padding: 0 2px 8px !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;   /* G01: «Carpetas», no «CARPETAS» */
    color: var(--gray-9, #1A2B3C) !important;
  }
  html.mv #sec-docref.mv-docref .dref-arbol-cab .dref-cont { font-size: 13px !important; }
  html.mv #sec-docref.mv-docref .dref-nav { padding: 0 0 10px !important; border: 0 !important; background: transparent !important; }
  html.mv #sec-docref.mv-docref .dref-modo button { min-width: 44px; min-height: 44px; }
  html.mv #sec-docref.mv-docref .dref-buscar .dref-x { min-width: 44px; min-height: 40px; font-size: 18px; }
  /* La cabecera de columnas (Nombre · Elementos · Tamaño · Fecha) es de la
     vista a todo el ancho de escritorio: aquí no hay columnas. */
  html.mv #sec-docref.mv-docref #drefCols { display: none !important; }
  html.mv #sec-docref.mv-docref .dref-arbol { padding: 0 !important; }
  /* «Ordenar nombre · fecha · tamaño» de la lista plana. Medido a 390:
     9,5 px, en mayúsculas por CSS y botones de 35-57 × 44. */
  html.mv #sec-docref.mv-docref .dref-orden {
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    gap: 4px !important;
    flex-wrap: wrap;
  }
  html.mv #sec-docref.mv-docref .dref-orden button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  /* ── Carpetas: se entra tocando, sin árbol desplegable (M08) ───────────
     Solo se ven los hijos DIRECTOS de la carpeta en la que se está; docs.js
     los marca con data-mv-ver. Los contenedores de hijos pierden la sangría
     y la línea discontinua del árbol: aquí no hay niveles a la vista. */
  html.mv #sec-docref.mv-docref[data-mv-dref="carpetas"] .dref-arbol .dref-nodo:not([data-mv-ver]),
  html.mv #sec-docref.mv-docref[data-mv-dref="carpetas"] .dref-arbol .dref-vacia:not([data-mv-ver]) {
    display: none !important;
  }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-hijos {
    display: contents !important;
  }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-vacia {
    padding: 28px 16px !important;
    text-align: center;
    font-size: 14px !important;
    color: var(--gray-7, #5A7A96) !important;
    background: var(--mv-papel, #fff);
    border-radius: 14px;
  }

  /* Migas: «‹ Carpeta madre» y el nombre de donde se está. */
  html.mv #sec-docref.mv-docref .mv-dref-ruta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0 0 10px;
  }
  html.mv #sec-docref.mv-docref .mv-dref-ruta[hidden] { display: none !important; }
  html.mv #sec-docref.mv-docref .mv-dref-volver {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    max-width: 100%;
    padding: 0 12px 0 4px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--blue-400, #0070B4);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
  }
  html.mv #sec-docref.mv-docref .mv-dref-volver svg { width: 20px; height: 20px; flex: none; }
  html.mv #sec-docref.mv-docref .mv-dref-volver span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.mv #sec-docref.mv-docref .mv-dref-aqui {
    padding: 0 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--gray-9, #1A2B3C);
    overflow-wrap: anywhere;
  }

  /* ── Tarjeta por carpeta y por archivo ─────────────────────────────────
     Modelo: Lista personal (móvil) · Bandeja — tarjeta por elemento, título
     en negrita, metadatos debajo (G09: fondo blanco y sombra suave).
       [tipo] nombre ........................ [n] [⋯] [›]
              tamaño · fecha
       (acciones, al abrir el «⋯»)                                        */
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo,
  html.mv #sec-docref.mv-docref .dref-arbol .dref-fila-a {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto auto auto;
    grid-template-rows: auto auto;
    column-gap: 10px !important;
    row-gap: 2px !important;
    align-items: center !important;
    min-height: 64px !important;
    margin: 0 0 8px !important;
    padding: 10px 8px 10px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background: var(--mv-papel, #fff) !important;
    box-shadow: var(--mv-sombra, 0 2px 10px rgba(0, 0, 0, .06)) !important;
  }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo + .dref-nodo { margin-top: 0 !important; }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo.sel:not(.dref-carpeta),
  html.mv #sec-docref.mv-docref .dref-arbol .dref-fila-a.sel {
    border-color: var(--blue-200, #99C6E1) !important;
  }
  /* La lista plana (buscar / todos los archivos) viene envuelta en un div
     con 7 px de relleno en línea: fuera, las tarjetas van al ras. */
  html.mv #sec-docref.mv-docref .dref-arbol > div[style*="padding"] { padding: 0 !important; }

  /* Icono / bloque de tipo: dos filas de alto, a la izquierda. */
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo > .dref-chev { display: none !important; }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo::before,
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo > svg,
  html.mv #sec-docref.mv-docref .dref-arbol .dref-fila-a > svg {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: center;
  }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo[data-mv-tipo="carpeta"] > svg {
    width: 28px !important;
    height: 28px !important;
  }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-fila-a > svg { width: 24px !important; height: 24px !important; }
  /* El bloque de tipo (PDF, XLS…) de estilos.css medía 8,5 px de letra. */
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo[data-mv-ext]::before {
    width: 36px !important;
    height: 36px !important;
    font-size: 11px !important;
  }

  /* Nombre: arriba, completo, en varias líneas si hace falta. */
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nom,
  html.mv #sec-docref.mv-docref .dref-arbol .dref-fila-a .dref-txt {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    color: var(--gray-9, #1A2B3C) !important;
  }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-fila-a .dref-txt { grid-row: 1 / span 2; }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-fila-a .dref-n { font-size: 15px !important; white-space: normal !important; }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-fila-a .dref-m { font-size: 13px !important; font-weight: 500; white-space: normal !important; }
  /* Metadatos debajo del nombre: tamaño a la izquierda, fecha a su lado. */
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo > .dref-tam,
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo > .dref-fec {
    grid-column: 2;
    grid-row: 2;
    font-size: 13px !important;
    color: var(--gray-7, #5A7A96) !important;
    width: auto !important;
    text-align: left !important;
  }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo > .dref-fec { justify-self: end; }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo > .dref-tam:empty,
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo > .dref-fec:empty,
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo > .dref-cont:empty,
  html.mv #sec-docref.mv-docref .dref-arbol .dref-acc-vacio { display: none !important; }

  /* Chips (ejemplo, automática) y el contador de la carpeta, a la derecha. */
  html.mv #sec-docref.mv-docref .dref-arbol .dref-chip-demo,
  html.mv #sec-docref.mv-docref .dref-arbol .dref-chip-auto {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-size: 12px !important;
    text-transform: none !important;   /* G01 */
    letter-spacing: 0 !important;
    padding: 4px 9px !important;
  }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-fila-a .dref-chip-demo { display: none !important; }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo > .dref-cont {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0 !important;
    font-size: 12px !important;
    min-width: 28px;
    text-align: center;
  }
  /* Carpeta: el chevrón dice «se entra» (y la tarjeta entera escucha el toque). */
  html.mv #sec-docref.mv-docref .dref-arbol .dref-nodo[data-mv-tipo="carpeta"]::after {
    content: '';
    grid-column: 5;
    grid-row: 1 / span 2;
    width: 9px;
    height: 9px;
    margin: 0 8px 0 2px;
    border-right: 2px solid var(--gray-6, #8E9093);
    border-bottom: 2px solid var(--gray-6, #8E9093);
    transform: rotate(-45deg);
  }

  /* «⋯» (G16): un solo botón por fila; abre las acciones de escritorio. */
  html.mv #sec-docref.mv-docref .mv-dref-mas {
    grid-column: 4;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--gray-7, #5A7A96);
  }
  html.mv #sec-docref.mv-docref .mv-dref-mas svg { width: 22px; height: 22px; }
  html.mv #sec-docref.mv-docref .mv-dref-mas[aria-expanded="true"] { background: var(--blue-50, #EEF5FA); color: var(--blue-400, #0070B4); }
  html.mv #sec-docref.mv-docref .dref-arbol .dref-acc { display: none !important; }
  /* Abiertas, las acciones son un menú dentro de la tarjeta: un renglón de
     44 px por acción, icono + su nombre (G05). El nombre es el `title` que
     escritorio ya les pone, leído con attr(): no se inventa texto. Medido
     antes de esto: tres iconos de 40×44 sin rótulo, alineados a la derecha. */
  html.mv #sec-docref.mv-docref .dref-arbol [data-mv-acc] > .dref-acc {
    display: flex !important;
    flex-direction: column;
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    width: auto;
    margin: 8px 0 0 !important;
    padding-top: 6px;
    gap: 2px !important;
    opacity: 1 !important;   /* escritorio la deja en 0 hasta el hover */
    border-top: 1px solid var(--mv-borde, #EDF1F6);
  }
  html.mv #sec-docref.mv-docref .dref-arbol [data-mv-acc] > .dref-acc .dref-a {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    gap: 12px;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--gray-9, #1A2B3C) !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
  }
  html.mv #sec-docref.mv-docref .dref-arbol [data-mv-acc] > .dref-acc .dref-a::after { content: attr(title); }
  html.mv #sec-docref.mv-docref .dref-arbol [data-mv-acc] > .dref-acc .dref-a.del { color: var(--red-400, #B42318) !important; }
  html.mv #sec-docref.mv-docref .dref-arbol [data-mv-acc] > .dref-acc .dref-a svg { width: 20px !important; height: 20px !important; flex: none; }

  /* ── Visor: fuera de la página; a pantalla completa al abrir un archivo ──
     M08: «tipo emergente, sin incrustarse bajo la lista». Medido antes: el
     visor iba debajo de las carpetas (top 573 a 390×844), a media pantalla,
     con 380 px de alto y la barra de abajo encima del documento. */
  html.mv #sec-docref.mv-docref .dref-grid { display: block !important; }
  html.mv #sec-docref.mv-docref .dref-visor-col { display: none !important; }
  html.mv #sec-docref.mv-docref[data-mv-visor] .dref-visor-col {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;   /* sobre la barra de pestañas (130) y sus hojas (200); bajo los diálogos .sigf-modal-ov (1200) */
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--mv-papel, #fff) !important;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) !important;
  }
  /* Con el visor delante, la página de debajo no se desplaza. */
  html.mv.mv-dref-visor-abierto,
  html.mv.mv-dref-visor-abierto body { overflow: hidden !important; }

  html.mv #sec-docref.mv-docref .mv-dref-visor-barra {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mv-borde, #EDF1F6);
    flex: none;
  }
  html.mv #sec-docref.mv-docref .mv-dref-visor-tit {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-7, #5A7A96);
  }
  /* G07: cerrar = pastilla «✕ Cerrar» del componente estándar. */
  html.mv #sec-docref.mv-docref .mv-dref-cerrar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px 0 14px;
    border: 1px solid var(--blue-200, #99C6E1);
    border-radius: 999px;
    background: var(--mv-papel, #fff);
    color: var(--blue-500, #005A91);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
  }
  html.mv #sec-docref.mv-docref .mv-dref-cerrar svg { width: 18px; height: 18px; }

  /* Cabecera del archivo dentro del visor: nombre y ruta a lo ancho, las
     flechas y los botones debajo en una fila que puede envolver. */
  html.mv #sec-docref.mv-docref .dref-visor-cab {
    flex: none !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  html.mv #sec-docref.mv-docref .dref-visor-cab .dref-cab-txt { flex: 1 1 100% !important; order: -1; }
  html.mv #sec-docref.mv-docref .dref-visor-cab .dref-t { font-size: 15px !important; white-space: normal !important; }
  html.mv #sec-docref.mv-docref .dref-visor-cab .dref-ruta,
  html.mv #sec-docref.mv-docref .dref-visor-cab .dref-meta { font-size: 13px !important; }
  html.mv #sec-docref.mv-docref .dref-visor-cab .dref-flechas button { min-width: 44px; min-height: 44px; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; }
  html.mv #sec-docref.mv-docref .dref-visor-cab .dref-flechas button svg { width: 20px; height: 20px; }
  html.mv #sec-docref.mv-docref .dref-visor-cab .dref-btn { min-height: 44px !important; min-width: 44px; border-radius: 999px !important; }
  /* Fila de acciones del archivo (Descargar, Renombrar, Reemplazar,
     Eliminar): no se encogen. Medido en un Excel con permiso: Descargar se
     aplastaba a 26 px, su texto montaba sobre «2.9 MB · 04/09/2025» y los
     tres iconos quedaban de 26 × 44. Ahora el tamaño y la fecha toman lo que
     sobra junto a las flechas y los botones bajan a la fila siguiente. */
  html.mv #sec-docref.mv-docref .dref-visor-cab .dref-btn { flex: none !important; }
  html.mv #sec-docref.mv-docref .dref-visor-cab > .dref-meta {
    flex: 1 1 150px !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* «Pantalla completa» sobra: el visor del teléfono ya lo es (G17, nada
     duplicado). */
  html.mv #sec-docref.mv-docref .dref-visor-cab .dref-btn[onclick^="drefPantallaCompleta"] { display: none !important; }
  html.mv #sec-docref.mv-docref .dref-visor { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; }
  html.mv #sec-docref.mv-docref .dref-solo-lectura { flex: none; font-size: 13px !important; }

  /* Aviso de «Deshacer» tras eliminar. Cuelga de <body>, pero solo lo crea
     esta vista (drefSnack). Escritorio lo pone a 26 px del borde: en el
     teléfono quedaba encima de la barra de pestañas, con letra de 12,5 px y
     botones de 28 px. Sube sobre la barra y sus botones llegan a 44 px. */
  html.mv #drefSnack {
    bottom: calc(var(--mv-barra, 58px) + 12px) !important;
    width: calc(100vw - 32px);
    font-size: 14px !important;
  }
  html.mv #drefSnack span { flex: 1; }
  html.mv #drefSnack button { min-height: 44px; min-width: 44px; font-size: 14px !important; }

  /* Diálogo «Nueva carpeta» / «Renombrar» (#drefNmOv). Cuelga de <body>,
     pero solo lo abre esta vista (drefPedirNombre). G01: la franja y «Quedará
     en» salían en mayúsculas por CSS; G05: la acción principal era marino de
     esquina recta. La insignia «CREAR» es texto literal del código de
     escritorio (§5): no se toca desde aquí y se anota en el reporte. */
  html.mv #drefNmOv .dref-nm-bar,
  html.mv #drefNmOv .dref-nm-prev .k,
  html.mv #drefNmOv .dref-nm-bdg { text-transform: none !important; letter-spacing: 0 !important; }
  html.mv #drefNmOv .dref-nm-bar { font-size: 14px !important; }
  html.mv #drefNmOv .dref-nm-prev .k { font-size: 13px !important; }
  html.mv #drefNmOv .dref-nm-bdg { font-size: 12px !important; }
  html.mv #drefNmOv .dref-nm-lbl,
  html.mv #drefNmOv .dref-nm-prev,
  html.mv #drefNmOv .dref-nm-aviso { font-size: 13px !important; }
  html.mv #drefNmOv .dref-nm-b.xs { font-size: 14px !important; padding: 0 14px !important; }
  html.mv #drefNmOv .dref-nm-b { min-height: 44px; border-radius: 999px !important; }
  html.mv #drefNmOv .dref-nm-b:not(.gris) {
    background: var(--blue-400, #0070B4) !important;
    border-color: var(--blue-400, #0070B4) !important;
  }
}