/* Relevos y pruebas combinadas: legibilidad y maquetación en móvil.

   Se carga en las cuatro páginas de marcas (relevo/combinada, online y
   offline) y todo cuelga de `.pagina-marcas` para no tocar el resto de la
   app, que comparte la misma hoja de Bulma (`css/bulma/micss.css`). */

/* ------------------------------------------------------------------ *
 * 1. Textos de ayuda, etiquetas y placeholders
 *    Bulma deja `.help` en 0.75rem y `.heading` en 11px: en un móvil son
 *    ilegibles. Se suben sin llegar al tamaño del texto normal.
 * ------------------------------------------------------------------ */
.pagina-marcas .help {
    font-size: 0.875rem;
    line-height: 1.35;
}

.pagina-marcas .heading {
    font-size: 0.8125rem;
    letter-spacing: 0.5px;
}

.pagina-marcas .label.is-small {
    font-size: 0.8125rem;
}

.pagina-marcas .is-size-7 {
    font-size: 0.8125rem !important;
}

.pagina-marcas .radio.is-size-7 {
    font-size: 0.875rem !important;
}

.pagina-marcas .notification {
    font-size: 1rem;
    line-height: 1.5;
}

/* El gris por defecto del placeholder (Bulma usa el texto al 30 %) se lee
   mal a plena luz; se sube el contraste y el tamaño relativo. */
.pagina-marcas .input::placeholder,
.pagina-marcas .textarea::placeholder {
    color: #8a8a8a;
    opacity: 1;
    font-size: 0.95em;
}

/* ------------------------------------------------------------------ *
 * 2. Casillas mm : ss . cc
 *    El teclado numérico del móvil no tiene «:», así que la marca de
 *    tiempo se escribe en tres casillas (ver js/marca_tiempo.js).
 * ------------------------------------------------------------------ */
.campo-tiempo {
    display: inline-block;
    max-width: 100%;
}

.campo-tiempo-casillas {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.campo-tiempo-casillas .input {
    width: 3.4rem;
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.campo-tiempo-casillas .campo-tiempo-mm {
    width: 3rem;
}

.campo-tiempo-sep {
    font-weight: 700;
    color: #4a4a4a;
    padding: 0 0.05rem;
}

/* Eco del valor montado: quita la ambigüedad de las centésimas («.4» son
   40 centésimas, no 4) sin obligar a leer la ayuda. */
.campo-tiempo-eco {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.875rem;
    color: #3273dc;
    min-height: 1.2em;
    white-space: nowrap;
}

.campo-tiempo.is-danger .campo-tiempo-casillas .input {
    border-color: #f14668;
}

.campo-tiempo.is-danger .campo-tiempo-eco {
    color: #f14668;
}

/* ------------------------------------------------------------------ *
 * 3. Resumen de resultado
 *    `.level.is-mobile` no envuelve y `.level-item` lleva `flex-shrink: 0`:
 *    con tres o cuatro cifras grandes el bloque se salía de la pantalla.
 * ------------------------------------------------------------------ */
.pagina-marcas .resultado-resumen .level-item {
    flex-shrink: 1;
    min-width: 0;
}

.pagina-marcas .resultado-resumen .heading {
    word-break: break-word;
}

/* ------------------------------------------------------------------ *
 * 4. Móvil
 * ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {

    /* Un `font-size` menor de 16px hace que iOS haga zoom al enfocar el
       campo y deje la página descuadrada. */
    .pagina-marcas .input,
    .pagina-marcas .input.is-small,
    .pagina-marcas .select select,
    .pagina-marcas .select.is-small select {
        font-size: 1rem;
        height: 2.5em;
    }

    .pagina-marcas .select.is-small:not(.is-multiple) {
        height: 2.5em;
    }

    .pagina-marcas .title.is-size-3 {
        font-size: 1.75rem !important;
        word-break: break-word;
    }

    .pagina-marcas .section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* El resumen pasa de fila única a rejilla de dos columnas. */
    .pagina-marcas .resultado-resumen.level.is-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 0.5rem;
    }

    .pagina-marcas .resultado-resumen .level-item {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }

    .pagina-marcas .resultado-resumen .title.is-size-2 {
        font-size: 2rem !important;
    }

    .pagina-marcas .resultado-resumen .title.is-size-4 {
        font-size: 1.25rem !important;
    }

    /* Tablas apiladas: en 360px no caben ocho columnas, y `is-fullwidth`
       las comprimía hasta partir los números. Cada fila pasa a ser una
       ficha y el nombre de la columna sale de `data-label`. */
    .pagina-marcas .tabla-apilable,
    .pagina-marcas .tabla-apilable tbody,
    .pagina-marcas .tabla-apilable tfoot,
    .pagina-marcas .tabla-apilable tr {
        display: block;
        width: 100%;
    }

    .pagina-marcas .tabla-apilable thead {
        display: none;
    }

    .pagina-marcas .tabla-apilable tr {
        border: 1px solid #dbdbdb;
        border-radius: 6px;
        margin-bottom: 0.75rem;
        padding: 0.25rem 0.5rem;
        background: #fff;
    }

    .pagina-marcas .tabla-apilable td,
    .pagina-marcas .tabla-apilable tfoot th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: auto;
        border: 0;
        border-bottom: 1px solid #f0f0f0;
        padding: 0.45rem 0.15rem;
        text-align: left !important;
        white-space: normal;
    }

    .pagina-marcas .tabla-apilable td:last-child,
    .pagina-marcas .tabla-apilable tfoot th:last-child {
        border-bottom: 0;
    }

    .pagina-marcas .tabla-apilable td::before,
    .pagina-marcas .tabla-apilable tfoot th::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-right: 0.5rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #5e6266;
        text-transform: none;
    }

    /* Celdas sin rótulo (la numeración, la unidad) no pintan la etiqueta. */
    .pagina-marcas .tabla-apilable td:not([data-label])::before,
    .pagina-marcas .tabla-apilable td[data-label=""]::before,
    .pagina-marcas .tabla-apilable tfoot th:not([data-label])::before {
        content: none;
    }

    /* La celda de entrada ocupa el ancho que le deja el rótulo (`::before`),
       nunca el 100 % de la ficha: eso sumaba rótulo + campo y desbordaba. */
    .pagina-marcas .tabla-apilable td .input,
    .pagina-marcas .tabla-apilable td .select,
    .pagina-marcas .tabla-apilable td .campo-tiempo {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        max-width: 100%;
    }

    .pagina-marcas .tabla-apilable td .select select {
        width: 100%;
        max-width: 100%;
    }

    .pagina-marcas .tabla-apilable td .campo-tiempo-casillas {
        width: 100%;
    }

    .pagina-marcas .tabla-apilable td .campo-tiempo-casillas .input {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
    }

    /* La numeración de fila hace de cabecera de la ficha. */
    .pagina-marcas .tabla-apilable td.celda-orden {
        justify-content: flex-start;
        font-weight: 700;
        color: #363636;
        border-bottom: 1px solid #dbdbdb;
    }

    .pagina-marcas .tabla-apilable td.celda-orden::before {
        content: attr(data-label);
        margin-right: 0.35rem;
        color: #363636;
        font-weight: 700;
    }

    /* Sin `table-layout` de tabla, el contenedor ya no necesita desplazarse. */
    .pagina-marcas .table-container:has(.tabla-apilable) {
        overflow: visible;
    }

    .pagina-marcas .buttons .button {
        flex-grow: 1;
    }
}

/* Contenido agrupado de una celda (nombre + etiqueta + nota): sin este
   envoltorio, al apilar la tabla cada trozo sería un ítem flex suelto. */
.celda-valor {
    display: block;
    text-align: left;
    min-width: 0;
}

.celda-valor .help {
    margin-top: 0.1rem;
}

/* ------------------------------------------------------------------ *
 * 5. Barra superior de las páginas offline
 *    No tienen menú hamburguesa: los cuatro enlaces van sueltos en el
 *    `navbar-brand` y en un móvil se salían de la pantalla.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
    .pagina-marcas > .navbar > .navbar-brand {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pagina-marcas > .navbar > .navbar-brand::-webkit-scrollbar {
        display: none;
    }

    .pagina-marcas > .navbar > .navbar-brand > .navbar-item {
        flex: 0 0 auto;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
        font-size: 0.8125rem;
    }

    .pagina-marcas > .navbar > .navbar-brand > .navbar-item img {
        width: 44px;
    }

    /* Los iconos sólo repiten lo que ya dice la palabra de al lado, y son
       los 90 px que faltaban para que los cuatro enlaces quepan en 320. */
    .pagina-marcas > .navbar > .navbar-brand > .navbar-item .icon {
        display: none;
    }
}