/* css/main/form-fields.css — part 6/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ⛔ A SINGLE LINE, AND NOW IT REALLY FITS (Santi, 2026-08-22).
         The decision not to wrap onto two lines still stands, but the way out at
         the time —letting the row SCROLL horizontally— solved the
         overflow by hiding precisely the last two buttons: *"I have to
         scroll right to see the X button and the magnifier one"*. A
         control you have to hunt for is a control that isn't there.

         ⚠️ And it was worse than it looks: the scroll gives no hint that there is something
         further right. Anyone who didn't know would assume that in Historial
         you can neither clear the filters nor search by text.

         What makes it fit, measured in the browser from 360 to 480 px:
         · the fields SHRINK instead of overflowing (`flex: 1 1 auto`), with a cap
           so that on a wide screen they don't stretch leaving dead space;
         · the native calendar icon, which took 53 px on its own, is reduced
           to 16 (see `::-webkit-calendar-picker-indicator` below);
         · the row's side padding and the gap between controls go down.
         Result: at 360 px the field is 118 px, with 91 of date inside.

         `min-width:0` + `max-width:100%` are still there and still needed:
         without them this row, as a flex-item of `.content` (which has
         `overflow-x:auto`), PUSHES the width of its parents with its min-content and
         «the whole canvas shifts to the right» —only with dates set, which is
         why it wasn't seen on reload—. */
      .date-filter-row {
        padding: 8px 10px 0;
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        min-width: 0;
        max-width: 100%;
      }
      .date-input-wrap {
        /* Shares the available width and SHRINKS when needed, with a cap: without
           the cap, on a tablet the field stretched to 178 px for a date of
           91, which is the «quite big space on the right» he saw.
           `min-width:0` stops the flex-item's automatic minimum from inflating it
           to the native control's preferred width (172 px) and bringing the
           overflow back in through the back door.

           ⛔ And the basis is `0`, NOT `auto`. With `auto` the basis is decided by the
           content, and the content is a `.date-input` with `width: 100%`: the
           parent depends on the child and the child on the parent. That loop is exactly
           the one that on iOS left these two fields tiny on 2026-08-06 —it is
           told two comments below—. With basis `0` the width is decided by
           the flex distribution and the child's 100 % has something to resolve against.
           As a bonus, both fields come out EQUAL: with basis `auto`, «Mes» and
           «Año» in Compras measured 115 and 121 px. */
        flex: 1 1 0;
        min-width: 0;
        max-width: 150px;
      }
      /* The date field's width is set FURTHER DOWN, after the block it
         shares with .input/.textarea/.select — see the comment there. */
      .date-input-wrap label {
        font-size: 10px;
        color: var(--muted);
        display: block;
        margin-bottom: 3px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      /* 1 px border (was 1.5) and 48 px tall, same as the buttons: a
         column of fields and buttons has to have a single rhythm. The border goes
         in the house's translucent gold, which is where the change of
         look lies (Santi, 2026-08-20). */
      .date-input,
      .input,
      .textarea,
      .select {
        width: 100%;
        min-height: 48px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 12px 14px;
        color: var(--text);
        font-family: "Inter", sans-serif;
        font-size: 14px;
        outline: none;
        transition: border-color 0.15s;
        appearance: none;
        -webkit-appearance: none;
      }
      /* ⛔ THE FOCUS IS VISIBLE, AND WITHOUT MOVING ANYTHING. Before, only the border
         colour changed: in a long form, with 13 px text and a 1.5 px border,
         that is almost invisible —and on a tablet, with the keyboard covering half the
         screen, knowing which field you are in is not decoration—. The ring goes in
         `box-shadow`, which takes NO space: with a thicker `border` or an
         `outline` with an offset, every field would jump on focus. */
      .date-input:focus,
      .input:focus,
      .textarea:focus,
      .select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-dim);
      }
      /* ⛔ The date field's width goes HERE, after the block above,
         which sets `width: 100%`. If declared before, the 100% wins, and since the
         parent `.date-input-wrap` is a `0 0 auto` flex —sized by its
         content—, that 100% resolves against a container that in turn
         depends on the field: the field COLLAPSES. On iOS, with the date still empty,
         the «Desde» and «Hasta» fields of the history came out tiny (iPhone,
         2026-08-06); in Chrome it wasn't noticeable because its native control reserves
         a large intrinsic width even when empty.
         `min-width` so that the flex can't shrink it either, and in px so that it
         scales with the UI size zoom. 170 and not 150 because with 16 px
         text (touch minimum) a full date no longer fit in 150. */
      .date-input { width: 100%; min-width: 0; }
      /* A value that is fixed once saved (an entity's name, 2026-10-09): the
         field's shape, on the surface colour like the fixed country box, so it
         reads as data rather than something to type into. Long names wrap
         instead of being cut. */
      .input.input-fijo {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--surface);
        cursor: default;
        overflow-wrap: anywhere;
      }
      /* The PADLOCK (2026-10-09): every fixed box (name, country, region) ends
         in the same small lock, so it can't be mistaken for an editable field.
         Drawn as a masked pseudo-element: it has no text, so assistive
         technology skips it, and the box's note (`aria-describedby`) carries
         the explanation. It takes the theme's muted colour. */
      .input.input-fijo::after {
        content: "";
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin-left: auto;
        background-color: var(--muted);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
      }
      /* The text part of a fixed box made of several pieces (country, region). */
      .input-fijo-txt { min-width: 0; }
      .input-fijo-cod { color: var(--muted); font-family: monospace; white-space: nowrap; }
      /* ⛔ THE CALENDAR ICON TOOK 53 px ON ITS OWN. Measured: the control's
         preferred width is 172.6 px, of which 91 are the date and 28 the
         padding — the other 53.6 are the native indicator and its margins. It is
         half of the dead space seen to the right of the date, and it is what
         made it impossible for two fields and two buttons to fit on a phone.
         With a 16 px icon the preferred width drops to 156.6. ⚠️ It is not HIDDEN: it is the
         only signal that a picker opens there. */
      .date-input::-webkit-calendar-picker-indicator {
        margin: 0;
        padding: 0;
        width: 16px;
        height: 16px;
        opacity: 0.65;
        cursor: pointer;
      }
      .date-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
      .select option {
        background: var(--card);
      }
      /* <select class="input">: add a custom golden arrow and extra padding
         so the small, ugly native chrome isn't visible. */
      select.input {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c8a84b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 14px 14px;
        padding-right: 38px;
        cursor: pointer;
      }
      select.input option {
        background: var(--card);
        color: var(--text);
        font-family: "Inter", sans-serif;
      }
      /* ⛔ 44x44 IN THE FILTER ROW, not 38x40. It is a touch target and
         rule §1 asks for 44; it stayed small because it was the only thing that left
         room for the two dates. Now that the fields shrink, it fits fine. */
      .date-filter-row .clear-btn,
      .date-filter-row .btn-icon-secondary {
        min-width: 44px;
        min-height: 44px;
        padding: 0 8px;
      }
      .date-filter-row .date-input {
        padding-left: 10px;
        padding-right: 6px;
      }
      .clear-btn {
        align-self: flex-end;
        flex-shrink: 0;
        padding: 11px 12px;
        min-height: 40px;
        background: var(--card);
        border: 1.5px solid var(--border);
        border-radius: 6px;
        color: var(--muted);
        font-size: 12px;
        cursor: pointer;
        font-family: "Inter", sans-serif;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .clear-btn:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .form-group {
        margin-bottom: 16px;
      }
      /* Oswald, as in the directory: the label is a HEADING, not running
         text. It is one of the things that made the app read in a different
         voice from Score and the directory (Santi, 2026-08-20). */
      .form-label {
        display: block;
        font-family: "Oswald", sans-serif;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--muted);
        margin-bottom: 6px;
      }
      .score-input {
        font-family: "Oswald", sans-serif;
        font-size: 32px;
        text-align: center;
        color: var(--accent);
        letter-spacing: 2px;
      }
      .textarea {
        resize: none;
        height: 70px;
        font-size: 13px;
      }
      .two-scores {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .toggle-group {
        display: flex;
        gap: 6px;
      }
      .toggle-btn {
        flex: 1;
        padding: 10px;
        background: var(--card);
        border: 1.5px solid var(--border);
        border-radius: 10px;
        color: var(--muted);
        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s;
        text-align: center;
      }
      .toggle-btn.active {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-dim);
      }
      /* Touch rule: ≥44 px tall on coarse pointers. */
      @media (pointer: coarse) {
        .toggle-btn { min-height: 44px; }
      }
      /* Tab bar of the shooting-range modal: 3 labels, one long
         ("Geolocalización") → tighter font and padding so they fit
         in one row on mobile without breaking. */
      .campo-tabs .toggle-btn {
        padding: 9px 4px;
        font-size: 12px;
        line-height: 1.15;
      }
      /* Marker (pin) of the shooting range's Leaflet mini-map: a CSS
         DivIcon so as not to depend on Leaflet's default PNG images. */
      .campo-map-pin-dot {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--accent);
        border: 3px solid #fff;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
      }
      /* "This range already exists" notice (nearby search in the catalogue) */
      .campo-near {
        margin-top: 10px;
        border: 1px solid var(--border);
        border-left: 3px solid var(--accent);
        border-radius: 10px;
        padding: 10px 12px;
        background: var(--surface);
      }
      .campo-near-msg {
        font-size: 13px;
        line-height: 1.45;
      }
      .campo-near-btns {
        display: flex;
        gap: 8px;
        margin-top: 8px;
      }
      .campo-near-btns .btn-secondary {
        flex: 1;
        margin: 0;
        min-height: 40px;
      }
      /* ══ «THERE IS ALREADY A RANGE HERE» AND THE NEIGHBOURING RANGES (threats, 21/09) ══
         ⛔ With the weight of an ALERT and not of a note: the previous notice was
         a grey line with two identical buttons, and that is how duplicates were born.
         When the notice carries its `.alert-box`, the outer box is withdrawn so as
         not to paint two borders. */
      .campo-near:has(.alert-box) {
        border: 0;
        padding: 0;
        background: transparent;
      }
      .campo-near .alert-box { margin-bottom: 0; }
      .campo-near-btns .btn-primary {
        flex: 1;
        margin: 0;
        min-height: 40px;
      }
      .campo-dup-dist { color: var(--muted); font-weight: 400; }
      .campo-dup-lista {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 12px 0 4px;
      }
      .campo-dup-opt { flex: none; min-height: 44px; }
      .campo-dup-modal .chk-row { margin-bottom: 12px; }
      .campo-dup-modal .btn-primary[disabled] { opacity: .5; cursor: not-allowed; }
      /* The notice inside the list card: an alert pill,
         tappable as a whole, with icon + text (colour is not the only signal). */
      .campo-cerca-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin-top: 10px;
        min-height: 44px;
        padding: 8px 12px;
        border: 1px solid var(--alerta);
        border-radius: 10px;
        background: var(--alerta-dim);
        color: var(--text);
        font-size: 13px;
        text-align: left;
        cursor: pointer;
      }
      .campo-cerca-btn svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--alerta); }
      .campo-cerca-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
      .campo-cerca-mapa {
        height: 220px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--border);
        margin: 4px 0 10px;
      }
      .campo-cerca-leyenda {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 13px;
        color: var(--text);
        margin-bottom: 8px;
      }
      .campo-cerca-punto {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        margin-right: 8px;
        vertical-align: 0;
      }
      .campo-cerca-punto.mio { background: var(--accent); }
      .campo-cerca-punto.otro { background: var(--alerta); }

      /* An age in a narrow column (age categories: «100» for historic arms).
         The usual side padding and the computer's spin arrows left about 30 px
         for the digits and it was cut to «10» (Santi, 2026-09-30). */
      .input.input-edad {
        padding-left: 4px;
        padding-right: 4px;
        text-align: center;
        -moz-appearance: textfield;
        appearance: textfield;
      }
      .input.input-edad::-webkit-outer-spin-button,
      .input.input-edad::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }