/* Piezas del panel que no estaban en el diseño original (ficha del animal,
   filtros, Mis campos, esqueletos de carga). Usa las mismas variables y
   medidas que dashboard.css. */

/* Que el atributo hidden gane sobre los display de dashboard.css. */
[hidden] { display: none !important; }

.encabezado-acciones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* El aviso de arriba del contenido (componentes.css) se separa de la vista. */
.contenido > .aviso { margin-bottom: 22px; }

.sync.error i { color: var(--rojo); }

/* ============ TABLAS: filas con enlace ============ */
.tabla tr.fila-click { cursor: pointer; }
.tabla tr.fila-click:hover { background: color-mix(in srgb, var(--acento) 5%, transparent); }
.tabla .celda-sub { display: block; font-size: var(--tamanio-texto-xs); color: var(--texto-3); margin-top: 2px; }
.tabla td.texto-libre { white-space: pre-wrap; }
/* Hijo inmaduro debajo de su madre (agruparPorMadre). */
.tabla tr.fila-hijo td:first-child { padding-left: 34px; }
.tabla .flecha-hijo { color: var(--texto-3); margin-right: 8px; }
.tabla tr.fila-hijo td:first-child .celda-nombre { display: inline; }
.alerta.fila-click { cursor: pointer; }
.alerta.fila-click:hover { background: var(--color-resalte); }

/* ============ FILTROS Y PÁGINAS ============ */
.filtros {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.paginado {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 16px;
    font-size: var(--tamanio-texto-sm);
    color: var(--texto-2);
}

.paginado:empty { display: none; }

/* Historial de cambios: el rango de fechas, con su texto al lado. */
.filtro-fecha { display: flex; align-items: center; gap: 6px; font-size: var(--tamanio-texto-sm); color: var(--texto-2); }

/* ============ DETALLE (parcela, tropa, ficha) ============ */
.miga {
    font-size: var(--tamanio-texto-sm);
    color: var(--texto-2);
}

.miga a { color: var(--acento); display: inline-flex; align-items: center; min-height: var(--alto-toque); }
.miga a:hover { text-decoration: underline; }

.ficha-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.ficha-titulo {
    font-size: var(--tamanio-texto-xl);
    font-weight: 600;
}

.ficha-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    color: var(--texto-2);
    font-size: var(--tamanio-texto-sm);
}

.pestanas {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--borde);
}

.pestana {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--texto-2);
    min-height: var(--alto-toque);
    padding: 10px 14px;
    font-family: inherit;
    font-size: var(--tamanio-texto-base);
    font-weight: 500;
    cursor: pointer;
}

.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--acento); border-bottom-color: var(--acento); }

.panel-pestana { display: none; }
.panel-pestana.activa { display: flex; flex-direction: column; gap: 22px; }

.datos-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px 24px;
}

.dato-label {
    font-size: var(--tamanio-texto-xs);
    color: var(--texto-3);
    margin-bottom: 4px;
}

.dato-valor { font-size: var(--tamanio-texto-base); font-weight: 500; }
.dato-valor.sin-dato { color: var(--texto-3); font-weight: 400; font-style: italic; }
.dato-valor a { color: var(--acento); }

.texto-libre { white-space: pre-wrap; font-size: var(--tamanio-texto-base); line-height: 1.6; }

/* Aire arriba de un bloque que sigue a otro dentro de la misma tarjeta. */
.separado { margin-top: var(--espaciado-md); }

.subtitulo {
    font-size: var(--tamanio-texto-base);
    font-weight: 600;
    margin: 4px 0 12px;
}

.barras-peso {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.barra-peso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 52px;
    font-size: var(--tamanio-texto-xs);
    color: var(--texto-2);
}

.barra-peso b {
    display: block;
    width: 22px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--acento) 0%, color-mix(in srgb, var(--acento) 25%, transparent) 100%);
}

.barra-peso strong { color: var(--texto); font-weight: 500; }

/* ============ MIS CAMPOS ============ */
.campos-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.campo-item {
    padding: 16px 18px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    background: var(--panel-2);
}

.campo-item.activo { border-color: var(--acento); }

.campo-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.campo-nombre { font-weight: 600; display: flex; align-items: center; gap: 10px; }
.campo-meta { font-size: var(--tamanio-texto-xs); color: var(--texto-2); margin-top: 4px; }
.campo-acciones { display: flex; gap: 10px; flex-wrap: wrap; }

.miembros-lista {
    list-style: none;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--borde);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.codigo-generado {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--radio-md);
    border: 1px dashed var(--acento);
    background: var(--acento-suave);
    font-size: var(--tamanio-texto-sm);
}

.codigo-valor {
    display: inline-block;
    margin: 8px 12px 8px 0;
    font-size: var(--tamanio-texto-xl);
    font-weight: 700;
    letter-spacing: 3px;
    font-variant-numeric: tabular-nums;
}

.codigo-generado small { display: block; color: var(--texto-2); }

.formulario {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}

.formulario .ancho { grid-column: 1 / -1; }

.form-campo label {
    display: block;
    font-size: var(--tamanio-texto-xs);
    color: var(--texto-2);
    margin-bottom: 6px;
}

.entrada {
    width: 100%;
    background: var(--panel-2);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    min-height: var(--alto-toque);
    padding: 10px 12px;
    font-size: var(--tamanio-texto-base);
}

.entrada:focus { border-color: var(--acento); }

.form-error {
    color: var(--rojo);
    font-size: var(--tamanio-texto-sm);
    min-height: 1em;
}

.form-error:empty { display: none; }

.nota {
    font-size: var(--tamanio-texto-xs);
    color: var(--texto-3);
}

/* ============ CAMBIOS DESDE LA WEB ============ */
/* Un renglón por cosa que avisar (pendientes, rechazos, choques). */
#aviso-cambios { flex-direction: column; align-items: stretch; }
.contenido > #aviso-cambios { margin-bottom: 22px; }
.aviso-renglon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaciado-md);
    flex-wrap: wrap;
}

/* Parámetros del campo: el fieldset solo sirve para deshabilitar todo junto. */
fieldset.sin-borde { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.acciones-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.acciones-form .form-error { flex-basis: 100%; }
.form-campo .nota { display: block; margin-top: 4px; }
textarea.entrada { resize: vertical; font-family: inherit; }
.formulario .btn-lleno + .btn-borde { margin-left: 8px; }

/* Observaciones de una parcela */
.notas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nota-item { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.nota-item:last-child { border-bottom: 0; }
.nota-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.nota-acciones { display: flex; gap: 8px; }


/* ============ PÁGINA "MÁS" ============ */
.mas-grupo h3 {
    font-size: var(--tamanio-texto-md);
    font-weight: 600;
    margin-bottom: var(--espaciado-sm);
}

.mas-lista {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--espaciado-md);
}

.mas-item {
    display: flex;
    align-items: center;
    gap: var(--espaciado-md);
    min-height: var(--alto-toque);
    padding: var(--espaciado-md) var(--espaciado-lg);
    border-radius: var(--radio-borde);
    background: var(--panel);
    transition: background 0.2s;
}

.mas-item:hover { background: var(--panel-2); }

.mas-icono {
    flex-shrink: 0;
    width: var(--alto-toque);
    height: var(--alto-toque);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--acento-suave);
    color: var(--acento);
}

.mas-texto { flex: 1; min-width: 0; }
.mas-texto strong { display: block; font-weight: 600; }
.mas-texto small { display: block; color: var(--texto-2); font-size: var(--tamanio-texto-sm); margin-top: 2px; }
.mas-flecha { color: var(--texto-3); }

.mas-pie {
    display: flex;
    align-items: center;
    gap: var(--espaciado-lg);
    flex-wrap: wrap;
}

/* En la PC "Cerrar sesión" y el aviso legal ya están al pie del menú. */
@media (min-width: 901px) {
    .mas-pie { display: none; }
}

/* ============ TARJETAS PLEGABLES (Mis campos) ============ */
.plegable { align-self: start; }
.plegable > summary { list-style: none; cursor: pointer; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable:not([open]) > summary { margin-bottom: 0; }
.plegable > summary:hover h3 { color: var(--acento); }

.plegable-flecha {
    color: var(--texto-3);
    font-size: var(--tamanio-texto-xs);
    transition: transform 0.2s ease;
}

.plegable[open] .plegable-flecha { transform: rotate(180deg); }

/* ============ ESQUELETOS DE CARGA ============ */
/* Ocupan el lugar del contenido final (misma fila, mismo alto), así nada
   salta cuando llegan los datos. Las barras aparecen recién a los 300 ms:
   una carga rápida no parpadea. */
.contenido { --sk-1: rgba(255, 255, 255, 0.04); --sk-2: rgba(255, 255, 255, 0.10); }

.sk,
.cargando-datos :is(.kpi-valor, .tarjeta-grande, .donut span),
.cargando-datos .grafico-contenedor {
    background: linear-gradient(90deg, var(--sk-1) 30%, var(--sk-2) 50%, var(--sk-1) 70%);
    background-size: 300% 100%;
    animation: sk-brillo 1.6s ease-in-out infinite;
}

/* Tarjetas de indicador: queda la etiqueta y el icono; la cifra se tapa
   sin sacarla, así la tarjeta conserva su alto. */
.cargando-datos :is(.kpi-valor, .tarjeta-grande, .donut span) {
    color: transparent;
    border-radius: 6px;
    width: fit-content;
    min-width: 4ch;
}

.cargando-datos .tarjeta-grande { min-width: 9ch; }
.cargando-datos .tarjeta-grande small,
.cargando-datos .kpi-valor small { color: transparent; }
.cargando-datos .donut span { display: inline-block; }

.cargando-datos .grafico-contenedor { border-radius: var(--radio-md); }
.cargando-datos .grafico-contenedor canvas { visibility: hidden; }

/* Barras sueltas: filas de tabla, alertas, Mis campos, fichas. */
.sk {
    display: block;
    width: 70%;
    max-width: 180px;
    height: 1em;
    margin: 0.25em 0;   /* 1em + márgenes = el alto de un renglón de texto */
    border-radius: 4px;
    animation: sk-brillo 1.6s ease-in-out infinite, sk-aparecer 0.3s ease 0.3s both;
}

.tabla tbody tr.fila-esqueleto:hover { background: none; }

.alerta.esqueleto { border-left-color: var(--borde); }
.alerta.esqueleto > div { flex: 1; }
.alerta.esqueleto .sk:first-child { width: 55%; height: 14px; }
.alerta.esqueleto .sk + .sk { width: 35%; height: 12px; }

.sk-circulo { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin: 0; }
.sk-corta { display: inline-block; width: 120px; }
.sk-boton { width: 96px; height: 28px; border-radius: var(--radio-sm); margin: 0; }

.datos-grilla .sk:first-child { width: 40%; height: 12px; }
.campo-esqueleto { flex: 1; }
.campo-esqueleto .sk:first-child { width: 30%; height: 16px; }
.campo-esqueleto .sk + .sk { width: 60%; height: 12px; }

@keyframes sk-brillo {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

@keyframes sk-aparecer {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sk,
    .cargando-datos :is(.kpi-valor, .tarjeta-grande, .donut span),
    .cargando-datos .grafico-contenedor { animation: none; }
    .plegable-flecha, .mas-item { transition: none; }
}

/* Enlace a la página legal, debajo de "Cerrar sesión": discreto. */
.sidebar-legal {
    display: block;
    padding: 4px 30px 0;
    font-size: var(--tamanio-texto-xs);
    color: var(--texto-3);
}

.sidebar-legal:hover { color: var(--texto); text-decoration: underline; }

/* ============ FOCO ============ */
/* El input del buscador no tiene borde propio: el foco se marca en el recuadro. */
.buscador:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
/* El contenido recibe el foco desde "Saltar al contenido"; no hace falta el recuadro. */
#contenido:focus { outline: none; }

/* "Mis campos" muestra dos secciones juntas (datos del campo + lista). */
.vista.activa + .vista.activa { margin-top: 22px; }

/* ============ BARRA INFERIOR (celulares) ============ */
.barra-inferior { display: none; }

/* ============ CELULAR ============ */
/* Los filtros (animales, historial) van plegados detrás de un botón que dice cuántos hay puestos. */
.btn-filtros { margin-left: auto; }
.filtros:not(.abiertos) { display: none; }

@media (max-width: 900px) {

    /* Las 4 vistas de todos los días al alcance del pulgar. Queda debajo
       del fondo oscuro del menú (z-index 25) cuando el menú se abre. */
    .barra-inferior {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        inset: auto 0 0 0;
        z-index: 24;
        background: var(--fondo);
        border-top: 1px solid var(--borde);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .barra-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 58px;   /* blanco de toque cómodo con el pulgar */
        background: none;
        border: none;
        color: var(--texto-2);
        font-family: inherit;
        font-size: var(--tamanio-texto-xs);
        cursor: pointer;
    }

    .barra-item i { font-size: var(--tamanio-texto-md); }
    .barra-item.activo { color: var(--acento); }

    /* Rayita arriba del activo, como el borde del menú lateral. */
    .barra-item.activo::before {
        content: "";
        position: absolute;
        top: 0;
        left: 30%;
        right: 30%;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: var(--acento);
    }

    /* Que la barra no tape el final de la página. */
    .contenido { padding-bottom: calc(40px + 58px + env(safe-area-inset-bottom)); }

    /* Con la barra a la vista, "Más" reemplaza a la hamburguesa. */
    .app:has(.barra-inferior:not([hidden])) .btn-menu { display: none; }
}

@media (max-width: 560px) {
    .formulario { grid-template-columns: 1fr; }
}

@media print {
    .pestanas, .filtros, .paginado, .encabezado-acciones, .aviso, .barra-inferior, .saltar { display: none !important; }
    .panel-pestana { display: flex !important; flex-direction: column; gap: 16px; }
}

/* ============ VISTAS MÁS SIMPLES ============ */
/* Aire entre bloques dentro de una tarjeta. */
.separado-lg { margin-top: var(--espaciado-lg); }
.separado-abajo { margin-bottom: var(--espaciado-md); }

/* Estado de vida y reproductivo, juntos en una celda. */
.estados { display: inline-flex; flex-wrap: wrap; gap: var(--espaciado-xs); }

/* Próximas tareas (Inicio). */
.lista-tareas { list-style: none; display: flex; flex-direction: column; gap: var(--espaciado-sm); }

.tarea {
    display: flex;
    align-items: center;
    gap: var(--espaciado-md);
}

.tarea i { width: 20px; text-align: center; color: var(--acento); }
.tarea span { flex: 1; min-width: 0; }
.tarea small { color: var(--texto-2); font-size: var(--tamanio-texto-sm); white-space: nowrap; }

/* "Más números" de Inicio: el detalle de la preñez. */
.repro-numeros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espaciado-md);
    margin: var(--espaciado-md) 0 var(--espaciado-lg);
}

#mas-numeros .grilla-grafico > div { display: flex; flex-direction: column; gap: var(--espaciado-md); min-width: 0; }
.repro-numeros > div { display: flex; flex-direction: column; justify-content: space-between; }
#mas-numeros .donut-bloque { margin: 0; align-self: center; }
#mas-numeros .link { align-self: flex-start; }

/* Peso, ganancia y condición corporal arriba de la ficha. */
.ficha-numeros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espaciado-lg);
    padding: var(--espaciado-lg);
    border-radius: var(--radio-borde);
    background: var(--panel);
}

.ficha-numero {
    font-size: var(--tamanio-texto-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* "Cómo se calcula": la fórmula queda plegada. */
.como-se-calcula > summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--alto-toque);
    color: var(--acento);
    font-size: var(--tamanio-texto-sm);
    cursor: pointer;
}

/* Las tarjetas que se pliegan se abren tocando todo el título. */
.plegable > summary { min-height: var(--alto-toque); }

abbr[title] { text-decoration: underline dotted; cursor: help; }

/* Una tabla como lista de tarjetas en el celular: cada fila es una
   tarjeta y cada celda dice de qué columna es (data-label, dashboard.js). */
@media (max-width: 700px) {
    .tabla-scroll { overflow-x: visible; }
    .tabla, .tabla tbody, .tabla tfoot { display: block; }
    .tabla thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .tabla tr {
        display: block;
        padding: var(--espaciado-md) 0;
        border-bottom: 1px solid var(--borde);
    }

    .tabla tbody tr:last-child { border-bottom: none; }

    .tabla td,
    .tabla td.num {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--espaciado-md);
        padding: 4px 0;
        border: none;
        white-space: normal;
        text-align: right;
    }

    .tabla td::before {
        content: attr(data-label);
        flex-shrink: 0;
        max-width: 50%;
        color: var(--texto-3);
        font-size: var(--tamanio-texto-sm);
        text-align: left;
    }

    /* La primera celda es el nombre de la fila: va como título. */
    .tabla td:first-child { display: block; text-align: left; font-size: var(--tamanio-texto-base); }
    .tabla td:first-child::before { content: none; }
    .tabla td.vacio { display: block; text-align: left; }
    .tabla td.vacio::before, .tabla td:empty { display: none; }
    .tabla tfoot td { background: none; }
    .tabla tfoot tr { border-top: 1px solid var(--acento); background: var(--acento-suave); padding: var(--espaciado-md); border-radius: var(--radio-sm); }
    .tabla tr.fila-hijo td:first-child { padding-left: 0; }
    .tabla .celda-nombre { display: inline-flex; }

    /* Dos números por fila en las tarjetas de arriba: entran más a la vista. */
    .kpis { grid-template-columns: 1fr 1fr; gap: var(--espaciado-md); }
    .kpi { padding: var(--espaciado-md); }
    .kpi .kpi-icono { display: none; }
    .kpi-valor { font-size: var(--tamanio-texto-xl); }
    .ficha-numeros { gap: var(--espaciado-md); padding: var(--espaciado-md); }
    .ficha-numero { font-size: var(--tamanio-texto-lg); }
}