/* Aves del Jardín: estándar de la categoría (referencias: Merlin Bird ID, eBird).
   Blanco, tinta casi negra, grises neutros y un solo verde para acciones y estado. */

:root {
    --aves-verde: #2F7D4F;
    --aves-verde-oscuro: #246340;
    --aves-verde-suave: #E9F3EC;
    --aves-tinta: #1A1D1A;
    --aves-gris: #575E57;
    --aves-borde: #E2E5E1;
    --aves-suave: #F5F6F4;
    --aves-radio: 12px;

    --ut-palette-primary: var(--aves-verde);
    --ut-palette-primary-contrast: #FFFFFF;
    --ut-palette-primary-shade: var(--aves-verde-suave);
    --ut-palette-primary-text: var(--aves-verde-oscuro);
    --ut-link-text-color: var(--aves-verde-oscuro);

    --ut-body-background-color: #FFFFFF;
    --ut-header-background-color: #FFFFFF;
    --ut-header-text-color: var(--aves-tinta);
    --ut-header-border-color: var(--aves-borde);
    --ut-header-box-shadow: none;
    --ut-header-menubar-background-color: #FFFFFF;
    --ut-header-menubar-item-text-color: var(--aves-gris);
    --ut-header-menubar-item-current-background-color: transparent;
    --ut-header-menubar-item-current-text-color: var(--aves-tinta);
    --ut-header-menubar-item-hover-background-color: var(--aves-suave);
    --ut-header-menubar-item-hover-text-color: var(--aves-tinta);
    --ut-header-menubar-item-border-color: transparent;

    --ut-region-background-color: #FFFFFF;
    --ut-region-box-shadow: none;
    --ut-region-header-border-color: var(--aves-borde);
    --ut-component-border-radius: var(--aves-radio);
    --ut-focus-outline-color: var(--aves-verde);
    --a-field-input-focus-border-color: var(--aves-verde);
}

body {
    /* Borde izquierdo del contenido centrado (máx. 1280px); la marca, el menú y el título lo comparten. */
    --aves-margen: clamp(16px, 4vw, 48px);
    --aves-borde-izq: calc(max(0px, (100% - 1280px) / 2) + var(--aves-margen));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--aves-tinta);
}

::selection { background: var(--aves-verde-suave); color: var(--aves-tinta); }
:focus-visible { outline: 2px solid var(--aves-verde); outline-offset: 2px; }
a { text-underline-offset: 0.18em; }

/* Barra superior y menú: blancos, el actual marcado con una línea verde (forma, no solo color). */
.t-Header { border-bottom: 1px solid var(--aves-borde); }
.t-Header::before { display: none; } /* franja de color primario del tema */
.t-Header-logo, .t-Header-logo-link { color: var(--aves-tinta); font-weight: 700; letter-spacing: -0.01em; }
.t-Header-nav .a-MenuBar-label[aria-current="true"] { color: var(--aves-tinta); box-shadow: inset 0 -2px 0 var(--aves-verde); }

/* Título de página: sin banda gris; la miga de pan es un enlace pequeño sobre el título.
   El último elemento de la miga repite el título (y es un segundo h1): se oculta. */
.t-Body-title { background: #FFFFFF; border-bottom: 0; }
.t-BreadcrumbRegion-body { flex-direction: column; align-items: flex-start; gap: 4px; }
.t-Breadcrumb-item.is-active { display: none; }
.t-Breadcrumb-item::after { content: none; }
.t-Breadcrumb-label { font-size: 14px; color: var(--aves-gris); }
.t-BreadcrumbRegion-titleText {
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.025em;
}
.t-Footer-version { visibility: hidden; }

/* Una columna de contenido centrada y acotada, como Merlin y eBird. */
.t-Body-contentInner {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--aves-margen);
    box-sizing: border-box;
}
.t-Header-branding { padding-left: calc(var(--aves-borde-izq) - 8px); } /* el logo trae 8px de relleno propio */
.t-Header-nav .a-MenuBar > ul { padding-left: calc(var(--aves-borde-izq) - 21px); } /* relleno propio de la pestaña */
.t-Body-title .t-BreadcrumbRegion { padding-left: var(--aves-borde-izq); padding-right: var(--aves-borde-izq); }
/* Páginas con columna de filtros: todo arranca en el margen, la tabla junto a los filtros. */
.t-PageTemplate--leftCol { --aves-borde-izq: 16px; }
.t-PageTemplate--leftCol .t-Header-nav .a-MenuBar > ul { padding-left: 0; margin-left: -5px; }
.t-PageTemplate--leftCol .t-Body-contentInner { max-width: none; margin: 0; padding-inline: 24px var(--aves-margen); }
/* En escritorio la pestaña activa ya dice dónde estás: la miga de pan solo
   queda en el celular, como enlace de regreso. */
@media (min-width: 641px) {
    .t-BreadcrumbRegion.t-BreadcrumbRegion--showBreadcrumb .t-BreadcrumbRegion-breadcrumb { display: none; }
}

/* Tarjetas de especie (Inicio y Especies; son las únicas tarjetas de la app). */
.a-CardView {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--aves-borde);
    border-radius: var(--aves-radio);
    box-shadow: none;
    background: #FFFFFF;
}
.a-CardView-media { margin: 0; padding: 0; border-radius: 0; }
.a-CardView-media--fit .a-CardView-mediaImg {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 0;
}
.a-CardView-header { padding: 14px 16px 0; border: 0; }
.a-CardView-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.a-CardView-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 6px 16px 16px;
}
.a-CardView-mainContent { flex: 1; display: flex; flex-direction: column; }

.aves-cuerpo { flex: 1; display: flex; flex-direction: column; }
.aves-cientifico { font-style: italic; font-size: 13px; line-height: 1.4; color: var(--aves-gris); }
.aves-otros {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--aves-gris);
    hyphens: manual;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.aves-meta {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--aves-gris);
    font-variant-numeric: tabular-nums;
}
.aves-meta strong { color: var(--aves-tinta); font-weight: 600; }
.aves-nowrap { white-space: nowrap; }
.aves-canto { margin-top: auto; }
.aves-canto { position: relative; }
/* Espectrograma con su mapa de color original: en tinta sobre blanco los cantos débiles desaparecían. */
.aves-espectro {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 1;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #000004;
}
/* Cabezal de reproducción: recorre el espectrograma mientras suena el canto. */
.aves-cabezal {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transform: translateX(var(--aves-progreso, 0px));
    opacity: 0;
    transition: opacity 160ms ease-out;
}
.aves-canto.is-sonando .aves-cabezal { opacity: 1; }
.aves-credito { margin: 12px 0 0; min-height: 2.8em; /* dos líneas: el bloque de canto queda alineado aunque el crédito se parta */ font-size: 12px; line-height: 1.4; color: var(--aves-gris); }
.aves-credito a { color: var(--aves-gris); }

/* Botón de reproducir: una pastilla con borde verde; sonando se rellena. */
.aves-play {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px 0 14px;
    border: 1px solid var(--aves-verde);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--aves-verde-oscuro);
    font: 600 14px/1 inherit;
    cursor: pointer;
    transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aves-play:hover { background: var(--aves-verde-suave); }
.aves-play[aria-pressed="true"] { background: var(--aves-verde); color: #FFFFFF; }
.aves-play.is-cargando { cursor: progress; }
.aves-play.is-error { border-color: #B3261E; color: #B3261E; }
.aves-play .fa { font-size: 12px; }

/* Inicio: frase principal y enlace a la galería. */
.aves-hero { padding: 8px 0 24px; max-width: 46rem; }
.aves-hero-titulo {
    margin: 0 0 12px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.aves-hero-texto { margin: 0 0 12px; font-size: 17px; line-height: 1.55; color: var(--aves-gris); }
.aves-hero-ultima { margin: 0; font-size: 15px; color: var(--aves-gris); font-variant-numeric: tabular-nums; }
.t-Body-content .aves-ver-todas { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0 48px; font-size: 15px; font-weight: 600; }
.t-Body-content .aves-ver-todas a { color: var(--aves-verde-oscuro); }

/* Inicio: Carrusel de bienvenida, últimas detecciones y top 3 (Hero Section con fondo verde) */
.aves-carousel {
    margin: 0 0 32px;
    background: linear-gradient(145deg, #184328 0%, #235837 55%, #1b472c 100%);
    border: 1px solid #163D24;
    border-radius: var(--aves-radio);
    overflow: hidden;
    box-shadow: 0 8px 24px -4px rgba(22, 61, 36, 0.25);
    color: #FFFFFF;
}
.aves-carousel-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(8px);
    gap: 12px;
}
.aves-carousel-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.aves-carousel-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font: 600 12.5px/1 inherit;
    cursor: pointer;
    transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aves-carousel-tab:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
}
.aves-carousel-tab.is-active {
    color: #184328;
    background: #FFFFFF;
    border-color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}
.aves-carousel-tab.is-active .fa {
    color: #2F7D4F;
}
.aves-carousel-tab .fa {
    opacity: 0.9;
    font-size: 11px;
}
.aves-carousel-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.aves-carousel-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aves-carousel-btn:hover {
    color: #184328;
    background: #FFFFFF;
    border-color: #FFFFFF;
}

.aves-carousel-viewport {
    overflow: hidden;
    width: 100%;
    transition: height 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aves-carousel-track {
    display: flex;
    width: 100%;
    align-items: flex-start;
    transform: translateX(calc(-100% * var(--carousel-index, 0)));
    transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aves-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    min-height: 290px;
    /* Las que no se ven no son enfocables ni se leen; el retraso deja terminar el deslizamiento. */
    visibility: hidden;
    transition: visibility 0s linear 340ms;
}
.aves-carousel-slide.is-active {
    visibility: visible;
    transition-delay: 0s;
}

/* Slide 1: Sobre el proyecto */
.aves-proyecto-cabecera {
    max-width: 48rem;
    margin-bottom: 12px;
}
.aves-proyecto-etiqueta {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #A3E2B8;
    margin-bottom: 4px;
}
.aves-proyecto-titulo {
    margin: 0 0 6px;
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.25;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.aves-proyecto-intro {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}
.aves-proyecto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    flex: 0 0 auto;
}
.aves-proyecto-tarjeta {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.aves-proyecto-paso {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #2F7D4F;
    margin-bottom: 6px;
    display: inline-block;
}
.aves-proyecto-subtitulo {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--aves-tinta);
    letter-spacing: -0.01em;
}
.aves-proyecto-texto {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--aves-gris);
}

/* Slide 2: Últimas detecciones */
.aves-deteccion-destacada {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    justify-content: space-between;
}
.aves-deteccion-cabecera {
    max-width: 48rem;
    margin-bottom: 2px;
}
.aves-deteccion-grid {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 18px;
    align-items: center;
}
.aves-deteccion-media {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
.aves-deteccion-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.aves-deteccion-img-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.6);
    font-size: 28px;
}
.aves-deteccion-media .aves-credito {
    margin: 6px 10px 6px;
    min-height: auto;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.75);
}
.aves-deteccion-media .aves-credito a {
    color: rgba(255, 255, 255, 0.92);
}
.aves-deteccion-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aves-deteccion-nombre {
    margin: 0 0 2px;
    font-size: clamp(20px, 2.4vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}
.aves-deteccion-cuerpo .aves-cientifico {
    color: #C3E9D2;
    font-size: 13px;
}
.aves-deteccion-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}
.aves-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}
.aves-badge-conf {
    background: #FFFFFF;
    color: #184328;
    border-color: #FFFFFF;
    font-weight: 700;
}
.aves-deteccion-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}
.aves-deteccion-desc strong {
    color: #FFFFFF;
}
.aves-carousel .aves-play {
    min-height: 30px;
    padding: 0 12px;
    font-size: 12px;
    gap: 6px;
}
.aves-carousel .aves-deteccion-cuerpo .aves-play {
    background: #FFFFFF;
    color: #184328;
    border-color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
    align-self: flex-start;
}
.aves-carousel .aves-deteccion-cuerpo .aves-play:hover {
    background: #E9F5EE;
    color: #123720;
}
.aves-carousel .aves-deteccion-cuerpo .aves-play[aria-pressed="true"] {
    background: #0E2917;
    color: #FFFFFF;
    border-color: #0E2917;
}

.aves-carousel-recientes {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 8px;
    margin-top: 2px;
}
.aves-carousel-recientes-titulo {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #A3E2B8;
}
.aves-carousel-mini-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.aves-carousel-mini-item {
    font-size: 11.5px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    padding: 3px 8px;
    font-variant-numeric: tabular-nums;
}
.aves-carousel-mini-hora {
    font-weight: 700;
    color: #C3E9D2;
    margin-right: 4px;
}
.aves-carousel-mini-item .aves-cientifico {
    color: #D2EDDD;
}
.aves-carousel-mini-meta {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
}

/* Slide 3: Top 3 de especies */
.aves-top3-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 4px;
    flex: 0 0 auto;
}
.aves-top3-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.aves-top3-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: #184328;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-variant-numeric: tabular-nums;
}
.aves-top3-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 95px;
    object-fit: cover;
}
.aves-top3-img-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    max-height: 95px;
    background: #E2E5E1;
    color: var(--aves-gris);
    font-size: 20px;
}
.aves-top3-cuerpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
}
.aves-top3-nombre {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--aves-tinta);
}
.aves-top3-cuerpo .aves-cientifico {
    color: var(--aves-gris);
    font-size: 12px;
}
.aves-top3-meta {
    margin: 4px 0 8px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--aves-gris);
    font-variant-numeric: tabular-nums;
}
.aves-top3-meta strong {
    color: var(--aves-tinta);
}
.aves-top3-cuerpo .aves-canto {
    margin-top: auto;
}

@media (max-width: 768px) {
    .aves-carousel-barra {
        padding: 6px 10px;
    }
    .aves-carousel-tab {
        padding: 5px 8px;
        font-size: 11px;
        gap: 4px;
    }
    .aves-carousel-slide {
        padding: 14px 12px;
        min-height: unset;
    }
    .aves-proyecto-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .aves-deteccion-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .aves-top3-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}
.aves-carousel-tab-corto { display: none; }
/* En el celular la barra no cabía (se cortaba «siguiente» y las pestañas se partían en dos líneas):
   se navega con las pestañas o deslizando, así que quedan solo ellas, con nombre corto, y la pausa. */
@media (max-width: 640px) {
    .aves-carousel-tab-largo { display: none; }
    .aves-carousel-tab-corto { display: inline; }
    .aves-carousel-barra {
        padding: 6px 8px;
        gap: 6px;
    }
    .aves-carousel-tabs {
        flex: 1;
        min-width: 0;
        gap: 2px;
    }
    .aves-carousel-tab {
        flex: 1 1 auto;
        justify-content: center;
        white-space: nowrap;
        padding: 6px 4px;
    }
    .aves-carousel-tab .fa,
    .aves-carousel-prev,
    .aves-carousel-next {
        display: none;
    }

    /* Diapositivas compactas: cada una cabe en la primera pantalla sin tapar todo Inicio. */
    .aves-carousel { margin-bottom: 24px; }
    .aves-carousel-slide { padding: 12px; gap: 8px; }
    .aves-proyecto-cabecera, .aves-deteccion-cabecera { margin-bottom: 0; }
    .aves-proyecto-titulo { font-size: 18px; margin-bottom: 4px; }
    .aves-proyecto-intro {
        font-size: 13px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }

    /* 1: los tres pasos en una fila, solo número y nombre. */
    .aves-proyecto-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .aves-proyecto-tarjeta { padding: 8px; }
    .aves-proyecto-paso { margin-bottom: 2px; font-size: 11px; }
    .aves-proyecto-subtitulo { margin: 0; font-size: 12px; }
    .aves-proyecto-texto { display: none; }

    /* 2: foto pequeña al lado del nombre; solo dos detecciones recientes, en una línea cada una. */
    .aves-deteccion-destacada { gap: 8px; }
    .aves-deteccion-grid { grid-template-columns: 104px 1fr; gap: 12px; align-items: start; }
    .aves-deteccion-img, .aves-deteccion-img-vacia { aspect-ratio: 1; }
    .aves-deteccion-media .aves-credito { margin: 4px 6px; font-size: 9.5px; }
    .aves-deteccion-cuerpo { gap: 6px; }
    .aves-deteccion-nombre { font-size: 18px; }
    .aves-deteccion-cuerpo .aves-cientifico { font-size: 12px; }
    .aves-badge { padding: 2px 8px; font-size: 11px; }
    .aves-deteccion-desc { display: none; }
    .aves-carousel-mini-list { flex-direction: column; gap: 4px; }
    .aves-carousel-mini-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .aves-carousel-mini-item:nth-child(n + 3), .aves-carousel-mini-item .aves-cientifico { display: none; }

    /* 3: el Top 3 en filas con miniatura. */
    .aves-top3-grid { gap: 6px; }
    .aves-top3-card { flex-direction: row; align-items: center; }
    .aves-top3-img, .aves-top3-img-vacia { flex: none; width: 72px; height: 72px; max-height: none; aspect-ratio: 1; }
    .aves-top3-badge { top: 4px; left: 4px; padding: 1px 6px; font-size: 10px; }
    .aves-top3-cuerpo { min-width: 0; padding: 6px 10px; }
    .aves-top3-nombre { font-size: 13px; }
    .aves-top3-cuerpo .aves-cientifico { font-size: 11px; }
    .aves-top3-meta { margin: 2px 0 4px; }
    .aves-carousel .aves-top3-cuerpo .aves-play { min-height: 26px; padding: 0 10px; font-size: 11px; }
}
.t-Body-content .aves-seccion { margin: 0 0 16px; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }

/* Estadísticas: indicadores con cifra grande, gráficos en verde y listas con cifras a la derecha. */
.aves-stats-intro { max-width: 46rem; margin: 0 0 24px; font-size: 17px; line-height: 1.55; color: var(--aves-gris); }
.aves-stats-intro strong { color: var(--aves-tinta); font-variant-numeric: tabular-nums; }
#indicadores { margin-bottom: 24px; }
#indicadores .t-MetricCard { border: 1px solid var(--aves-borde); border-radius: var(--aves-radio); box-shadow: none; }
#indicadores .t-MetricCard-title { font-size: 13px; color: var(--aves-gris); }
#indicadores .t-MetricCard-metric { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--aves-tinta); font-variant-numeric: tabular-nums; }
#indicadores .t-MetricCard-meta { font-size: 13px; color: var(--aves-gris); font-variant-numeric: tabular-nums; }
.aves-stats-lista { list-style: none; margin: 0; padding: 0; }
.aves-stats-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--aves-borde); }
.aves-stats-fila:first-child { border-top: 0; padding-top: 0; }
.aves-stats-dato { text-align: right; font-size: 13px; color: var(--aves-gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aves-stats-dato span { display: block; }
.aves-stats-camara + .aves-stats-camara { margin-top: 14px; }
.aves-stats-camara-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 6px; }
.aves-stats-barra { height: 8px; background: var(--aves-suave); border-radius: 999px; overflow: hidden; }
.aves-stats-barra span { display: block; height: 100%; background: var(--aves-verde); border-radius: inherit; }
.aves-stats-vacio { margin: 0; color: var(--aves-gris); }

/* Detecciones: un solo marco (el de la tabla), columna de filtros a toda la altura,
   cifras alineadas, científico en cursiva, otros nombres atenuados. */
#listado-detecciones.t-Region { border: 0; background: transparent; box-shadow: none; }
/* El título del reporte repite el de la página: oculto a la vista, no a lectores de pantalla. */
#listado-detecciones .t-Region-header { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.t-Body-side { background: #FFFFFF; border: 0; box-shadow: none; }
@media (max-width: 640px) {
    .t-PageTemplate--leftCol .t-Body-contentInner { padding-inline: 16px; }
}
.t-Body-side .t-Region-header { padding-left: 4px; }
/* «Recuento Total de Filas» es el texto genérico de APEX: se nombra lo que se cuenta. */
.a-FS-totalLabel { font-size: 0; }
.a-FS-totalLabel::before { content: "Detecciones"; font-size: 16px; }
.t-Report-report td { font-variant-numeric: tabular-nums; }
.t-Report-report td[headers="NOMBRE_CIENTIFICO"] { font-style: italic; }
.t-Report-report td[headers="NOMBRE_COMUN"] { color: var(--aves-gris); }

@media (prefers-reduced-motion: reduce) {
    .aves-play, .aves-cabezal { transition: none; }
}

/* Inicio, carrusel: sin movimiento si la persona lo pide. */
@media (prefers-reduced-motion: reduce) {
    .aves-carousel-track,
    .aves-carousel-viewport,
    .aves-carousel-slide,
    .aves-carousel-tab,
    .aves-carousel-btn { transition: none; }
}

/* Detecciones: el nombre de la especie abre su ficha flotante. */
.aves-ficha-abrir {
    padding: 0;
    border: 0;
    background: none;
    color: var(--aves-verde-oscuro);
    font: inherit;
    text-align: start;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 0.18em;
    cursor: pointer;
}
.aves-ficha-abrir:hover { text-decoration-color: currentColor; }

.aves-ficha {
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 1px solid var(--aves-borde);
    border-radius: var(--aves-radio);
    background: #FFFFFF;
    color: var(--aves-tinta);
    box-shadow: 0 24px 48px -12px rgba(26, 29, 26, 0.35);
    overflow: auto;
}
.aves-ficha::backdrop { background: rgba(26, 29, 26, 0.45); }
.aves-ficha[open] { animation: aves-ficha-entrar 200ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes aves-ficha-entrar { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .aves-ficha[open] { animation: none; } }

.aves-ficha-cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--aves-tinta);
    box-shadow: 0 1px 4px rgba(26, 29, 26, 0.2);
    cursor: pointer;
}
.aves-ficha-cerrar:hover { background: var(--aves-suave); }
.aves-ficha-foto { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--aves-suave); }
.aves-ficha-cuerpo { padding: 20px 24px 24px; }
.aves-ficha-titulo { margin: 0 44px 2px 0; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
.aves-ficha-otros { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--aves-gris); }
.aves-ficha-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px 16px;
    margin: 16px 0;
    padding: 16px 0;
    border-block: 1px solid var(--aves-borde);
}
.aves-ficha-datos dt { font-size: 12px; color: var(--aves-gris); }
.aves-ficha-datos dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.aves-ficha .aves-credito { min-height: 0; }

/* Migración: el globo vive en un escenario oscuro (como el carrusel de Inicio); el panel es blanco y plano. */
.aves-migra { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.aves-migra-escenario {
    position: relative;
    height: clamp(420px, 70vh, 680px);
    border-radius: var(--aves-radio);
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%, #12301F 0%, #08140D 60%, #040A06 100%);
    border: 1px solid #163D24;
}
.aves-migra-globo { position: absolute; inset: 0; }
.aves-migra-globo canvas { display: block; }
.aves-migra-chips {
    position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px;
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.aves-migra-chips::-webkit-scrollbar { display: none; }
.aves-migra-chip {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 4px 14px 4px 4px;
    border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
    background: rgba(4, 10, 6, 0.6); color: #FFFFFF;
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aves-migra-chip img, .aves-migra-chip-todas { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.aves-migra-chip-todas { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); font-size: 16px; }
.aves-migra-chip:hover { background: rgba(255, 255, 255, 0.14); }
.aves-migra-chip[aria-pressed="true"] { background: #FFFFFF; color: var(--aves-tinta); border-color: #7CD39A; box-shadow: inset 0 0 0 1px #7CD39A; }
.aves-migra-ayuda {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 10px; margin: 0; padding: 0 12px;
    text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.6); pointer-events: none;
}
.aves-migra-sin-globo { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: rgba(255, 255, 255, 0.8); }

/* Marcas sobre el globo (HTML, para que los acentos se vean bien). */
.aves-migra-marca {
    transform: translate(-50%, -150%); white-space: nowrap; pointer-events: none;
    padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
    background: rgba(4, 10, 6, 0.72); color: #FFFFFF; transition: opacity 200ms;
}
.aves-migra-marca.es-jardin { background: #FFFFFF; color: var(--aves-tinta); }
.aves-migra-ave[hidden] { display: none; }
.aves-migra-ave {
    position: absolute; z-index: 2; top: -15px; left: -15px; pointer-events: none;
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: #7CD39A; color: #08140D; font-size: 15px;
    box-shadow: 0 0 0 6px rgba(124, 211, 154, 0.28);
}
.aves-migra-tip { padding: 6px 10px; border-radius: 8px; background: rgba(4, 10, 6, 0.85); color: #FFFFFF; font-size: 12px; line-height: 1.4; }

/* Panel. */
.aves-migra-panel {
    max-height: clamp(420px, 70vh, 680px); overflow-y: auto;
    padding: 20px; border: 1px solid var(--aves-borde); border-radius: var(--aves-radio); background: #FFFFFF;
}
.aves-migra-panel .aves-proyecto-etiqueta { color: var(--aves-verde-oscuro); background: var(--aves-verde-suave); }
.aves-migra-titulo { margin: 8px 0 2px; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.aves-migra-texto { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--aves-gris); }
.aves-migra-texto strong { color: var(--aves-tinta); font-variant-numeric: tabular-nums; }
.aves-migra-subtitulo { margin: 20px 0 8px; font-size: 14px; font-weight: 700; }
.aves-migra-lista { list-style: none; margin: 16px 0 0; padding: 0; }
.aves-migra-item {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; margin: 0 -8px;
    border: 0; border-radius: 8px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.aves-migra-lista li + li .aves-migra-item { border-top: 1px solid var(--aves-borde); border-radius: 0; }
.aves-migra-item:hover { background: var(--aves-suave); }
.aves-migra-item img, .aves-migra-item-vacia { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.aves-migra-item-vacia { display: grid; place-items: center; background: var(--aves-suave); color: var(--aves-gris); }
.aves-migra-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.aves-migra-item-txt span { font-size: 12px; color: var(--aves-gris); }
.aves-migra-item-km { font-size: 12px; color: var(--aves-gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aves-migra-volver {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0;
    border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--aves-verde-oscuro); cursor: pointer;
}
.aves-migra-foto { aspect-ratio: 3 / 2; margin: 0 -20px; overflow: hidden; }
.aves-migra-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aves-migra-panel .aves-credito { min-height: 0; margin: 6px 0 12px; }
.aves-migra-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.aves-migra-cifras div { padding: 10px 12px; border: 1px solid var(--aves-borde); border-radius: 8px; }
.aves-migra-cifras dt { font-size: 12px; color: var(--aves-gris); }
.aves-migra-cifras dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aves-migra-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.aves-migra-acciones .aves-canto { margin: 0; }
.aves-migra-recorrer {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
    border: 1px solid var(--aves-verde); border-radius: 999px; background: var(--aves-verde); color: #FFFFFF;
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aves-migra-recorrer:hover { background: var(--aves-verde-oscuro); }
.aves-migra-recorrer[aria-pressed="true"] { background: #FFFFFF; color: var(--aves-verde-oscuro); }
.aves-migra-etapas { list-style: none; margin: 0; padding: 0; counter-reset: etapa; }
.aves-migra-etapa {
    position: relative; display: flex; flex-direction: column; gap: 1px; width: 100%;
    padding: 8px 8px 10px 30px; border: 0; border-radius: 8px; background: none;
    text-align: left; font: inherit; font-size: 14px; color: inherit; cursor: pointer;
}
/* Línea de tiempo: punto por etapa, unidos por una línea. */
.aves-migra-etapa::before { content: ""; position: absolute; left: 10px; top: 13px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--aves-verde); background: #FFFFFF; box-sizing: border-box; }
.aves-migra-etapas li:not(:last-child) .aves-migra-etapa::after { content: ""; position: absolute; left: 14px; top: 25px; bottom: -10px; width: 2px; background: var(--aves-borde); }
.aves-migra-etapa.es-jardin::before { background: var(--aves-verde); }
.aves-migra-etapa:hover { background: var(--aves-suave); }
.aves-migra-etapa.is-actual { background: var(--aves-verde-suave); }
.aves-migra-etapa.is-actual::before { background: var(--aves-verde); transform: scale(1.25); }
.aves-migra-etapa-cuando { font-size: 12px; font-weight: 600; color: var(--aves-verde-oscuro); font-variant-numeric: tabular-nums; }
.aves-migra-etapa-nota { font-size: 13px; color: var(--aves-gris); }
.aves-migra-nota { margin: 12px 0 32px; font-size: 12px; color: var(--aves-gris); }

@media (max-width: 960px) {
    .aves-migra { grid-template-columns: minmax(0, 1fr); }
    .aves-migra-panel { max-height: none; }
    .aves-migra-escenario { height: clamp(360px, 62vh, 520px); }
}
@media (prefers-reduced-motion: reduce) {
    .aves-migra-chip, .aves-migra-recorrer, .aves-migra-marca { transition: none; }
}