/* ====================================================================
     1. Fichas de color y medida
     ==================================================================== */
  :root {
    /* Neutros: la escala clara de apple.com. */
    --fondo: #FBFBFD;
    --fondo-2: #F5F5F7;
    --tarjeta: #FFFFFF;
    --linea: #E5E5EA;          /* el filete de 1px de todas las cajas */
    --linea-fuerte: #D2D2D7;
    --tinta: #1D1D1F;
    --tinta-2: #6E6E73;
    --tinta-3: #86868B;

    /* Acento UNICO: el oro de Hammick (style.PRIMARY). Es lo unico que
       se hereda de la paleta del escritorio, y a proposito: es la marca. */
    --acento: #A67C27;
    --acento-oscuro: #7C5B19;
    --acento-suave: #FAF4E8;   /* fondos tenidos y botones terciarios */
    --azul-paypal: #EAF2FB;    /* filas de PayPal en Operaciones, ver mas abajo */

    /* EL BROKER DE CADA POSICION, en el borde de su caja. Verde eToro y
       amarillo Alpaca, como los pidio Samuel el 29/09/2026.
       Es la segunda excepcion a "ningun color por funcion", y la misma que
       las filas azules de PayPal: marca DE DONDE SALE la operacion, no si
       va bien o mal. Y hace falta porque las dos plataformas no cuestan lo
       mismo -- el ida y vuelta de un ETF europeo en eToro no es el de una
       accion americana en Alpaca -- asi que mirando una caja hay que saber
       de quien es sin leer la letra pequena.
       Lo ELEGIDO se sigue distinguiendo por el GROSOR del borde, no por su
       color: si no, los dos avisos pelearian por el mismo sitio. */
    --borde-etoro: #1D7A46;    /* el verde de --ok, que ya esta en la paleta */
    --borde-alpaca: #B8860B;   /* amarillo oscuro: legible sobre blanco */

    /* Semanticos, solo para estados. No se usan en botones. */
    --ok: #1D7A46;   --ok-suave: #E9F5EE;
    --mal: #B3261E;  --mal-suave: #FCEBE9;
    --aviso: #8A5A00; --aviso-suave: #FDF3E2;

    /* Tipografia: la del sistema, que en un Mac y en un iPhone es San
       Francisco. Nada de cargar fuentes: se ve nativo y no hay espera. */
    --tipo: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
            Inter, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --t-cuerpo: 15px;
    --t-menor: 13px;
    --t-micro: 11.5px;
    --t-titulo: clamp(26px, 3.4vw, 36px);
    --t-cifra: clamp(25px, 3.2vw, 31px);

    --radio: 14px;             /* cajas */
    --radio-chico: 10px;
    --alto-fila: 38px;         /* fila de tabla en raton */
    --alto-cabecera: 34px;
    --alto-boton: 36px;
    --alto-barra: 52px;
    --alto-opciones: 44px;
    --sombra: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  }

  /* Dedo en vez de raton: todo lo pulsable sube a 44px, que es el minimo
     que Apple marca para un objetivo tactil. No se decide por el ancho de
     la pantalla sino por el tipo de puntero, que es lo que de verdad
     importa (un iPad en horizontal es ancho Y tactil). */
  @media (pointer: coarse) {
    :root { --alto-fila: 46px; --alto-boton: 44px; --alto-cabecera: 38px; }
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--fondo); color: var(--tinta);
    font-family: var(--tipo); font-size: var(--t-cuerpo); line-height: 1.5;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .contenido { max-width: 1120px; margin: 0 auto; padding: 26px 22px 40px; }

  h1 { font-size: var(--t-titulo); font-weight: 600; letter-spacing: -.022em;
       line-height: 1.08; margin: 0 0 6px; text-wrap: balance; }
  .sub { color: var(--tinta-2); margin: 0; font-size: var(--t-menor); }
  /* A que apunte del diario esta vinculado un movimiento del banco, bajo
     su concepto en Conciliacion. */
  .vinculo { display: inline-block; margin-top: 2px; }
  a { color: var(--acento-oscuro); }

  /* ====================================================================
     2. Barra superior (dinamica) y barra de abajo (discreta)
     ==================================================================== */
  /*
    Una sola navegacion, pintada en dos sitios: '.nav-modulos' dentro de la
    barra de arriba cuando hay ancho, y la barra de abajo (.barra) cuando
    no. El marcado se duplica a proposito -- no hay forma de mover un nodo
    de sitio con CSS -- y cada copia se esconde donde no toca.

    OJO al escribir aqui: no se puede nombrar la etiqueta de la barra tal
    cual, con sus corchetes. Las pruebas y scripts/verificar_vm.py la
    buscan con una expresion regular y cazarian este comentario en vez del
    marcado de verdad -- paso.
  */
  .superior {
    position: sticky; top: 0; z-index: 30; height: var(--alto-barra);
    display: flex; align-items: center; gap: 18px; padding: 0 22px;
    /* el vidrio esmerilado de apple.com */
    background: rgba(251,251,253,.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, background .2s ease;
  }
  /* Al bajar, la barra se despega del contenido con un filete. */
  .superior.posada { border-bottom-color: var(--linea); }

  .marca { display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
           font-size: var(--t-menor); font-weight: 600; letter-spacing: -.01em;
           color: var(--tinta); text-decoration: none; }
  .marca-logo { height: 22px; width: auto; border-radius: 4px; }

  .nav-modulos { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }
  .nav-modulos a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: 980px; text-decoration: none;
    color: var(--tinta-2); font-size: var(--t-menor); font-weight: 500;
    white-space: nowrap; transition: color .15s ease, background .15s ease;
  }
  .nav-modulos a .icono { width: 17px; height: 17px; color: currentColor; }
  .nav-modulos a:hover { color: var(--tinta); background: rgba(0,0,0,.04); }
  .nav-modulos a.activo { color: var(--acento-oscuro); background: var(--acento-suave); font-weight: 600; }

  /*
    El menu que se cae al pasar el raton. Va pegado al borde de abajo de
    la barra, sin hueco, para que no se cierre al mover el raton hacia el.
    Solo existe donde hay raton: por debajo de 840px la barra de arriba no
    lleva modulos y se navega con la de abajo.
  */
  .modulo-menu { position: relative; align-self: stretch; display: flex; align-items: center; }
  .desplegable {
    position: absolute; top: 100%; left: 0; min-width: 190px; padding: 6px;
    display: flex; flex-direction: column; gap: 1px;
    /* Opaco, no de vidrio: un menu translucido encima de una tabla llena
       de cifras se lee fatal. */
    background: var(--tarjeta);
    border: 1px solid var(--linea); border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.08);
    opacity: 0; visibility: hidden; transform: translateY(-5px);
    transition: opacity .13s ease, transform .13s ease, visibility .13s;
  }
  .modulo-menu:hover > .desplegable,
  .modulo-menu:focus-within > .desplegable { opacity: 1; visibility: visible; transform: none; }
  .desplegable a {
    padding: 8px 12px; border-radius: 8px; font-size: var(--t-menor); font-weight: 500;
    color: var(--tinta-2); text-decoration: none; white-space: nowrap;
  }
  .desplegable a:hover { background: var(--fondo-2); color: var(--tinta); }
  .desplegable a.activo { color: var(--acento-oscuro); font-weight: 600; }

  .superior-derecha { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
  .fecha { font-size: var(--t-micro); color: var(--tinta-3); }
  .hora { font-size: var(--t-menor); color: var(--tinta-2);
          font-variant-numeric: tabular-nums; }
  .engranaje { display: inline-flex; padding: 6px; border-radius: 980px;
               color: var(--tinta-2); --hueco-engranaje: var(--fondo); }
  .engranaje .icono { width: 19px; height: 19px; color: currentColor; }
  .engranaje:hover { background: rgba(0,0,0,.05); color: var(--tinta); }
  /* La campana de avisos, a la izquierda del engranaje. */
  .campana { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px 6px 6px;
             border-radius: 980px; color: var(--tinta-2); text-decoration: none; }
  .campana:hover { background: rgba(0,0,0,.05); color: var(--tinta); }
  .campana .icono { width: 19px; height: 19px; color: currentColor; }
  .campana-cuenta { background: var(--mal); color: #fff; border-radius: 980px;
                    font-size: var(--t-micro); font-weight: 700; line-height: 1;
                    padding: 3px 6px; min-width: 18px; text-align: center; }
  .engranaje.activo { color: var(--acento-oscuro); background: var(--acento-suave);
                      --hueco-engranaje: var(--acento-suave); }
  .salir-arriba { font-size: var(--t-menor); font-weight: 500; text-decoration: none;
                  color: var(--tinta-2); padding: 7px 12px; border-radius: 980px;
                  border: 1px solid var(--linea-fuerte); white-space: nowrap; }
  .salir-arriba:hover { color: var(--tinta); border-color: var(--tinta-3); }

  /* La fila de opciones del modulo: lo que hace dinamica a la barra. */
  .opciones {
    position: sticky; top: var(--alto-barra); z-index: 29;
    height: var(--alto-opciones); display: flex; align-items: stretch; gap: 2px;
    padding: 0 22px; overflow-x: auto; overflow-y: hidden;
    background: rgba(251,251,253,.86);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--linea);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .opciones::-webkit-scrollbar { display: none; }
  .opciones a {
    display: inline-flex; align-items: center; padding: 0 12px;
    font-size: var(--t-menor); font-weight: 500; color: var(--tinta-2);
    text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
  }
  .opciones a:hover { color: var(--tinta); }
  .opciones a.activo { color: var(--tinta); font-weight: 600;
                       border-bottom-color: var(--acento); }

  /* ---- Menu de movil: boton, velo y hoja ---------------------------
     La barra de abajo ya no existe. En ancho compacto se navega desde una
     hoja que sube, que es el gesto de iOS y deja toda la pantalla al
     contenido. En escritorio ni el boton ni la hoja se pintan. */
  .abrir-menu { display: none; background: transparent; border: 0; color: var(--tinta-2);
                padding: 6px; border-radius: 980px;
                /* objetivo tactil completo: con el padding a secas se
                   quedaba en 34 px y se falla el toque */
                min-width: var(--alto-boton); min-height: var(--alto-boton); }
  .abrir-menu:hover { background: rgba(0,0,0,.05); color: var(--tinta); }

  /*
    'hidden' es un atributo, y el navegador lo aplica con un 'display: none'
    de baja prioridad que cualquier clase pisa. Sin estas dos lineas, la
    hoja estaba VISIBLE desde el primer momento aunque el marcado dijera
    que no.
  */
  .hoja[hidden], .velo[hidden] { display: none; }

  .velo { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.28);
          opacity: 0; transition: opacity .25s ease; }
  .velo.abierto { opacity: 1; }

  .hoja {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
    max-height: 86vh; display: flex; flex-direction: column;
    background: var(--tarjeta);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,.08), 0 -18px 50px rgba(0,0,0,.14);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
  }
  .hoja.abierta { transform: translateY(0); }
  .hoja-asa { flex: 0 0 auto; width: 38px; height: 5px; border-radius: 3px;
              background: var(--linea-fuerte); margin: 8px auto 4px; }
  .hoja-lista { overflow-y: auto; -webkit-overflow-scrolling: touch;
                padding: 4px 10px calc(14px + env(safe-area-inset-bottom, 0px)); }
  /* Modulo: fila alta con su icono, como la cabecera de una seccion en una
     tabla agrupada de iOS. */
  .hoja-modulo { display: flex; align-items: center; gap: 12px; min-height: 52px;
                 padding: 8px 12px; margin-top: 10px; border-radius: 12px;
                 font-size: 17px; font-weight: 600; letter-spacing: -.015em;
                 color: var(--tinta); text-decoration: none; }
  .hoja-modulo:first-child { margin-top: 2px; }
  .hoja-modulo .icono { width: 22px; height: 22px; color: var(--tinta-3); }
  .hoja-modulo.activo { background: var(--acento-suave); color: var(--acento-oscuro); }
  .hoja-modulo.activo .icono { color: var(--acento-oscuro); }
  /* Apartado: fila normal, sangrada bajo su modulo. */
  .hoja-apartado { display: flex; align-items: center; min-height: 46px;
                   padding: 0 12px 0 46px; border-radius: 10px;
                   font-size: 16px; color: var(--tinta-2); text-decoration: none; }
  .hoja-apartado:active { background: var(--fondo-2); }
  .hoja-apartado.activo { color: var(--acento-oscuro); font-weight: 600;
                          background: var(--acento-suave); }

  /* ====================================================================
     3. Cajas
     ==================================================================== */
  .tarjeta { background: var(--tarjeta); border: 1px solid var(--linea);
             border-radius: var(--radio); padding: 18px 20px; margin-bottom: 16px; }
  .cabecera { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
              justify-content: space-between; margin-bottom: 22px; }
  .quien { font-size: var(--t-menor); color: var(--tinta-3); }

  h2.seccion { font-size: 21px; font-weight: 600; letter-spacing: -.018em;
               margin: 30px 0 12px; }
  h2.seccion:first-child { margin-top: 4px; }
  .rotulo-tabla { font-size: var(--t-menor); font-weight: 600; color: var(--tinta-2);
                  margin: 0 0 10px; }
  .vacio { color: var(--tinta-2); background: var(--fondo-2); border: 1px solid var(--linea);
           border-radius: var(--radio); padding: 20px; margin: 0 0 14px; }

  /* ====================================================================
     4. Botones: un solo color, tres pesos
     ==================================================================== */
  /*
    Sigue sin haber "un color por funcion" (que es lo que el usuario mando
    quitar): todos son el mismo oro. Lo que cambia es el PESO -- solido
    para la accion principal, contorno para la secundaria y tenido para la
    terciaria -- que es como distingue Apple sus botones.
  */
  button, .boton, .boton-sec, .discreto, .boton-archivo {
    font-family: inherit; font-size: var(--t-menor); font-weight: 600;
    letter-spacing: -.01em; min-height: var(--alto-boton);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 18px; border-radius: 980px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; line-height: 1;
    transition: background .15s ease, border-color .15s ease, color .15s ease,
                transform .06s ease;
  }
  button, .boton { background: var(--acento); color: #fff; }
  button:hover, .boton:hover { background: var(--acento-oscuro); color: #fff; }
  .boton-sec { background: transparent; color: var(--acento-oscuro);
               border-color: var(--linea-fuerte); }
  .boton-sec:hover { border-color: var(--acento); background: var(--acento-suave); }
  .discreto { background: var(--acento-suave); color: var(--acento-oscuro); }
  .discreto:hover { background: #F3E9D6; }
  button:active, .boton:active, .boton-sec:active, .discreto:active,
  .boton-archivo:active { transform: scale(.97); }
  button:focus-visible, .boton:focus-visible, .boton-sec:focus-visible,
  .discreto:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--acento); outline-offset: 2px;
  }
  .boton-apagado, .boton-apagado:hover { background: var(--fondo-2); color: var(--tinta-3);
                                         border-color: var(--linea); cursor: not-allowed; }
  .enlace-peligro { background: none; border: 0; color: var(--mal); padding: 0 0 0 10px;
                    font-size: var(--t-menor); font-weight: 500; cursor: pointer;
                    text-decoration: underline; border-radius: 0; min-height: 0; }
  .enlace-peligro:hover { background: none; color: #8d1f1a; }
  .acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px;
              align-items: center; }
  /*
    TODOS los mandos de una barra, EXACTAMENTE del mismo alto.

    Medido con navegador el 22/09/2026: en la misma fila del Form 1099 los
    <button> salian a 50 px y los <label> y <a> a 36, aunque el estilo
    calculado de los tres dijera lo mismo (min-height 36, sin relleno
    vertical, border-box). Se reporto como "no estan alineados", y pasaba
    igual en Mensajes con Foto contra Grabar audio.
    No se deja al alto que le toque a cada etiqueta: se fija. Un boton, un
    enlace con pinta de boton y una etiqueta de archivo son tres cosas
    distintas para el navegador y solo coinciden si se les dice.
  */
  .acciones > button, .acciones > .boton, .acciones > .boton-sec,
  .acciones > .discreto, .acciones > .boton-archivo, .acciones > label.boton-archivo,
  .mandos-mensaje > button, .mandos-mensaje > .boton,
  .mandos-mensaje > .boton-sec, .mandos-mensaje > label {
    height: var(--alto-boton); min-height: var(--alto-boton); align-self: center;
    /*
      'margin: 0' no es decoracion: un <label> hereda el margen inferior
      de los rotulos de formulario, y al centrarse en la fila eso lo sube
      la MITAD de ese margen. Medido el 23/09/2026 en el Form 1099:
      "Seleccionar archivo" salia 7 px mas arriba que los botones de al
      lado, que es exactamente la mitad de sus 14 px de margen.
    */
    margin: 0;
  }
  /*
    Una sola accion solida por barra de herramientas -- la primera, que es
    siempre la de crear -- y el resto de contorno. Se hace por POSICION y
    no plantilla a plantilla para que valga en las 58, y se excluye a
    quien ya pidio ser secundario a mano, que si no se le pisaria.
    Con cinco pastillas macizas seguidas (Facturas) la pantalla era un
    bloque de oro, y en un telefono se comian el primer pliegue entero.
  */
  .acciones > button:not(.boton-sec):not(.discreto):not(.boton-apagado):not(:first-child),
  .acciones > .boton:not(:first-child),
  .acciones > .boton-archivo {
    background: transparent; color: var(--acento-oscuro); border-color: var(--linea-fuerte);
  }
  .acciones > button:not(.boton-sec):not(.discreto):not(.boton-apagado):not(:first-child):hover,
  .acciones > .boton:not(:first-child):hover,
  .acciones > .boton-archivo:hover {
    background: var(--acento-suave); border-color: var(--acento); color: var(--acento-oscuro);
  }

  /* ====================================================================
     5. Formularios
     ==================================================================== */
  input[type=text], input[type=password], input[type=email], input[type=date],
  input[type=number], input[type=search], select, textarea {
    font-family: inherit;
    /* 16px en un movil: por debajo de eso, iOS hace zoom al enfocar el
       campo y descoloca la pagina entera. */
    font-size: 16px;
    min-height: var(--alto-boton);
    padding: 8px 12px; border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-chico); background: #fff; color: var(--tinta);
    width: 100%; max-width: 380px;
  }
  @media (min-width: 841px) {
    input[type=text], input[type=password], input[type=email], input[type=date],
    input[type=number], input[type=search], select, textarea { font-size: var(--t-cuerpo); }
  }
  input:focus, select:focus, textarea:focus { border-color: var(--acento); outline: none;
                                              box-shadow: 0 0 0 3px var(--acento-suave); }
  textarea { max-width: 100%; min-height: 150px; resize: vertical; }
  label { display: block; margin-bottom: 14px; }
  label > span { display: block; color: var(--tinta-2); font-size: var(--t-menor);
                 font-weight: 500; margin-bottom: 5px; }
  .casilla { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
  .casilla input { width: auto; min-height: 0; }

  /* Correo: botones y filtro en una sola fila, y el filtro a la derecha. */
  .barra-de-correo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
                     margin: 0 0 18px; }
  .barra-de-correo .en-linea { display: inline-flex; margin: 0; }
  .barra-de-correo .buscador { margin: 0 0 0 auto; }
  /*
    En el telefono los cuatro botones no caben seguidos y quedaban en una
    columna larguisima. Rejilla de dos: "Descargar / Buscar albaranes"
    arriba y "Marcar / Eliminar" debajo, con el buscador a lo ancho.
  */
  @media (max-width: 600px) {
    .barra-de-correo { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
    .barra-de-correo > button, .barra-de-correo .en-linea,
    .barra-de-correo .en-linea > button { width: 100%; }
    .barra-de-correo .buscador { grid-column: 1 / -1; margin-left: 0; width: 100%; }
  }

  /*
    Dos redacciones del mismo rotulo: la larga en pantalla de raton y la
    corta en el telefono. No es JavaScript a proposito -- el texto va en el
    HTML y lo elige el CSS, asi que sale bien tambien en la primera pintada
    y en el PDF. La usan la fecha de Correo (MM/DD), las pestanas de cuenta
    (Hammick / Gmail) y las cabeceras de Saldo bancario (BOFA / PayPal).
  */
  .solo-movil { display: none; }
  /*
    Una explicacion corta DEBAJO de su boton y en una sola linea. Al lado
    empujaba el boton y lo sacaba medio fuera de la pantalla en el
    telefono; debajo no estorba a nadie.
  */
  .pie-de-boton { display: block; margin-top: 6px; white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; }

  .buscador { display: flex; gap: 8px; margin: 0 0 16px; align-items: center; }
  .buscador input[type=search] { flex: 1 1 auto; max-width: 420px; }
  /*
    Buscar dentro de la barra de botones, empujado a la derecha. En
    telefono baja a su propia linea y ocupa el ancho: apretado junto a
    cuatro botones no se puede ni escribir.
  */
  .acciones .buscador.en-la-barra { margin: 0 0 0 auto; }
  .acciones .buscador.en-la-barra input[type=search] { max-width: 300px; }
  @media (max-width: 700px) {
    .acciones .buscador.en-la-barra { margin: 0; flex: 1 0 100%; }
    .acciones .buscador.en-la-barra input[type=search] { max-width: none; }
  }
  .filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 16px; }
  .filtros label { margin: 0; }
  .filtros select, .filtros input { min-width: 180px; }

  /* ====================================================================
     6. Avisos
     ==================================================================== */
  .aviso { padding: 13px 16px; border-radius: var(--radio-chico); margin-bottom: 16px;
           font-size: var(--t-menor); border: 1px solid transparent; }
  .aviso-ok { background: var(--ok-suave); color: var(--ok); border-color: #CDE7D8; }
  .aviso-error { background: var(--mal-suave); color: var(--mal); border-color: #F3D2CE; }
  .aviso-lectura { background: var(--aviso-suave); border: 1px solid #EDD9AE;
                   border-radius: var(--radio); padding: 14px 18px; margin-bottom: 20px;
                   font-size: var(--t-menor); color: var(--aviso); }

  /* ====================================================================
     7. Tablas
     ==================================================================== */
  /*
    Filas mas altas y con filete fino entre ellas (26px era la medida del
    Canvas de Tk: en un telefono no se puede acertar con el dedo). La
    cabecera ya no es una banda mostaza sino una linea de rotulos
    discretos, como las tablas de Apple.
  */
  .tabla-scroll { overflow: auto; -webkit-overflow-scrolling: touch;
                  max-height: calc(var(--alto-cabecera) + var(--alto-fila) * 14);
                  border-radius: var(--radio-chico); }
  table { border-collapse: collapse; width: 100%; font-size: var(--t-menor); }
  th { position: sticky; top: 0; z-index: 1;
       background: var(--fondo-2); color: var(--tinta-2); font-weight: 600;
       text-align: left; height: var(--alto-cabecera); padding: 0 12px;
       white-space: nowrap; border-bottom: 1px solid var(--linea); }
  td { height: var(--alto-fila); padding: 0 12px; background: var(--tarjeta);
       color: var(--tinta); border-bottom: 1px solid var(--linea);
       white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
  tbody tr:last-child td { border-bottom: 0; }
  tbody tr:hover td { background: var(--fondo-2); }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
  tfoot td, td.total, .total { background: var(--fondo-2); color: var(--tinta);
                               font-weight: 600; border-top: 1px solid var(--linea-fuerte); }
  td a { color: var(--tinta); text-decoration: none; font-weight: 600; }
  td a:hover { color: var(--acento-oscuro); }
  .fila-enlace { color: inherit; text-decoration: none; font-weight: 400; }
  .fila-enlace:hover { color: var(--acento-oscuro); }
  tr[data-ir] { cursor: pointer; }
  tr.fila-activa td { background: var(--acento-suave); }
  tr.sin-clasificar td:first-child { box-shadow: inset 3px 0 0 var(--mal); }
  /* Operaciones (24/09/2026): las filas de PayPal en azul claro y las del
     banco sin sombrear. Es la UNICA excepcion a "ningun color por
     funcion" de esta web, y esta justificada: no marca un estado ni una
     gravedad -- marca DE DONDE viene el dato. PayPal y el banco cuentan
     el mismo pago dos veces, y esto es lo que permite saber cual es cual
     de un vistazo. Va con el resto de tonos de la hoja, en :root, y no
     escrito a pelo en la plantilla: esta web no tiene modo oscuro, pero
     el dia que lo tenga este es el unico sitio donde hay que tocarlo. */
  tr.origen-paypal td { background: var(--azul-paypal); }
  /* El identificador es una referencia, no prosa: en monoespaciada se
     compara de un vistazo, que es justo para lo que esta. */
  td.identificador { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                     font-size: var(--t-micro); color: var(--tinta-2);
                     white-space: nowrap; }
  /* Separadores de gui.insert_rows_with_month_separators. */
  tr.separador-mes td { background: var(--fondo-2); color: var(--tinta-2); font-weight: 600;
                        font-size: var(--t-micro); letter-spacing: .04em;
                        height: 30px; border-bottom: 1px solid var(--linea); }
  /* El corte entre dias se veia apenas -- era del mismo tono que la
     linea de cada fila. Dos pixeles y el tono de los bordes fuertes:
     en Pagos, que son decenas de filas seguidas, es lo que deja ver de
     un vistazo donde empieza cada dia. */
  tr.separador-dia td { height: 2px; padding: 0; background: var(--linea-fuerte); border: 0; }
  .col-marca { width: 42px; text-align: center; }
  .col-marca input { width: auto; margin: 0; min-height: 0; }
  .tabla-form { margin: 0; }
  .clasificar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; }
  /*
    En Conciliacion, lo que YA tiene partida se lee como texto y hay que
    abrir "Cambiar" para tocarlo. Antes cada fila pintaba su formulario y
    su boton Guardar aunque no hubiera nada que guardar: 4.401 botones
    para 0 movimientos sin clasificar.
  */
  .partida-puesta { font-weight: 500; }
  .cambiar-partida { display: inline; margin-left: 10px; }
  .cambiar-partida > summary { display: inline; cursor: pointer; color: var(--tinta-3);
                               font-size: var(--t-menor); }
  .cambiar-partida > summary:hover { color: var(--acento); }
  .clasificar select, .clasificar input { max-width: 220px; min-height: 32px; padding: 4px 8px; }
  .clasificar button { min-height: 32px; padding: 0 12px; }

  /* Un justificante de la lista: el papel a la izquierda y sus botones a
     la derecha; en un telefono, uno debajo del otro. */
  .justificante { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
                  justify-content: space-between; padding: 12px 0;
                  border-bottom: 1px solid var(--linea); }
  .justificante:last-child { border-bottom: 0; padding-bottom: 0; }
  .justificante:first-child { padding-top: 0; }
  .justificante .acciones { flex-wrap: nowrap; }

  /* La fila desplegada en movil: los datos que no caben, en vertical. */
  .detalle-fila { display: none; }
  .detalle-fila td { white-space: normal; height: auto; padding: 4px 12px 14px;
                     background: var(--fondo-2); }
  .detalle-lista { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
  .detalle-lista dt { color: var(--tinta-2); font-size: var(--t-micro); }
  .detalle-lista dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
  .abrir-fila { display: none; }
  /* El pie a lo ancho solo existe en compacto. */
  .pie-compacto { display: none; }
  .pie-titulo { font-size: var(--t-micro); font-weight: 600; color: var(--tinta-2);
                margin-bottom: 6px; }

  /* ====================================================================
     8. Pestanas de mes: control segmentado
     ==================================================================== */
  .periodo { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center;
             justify-content: space-between; margin: 0 0 16px; }
  /*
    'width: fit-content' es lo que impide que la pastilla gris se estire
    mas alla de las pestanas y sobresalga del ancho de la tabla: un
    contenedor flex es un bloque y ocupaba toda la fila, dejando un
    rabo gris vacio a la derecha. Con doce meses en una columna estrecha,
    'max-width: 100%' la devuelve a su sitio y se desliza.
  */
  .meses { display: flex; gap: 2px; margin: 0 0 16px; padding: 3px;
           background: var(--fondo-2); border-radius: 980px;
           overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
           width: fit-content; max-width: 100%; }
  .meses::-webkit-scrollbar { display: none; }
  /*
    'repartidas': en vez de que cada pestana ocupe lo que pida y la tira
    se deslice, las trece se reparten el ancho a partes iguales y caben
    todas. Lo pidio Facturas: "pestana sin scroll lateral, haz mas
    pequenas cada pestana para que en el mismo ancho quepan los 12 meses
    y todo". En pantalla estrecha no cabrian ni apretandolas, asi que
    alli vuelven a su tamano y a deslizarse.
  */
  .meses.repartidas { width: 100%; overflow-x: visible; }
  .meses.repartidas .mes { flex: 1 1 0; min-width: 0; padding: 7px 4px;
                           text-align: center; overflow: hidden; }
  @media (max-width: 900px) {
    .meses.repartidas { width: fit-content; max-width: 100%; overflow-x: auto; }
    .meses.repartidas .mes { flex: 0 0 auto; padding: 7px 15px; }
  }
  .periodo .meses { margin: 0; }
  .meses .mes { flex: 0 0 auto; padding: 7px 15px; border-radius: 980px;
                background: transparent; color: var(--tinta-2); text-decoration: none;
                font-size: var(--t-menor); font-weight: 500; white-space: nowrap; }
  .meses .mes:hover { color: var(--tinta); }
  .meses .mes.activo { background: var(--tarjeta); color: var(--tinta); font-weight: 600;
                       box-shadow: 0 1px 3px rgba(0,0,0,.09); }
  /*
    El ano dentro de la barra de botones, empujado a la derecha y a la
    MISMA altura que ellos. Se pidio asi el 22/09/2026 en Depositos,
    Pagos, Ingresos/Gastos, Facturas y Pago de facturas: antes vivia
    sobre las pestanas, con un rotulo "Ano" que descuadraba la fila.
  */
  .anyo-en-la-barra { margin-left: auto; display: flex; align-items: center; }
  .selector-anyo-suelto { min-width: 92px; min-height: var(--alto-boton); margin: 0; }
  @media (max-width: 700px) {
    /* En el telefono la barra se envuelve: el ano deja de empujar y se
       pone a lo ancho, como un boton mas. */
    .anyo-en-la-barra { margin-left: 0; flex: 1 1 100%; }
    .selector-anyo-suelto { width: 100%; }
  }
  .selector-anyo { margin: 0; }
  .selector-anyo label { margin: 0; }
  .selector-anyo select { min-width: 110px; }

  .partidas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
  .partida { padding: 7px 13px; border-radius: 980px; background: var(--fondo-2);
             color: var(--tinta-2); text-decoration: none; font-size: var(--t-menor);
             font-weight: 500; }
  .partida:hover { color: var(--tinta); }
  .partida.activa { background: var(--acento); color: #fff; }

  /* ====================================================================
     9. Cifras, clientes y tarjetas de apartado
     ==================================================================== */
  .cifras { display: grid; gap: 14px; margin-bottom: 16px;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .cifra { display: block; background: var(--tarjeta); border: 1px solid var(--linea);
           border-radius: var(--radio); padding: 18px 20px; color: inherit;
           text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
  a.cifra:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra); }
  .cifra-rotulo { display: block; font-size: var(--t-menor); font-weight: 500;
                  color: var(--tinta-2); }
  .cifra-valor { display: block; font-size: var(--t-cifra); font-weight: 600;
                 letter-spacing: -.022em; color: var(--tinta);
                 font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1.1; }
  .cifra-nota { display: block; font-size: var(--t-micro); color: var(--tinta-3); margin-top: 4px; }
  .cifra-ok .cifra-valor { color: var(--ok); }
  .cifra-mal .cifra-valor { color: var(--mal); }
  .cifras-cambio { margin-top: 18px; }
  /*
    La caja doble de un colaborador o un cliente: lo de hoy y lo de la
    semana en la misma tarjeta, por eso es mas alta que las demas. Dos
    columnas fijas para que las dos queden del mismo tamano aunque una
    lleve mas digitos.
  */
  .cifras-propias { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .cifra-doble { padding: 20px; }
  .cifra-periodo { display: block; font-size: var(--t-micro); color: var(--tinta-3);
                   margin-top: 12px; }
  .cifra-doble .cifra-periodo:first-of-type { margin-top: 10px; }
  .cifra-valor-menor { font-size: calc(var(--t-cifra) * .74); color: var(--tinta-2); }

  .veredicto { margin: 0 0 16px; font-size: 19px; font-weight: 600; letter-spacing: -.018em; }
  .veredicto span { display: block; font-size: var(--t-menor); font-weight: 400;
                    color: var(--tinta-2); }
  .veredicto-ok { color: var(--ok); }
  .veredicto-mal { color: var(--mal); }

  .clientes { display: grid; gap: 14px; margin-bottom: 16px;
              grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
  .cliente { display: block; background: var(--tarjeta); border: 1px solid var(--linea);
             border-radius: var(--radio); padding: 16px 18px; color: inherit;
             text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
  .cliente:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra); }
  .cliente-cabecera { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
                      justify-content: space-between; }
  .cliente-nombre { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
  .cliente-desglose { font-size: 15px; font-weight: 500; display: flex; gap: 10px;
                      color: var(--tinta-2); font-variant-numeric: tabular-nums; }
  .cliente-saldo { display: block; font-size: 24px; font-weight: 600; margin-top: 8px;
                   letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .cliente-tipo { display: block; font-size: var(--t-micro); color: var(--tinta-3); }
  .cliente-pie { display: block; font-size: var(--t-micro); color: var(--tinta-3); margin-top: 6px; }
  /*
    Un cliente dado de baja se ve distinto pero se abre igual: apagado,
    no escondido. Su historico sigue entero y hay que poder consultarlo.
  */
  .cliente-inactivo { background: var(--fondo-2); border-style: dashed; }
  .cliente-inactivo .cliente-nombre, .cliente-inactivo .cliente-saldo { color: var(--tinta-3); }
  .cliente-etiqueta { font-size: var(--t-micro); color: var(--tinta-3);
                      border: 1px solid var(--linea-fuerte); border-radius: 980px;
                      padding: 1px 8px; }
  a.cliente { text-decoration: none; color: inherit; }
  /*
    Las cinco cajas de la ficha, en UNA fila: se pidio asi. Se reparten
    el ancho a partes iguales y solo bajan de fila en pantalla estrecha,
    donde cinco no caben ni apretandolas.
  */
  .cifras-en-fila { display: flex; gap: 12px; flex-wrap: nowrap; }
  .cifras-en-fila > .cifra { flex: 1 1 0; min-width: 0; }
  /*
    Con cinco cajas en una fila, --t-cifra (hasta 31px) desbordaba: se
    reporto que "los valores sobresalen de la caja". Se reduce y se deja
    que baje mas en pantallas estrechas.
  */
  .cifras-en-fila .cifra-valor { font-size: clamp(17px, 1.9vw, 23px); white-space: nowrap; }
  /* El ritmo del ano: en verde, mas pequeno y a la izquierda. */
  .cifra-ritmo { display: flex; flex-direction: column; align-items: flex-start;
                 margin-top: 4px; color: var(--ok); font-size: var(--t-micro);
                 line-height: 1.35; }
  /* En la ficha del propio cliente va bajo su cifra, a la derecha. */
  .cifra-ritmo-derecha { align-items: flex-end; margin-top: 2px; }
  @media (max-width: 900px) { .cifras-en-fila { flex-wrap: wrap; }
                              .cifras-en-fila > .cifra { flex: 1 1 45%; } }
  /*
    Grafica de la ficha: ocupa todo el ancho de la caja.

    Tenia al lado una tabla con las operaciones de cada mes. Se quito el
    23/09/2026 ("quita la tabla de n de operaciones de la grafica, deja
    solo la columna"): repetia lo que ya dice la columna de operaciones
    de la propia grafica, con su valor escrito encima.
  */
  .grafica-caja { display: block; }
  .grafica-caja > .grafica-barras { width: 100%; height: 240px; }
  .leyendas { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
  .leyendas .clave { margin-left: 12px; }
  .leyendas .clave:first-child { margin-left: 0; }
  .clave-media { background: none; border-top: 2px dashed var(--mal); height: 0;
                 width: 14px; border-radius: 0; }
  /* '.lectura' se retiro: el valor de cada barra va ESCRITO encima, asi
     que ya no hace falta una linea que lo repita al pasar el puntero -- y
     asi tambien se ve en el telefono, donde no hay puntero. */
  /* El valor de cada barra, escrito encima y girado 90 grados. */
  .valor-barra { font-size: 9px; fill: var(--tinta-2); }

  .barra-ops { fill: var(--acento); }
  .barra-dep { fill: var(--ok); }
  .barra-pag { fill: var(--tinta-3); }
  .barra:hover { opacity: .75; }
  .media { stroke: var(--mal); stroke-width: 1.5; stroke-dasharray: 5 4; }
  .rotulo-mes { font-size: 10px; fill: var(--tinta-3); }
  .rotulo-media { font-size: 10px; fill: var(--mal); }
  .clave { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
           margin: 0 3px 0 10px; vertical-align: baseline; }
  .clave-ops { background: var(--acento); }
  .clave-dep { background: var(--ok); }
  .clave-pag { background: var(--tinta-3); }
  /*
    Lienzo de firma. 'touch-action: none' es imprescindible: sin el, en
    el movil el dedo desplaza la pagina en vez de dibujar y no se puede
    firmar. El lienzo se estira al ancho de la caja y el JavaScript
    convierte las coordenadas.
  */
  .firma-lienzo { border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-chico);
                  background: var(--tarjeta); padding: 4px; }
  /*
    Un <input type=file> con la pinta del resto de la fila. El control
    nativo no se puede estilar, asi que se esconde -- sin display:none,
    que quitaria el foco del teclado -- y manda el <label>.
  */
  .archivo-escondido { position: absolute; width: 1px; height: 1px; opacity: 0;
                       overflow: hidden; }
  /*
    Sin 'max-width' a proposito: el nombre del archivo se recorta en el
    JavaScript que lo escribe. Poner un ancho aqui hacia saltar
    test_ninguna_clase_de_la_hoja_esta_definida_dos_veces_con_ancho, que
    es el guarda que cazo que '.barra' fuera a la vez la navegacion y una
    barra del grafico. No se debilita un guarda para acomodar un estilo.
  */
  .boton-archivo { white-space: nowrap; }
  .archivo-escondido:focus-visible + .boton-archivo,
  .boton-archivo:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
  /*
    El hilo de mensajes. Los mios a la derecha y los de la otra parte a
    la izquierda: es como se lee un chat sin rotular cada burbuja.
  */
  .hilo { display: flex; flex-direction: column; gap: 10px; }
  .burbuja { max-width: 78%; padding: 9px 13px; border-radius: 16px;
             border: 1px solid var(--linea); }
  .burbuja-mia { align-self: flex-end; background: var(--acento-suave);
                 border-color: var(--acento-suave); }
  .burbuja-suya { align-self: flex-start; background: var(--fondo-2); }
  .burbuja-quien { display: block; font-size: var(--t-micro); color: var(--tinta-3);
                   margin-bottom: 3px; }
  .burbuja-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

  /*
    Las conversaciones, como CAJAS y no como tabla (pedido el
    23/09/2026). Una fila de tabla reparte la informacion en columnas de
    ancho fijo, y con quien / por donde iba / cuando no son tres datos
    independientes: son una ficha. Ademas evita el problema de siempre en
    el telefono, donde el compactador esconde columnas -- ahi se perdio
    primero el boton de abrir y despues la fecha.

    DOS por fila en pantalla grande y UNA a todo el ancho en el telefono.
    'minmax(0, 1fr)' y no '1fr': con 1fr un texto largo sin espacios
    ensancha la columna y descuadra la rejilla.
  */
  .conversaciones { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));
                    margin-bottom: 18px; }
  @media (max-width: 700px) { .conversaciones { grid-template-columns: 1fr; } }

  /*
    La caja ENTERA es el enlace: una zona pulsable de este tamano no hay
    que acertarla, que es lo que pasaba con el boton "Abrir".

    En COLUMNA y no en rejilla. Se probo con 'grid-template-columns:
    minmax(0,1fr) auto' y las cajas se iban a 596 px dentro de un
    contenedor de 362 en un telefono de 390: el tamano minimo intrinseco
    de una rejilla lo marca su contenido, y el ultimo mensaje va en una
    sola linea. Una columna flexible no tiene ese problema -- cada hijo
    encoge si se le dice -- y ademas lee mejor: nombre, ficha, mensaje y
    fecha, uno debajo de otro.
  */
  .conversacion {
    display: flex; flex-direction: column; gap: 3px;
    background: var(--tarjeta); border: 1px solid var(--linea);
    border-radius: var(--radio); padding: 14px 16px;
    color: inherit; text-decoration: none; min-width: 0; overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .conversacion:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra); }
  .conversacion > * { min-width: 0; }
  .conversacion-cabecera { display: flex; align-items: baseline;
                           justify-content: space-between; gap: 10px; min-width: 0; }
  /*
    Todo lo que es texto se corta con puntos suspensivos. Sin esto, un
    nombre o un mensaje largo estira la caja y las dos de la fila dejan
    de medir lo mismo -- y en el telefono se lleva la pagina entera.
  */
  .conversacion-quien, .conversacion-ficha, .conversacion-ultimo {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .conversacion-quien { font-size: var(--t-cuerpo); font-weight: 600; letter-spacing: -.01em; }
  .conversacion-cuenta { background: var(--mal); color: #fff; border-radius: 980px;
                         font-size: var(--t-micro); font-weight: 600; flex: 0 0 auto;
                         padding: 1px 7px; min-width: 20px; text-align: center; }
  .conversacion-ficha { font-size: var(--t-micro); color: var(--tinta-3); }
  .conversacion-ultimo { color: var(--tinta-2); font-size: var(--t-menor); }
  .conversacion-fecha { color: var(--tinta-3); font-size: var(--t-micro); }
  .conversacion-sin-leer { border-color: var(--acento); }
  .conversacion-sin-leer .conversacion-ultimo { color: var(--tinta); font-weight: 500; }

  /*
    Tablas en las que la FILA ENTERA es el enlace (class="tabla-enlace").
    Nacio de la lista de conversaciones: el enlace "Abrir" iba en la
    ultima columna y el compactador del movil esconde esa columna, asi
    que desde el telefono no se podia abrir ninguna conversacion. Con la
    fila entera de zona pulsable da igual que columnas sobrevivan.
  */
  .tabla-enlace tbody tr { cursor: pointer; }
  .tabla-enlace tbody tr:hover td { background: var(--acento-suave); }
  .tabla-enlace td a { color: inherit; text-decoration: none; font-weight: 500; }
  .participantes { display: block; font-size: var(--t-micro); }
  /*
    Las fotos van en MINIATURA y se amplian al tocarlas (pedido el
    22/09/2026). A tamano completo, una foto de telefono ocupaba la
    pantalla entera y empujaba el resto de la conversacion fuera de la
    vista: para leer tres mensajes habia que recorrer metros.
  */
  .burbuja-foto { max-height: 150px; max-width: 100%; width: auto; cursor: zoom-in;
                  border-radius: var(--radio-chico); margin-top: 6px; display: block; }
  /* La capa de ampliar: encima de todo y se cierra tocando donde sea. */
  .visor { position: fixed; inset: 0; z-index: 1000; display: flex;
           align-items: center; justify-content: center; padding: 16px;
           background: rgba(0,0,0,.88); cursor: zoom-out; }
  .visor img { max-width: 100%; max-height: 100%; border-radius: var(--radio-chico); }
  .visor-cerrar { position: fixed; top: 14px; right: 14px; }
  .burbuja-audio { margin-top: 6px; max-width: 100%; }
  .escribir { margin-top: 16px; }
  .escribir textarea { width: 100%; }
  /*
    Los mandos del mensaje. En pantalla grande, los tres en linea y con
    el MISMO alto -- el <label> de la foto no es un boton de verdad y sin
    esto quedaba mas bajo. En el telefono, foto y grabar arriba a medias
    y enviar debajo a todo el ancho, que es como se pidio.
  */
  .mandos-mensaje { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
  /*
    Mismo alto los tres, tambien en pantalla grande: se reporto que
    estaban desalineados. El <label> de la foto no es un boton de
    verdad, asi que no hereda ni el alto ni el centrado -- hay que
    decirselo, y con 'display:flex' el texto queda centrado igual que en
    un <button>.
  */
  .mandos-mensaje > * { min-height: var(--alto-boton); display: flex;
                        align-items: center; justify-content: center; }
  .nota-de-voz { margin-top: 10px; }
  .nota-de-voz audio { width: 100%; display: block; }
  /* Los dos mandos de la nota de voz, a medias: cada uno ocupa
     media fila. Sin nombrarlos aqui a proposito -- las pruebas de
     perfiles limitados buscan esas palabras en TODA la pagina para
     comprobar que a un cliente no se le ofrece ningun boton de
     escritura, y un comentario de CSS las hace fallar. */
  .fila-botones { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
  /*
    Alto FIJO, igual que los demas mandos del mensaje: se reporto que al
    grabar audio los botones se descentraban respecto al resto. Con solo
    'min-height' cada uno crecia lo que le pedia su contenido.
  */
  .fila-botones .mitad { flex: 1 1 0; min-width: 0; margin: 0;
                         height: var(--alto-boton); min-height: var(--alto-boton); }
  @media (max-width: 700px) {
    .mandos-mensaje { flex-wrap: wrap; }
    /*
      'min-width: 0' es lo que hace que los dos midan IGUAL. Un elemento
      flex no encoge por debajo de su contenido salvo que se le diga, y
      la etiqueta de la foto cambia de texto al elegir una ("Foto" pasa a
      ser el nombre del archivo): sin esto se ensanchaba y dejaba a
      "Grabar audio" mas estrecho, que es lo que se reporto.
    */
    .mandos-mensaje > #etiqueta-foto,
    .mandos-mensaje > #grabar { flex: 1 1 0; min-width: 0; overflow: hidden; }
    .mandos-mensaje > #enviar { flex: 1 0 100%; }
  }
  .firma-lienzo canvas { width: 100%; height: auto; display: block; touch-action: none;
                         cursor: crosshair; }
  .firma-mandos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
                  margin-top: 10px; }
  .firma-mandos > button { height: var(--alto-boton); min-height: var(--alto-boton); }
  .firma-aviso { margin-left: 4px; }
  @media (max-width: 700px) {
    /*
      Los tres mandos del semaforo EN UNA FILA en el telefono (pedido el
      22/09/2026). Se repartian mal y el ultimo se caia a la siguiente
      linea, que es lo que se reporto.

      (Sin nombrarlos aqui: las pruebas de perfiles limitados buscan los
      nombres de los botones de escritura en TODA la pagina, y un
      comentario de CSS las hace fallar.)

      'min-width: 0' es lo que lo hace posible: un elemento flex no
      encoge por debajo de su contenido salvo que se le diga, y con la
      barra de serie "Guardar firma" no dejaba sitio al tercero. El
      aviso baja a su propia linea, que es texto y no un mando.
    */
    /*
      Los tres botones se reparten el ancho de la caja.

      Estaba 'flex-wrap: nowrap' y el aviso llevaba 'flex: 1 0 100%':
      sin poder envolver, ese 100% se metia en la MISMA fila y dejaba a
      los tres botones en 16 px. Medido el 23/09/2026 en el Form 1099.

      Con 'wrap' el aviso baja solo a su linea -- es texto, no un mando --
      y los botones se quedan los tres el ancho entero.
    */
    .firma-mandos { flex-wrap: wrap; }
    .firma-mandos > button { flex: 1 1 0; min-width: 0; padding: 0 8px;
                             overflow: hidden; white-space: nowrap; }
    .firma-aviso { flex: 1 0 100%; margin-left: 0; }
  }
  /*
    El semaforo. Rojo salir, naranja borrar, verde guardar -- pedido asi
    para firmar con el movil en la mano. Fuera de la pantalla completa,
    "Salir" no tiene nada de lo que salir, asi que se esconde.
  */
  .semaforo { color: #fff; border: 0; }
  .semaforo-rojo { background: var(--mal); }
  .semaforo-rojo:hover { background: #8C1D18; color: #fff; }
  .semaforo-naranja { background: var(--aviso); }
  .semaforo-naranja:hover { background: #6E4700; color: #fff; }
  .semaforo-verde { background: var(--ok); }
  .semaforo-verde:hover { background: #155C34; color: #fff; }
  .firma:not(.firma-grande) .semaforo-rojo { display: none; }
  /*
    A pantalla completa. Se usa la API del navegador y ADEMAS esta capa
    fija: Safari en el iPhone no da requestFullscreen para elementos que
    no sean <video>, asi que sin esto el boton no haria nada justo en el
    dispositivo para el que se pidio.
  */
  .firma-grande { position: fixed; inset: 0; z-index: 1000; background: var(--fondo);
                  display: flex; flex-direction: column; padding: 12px; gap: 10px; }
  .firma-grande .firma-lienzo { flex: 1 1 auto; min-height: 0; }
  .firma-grande canvas { height: 100%; }
  .firma-grande .firma-mandos { margin: 0; }
  .firma-grande [data-firma-ampliar] { display: none; }
  /* .grafica y .leyenda ya estaban definidas mas abajo (las usa la de
     tipos de cambio): la ficha las reutiliza tal cual. */
  .bien { color: var(--ok); }
  .mal { color: var(--mal); }
  /*
    El unico boton de toda la web que vacia la base entera. No reutiliza
    .boton-sec ni el rojo de las acciones sobre lo marcado: aquellas
    actuan sobre filas elegidas y esta se lleva todo, y tienen que
    leerse distinto.

    Sin la palabra de seis letras a proposito: test_webapp_perfiles_
    limitados busca las etiquetas prohibidas en la PAGINA ENTERA, y una
    dentro de este comentario le hacia saltar. La prueba tiene razon en
    ser estricta; el que sobraba era el comentario.
  */
  .boton-peligro { background: var(--mal); border-color: var(--mal); color: #fff; }
  .boton-peligro:hover { background: #8C1D18; border-color: #8C1D18; color: #fff; }

  .rejilla-apartados { display: grid; gap: 14px;
                       grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
  .apartado { display: flex; flex-direction: column; gap: 5px;
              background: var(--tarjeta); border: 1px solid var(--linea);
              border-radius: var(--radio); padding: 18px 20px; min-height: 84px;
              text-decoration: none; color: var(--tinta);
              transition: border-color .15s ease, box-shadow .15s ease; }
  .apartado:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra); }
  .apartado-nombre { font-weight: 600; letter-spacing: -.012em; }
  .apartado-desc { font-size: var(--t-menor); color: var(--tinta-2); line-height: 1.45; }
  .apartado-pendiente { opacity: .5; border-style: dashed; cursor: default; box-shadow: none; }
  .apartado-pendiente:hover { box-shadow: none; border-color: var(--linea); }
  .apartado-etiqueta { font-size: var(--t-micro); color: var(--tinta-3); }
  .grupo-apartados { grid-column: 1 / -1; }
  .grupo-apartados h2 { font-size: var(--t-menor); font-weight: 600; color: var(--tinta-2);
                        margin: 14px 0 10px; }
  .tarjeta-enlace { display: block; color: inherit; text-decoration: none; }
  .tarjeta-enlace:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra); }

  .pyg { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; margin: 0; }
  .pyg dt { color: var(--tinta-2); }
  .pyg dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
  .pyg-total { border-top: 1px solid var(--linea); padding-top: 10px; font-size: 17px;
               font-weight: 600; }
  /*
    Datos bancarios: etiqueta encima y valor debajo, no en dos columnas.
    Un IBAN o un ABA se copian a mano, asi que el valor va grande, se puede
    seleccionar de un toque y no se parte en un telefono.
  */
  .datos-banco { margin: 0; }
  .datos-banco dt { font-size: var(--t-menor); color: var(--tinta-2); margin-top: 14px; }
  .datos-banco dt:first-child { margin-top: 0; }
  .datos-banco dd { margin: 2px 0 0; font-size: 17px; font-weight: 600;
                    letter-spacing: -.01em; overflow-wrap: anywhere;
                    -webkit-user-select: all; user-select: all; }
  .texto-banco { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
                 -webkit-user-select: all; user-select: all; }

  .cuadre { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; margin: 0 0 8px; }
  .cuadre dt { color: var(--tinta-2); }
  .cuadre dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
  .cuadre .fuerte { font-weight: 600; color: var(--tinta); }
  .cuadre .origen { font-weight: 400; font-size: var(--t-micro); color: var(--tinta-3); }

  /* ====================================================================
     10. Graficos
     ==================================================================== */
  /* OJO con el nombre: 'barra' a secas es la barra de navegacion. */
  .grafico-barras { display: flex; align-items: flex-end; gap: 10px; height: 150px; overflow-x: auto; }
  .grafico-mes { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
  .grafico-par { display: flex; align-items: flex-end; gap: 3px; height: 100%; }
  .grafico-barra { display: block; width: 14px; border-radius: 4px 4px 0 0; min-height: 2px; }
  .grafico-estimado { background: #D9BE86; }
  .grafico-real { background: var(--acento); }
  .grafico-rotulo { font-size: var(--t-micro); color: var(--tinta-3); white-space: nowrap; }
  .grafica { width: 100%; height: 160px; display: block; }
  .leyenda { font-size: var(--t-micro); color: var(--tinta-3); margin: 12px 0 0; }
  .punto { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 5px 0 14px; }
  .punto-estimado { background: #D9BE86; margin-left: 0; }
  .punto-real { background: var(--acento); }

  /* ====================================================================
     11. Composiciones de pantalla
     ==================================================================== */
  .facturas-pantalla { display: grid; gap: 16px; align-items: start;
                       grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .facturas-pantalla > div { margin: 0; }
  /*
    Variante con pestanas: dos filas. Las pestanas solo en la columna de
    la tabla, y la tabla y el previsualizador alineados por arriba en la
    segunda -- si las pestanas fueran la primera cosa de la columna
    izquierda, el previsualizador arrancaria mas alto que la tabla.
  */
  /*
    Tres filas: botones, pestanas y tabla, las tres en la columna
    izquierda -- por eso los cinco botones miden EXACTAMENTE lo mismo que
    la tira de pestanas, que es lo que se pidio. El selector de ano va
    arriba a la derecha y el previsualizador ocupa las dos filas de
    abajo, para quedar alineado con la tabla y no con las pestanas.
  */
  .facturas-pantalla.con-pestanas { grid-template-rows: auto auto minmax(0, 1fr); }
  .con-pestanas > .acciones { grid-area: 1 / 1; margin: 0; flex-wrap: nowrap; }
  /* Se reparten el ancho de la columna a partes iguales. */
  .con-pestanas > .acciones > * { flex: 1 1 0; min-width: 0; text-align: center;
                                  white-space: nowrap; }
  .con-pestanas > .selector-anyo { grid-area: 1 / 2; justify-self: end; }
  .con-pestanas > .meses { grid-area: 2 / 1; }
  .con-pestanas > .lado-tabla { grid-area: 3 / 1; min-width: 0; }
  /*
    Fila 3, la de la tabla: el previsualizador tiene que empezar
    EXACTAMENTE donde empieza la tabla (lo comprueba
    test_webapp_movil.py midiendo las dos cajas). Abarcando tambien la
    fila de las pestanas arrancaba 71 px mas arriba.
  */
  .con-pestanas > .previsualizador { grid-area: 3 / 2; min-width: 0; }
  @media (max-width: 900px) {
    .facturas-pantalla.con-pestanas { grid-template-rows: none; }
    .con-pestanas > .acciones,
    .con-pestanas > .selector-anyo,
    .con-pestanas > .meses,
    .con-pestanas > .lado-tabla,
    .con-pestanas > .previsualizador { grid-area: auto; }
    .con-pestanas > .acciones { flex-wrap: wrap; }
    .con-pestanas > .acciones > * { flex: 0 1 auto; }
  }
  .facturas-pantalla .tarjeta { margin-bottom: 0; }
  .barra-ancha { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
                 justify-content: space-between; }
  .barra-ancha .acciones { margin: 0; }
  .visor-pdf, .visor-correo { width: 100%; height: 620px; border: 1px solid var(--linea);
                              border-radius: var(--radio); background: var(--tarjeta); }
  .mes-y-grafica { display: grid; gap: 14px; align-items: stretch; margin-bottom: 14px;
                   grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr); }
  /* 'min-width: 0' no es adorno: una columna de rejilla no encoge por
     debajo del contenido minimo de lo que lleva dentro, y la grafica (una
     fila de doce meses) arrastraba la pagina entera a 551 px en un
     telefono de 390. Visto con Playwright, no a ojo. */
  .mes-y-grafica > * { min-width: 0; }
  .cifras-apiladas { display: grid; gap: 14px; grid-template-rows: 1fr 1fr; min-width: 0; }
  .cifras-apiladas .cifra { display: flex; flex-direction: column; justify-content: center; }
  .mes-y-grafica .tarjeta { margin: 0; display: flex; flex-direction: column;
                            justify-content: space-between; }
  .mes-y-grafica .grafico-barras { height: 100%; min-height: 200px; overflow: visible; }
  .mes-y-grafica .grafico-mes { flex: 1 1 0; }
  .mes-y-grafica .grafico-barra { width: 22px; }
  /*
    Dos columnas de campos dentro del mismo formulario (Empresa > Datos
    legales). Trece campos en una sola columna hacian una pantalla de dos
    metros para algo que se toca una vez al ano.
  */
  .dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px;
                  align-items: start; }
  .columna-campos { display: flex; flex-direction: column; gap: 0; }
  /* Los campos llenan su columna: con el max-width de serie quedaban
     estrechos y desalineados entre las dos. */
  .columna-campos label input { max-width: none; width: 100%; }
  /* Y el boton de guardar remata la segunda columna a la misma altura. */
  .columna-campos > .acciones { margin-top: 6px; }

  /*
    Dos cajas cuadradas en paralelo (Empresa: el logo y el W-8BEN), del
    mismo ancho que el formulario de arriba.
  */
  /*
    Documentos fiscales: el formulario a la izquierda y lo que ya hay a
    la derecha. La tabla encima obligaba a pasar por delante de todos los
    papeles anteriores para subir uno nuevo.
  */
  .doc-fiscales { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
                  gap: 0 24px; align-items: start; }
  .doc-fiscales > form label input { max-width: none; width: 100%; }

  .dos-cuadradas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
                   align-items: stretch; }
  .dos-cuadradas > .tarjeta { margin-bottom: 16px; display: flex;
                              flex-direction: column; }

  .dos-tablas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .lista-documentos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  .documento { margin-bottom: 0; }
  .documento-titulo { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 6px; }
  .documento-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; }
  .rejilla-statements { display: grid; gap: 14px; margin-bottom: 16px;
                        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .statement { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio);
               margin: 0; padding: 10px; text-align: center; position: relative; }
  .statement input[type=checkbox] { position: absolute; top: 10px; right: 10px; width: auto;
                                    margin: 0; min-height: 0; }
  .statement img { max-width: 100%; border: 1px solid var(--linea); border-radius: 6px; }
  .statement figcaption { font-size: var(--t-micro); color: var(--tinta-3); margin-top: 8px;
                          word-break: break-word; }
  .statement-saldo { display: block; font-size: var(--t-micro); font-weight: 600;
                     color: var(--acento-oscuro); }
  .conversacion { display: flex; flex-direction: column; gap: 16px; }
  .mensaje p { margin: 3px 0 0; white-space: pre-wrap; }
  .quien-habla { font-size: var(--t-micro); font-weight: 600; color: var(--tinta-3); }
  .mensaje-user { border-left: 2px solid var(--acento); padding-left: 14px; }
  .mensaje-assistant { border-left: 2px solid var(--linea); padding-left: 14px; }

  /* El boton de compartir que aparece solo en los telefonos que saben. */
  .compartir { display: none; }
  .compartir.puede { display: inline-flex; }

  /* ====================================================================
     12. Pantallas estrechas
     ==================================================================== */
  @media (max-width: 1080px) { .nav-modulos a span { display: none; }
                               .nav-modulos a { padding: 8px 10px; }
                               .nav-modulos a .icono { width: 20px; height: 20px; } }
  @media (max-width: 900px) {
    .facturas-pantalla { grid-template-columns: 1fr; }
    .visor-pdf, .visor-correo { height: 420px; }
    .rejilla-apartados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /*
    ANCHO COMPACTO (el "compact width" de iOS). Aqui la app deja de tener
    navegacion a la vista: un boton abre la hoja, y toda la pantalla es
    contenido. Nada se desliza de lado.
  */
  @media (max-width: 840px) {
    /*
      En pantalla estrecha, dos columnas de campos no caben: una sola.
      Va DENTRO de este bloque y no en uno propio: las pruebas de diseno
      recortan "el" bloque de 840px por texto, y con dos leian el que no
      era.
    */
    .dos-columnas, .dos-cuadradas, .doc-fiscales { grid-template-columns: 1fr; }
    .nav-modulos { display: none; }
    /* La fila de opciones del modulo se deslizaba en horizontal: eso es
       justo lo que se pidio quitar. Sus apartados estan en la hoja. */
    .opciones { display: none; }
    .abrir-menu { display: inline-flex; }
    .superior { gap: 10px; padding: 0 16px; justify-content: space-between;
                padding-top: env(safe-area-inset-top, 0px);
                height: calc(var(--alto-barra) + env(safe-area-inset-top, 0px)); }
    .marca { flex: 1 1 auto; }
    .hora, .fecha { display: none; }
    .contenido { padding: 20px 16px 30px; }
    .mes-y-grafica { grid-template-columns: 1fr; }
    /* En una columna, la grafica vuelve a tener su propio scroll: doce
       meses no caben de ancho y estirar la pagina no es una opcion. */
    .mes-y-grafica .grafico-barras { overflow-x: auto; }
    .mes-y-grafica .grafico-mes { flex: 0 0 auto; min-width: 34px; }

    /* Las previsualizaciones no se pintan en un telefono: un PDF de A4 en
       390 px no se lee, y el visor se come la pantalla. Se conservan los
       BOTONES, que es lo que de verdad sirve alli -- abrir el documento
       a pantalla completa o compartirlo. */
    .visor-pdf, .visor-correo { display: none; }
    .previsualizador > .vacio { display: none; }
    .previsualizador:empty { display: none; }

    /* Las pestanas de mes, mas pequenas y en varias filas: antes se
       deslizaban de lado y se salian de la pantalla. */
    .meses { flex-wrap: wrap; border-radius: 14px; overflow: visible;
             width: auto; padding: 4px; gap: 3px; }
    .meses .mes { flex: 0 0 auto; padding: 7px 11px; font-size: 13px;
                  border-radius: 10px; }
    .meses .mes.activo { border-radius: 10px; }
    .periodo { align-items: flex-start; }
  }
  @media (max-width: 600px) {
    :root { --t-cuerpo: 16px; --t-menor: 14px; --t-micro: 12px; }
    .rejilla-apartados { grid-template-columns: 1fr; }
    .cifras { grid-template-columns: 1fr; }
    .clientes { grid-template-columns: 1fr; }
    .tarjeta { padding: 16px; border-radius: 12px; }
    /*
      La tabla, al ANCHO DE LA PAGINA en el telefono (pedido el
      22/09/2026). Dentro de la tarjeta se quedaba en 328 px de los 390
      de la pantalla: 16 px de relleno por cada lado que en una pantalla
      estrecha son una columna entera de datos. Se anula el relleno solo
      para la tabla, con margen negativo, y la tarjeta conserva el suyo
      para todo lo demas -- titulos y explicaciones pegados al borde se
      leen mal.
    */
    .tarjeta > .tabla-scroll {
      margin-left: -16px; margin-right: -16px; width: calc(100% + 32px);
    }
    /*
      Y las celdas de los extremos recuperan su aire por dentro -- menos
      las de ancho fijo (la casilla y los tres puntos): ahi el relleno se
      come el control en vez del hueco vacio, y los tres puntos salian
      cortados.
    */
    .tarjeta > .tabla-scroll table th:first-child:not(.col-marca):not(.col-abrir),
    .tarjeta > .tabla-scroll table td:first-child:not(.col-marca):not(.col-abrir) {
      padding-left: 10px; }
    .tarjeta > .tabla-scroll table th:last-child:not(.col-marca):not(.col-abrir),
    .tarjeta > .tabla-scroll table td:last-child:not(.col-marca):not(.col-abrir) {
      padding-right: 10px; }
    .contenido { padding: 18px 14px 26px; }
    .acciones { gap: 8px; }
    .acciones > button, .acciones > .boton, .acciones > .boton-sec, .acciones > .discreto {
      flex: 1 1 auto; min-width: 44%;
    }
    .cabecera { margin-bottom: 16px; }
    /* En un telefono, quien eres ya lo sabes: ese renglon solo robaba
       sitio encima del contenido. */
    .quien { display: none; }
    .visor-pdf, .visor-correo { height: 320px; }
    .dos-tablas, .lista-documentos { grid-template-columns: 1fr; }

    /* Tabla compacta: se quedan la primera columna y la primera numerica,
       y el resto baja a la fila desplegable. Lo reparte el guion de abajo
       segun las cabeceras, asi que vale para TODAS las tablas sin que
       ninguna pantalla tenga que declarar nada. */
    /*
      Sin tope de alto -- en un telefono se lee de corrido, no en una
      ventanita de 14 filas -- pero CON scroll horizontal propio: una tabla
      que el guion no puede compactar (tres columnas de texto largo, como
      la de cuentas de correo) se desliza DENTRO de su tarjeta en vez de
      empujar la pagina entera y traer de vuelta el scroll lateral.
    */
    .tabla-scroll { max-height: none; overflow-x: auto; }
    table.compacta td.oculta-movil, table.compacta th.oculta-movil { display: none; }
    /*
      Dia a Dia (class="tabla-entera"): cuatro columnas que tienen que
      caber sin deslizar. Lo unico que sobraba era el ancho de la fecha --
      "J 09/17" pide 62 px, no los 120 que se llevaba por defecto-- asi
      que se le fija y las tres cifras se reparten el resto, que es lo que
      empuja "D.ACC" a la vista.
    */
    table.tabla-entera { table-layout: fixed; width: 100%; font-size: 13px; }
    table.tabla-entera td, table.tabla-entera th { padding: 0 6px; }
    table.tabla-entera .dia-compacto,
    table.tabla-entera th:first-child { width: 62px; white-space: nowrap; }
    /*
      Las Notas de Ingresos/Gastos se leen en la propia fila (col-movil):
      abrir el desplegable para ver dos palabras no tenia sentido. Se
      recortan con puntos suspensivos, y el desplegable queda para el
      resto -- y solo aparece si de verdad hay algo escrito.
    */
    table.compacta td.col-notas {
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /*
      'table-layout: fixed' es lo que reparte el ancho entre las columnas
      que quedan en vez de dejar que crezcan con su contenido. Sin esto, un
      remitente largo empujaba la tabla mas alla de la pantalla y volvia el
      scroll lateral por la puerta de atras.
    */
    table.compacta { table-layout: fixed; width: 100%; font-size: 13px; }
    table.compacta td, table.compacta th { max-width: none; padding: 0 6px; }
    /* el rotulo de la cabecera tambien se recorta: con la rejilla fija, un
       "Remitente" largo se salia de su celda */
    table.compacta th { overflow: hidden; text-overflow: ellipsis; }
    /*
      Las cifras, a lo justo, y la casilla mas estrecha: con tres columnas
      de datos en 390 px cada pixel cuenta. La casilla y los tres puntos
      conservan sus 44 px de zona pulsable por el padding del propio
      control, no por el ancho de la celda.

      ':not(.oculta-movil)' no es un adorno. En una rejilla fija, una
      columna ESCONDIDA con anchura puesta sigue reservando su sitio: la
      Deducible de Pagos se quedaba con 84 px invisibles y dejaba a la
      fecha en 12, ilegible, con la tabla sin llenar la tarjeta.
    */
    table.compacta td.num:not(.oculta-movil),
    table.compacta th.num:not(.oculta-movil) { width: 86px; }
    table.compacta .col-marca { width: 34px; }
    /*
      La zona pulsable, a 44 px, SIN agrandar el dibujo.
      El comentario que habia aqui daba por hecho que los tres puntos
      conservaban sus 44 px "por el padding del propio control", y medido
      contra el sitio real eran 32x32. Igual que "Salir" (37) y los
      enlaces "Abrir" de Mi ficha (17). Son justo lo que un cliente toca
      desde el telefono, asi que se agranda la zona con un pseudo-elemento:
      el circulo se sigue viendo de 32 px y el dedo acierta en 44.
    */
    /* Las pestanas de mes median 34 px y son lo que mas se toca para
       filtrar. Aqui SI se agranda el control: en un telefono, 44 px es
       la regla de Apple, no un capricho. */
    .meses .mes { min-height: 44px; display: inline-flex; align-items: center; }
    .marca { min-height: 44px; }
    /* El engranaje media 31 px (19 de icono + 6 de padding por lado). */
    .engranaje { min-width: 44px; min-height: 44px; justify-content: center; }
    .campana { min-height: 44px; }

    /* La zona pulsable se gana ENSANCHANDO SU COLUMNA, no desbordando la
       celda: un ::after de 44 px centrado sobresalia 6 px por cada lado y
       la prueba de movil lo cazaba como contenido cortado (scrollWidth >
       clientWidth). Dentro de la celda, el ::after la llena entera. */
    table.compacta .col-abrir { width: 44px; }
    table.compacta .abrir-fila { position: relative; }
    table.compacta .abrir-fila::after {
      content: ""; position: absolute; left: 0; right: 0; top: 50%;
      height: 44px; transform: translateY(-50%);
    }
    .salir-arriba { min-height: 44px; display: inline-flex; align-items: center; }
    /* Enlaces sueltos dentro de una tabla o una tarjeta ("Abrir" de los
       contratos): son <a> en linea, sin caja propia que agrandar. */
    .tarjeta td a:not(.boton):not(.boton-sec),
    .tabla-scroll td a:not(.boton):not(.boton-sec) { position: relative; }
    .tarjeta td a:not(.boton):not(.boton-sec)::after,
    .tabla-scroll td a:not(.boton):not(.boton-sec)::after {
      content: ""; position: absolute; left: -6px; right: -6px;
      top: 50%; height: 44px; transform: translateY(-50%);
    }

    table.compacta .abrir-fila {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; padding: 0; min-height: 0; border-radius: 980px;
      background: transparent; border: 0; color: var(--tinta-3); font-size: 15px;
    }
    table.compacta .col-abrir { width: 34px; text-align: center; padding: 0; }
    table.compacta tr.desplegada + .detalle-fila { display: table-row; }
    table.compacta tfoot tr:not(.pie-compacto) { display: none; }
    table.compacta tr.pie-compacto { display: table-row; }
    table.compacta tr.pie-compacto td { white-space: normal; height: auto;
                                        padding: 10px 12px; }
    table.compacta tr.desplegada .abrir-fila { color: var(--acento); }

    .solo-ancho { display: none; }
    .solo-movil { display: inline; }
    /* menos el pie de boton, que va debajo y necesita ser bloque */
    .solo-movil.pie-de-boton { display: block; }

    /*
      Seleccion multiple en el telefono CON casilla, mas el sombreado al
      tocar la fila.

      Estuvo escondida ("con checkbox en la app y la web y sin checkbox en
      el movil (sombreando)") y costo un fallo real: el 22/09/2026 no se
      pudo quitar desde el telefono un gasto duplicado de 16,23 de
      Amazon. El gesto de tocar la fila funcionaba, pero no se anuncia en
      ningun sitio -- quien no lo conoce usa la barra de acciones sin
      nada marcado y solo recibe "Marca primero un movimiento de la
      lista", que suena a que la pantalla esta rota. Una casilla que se
      ve dice por si sola que hay algo que marcar.

      (Y sin nombrar aqui los botones de la barra: las pruebas de
      perfiles limitados buscan esas palabras en TODA la pagina para
      comprobar que a un cliente no se le ofrece ninguno, y un
      comentario de CSS las hace fallar.)

      Se ensena a 24 px, no a los 16 de serie: a 16 no se acierta con el
      dedo, que era la otra mitad de la razon para haberla quitado.
    */
    table.tabla-tocar .col-marca { display: table-cell; width: 34px; }
    table.tabla-tocar .col-marca input { width: 24px; height: 24px; }
    table.tabla-tocar tbody tr.marcada td { background: var(--acento-suave); }
    table.tabla-tocar tbody tr.marcada td:first-child {
      box-shadow: inset 3px 0 0 var(--acento); }

    /*
      Correo: 15 filas y a partir de ahi scroll DENTRO de la tarjeta, solo
      vertical. Sin el tope, la bandeja (200 correos) hacia una pagina de
      varios metros y la barra de botones se perdia arriba del todo.
    */
    /*
    El historial de saldos en el telefono: diez filas y a partir de ahi
    se desliza DENTRO de su caja. Pedido el 23/09/2026 -- con un ano
    entero de saldos anotados, la pantalla se hacia de varios metros y
    todo lo que venia debajo quedaba inalcanzable.

    El alto sale de las variables, no de un numero a ojo: si cambia el
    alto de fila o el de cabecera, esto sigue siendo diez filas.
  */
  @media (max-width: 700px) {
    .historial-saldos {
      max-height: calc(var(--alto-cabecera) + var(--alto-fila) * 10);
      overflow-y: auto; overflow-x: hidden;
    }
  }

  .lado-tabla .tabla-scroll {
      max-height: calc(var(--alto-cabecera) + var(--alto-fila) * 15);
      overflow-y: auto; overflow-x: hidden;
    }

    /*
      La tabla que NO se compacta (data-compacta="si"): sus cuatro
      columnas caben si se reparte el ancho en vez de dejarlo al
      contenido. Es el caso de "Saldo de clientes": con los rotulos
      cortos (BOFA / PayPal) entra tambien el Total, que era lo que se
      caia fuera.
    */
    table.reparte-ancho { table-layout: fixed; width: 100%; font-size: 12.5px; }
    table.reparte-ancho td, table.reparte-ancho th { padding: 0 5px; }
    table.reparte-ancho td:first-child, table.reparte-ancho th:first-child {
      overflow: hidden; text-overflow: ellipsis; }
    table.reparte-ancho td.num, table.reparte-ancho th.num { width: 26%; }
  }

  /* El diagrama del mapa de ruta (Mercados). Las cajas se leen de
     izquierda a derecha y son el camino que recorre un dolar: del saldo de
     la cuenta al del plan, de ahi a una posicion, y de ahi a los tres
     finales posibles. Una tabla de porcentajes no ensena que el "por
     posicion" es del saldo del PLAN y no de la cuenta; unas cajas con
     flechas, si. */
  .diagrama-mapa { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch;
                   margin: 10px 0 0; }
  .caja-mapa { flex: 1 1 150px; min-width: 140px; background: var(--tarjeta);
               border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px;
               display: flex; flex-direction: column; gap: 2px; }
  .caja-mapa strong { font-size: 20px; line-height: 1.1; }
  .caja-rotulo { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
                 color: var(--tinta-2); }
  .caja-mapa .sub { font-size: 12px; }
  /* Los tres finales, con su color: el verde y el rojo no son decoracion,
     son lo que distingue "sale bien" de "se para todo". */
  .caja-mapa-bien { border-color: var(--ok); }
  .caja-mapa-mal { border-color: var(--mal); }
  .caja-mapa-freno { border-color: var(--mal); border-style: dashed; }
  .flecha-mapa { align-self: center; color: var(--tinta-2); font-size: 20px; }
  /* REJILLA DE TARJETAS (Mercados). Doce tarjetas apiladas son dos
     pantallas de scroll para ver cuatro cifras. En rejilla caben tres por
     fila en un portatil y una en el movil, sin media queries: el
     auto-fit con minmax lo resuelve solo. */
  .rejilla { display: grid; gap: 12px; margin: 0 0 12px;
             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .rejilla > .tarjeta { margin: 0; }
  /* Varios campos cortos en fila, para los criterios de Fundamentos. En el
     telefono se apilan solos: `auto-fit` con un minimo de 150 px. */
  .rejilla-campos { display: grid; gap: 12px;
                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .rejilla-campos label { margin: 0; }
  /* La tarjeta compacta: menos aire, titulo mas pequeno. Se usa donde hay
     cuatro cifras y no un informe. */
  .tarjeta-mini { padding: 12px 14px; }
  .tarjeta-mini .rotulo-tabla { font-size: 12px; letter-spacing: .06em;
                                text-transform: uppercase; margin: 0 0 6px; }
  .tarjeta-mini .total { font-size: 22px; }
  .tarjeta-mini dl.cuadre { margin: 6px 0 0; font-size: 13px; }
  /* Lo largo va plegado. El resumen tiene que parecer pulsable: un
     triangulo solo no basta. */
  details.pliegue > summary { cursor: pointer; font-size: 13px;
                              color: var(--tinta-2); padding: 2px 0;
                              list-style-position: outside; }
  details.pliegue > summary:hover { color: var(--tinta); }
  details.pliegue[open] > summary { margin-bottom: 6px; }
  /* Una fila de cifras sueltas, para el estado de un vistazo. */
  .tiras { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px;
           margin: 0; }
  .tiras > span { white-space: nowrap; }

  /* Cada posicion concreta del plan, con su flujo stop/entrada/objetivo. */
  .posicion-mapa { border: 1px solid var(--linea); border-radius: 10px;
                   padding: 10px 12px; margin: 8px 0 0; }
  .posicion-cabecera { display: flex; gap: 8px; align-items: baseline;
                       flex-wrap: wrap; }
  /* PESTANAS POR NIVEL DE RIESGO, sin una linea de JavaScript. Radios
     ocultos + labels + el selector ~ : el navegador ya sabe hacer esto, y
     una pestana que no funciona con el JS desactivado no es una pestana,
     es un adorno. */
  .pestanas-riesgo > input[type="radio"] { position: absolute; opacity: 0;
                                           pointer-events: none; }
  .tiras-pestanas { display: flex; gap: 6px; flex-wrap: wrap;
                    border-bottom: 1px solid var(--linea); margin: 0 0 12px; }
  .tiras-pestanas > label { cursor: pointer; padding: 8px 14px; font-size: 14px;
                            color: var(--tinta-2); border-bottom: 2px solid transparent;
                            margin-bottom: -1px; white-space: nowrap; }
  .tiras-pestanas > label:hover { color: var(--tinta); }
  .hoja-riesgo { display: none; }
  /* Un radio marcado enciende su etiqueta y su hoja. Van por nombre fijo
     para que se pueda escribir el selector sin generarlo. */
  #riesgo-conservador:checked ~ .tiras-pestanas label[for="riesgo-conservador"],
  #riesgo-moderado:checked    ~ .tiras-pestanas label[for="riesgo-moderado"],
  #riesgo-agresivo:checked    ~ .tiras-pestanas label[for="riesgo-agresivo"] {
      color: var(--tinta); border-bottom-color: var(--acento); font-weight: 600; }
  #riesgo-conservador:checked ~ .hoja-conservador,
  #riesgo-moderado:checked    ~ .hoja-moderado,
  #riesgo-agresivo:checked    ~ .hoja-agresivo { display: block; }

  /* EL DIAGRAMA DE FLUJO DE UNA POSICION. Una caja por posicion con sus
     cuatro cifras dentro -- entrada, objetivo, stop y tiempo -- y flechas
     a las alternativas a las que saltaria. Antes eran cuatro cajas en fila
     por posicion: ocupaba una pantalla por posicion y no se podia comparar
     ninguna con ninguna. */
  .flujo { display: flex; gap: 12px; align-items: flex-start; flex-wrap: nowrap;
           overflow-x: auto; padding: 2px 0 6px; }
  .flujo-columna { display: flex; flex-direction: column; gap: 8px; }
  .caja-posicion { border: 1px solid var(--linea); border-radius: 10px;
                   background: var(--tarjeta); padding: 8px 10px; min-width: 176px; }
  /* La elegida se distingue por PESO y por un filete, no por color de
     fondo: el color por funcion esta reservado a bien/mal. */
  /* El borde dice DE QUE BROKER es, y el grosor si esta elegida. Dos
     avisos distintos en la misma linea, y por eso ninguno usa el recurso
     del otro. El orden importa: 'dentro' va DESPUES para que su grosor
     gane, y el color lo pone la clase del broker. */
  .caja-posicion.broker-etoro { border-color: var(--borde-etoro); }
  .caja-posicion.broker-alpaca { border-color: var(--borde-alpaca); }
  .caja-posicion.dentro { border-width: 2px; padding: 7px 9px; }
  /* Sin broker conocido se queda el oro de antes: una caja sin color de
     broker es una tesis vieja, y no se le inventa uno. */
  .caja-posicion.dentro:not(.broker-etoro):not(.broker-alpaca) {
      border-color: var(--acento); }
  /* La leyenda, para que los colores signifiquen algo sin que nadie lo
     tenga que contar. */
  .leyenda-brokers { display: flex; flex-wrap: wrap; gap: 14px;
                     font-size: var(--t-micro); color: var(--tinta-2);
                     margin: 0 0 10px 2px; }
  .leyenda-brokers span { display: inline-flex; align-items: center; gap: 5px; }
  .leyenda-brokers i { width: 22px; height: 0; border-top: 2px solid var(--linea);
                       display: inline-block; }
  .leyenda-brokers .de-etoro i { border-color: var(--borde-etoro); }
  .leyenda-brokers .de-alpaca i { border-color: var(--borde-alpaca); }

  /* LA CAJA DE UNA POSICION ABIERTA: compacta y con el color de su
     plataforma. Pedido por Samuel el 30/09/2026. El borde a 2 px porque
     aqui no compite con nada -- en las cajas del mapa el grosor dice si
     esta elegida, y aqui todas lo estan por definicion. */
  .caja-compacta { border: 2px solid var(--linea); border-radius: 10px;
                   padding: 10px 12px; background: var(--tarjeta); }
  .caja-compacta.broker-etoro { border-color: var(--borde-etoro); }
  .caja-compacta.broker-alpaca { border-color: var(--borde-alpaca); }
  /* Las cifras en rejilla y no en una frase: en una frase hay que leerla
     entera para encontrar una; aqui se busca la columna. En el telefono
     caen a dos columnas solas. */
  .cifras-compactas { display: grid; gap: 2px 14px; margin: 8px 0 0;
                      grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .cifras-compactas dt { font-size: var(--t-micro); color: var(--tinta-2);
                         text-transform: uppercase; letter-spacing: .05em;
                         grid-row: 1; margin: 0; }
  .cifras-compactas dd { font-size: 15px; font-weight: 600; grid-row: 2;
                         margin: 0; }
  .caja-posicion.fuera { opacity: .62; }
  /* El indice de seguridad y la casilla, FUERA de la caja y encima, que es
     donde los pidio Samuel: se leen los dos de una pasada vertical sin
     entrar en la caja. */
  .sobre-la-caja { display: flex; align-items: center; gap: 6px;
                   font-size: 12px; color: var(--tinta-2); margin: 0 0 3px 2px; }
  .sobre-la-caja input[type="checkbox"] { width: 17px; height: 17px; margin: 0;
                                          flex: 0 0 auto; cursor: pointer; }
  .sobre-la-caja .seguridad { font-weight: 600; color: var(--tinta); }
  .cifras-posicion { display: grid; grid-template-columns: auto 1fr;
                     gap: 1px 8px; font-size: 12px; margin: 4px 0 0; }
  .cifras-posicion dt { color: var(--tinta-2); }
  .cifras-posicion dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
  /* De una caja de posicion lo primero que se busca es a cuanto se entra:
     va grande y sin rotulo delante. Las otras tres cifras son el marco. */
  .entrada-grande { font-size: 21px; line-height: 1.1; margin: 3px 0 1px;
                    font-variant-numeric: tabular-nums; }
  .entrada-grande .sub { font-size: 11px; letter-spacing: .06em;
                         text-transform: uppercase; }
  .mini-grafica { margin: 2px 0 3px; }
  .flecha-salto { align-self: center; color: var(--tinta-2); font-size: 18px;
                  padding: 0 2px; white-space: nowrap; }
  .caja-alternativa { border-style: dashed; min-width: 158px; }
  .rotulo-columna { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
                    color: var(--tinta-2); margin: 0 0 2px 2px; }

  @media (max-width: 720px) {
    /* En el movil las cajas se apilan y las flechas sobran: apuntarian
       hacia un lado cuando el camino va hacia abajo. */
    .caja-mapa { flex: 1 1 100%; }
    .flecha-mapa { display: none; }
    /* El flujo si conserva las flechas, pero en vertical: el salto a la
       alternativa es la informacion, no el adorno. */
    .flujo { flex-wrap: wrap; overflow-x: visible; }
    .flujo-columna { width: 100%; }
    .flecha-salto { align-self: flex-start; transform: rotate(90deg);
                    margin: 2px 0 2px 20px; }
    .tiras-pestanas > label { flex: 1 1 auto; text-align: center; padding: 8px 6px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

/* ====================================================================
   Mercados y Diario -- 30/09/2026
   ==================================================================== */
/* Un estado, una forma: los chips de motor, mapa y eToro en la primera
   linea de Mercados. Semantica por color (ok / mal), forma identica. */
.chips-estado { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip-estado { display: inline-flex; align-items: center; min-height: 32px;
               padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
               border: 1px solid var(--linea); background: var(--tarjeta); color: var(--tinta);
               text-decoration: none; }
.chip-estado.ok { border-color: var(--ok); color: var(--ok); }
.chip-estado.mal { border-color: var(--mal); color: var(--mal); }
.chip-estado.sub { color: var(--tinta-2); }
.chip-estado.enlace { color: var(--acento-oscuro); }
/* Los avisos urgentes, como lista y no como tabla: en el telefono la tabla
   escondia justo el texto. */
.lista-avisos { margin: 0; padding-left: 18px; }
.lista-avisos li { margin: 0 0 8px; }
/* El filtro del Diario: pestanas que son enlaces (?tipo=), sin JavaScript. */
.pestana-enlace { text-decoration: none; padding: 8px 12px; font-size: 14px; color: var(--tinta-2);
                  border-bottom: 2px solid transparent; }
.pestana-enlace.activa { color: var(--tinta); font-weight: 600; border-bottom-color: var(--acento); }
/* En el telefono, la caja del motor va la primera: es lo que hace falta
   saber antes que la rentabilidad y la cuenta. */
@media (max-width: 720px) {
  #cabecera-mercados .caja-motor { order: -1; }
  /* La caja de una posicion propuesta, compacta: en 390 px una posicion
     ocupaba la pantalla entera y "el triple para comparar" eran tres
     pantallas por posicion. La miniatura y las cifras van bajo el pliegue. */
  .caja-posicion .mini-grafica { display: none; }
  .caja-posicion .entrada-grande { font-size: 18px; }
  .caja-posicion.dentro { padding: 6px 8px; }
  .cifras-posicion { gap: 1px 8px; font-size: 12px; }
}
/* La vigilancia de eToro en CAJAS, no en tabla: el compactador del movil
   escondia justo "que hay que hacer" y el formulario de cierre. Dos por fila
   en pantalla grande, una en el telefono, como Mensajes. */
.cajas-vigilancia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                    gap: 10px; }
.caja-vigilancia { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px;
                   display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.caja-vigilancia.urgente { border-color: var(--mal); }
.caja-vigilancia .cabecera-caja { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.caja-vigilancia .cifras-compactas { margin: 0; }
.caja-vigilancia .instruccion { font-size: 13px; }
/* Las dos vistas de Mercados: AHORA (lo que pasa) y MAPAS (lo que se
   planea). Radios ocultos y CSS, sin JavaScript, como las pestanas de riesgo. */
.vistas-mercados > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.hoja-vista { display: none; }
#vista-ahora:checked ~ .hoja-ahora, #vista-mapas:checked ~ .hoja-mapas { display: block; }
#vista-ahora:checked ~ .tiras-vistas label[for="vista-ahora"],
#vista-mapas:checked ~ .tiras-vistas label[for="vista-mapas"] {
  color: var(--tinta); font-weight: 600; border-bottom-color: var(--acento); }
.tiras-vistas { display: flex; gap: 6px; margin: 0 0 12px; border-bottom: 1px solid var(--linea); }
.tiras-vistas > label { cursor: pointer; padding: 10px 14px; font-size: 14px; color: var(--tinta-2);
                        border-bottom: 2px solid transparent; margin: 0 0 -1px; min-height: 44px;
                        display: inline-flex; align-items: center; }
/* Las graficas por <img>: al ancho de su caja, sin saltos al cargar. */
.grafica-img { display: block; width: 100%; height: auto; }

/* ====================================================================
   Mercados, rediseno del 01/10/2026: todo a la vista, sin pliegues
   ==================================================================== */
/* Las cuatro cifras del dia, en cajas .cifra como la portada. La del
   motor lleva sus botones dentro, en una fila. */
.cifras-mercados { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cifras-mercados .cifra-valor { font-size: clamp(22px, 2.2vw, 30px); }
.cifras-mercados .cifra-nota { color: var(--tinta-2); line-height: 1.45; }
.acciones-motor { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.acciones-motor form { display: flex; gap: 8px; margin: 0; }
.acciones-motor button { margin: 0; }
/* La curva del dia a todo el ancho, y sus cuatro cifras al pie. */
.tarjeta-grafica { padding: 14px 16px 10px; }
.tarjeta-grafica .tiras { margin: 8px 0 0; color: var(--tinta-2); }
.tiras strong { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.tiras-pie { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--linea);
             color: var(--tinta-2); }
/* Una tarjeta que avisa: borde rojo, nada mas. */
.tarjeta-alerta { border-color: var(--mal); }
/* Las posiciones abiertas, en cajas con el borde de su broker. Una por
   fila hasta que caben dos de 520 px: la grafica de velas necesita ancho. */
.posiciones-abiertas { display: grid; gap: 14px; margin-bottom: 16px;
                       grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); }
.posicion-abierta { background: var(--tarjeta); border: 2px solid var(--linea);
                    border-radius: var(--radio); padding: 16px 18px; min-width: 0; }
.posicion-abierta.broker-etoro { border-color: var(--borde-etoro); }
.posicion-abierta.broker-alpaca { border-color: var(--borde-alpaca); }
.posicion-abierta .posicion-cabecera { display: flex; align-items: baseline; gap: 10px;
                                       flex-wrap: wrap; }
.posicion-abierta .simbolo { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.posicion-abierta .resultado { margin-left: auto; font-size: 19px; font-weight: 600;
                               font-variant-numeric: tabular-nums; }
.posicion-abierta .grafica-img { margin: 10px 0 6px; }
.veredicto-posicion { margin: 0; font-size: var(--t-menor); color: var(--tinta-2); }
.veredicto-posicion strong { color: var(--tinta); }
/* El chip del broker: texto pequeno en capsula, sin color por funcion. */
.chip-broker { font-size: var(--t-micro); color: var(--tinta-2); border: 1px solid var(--linea-fuerte);
               border-radius: 980px; padding: 1px 8px; white-space: nowrap; }
/* Las cifras compactas, cada par rotulo/valor en su propia celda: asi no se
   descuadran y en 390 px caen a tres columnas sin salirse (la version
   anterior, con grid-row fijo, dejaba "Neto" fuera de la caja). */
.cifras-compactas { display: grid; gap: 6px 12px; margin: 10px 0 0;
                    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.cifras-compactas > div { min-width: 0; }
.cifras-compactas dt { grid-row: auto; }
.cifras-compactas dd { grid-row: auto; font-size: 16px; }
/* La tabla de alternativas de una posicion abierta: pequena y entera. */
.tabla-alternativas { margin: 10px 0 0; font-size: var(--t-menor); }
.tabla-alternativas th, .tabla-alternativas td { padding: 6px 8px; }
/* El cierre manual de una posicion de eToro, a la vista: campo y boton. */
.cierre-manual { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 0; }
.cierre-manual input { flex: 1 1 120px; margin: 0; min-width: 0; }
.cierre-manual button { margin: 0; }
/* La cabecera de un mapa y la de cada version: texto a la izquierda,
   botones a la derecha; en el telefono, uno debajo del otro. */
.cabecera-mapa { margin: 0 0 12px; }
.ficha-mapa { padding-top: 4px; }
.cabecera-version { display: flex; justify-content: space-between; gap: 12px 20px;
                    align-items: flex-start; flex-wrap: wrap; margin: 0 0 12px; }
.cabecera-version h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -.012em; }
.acciones-mapa { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.acciones-mapa form { margin: 0; }
.acciones-mapa button, .acciones-mapa .boton { margin: 0; }
.tiras-limites { margin: 12px 0 0; color: var(--tinta-2); font-size: var(--t-menor); }
.tiras-limites > span { white-space: normal; }
.tarjeta-candidato { margin: 14px 0 0; background: var(--acento-suave); border-color: var(--acento); }
.rotulo-posiciones { margin: 18px 0 8px; font-size: 15px; font-weight: 600; }
/* LA REJILLA DE POSICIONES PROPUESTAS. Cuatro por fila en un portatil, dos
   en un telefono apaisado, una en vertical. Antes era una escalera de una
   por fila: 5.500 px con el 70% en blanco. */
/* TODAS DEL MISMO TAMANO (Samuel, 01/10/2026): filas iguales y cada caja
   con los mismos huecos, tenga o no miniatura y nota de apertura. */
.rejilla-posiciones { display: grid; gap: 12px; align-items: stretch; grid-auto-rows: 1fr;
                      grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
.rejilla-posiciones .hueco-mini { height: 44px; margin: 2px 0 3px; }
.rejilla-posiciones .nota-apertura { min-height: 1.4em; }
.rejilla-posiciones .recorte-2 { min-height: 2.9em; }
.rejilla-posiciones .caja-posicion { min-width: 0; display: flex; flex-direction: column; gap: 4px;
                                     padding: 12px 14px; }
.rejilla-posiciones .caja-posicion.dentro { padding: 11px 13px; }
.rejilla-posiciones .sobre-la-caja { flex-wrap: wrap; margin: 0; gap: 6px 8px; }
/* El rotulo del formulario es de bloque en toda la web; aqui es el simbolo
   y va pegado a la casilla, no a todo el ancho (en el telefono se iba al
   borde derecho). */
.rejilla-posiciones .sobre-la-caja label { margin: 0; cursor: pointer; display: inline; width: auto; flex: 0 1 auto; }
.rejilla-posiciones .sobre-la-caja .simbolo { font-size: 17px; letter-spacing: -.012em; color: var(--tinta); }
.rejilla-posiciones .sobre-la-caja .seguridad { margin-left: auto; }
.rejilla-posiciones .sobre-la-caja .marca { width: 17px; text-align: center; }
.linea-esperado { margin: 0; font-size: var(--t-micro); color: var(--tinta-2); }
.rejilla-posiciones .entrada-grande { margin: 2px 0 0; }
.nota-apertura { font-size: 11px; margin: 0; }
.rejilla-posiciones .cifras-posicion { margin: 2px 0 0; }
/* Dos lineas y puntos suspensivos: la prediccion se lee de un vistazo y
   entera al pasar el puntero (title). */
.recorte-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
             overflow: hidden; font-size: var(--t-micro); margin: 2px 0 0; }
.rejilla-posiciones .flecha-salto { align-self: auto; transform: none; margin: 4px 0 0;
                                    padding: 0; font-size: var(--t-micro); white-space: normal;
                                    color: var(--tinta-2); }
.rejilla-posiciones .caja-alternativa { display: inline; border: 0; min-width: 0; padding: 0;
                                        background: none; color: var(--tinta-2); }
.rejilla-posiciones .caja-alternativa strong { color: var(--tinta); }
/* El texto entero de un mapa, en su pagina. */
.texto-mapa { white-space: pre-wrap; font-size: 13px; margin: 0; background: none; border: 0; padding: 0; }
@media (max-width: 720px) {
  .cifras-mercados .cifra-valor { font-size: 24px; }
  /* En el telefono, dos por fila: las seis cajas del diagrama y las
     posiciones propuestas. Una por fila eran 6.300 px de pagina. */
  .diagrama-mapa .caja-mapa { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .rejilla-posiciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rejilla-posiciones .caja-posicion, .rejilla-posiciones .caja-posicion.dentro { padding: 9px 10px; }
  .rejilla-posiciones .sobre-la-caja .simbolo { font-size: 15px; }
  .rejilla-posiciones .sobre-la-caja .seguridad { margin-left: 0; width: 100%; }
  .rejilla-posiciones .chip-broker { display: none; }
  .rejilla-posiciones .entrada-grande { font-size: 17px; }
  .posicion-abierta { padding: 14px; }
  .rejilla-posiciones .mini-grafica { display: block; }
  .rejilla-posiciones .flecha-salto { margin: 4px 0 0; }
  .cabecera-version .acciones-mapa { width: 100%; }
  .cabecera-version .acciones-mapa form, .cabecera-version .acciones-mapa .boton { flex: 1 1 auto; }
  .cabecera-version .acciones-mapa button { width: 100%; }
}

/* ====================================================================
   Diario y Fundamentos, rediseno del 01/10/2026
   ==================================================================== */
.rejilla-diario { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
/* El panel del motor como linea de tiempo: cuando, el tipo en capsula y
   el texto entero. En el telefono cae en dos filas por entrada. */
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { display: grid; grid-template-columns: 92px 110px 1fr; gap: 6px 12px;
                   padding: 10px 0; border-top: 1px solid var(--linea); align-items: start; }
.linea-tiempo li:first-child { border-top: 0; }
.linea-tiempo .cuando { font-size: var(--t-micro); color: var(--tinta-2); white-space: nowrap;
                        font-variant-numeric: tabular-nums; }
.linea-tiempo .cuando strong { color: var(--tinta); }
.linea-tiempo .que-dice { min-width: 0; font-size: var(--t-menor); }
.linea-tiempo .que-dice p { margin: 3px 0 0; white-space: pre-wrap; }
.chip-tipo { font-size: var(--t-micro); letter-spacing: .04em; text-transform: uppercase;
             border: 1px solid var(--linea-fuerte); border-radius: 980px; padding: 2px 9px;
             color: var(--tinta-2); justify-self: start; white-space: nowrap; }
.chip-aviso { border-color: var(--mal); color: var(--mal); }
.chip-decision { border-color: var(--ok); color: var(--ok); }
.chip-informe { border-color: var(--acento); color: var(--acento-oscuro); }
/* Las tesis en cajas, con el borde de su broker, como las posiciones. */
.rejilla-tesis { display: grid; gap: 12px; margin-bottom: 16px; align-items: stretch;
                 grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.ficha-tesis { background: var(--tarjeta); border: 2px solid var(--linea); border-radius: var(--radio);
               padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ficha-tesis.broker-etoro { border-color: var(--borde-etoro); }
.ficha-tesis.broker-alpaca { border-color: var(--borde-alpaca); }
.cabecera-tesis { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; }
.cabecera-tesis .simbolo { font-size: 17px; font-weight: 600; letter-spacing: -.012em; }
.cabecera-tesis .seguridad { margin-left: auto; font-weight: 600; font-size: var(--t-menor); }
.ficha-tesis .nota-tesis { margin: -2px 0 0; font-size: var(--t-micro); }
.ficha-tesis .escenario { margin: 0; font-size: var(--t-menor); }
.ficha-tesis .tiras { font-size: var(--t-micro); color: var(--tinta-2); }
.ficha-tesis p.sub { margin: 0; font-size: var(--t-micro); }
.pruebas-tesis { margin: 0; padding-left: 18px; font-size: var(--t-micro); }
/* Texto largo en dos columnas en pantalla grande, una en el telefono. */
.columnas-texto { columns: 2; column-gap: 28px; }
.columnas-texto p { break-inside: avoid; margin: 0 0 10px; }
.columnas-biblio { display: grid; gap: 16px 24px;
                   grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.columnas-biblio h3 { margin: 0 0 6px; font-size: var(--t-menor); font-weight: 600; color: var(--tinta-2);
                      text-transform: uppercase; letter-spacing: .06em; }
.columnas-biblio ul { margin: 0; padding-left: 18px; font-size: var(--t-menor); }
.columnas-biblio li { margin: 0 0 6px; }
.columnas-biblio .sub { display: block; font-size: var(--t-micro); }
@media (max-width: 720px) {
  .linea-tiempo li { grid-template-columns: auto 1fr; }
  .linea-tiempo .que-dice { grid-column: 1 / -1; }
  .columnas-texto { columns: 1; }
}

/* El rango de las velas de una posicion abierta (01/10/2026): cuatro radios
   ocultos, cuatro etiquetas y cuatro imagenes de las que se ve una. */
.rango-velas { margin: 10px 0 6px; }
.rango-velas > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tiras-rango { display: flex; gap: 4px; justify-content: flex-end; margin: 0 0 4px; }
.tiras-rango > label { cursor: pointer; font-size: var(--t-micro); color: var(--tinta-2);
                       padding: 4px 10px; border-radius: 980px; border: 1px solid transparent;
                       min-height: 28px; display: inline-flex; align-items: center; margin: 0; }
.rango-velas .hoja-rango { display: none; margin: 0; }
.rango-velas > input:nth-of-type(1):checked ~ .hoja-rango:nth-of-type(1),
.rango-velas > input:nth-of-type(2):checked ~ .hoja-rango:nth-of-type(2),
.rango-velas > input:nth-of-type(3):checked ~ .hoja-rango:nth-of-type(3),
.rango-velas > input:nth-of-type(4):checked ~ .hoja-rango:nth-of-type(4) { display: block; }
.rango-velas > input:nth-of-type(1):checked ~ .tiras-rango label:nth-of-type(1),
.rango-velas > input:nth-of-type(2):checked ~ .tiras-rango label:nth-of-type(2),
.rango-velas > input:nth-of-type(3):checked ~ .tiras-rango label:nth-of-type(3),
.rango-velas > input:nth-of-type(4):checked ~ .tiras-rango label:nth-of-type(4) {
  color: var(--acento-oscuro); background: var(--acento-suave); border-color: var(--acento); font-weight: 600; }