/* ============================================================================
   Tareas — identidad de Viñedos Hermanos Hernáiz.
   Tipografías y paleta tomadas de hermanoshernaiz.com:
     · Cormorant Infant  titulares, versalitas con aire
     · Libre Franklin    interfaz y texto corrido
     · #0F0D08 negro cálido · #B08C38 dorado · #333 texto
   Las dos fuentes son variables y están en wwwroot/fonts: ni una petición fuera.
   Bootstrap 3 pone la retícula; aquí va todo lo que lo convierte en "su" web.
   ========================================================================= */

@font-face {
    font-family: 'Libre Franklin';
    src: url('../fonts/libre-franklin.woff2') format('woff2-variations'),
         url('../fonts/libre-franklin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Infant';
    src: url('../fonts/cormorant-infant.woff2') format('woff2-variations'),
         url('../fonts/cormorant-infant.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --hh-negro: #0F0D08;
    --hh-negro-suave: #33373D;
    --hh-oro: #B08C38;
    --hh-oro-claro: #C9A959;
    --hh-texto: #333333;
    --hh-tenue: #8A8578;
    --hh-linea: #E3DFD6;
    --hh-fondo: #FAF9F6;
    --hh-papel: #FFFFFF;
}

/* ---------------------------------------------------------------- Base --- */

body {
    font-family: 'Libre Franklin', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    color: var(--hh-texto);
    background-color: var(--hh-fondo);
    padding-top: 64px;
    padding-bottom: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .titulo {
    font-family: 'Cormorant Infant', Georgia, serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--hh-negro);
}

h2 {
    font-size: 34px;
    margin: 4px 0 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hh-linea);
}

/* Filete dorado bajo el título: es el gesto que más "suena" a la web. */
h2::after {
    content: "";
    display: block;
    width: 54px;
    height: 2px;
    background: var(--hh-oro);
    margin-top: 12px;
    margin-bottom: -13px;
}

h3 {
    font-size: 22px;
    letter-spacing: 1.5px;
    margin-top: 28px;
}

a { color: var(--hh-oro); }
a:hover, a:focus { color: var(--hh-negro); text-decoration: none; }

.body-content { max-width: 1400px; }

/* ------------------------------------------------------------- Cabecera --- */

.navbar-inverse {
    background: var(--hh-negro);
    border: 0;
    border-bottom: 2px solid var(--hh-oro);
    min-height: 62px;
    border-radius: 0;
}

/* La barra alinea con el contenido (.body-content también va a 1400). */
.barra-contenido {
    max-width: 1400px;
    margin: 0 auto;
}

.navbar-inverse .navbar-brand {
    height: auto;
    padding: 9px 18px 9px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar-inverse .navbar-brand img {
    height: 38px;
    width: auto;
}

/* Nombre del sitio pegado al logotipo, separado por un filete dorado */
.marca-texto {
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: 19px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, .28);
    white-space: nowrap;
}

.navbar-inverse .navbar-nav > li > a {
    color: rgba(255, 255, 255, .82);
    font-size: 12.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 21px 12px;
    transition: color .15s;
    white-space: nowrap;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: var(--hh-oro-claro);
    background: transparent;
}

/* La cuenta, a la derecha, en un desplegable */
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background: rgba(255, 255, 255, .07);
    color: var(--hh-oro-claro);
}

.navbar-inverse .dropdown-menu {
    border-radius: 0;
    border: 0;
    border-top: 2px solid var(--hh-oro);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    padding: 6px 0;
    min-width: 210px;
}

.navbar-inverse .dropdown-menu > li > a {
    padding: 9px 20px;
    font-size: 13px;
    color: var(--hh-texto);
}

.navbar-inverse .dropdown-menu > li > a:hover {
    background: #F4F1E9;
    color: var(--hh-negro);
}

.navbar-inverse .navbar-toggle { border-color: rgba(255, 255, 255, .3); }
.navbar-inverse .navbar-toggle:hover { background: rgba(255, 255, 255, .1); }
.navbar-inverse .navbar-collapse { border-color: rgba(255, 255, 255, .12); }

/* El nombre del usuario puede ser largo: se recorta antes de romper el menú. */
.navbar-cuenta {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Bootstrap 3 pliega el menú a 768 px, pero con siete entradas hacen falta más de
   1100: entre medias se partía en dos líneas. Se adelanta la hamburguesa a 1199. */
@media (max-width: 1199px) {
    .navbar-header { float: none; }
    .navbar-left, .navbar-right { float: none !important; }
    .navbar-toggle { display: block; }
    .navbar-fixed-top { top: 0; border-width: 0 0 2px; }
    .navbar-collapse { border-top: 1px solid rgba(255, 255, 255, .12); }
    .navbar-collapse.collapse { display: none !important; }
    .navbar-collapse.collapse.in { display: block !important; }
    .navbar-nav { float: none !important; margin: 7px -15px; }
    .navbar-nav > li { float: none; }
    .navbar-inverse .navbar-nav > li > a { padding: 11px 15px; }
    .navbar-cuenta { max-width: none; }

    /* El desplegable de la cuenta, dentro del menú plegado, va en línea */
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: rgba(255, 255, 255, .8);
        padding: 10px 15px 10px 30px;
    }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
        background: rgba(255, 255, 255, .07);
        color: var(--hh-oro-claro);
    }
    .navbar-inverse .dropdown-menu .divider { background: rgba(255, 255, 255, .15); }
}

/* --------------------------------------------------------------- Botones --- */

.btn {
    border-radius: 2px;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 9px 20px;
    border: 1px solid transparent;
    transition: background-color .15s, color .15s, border-color .15s;
}

.btn-primary, .btn-success {
    background: var(--hh-oro);
    border-color: var(--hh-oro);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
    background: var(--hh-negro);
    border-color: var(--hh-negro);
    color: #fff;
}

.btn-default {
    background: transparent;
    border-color: var(--hh-linea);
    color: var(--hh-texto);
}

.btn-default:hover, .btn-default:focus {
    background: var(--hh-negro);
    border-color: var(--hh-negro);
    color: #fff;
}

.btn-danger {
    background: transparent;
    border-color: #B5504A;
    color: #B5504A;
}

.btn-danger:hover, .btn-danger:focus {
    background: #B5504A;
    border-color: #B5504A;
    color: #fff;
}

.btn[disabled], .btn[disabled]:hover { opacity: .35; }

/* -------------------------------------------------------------- Campos --- */

.form-control {
    border-radius: 2px;
    border-color: var(--hh-linea);
    box-shadow: none;
    height: 40px;
    font-size: 15px;
}

.form-control:focus {
    border-color: var(--hh-oro);
    box-shadow: 0 0 0 3px rgba(176, 140, 56, .12);
}

label {
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--hh-tenue);
    font-weight: 600;
}

.help-block { font-size: 12px; color: var(--hh-tenue); }

textarea.form-control { height: auto; }

/* --------------------------------------------------------------- Listas --- */

table.dataTable { font-size: 14px; border-collapse: collapse !important; }

table.dataTable thead th {
    background: var(--hh-papel);
    border-bottom: 2px solid var(--hh-negro) !important;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hh-negro);
    font-weight: 600;
}

table.dataTable tbody tr { background: var(--hh-papel); }
table.dataTable tbody tr:hover { background: #F4F1E9; }
table.dataTable tbody td { border-top: 1px solid var(--hh-linea); }

table.dataTable tfoot th {
    border-top: 2px solid var(--hh-negro);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dataTables_wrapper { background: var(--hh-papel); padding: 18px; border: 1px solid var(--hh-linea); }
.dt-buttons { margin-bottom: 14px; }
.dt-buttons .btn { margin-right: 6px; }

/* Cabecera y pie de la lista, cada bloque en UNA línea */
.dt-cabecera { margin-bottom: 10px; }
.dt-cabecera label, .dt-pie label { font-size: 12px; font-weight: 400; }
.dt-cabecera .dataTables_filter { margin: 0; text-align: right; }

/* Las columnas de Bootstrap van flotadas y cada una se centraba por su cuenta, así
   que el selector y el recuento quedaban 3 px por debajo de la paginación. Con flex
   las dos comparten eje vertical y se alinean de verdad. */
.dt-pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.dt-pie > div { float: none; }

/* Las tres piezas del pie —selector, recuento y paginación— comparten tamaño,
   fuente, color y línea base: si no, cada una parecía de una web distinta. */
.dt-pie .dataTables_length,
.dt-pie .dataTables_info,
.dt-pie .dataTables_paginate {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 32px;
    color: var(--hh-tenue);
    margin: 0;
    padding: 0;
}

.dt-pie .dataTables_length,
.dt-pie .dataTables_info {
    display: inline-block;
    vertical-align: middle;
}

.dt-pie .dataTables_length { margin-right: 18px; }

/* La etiqueta del selector NO va en versalitas: aquí compite con el recuento que
   tiene al lado (las versalitas se reservan para los rótulos de formulario). */
.dt-pie .dataTables_length label {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--hh-tenue);
    margin: 0;
}

.dt-pie .dataTables_length select {
    height: 32px;
    padding: 3px 8px;
    margin: 0 6px;
    font-size: 13px;
    color: var(--hh-texto);
    border: 1px solid var(--hh-linea);
    border-radius: 2px;
    background: var(--hh-papel);
}

.dt-pie .dataTables_paginate { float: none; text-align: right; }

/* Paginación con la paleta de la casa, no el azul de Bootstrap */
.dt-pie .pagination { margin: 0; vertical-align: middle; }

.dt-pie .pagination > li > a,
.dt-pie .pagination > li > span {
    font-size: 13px;
    line-height: 20px;
    padding: 5px 12px;
    color: var(--hh-texto);
    background: var(--hh-papel);
    border-color: var(--hh-linea);
    border-radius: 0;
}

.dt-pie .pagination > li:first-child > a,
.dt-pie .pagination > li:last-child > a { border-radius: 0; }

.dt-pie .pagination > li > a:hover,
.dt-pie .pagination > li > a:focus {
    background: #F4F1E9;
    color: var(--hh-negro);
    border-color: var(--hh-linea);
}

.dt-pie .pagination > .active > a,
.dt-pie .pagination > .active > span,
.dt-pie .pagination > .active > a:hover,
.dt-pie .pagination > .active > span:hover,
.dt-pie .pagination > .active > a:focus {
    background: var(--hh-negro);
    border-color: var(--hh-negro);
    color: #fff;
}

.dt-pie .pagination > .disabled > a,
.dt-pie .pagination > .disabled > span,
.dt-pie .pagination > .disabled > a:hover {
    color: #C6C1B5;
    background: var(--hh-papel);
    border-color: var(--hh-linea);
}

@media (max-width: 767px) {
    /* Sin columnas: cada pieza a su renglón. Con flex se quedaban apretadas en una
       misma fila, porque por debajo de 768 los col-sm-* ya no fijan el ancho. */
    .dt-pie { display: block; }
    .dt-pie .dataTables_length,
    .dt-pie .dataTables_info { display: block; line-height: 1.6; margin: 0 0 8px; }
    .dt-pie .dataTables_paginate { text-align: left; }
}

.dataTables_filter input { border-radius: 2px; border: 1px solid var(--hh-linea); padding: 5px 10px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--hh-negro) !important;
    border-color: var(--hh-negro) !important;
    color: #fff !important;
}

.filtro-fechas {
    background: var(--hh-papel);
    border: 1px solid var(--hh-linea);
    border-left: 3px solid var(--hh-oro);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.filtro-fechas label { margin-left: 0; margin-right: 6px; }
.filtro-fechas label + .form-control { margin-right: 14px; }
.filtro-fechas .form-control { width: auto; display: inline-block; }

/* Atajos de año, separados del rango por un filete */
.filtro-atajos {
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--hh-linea);
}

.filtro-atajos .btn { margin-right: 4px; }
.btn-anio { letter-spacing: 1.4px; }

/* --------------------------------------- Parte, editores y trabajadores --- */

.form-wrap {
    background: var(--hh-papel);
    border: 1px solid var(--hh-linea);
    padding: 26px 30px 30px;
    margin-bottom: 30px;
}

/* --- Gestión de usuarios --- */

.tabla-usuarios { font-size: 14px; margin-bottom: 8px; }
.tabla-usuarios thead th {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hh-tenue);
    border-bottom: 2px solid var(--hh-negro);
}
.tabla-usuarios td { vertical-align: middle; }
.tabla-usuarios .tenue { color: var(--hh-tenue); }
.tabla-usuarios tr.de-baja td { color: #B0AB9E; }
.tabla-usuarios tr.de-baja a { color: #B0AB9E; }

.etiqueta-yo, .etiqueta-baja {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.etiqueta-yo { background: var(--hh-oro); color: #fff; }
.etiqueta-baja { border: 1px solid var(--hh-linea); color: var(--hh-tenue); }

.nota-usuarios { font-size: 12px; color: var(--hh-tenue); margin: 14px 0 0; }

.bloque-clave {
    margin: 26px 0 18px;
    padding: 18px 20px 4px;
    background: #F7F4EC;
    border: 1px solid var(--hh-linea);
    border-left: 3px solid var(--hh-oro);
}

.bloque-clave legend {
    width: auto;
    margin: 0 0 6px;
    padding: 0 8px 0 0;
    border: 0;
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: 19px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--hh-negro);
}

.aviso-propio {
    background: #F7F4EC;
    border-left: 3px solid var(--hh-tenue);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--hh-tenue);
}

.datos-ficha { font-size: 12px; color: var(--hh-tenue); margin: 0 0 4px; }
.datos-ficha dt { display: inline-block; width: 110px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; }
.datos-ficha dd { display: inline; margin: 0; }
.datos-ficha dd::after { content: ""; display: block; margin-bottom: 4px; }

.mensaje-titulo { margin-top: 6px; }
.mensaje-texto { color: var(--hh-tenue); margin-bottom: 22px; }

.tabla-trabajadores { margin-top: 6px; }
.tabla-trabajadores thead th {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hh-tenue);
    border-bottom: 1px solid var(--hh-linea);
}

.tabla-trabajadores .etiqueta-trabajador {
    font-weight: 400;
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--hh-texto);
    margin: 0;
    display: block;
    padding-top: 8px;
    cursor: pointer;
}

.tabla-trabajadores input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 6px 0 0 0;
    accent-color: var(--hh-oro);
}

.tabla-trabajadores .celda-check { width: 46px; }
.tabla-trabajadores .horas { max-width: 92px; margin-left: auto; }
.tabla-trabajadores tr:hover { background: #F4F1E9; }

.input-horas { max-width: 130px; }

/* Recuento vivo de a cuánta gente y cuántas horas va el parte */
.resumen-parte {
    float: right;
    font-family: 'Libre Franklin', sans-serif;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: none;
    color: var(--hh-oro);
    padding-top: 6px;
}

.resumen-parte.vacio { color: var(--hh-tenue); font-style: italic; }

.botones-cuadrilla { margin-bottom: 14px; }
.botones-cuadrilla .btn { margin-bottom: 8px; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.botonera { margin-top: 26px; }

.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
    height: 40px;
    border-radius: 2px;
    border-color: var(--hh-linea);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--hh-oro); }

/* --------------------------------------------------------------- Acceso --- */
/* Pantalla de entrada: foto del viñedo a toda página y la tarjeta encima. */

body.pantalla-acceso {
    padding-top: 0;
    background: var(--hh-negro) url('../imagenes/hh-vinedo-fondo.jpg') center/cover no-repeat fixed;
    min-height: 100vh;
}

body.pantalla-acceso::before {
    content: "";
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 13, 8, .55) 0%, rgba(15, 13, 8, .30) 45%, rgba(15, 13, 8, .70) 100%);
}

.acceso {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
}

.acceso-tarjeta {
    width: 100%;
    max-width: 410px;
    background: rgba(255, 255, 255, .97);
    padding: 38px 36px 32px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .35);
    border-top: 3px solid var(--hh-oro);
}

.acceso-logo {
    display: block;
    width: 190px;
    max-width: 70%;
    margin: 0 auto 6px;
}

.acceso-sitio {
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: 20px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    color: var(--hh-negro);
    margin: 0 0 4px;
}

.acceso-lema {
    text-align: center;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--hh-tenue);
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hh-linea);
}

.acceso-tarjeta .form-group { margin-bottom: 16px; }
.acceso-tarjeta .btn { width: 100%; padding: 11px; }
.acceso-recordar { font-size: 13px; color: var(--hh-tenue); text-transform: none; letter-spacing: 0; font-weight: 400; }

.acceso-pie {
    position: relative;
    margin-top: 26px;
    text-align: center;
    color: rgba(255, 255, 255, .75);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------ Cuadro de mando --- */

.cuadro-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.cuadro-cabecera h2 { flex: 1 1 auto; }

.cuadro-anios { padding-bottom: 22px; white-space: nowrap; overflow-x: auto; max-width: 100%; }

.cuadro-anios-etiqueta {
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--hh-tenue);
    margin-right: 6px;
}

.cuadro-anios .anio {
    display: inline-block;
    padding: 5px 13px;
    margin-left: 4px;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--hh-tenue);
    border: 1px solid var(--hh-linea);
    background: var(--hh-papel);
}

.cuadro-anios .anio:hover { border-color: var(--hh-oro); color: var(--hh-negro); }

.cuadro-anios .anio.activo {
    background: var(--hh-negro);
    border-color: var(--hh-negro);
    color: #fff;
}

/* --- Fichas de cabecera --- */

.fichas { margin-bottom: 4px; }

.ficha {
    display: block;
    background: var(--hh-papel);
    border: 1px solid var(--hh-linea);
    border-top: 3px solid var(--hh-oro);
    padding: 20px 20px 16px;
    margin-bottom: 22px;
    height: 132px;
    color: inherit;
    transition: box-shadow .15s, border-color .15s;
}

a.ficha:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
    border-top-color: var(--hh-negro);
    color: inherit;
}

.ficha-valor {
    display: block;
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: 42px;
    line-height: 1;
    color: var(--hh-negro);
}

.ficha-nombre {
    display: block;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--hh-tenue);
    margin-top: 8px;
}

.ficha-nota {
    display: block;
    font-size: 12px;
    color: var(--hh-tenue);
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--hh-linea);
}

.ficha-nota.sube { color: #4B7A45; }
.ficha-nota.baja { color: #B5504A; }

/* --- Paneles --- */

.panel-hh {
    background: var(--hh-papel);
    border: 1px solid var(--hh-linea);
    padding: 22px 24px 24px;
    margin-bottom: 22px;
}

.panel-hh h3 {
    margin: 0 0 20px;
    font-size: 18px;
    letter-spacing: 2px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hh-linea);
}

.sin-datos { color: var(--hh-tenue); font-size: 13px; margin: 6px 0 0; }

/* --- Gráfica de meses --- */

.grafica-meses {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 210px;
}

.grafica-meses .mes {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    text-align: center;
    min-width: 0;
    color: inherit;
}

.grafica-meses .mes:hover { color: inherit; }

.mes-barra-hueco {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid var(--hh-linea);
}

.mes-barra {
    position: relative;
    width: 62%;
    margin: 0 auto;
    background: var(--hh-oro);
    min-height: 2px;
    transition: background-color .15s;
}

/* El año anterior va detrás, más ancho y en gris: sirve de referencia sin robar
   protagonismo a la barra del año que se está mirando. */
.mes-barra-ant {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    background: #EDE9DF;
    min-height: 0;
}

.grafica-meses .mes:hover .mes-barra { background: var(--hh-negro); }
.grafica-meses .mes.actual .mes-barra { background: var(--hh-negro); }

.mes-valor {
    font-size: 11px;
    color: var(--hh-tenue);
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mes-nombre {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hh-negro);
    margin-top: 2px;
}

/* Leyenda del encabezado de la gráfica */
.leyenda {
    float: right;
    font-family: 'Libre Franklin', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: none;
    color: var(--hh-tenue);
}

.leyenda .muestra {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px 0 12px;
    vertical-align: -1px;
}

.leyenda .muestra.actual { background: var(--hh-oro); }
.leyenda .muestra.anterior { background: #EDE9DF; }

.grafica-meses .mes.actual .mes-nombre { color: var(--hh-oro); font-weight: 600; }

/* --- Rankings --- */

.ranking-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px;
    margin: 0 -4px;
    color: var(--hh-texto);
}

.ranking-fila:hover { background: #F7F4EC; color: var(--hh-negro); }

.ranking-nombre {
    flex: 0 0 32%;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-barra-hueco {
    flex: 1 1 auto;
    background: #F1EEE6;
    height: 14px;
}

.ranking-barra {
    display: block;
    height: 100%;
    background: var(--hh-oro);
    min-width: 2px;
}

.ranking-fila:hover .ranking-barra { background: var(--hh-negro); }

.ranking-valor {
    flex: 0 0 74px;
    text-align: right;
    font-size: 12px;
    letter-spacing: .5px;
    color: var(--hh-tenue);
}

/* Variación contra el año anterior, al final de cada fila */
.ranking-var {
    flex: 0 0 56px;
    text-align: right;
    font-size: 11px;
    color: var(--hh-tenue);
}

.ranking-var.sube { color: #4B7A45; }
.ranking-var.baja { color: #B5504A; }
.ranking-var.nuevo { font-style: italic; }

/* --- Tarta de tareas --- */

.tarta-bloque { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.tarta { width: 172px; height: 172px; flex: 0 0 auto; }

.tarta-fondo { fill: none; stroke: #F1EEE6; stroke-width: 22; }

.tarta-trozo {
    fill: none;
    stroke-width: 22;
    /* El aro empieza arriba y avanza en el sentido del reloj */
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-width .12s;
}

.tarta-trozo:hover { stroke-width: 26; }

.tarta-cifra {
    text-anchor: middle;
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: 26px;
    fill: var(--hh-negro);
}

.tarta-pie {
    text-anchor: middle;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    fill: var(--hh-tenue);
}

.tarta-leyenda { flex: 1 1 190px; min-width: 190px; }

.leyenda-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px;
    margin: 0 -4px;
    font-size: 12.5px;
    color: var(--hh-texto);
}

a.leyenda-fila:hover { background: #F7F4EC; color: var(--hh-negro); }
.leyenda-fila.resto { color: var(--hh-tenue); }

.leyenda-fila .punto { width: 11px; height: 11px; flex: 0 0 11px; }

.leyenda-nombre {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leyenda-pct { flex: 0 0 46px; text-align: right; color: var(--hh-tenue); }

/* --- Aviso de lista filtrada desde el cuadro --- */

.marca-filtro {
    background: #F7F4EC;
    border: 1px solid var(--hh-linea);
    border-left: 3px solid var(--hh-oro);
    padding: 9px 14px;
    margin-bottom: 14px;
    font-size: 13px;
}

.marca-filtro .quitar {
    margin-left: 10px;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* --- Últimos partes --- */

.tabla-ultimos { width: 100%; font-size: 13px; }
.tabla-ultimos td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--hh-linea); }
.tabla-ultimos tr:last-child td { border-bottom: 0; }
.tabla-ultimos .fecha { white-space: nowrap; width: 78px; }
.tabla-ultimos .tenue { color: var(--hh-tenue); }
.tabla-ultimos .horas-celda { white-space: nowrap; width: 62px; color: var(--hh-negro); }

.ver-todos {
    display: inline-block;
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    /* Altura fija también en móvil: con col-xs-6 y alturas distintas, las fichas
       se escalonan en vez de emparejarse. */
    .ficha { height: 148px; padding: 16px 16px 12px; }
    .ficha-valor { font-size: 34px; }
    .grafica-meses { height: 160px; gap: 4px; }
    .mes-valor { display: none; }
    .ranking-nombre { flex-basis: 42%; }
    .cuadro-anios { padding-bottom: 14px; }
}

/* ---------------------------------------------------------------- Móvil --- */

.botonera-movil { margin-bottom: 14px; }
.buscador-movil { margin-bottom: 14px; }

.lista-movil .list-group-item {
    border-color: var(--hh-linea);
    border-left: 3px solid transparent;
    padding: 12px 14px;
}

.lista-movil a.list-group-item:hover { border-left-color: var(--hh-oro); background: #F4F1E9; }

.lista-movil .fila-movil {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hh-tenue);
}

.lista-movil .fila-movil .horas { color: var(--hh-oro); font-weight: 600; }
.lista-movil .trabajador { font-size: 16px; color: var(--hh-negro); margin-top: 2px; }
.lista-movil .detalle { font-size: 13px; }

/* ------------------------------------------------------------ Pie y varios --- */

.footer-custom {
    margin-top: 40px;
    padding: 22px 0;
    border-top: 1px solid var(--hh-linea);
    text-align: center;
    color: var(--hh-tenue);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-custom strong { color: var(--hh-negro); font-weight: 600; }

.panel { border-radius: 0; border-color: var(--hh-linea); box-shadow: none; }
.panel-heading { border-radius: 0 !important; }

.detalle-error { white-space: pre-wrap; font-size: 12px; }

/* =========================================================================
   MÓVIL
   La introducción de partes se hace casi toda desde el teléfono, así que esta
   sección no es un apaño: es la pantalla principal de la aplicación.
   ========================================================================= */

@media (max-width: 767px) {
    h2 { font-size: 26px; }
    .marca-texto { display: none; }
    .filtro-fechas .form-control { width: 100%; margin-bottom: 8px; }
    .filtro-atajos { margin: 6px 0 0; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--hh-linea); display: block; }
    .form-wrap { padding: 20px 16px; }

    /* La cabecera se salía 16 px por los márgenes negativos de Bootstrap. */
    .navbar-header { margin-left: 0 !important; margin-right: 0 !important; }
    .navbar > .container-fluid { padding-left: 12px; padding-right: 12px; }

    /* 16 px es el mínimo: por debajo, iOS hace zoom al enfocar el campo y deja
       la pantalla descuadrada. Vale para todos los campos, no solo los del parte. */
    .form-control,
    .tabla-trabajadores .horas,
    select { font-size: 16px; }

    .form-control { height: 46px; }
    textarea.form-control { height: auto; }

    /* --- Pantalla de parte --- */

    .input-horas { max-width: 100%; font-size: 20px; font-weight: 600; text-align: center; }

    /* Fila de trabajador: toda ella es zona de toque (la etiqueta cubre la celda
       y lleva el checkbox asociado), con 56 px de alto. */
    .tabla-trabajadores > tbody > tr > td { padding: 6px 4px; vertical-align: middle; }
    .tabla-trabajadores .celda-check { width: 52px; }
    .tabla-trabajadores input[type="checkbox"] { width: 28px; height: 28px; margin: 0; }
    .tabla-trabajadores .etiqueta-trabajador { padding: 14px 0; font-size: 16px; }
    .tabla-trabajadores .horas { max-width: 88px; height: 46px; text-align: center; font-weight: 600; }

    /* Marca visible de quién está apuntado en el parte */
    .tabla-trabajadores > tbody > tr:has(.checkboxOption:checked) { background: #F7F4EC; }
    .tabla-trabajadores > tbody > tr:has(.checkboxOption:checked) .etiqueta-trabajador { font-weight: 600; }

    .botones-cuadrilla .btn { padding: 12px 8px; }

    /* Botonera fija abajo: guardar siempre a mano, sin recorrer la lista entera. */
    .botonera-parte {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .97);
        border-top: 2px solid var(--hh-oro);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, .12);
    }

    .botonera-parte .btn { padding: 13px 8px; margin: 0; }
    /* Guardar ocupa toda la primera fila: es lo que se pulsa el 95 % de las veces. */
    .botonera-parte .btn-principal { grid-column: 1 / -1; font-size: 15px; }

    /* Hueco para que la botonera fija no tape la última fila de la tabla. */
    #IdFormAccion { padding-bottom: 150px; }
}

/* Pantallas muy estrechas: la botonera fija en una sola columna sería demasiado
   alta, así que los tres secundarios se reparten en una fila. */
@media (max-width: 400px) {
    .botonera-parte { grid-template-columns: repeat(3, 1fr); }
    .botonera-parte .btn { padding: 12px 4px; font-size: 11px; letter-spacing: .5px; }
    .botonera-parte .btn-principal { font-size: 15px; letter-spacing: 1.2px; }
}