/*
    Paneles de inicio, el estilo que estrenó Cuaderno2026.

    Aquí está el armazón: la cabecera con el saludo, las tarjetas, los contadores, la rejilla
    de recursos y los estados vacíos. El color NO se fija: sale de --app-sidebar-background-color,
    que cada aplicación pone en su appsettings, así que el mismo panel se ve verde en Cuaderno,
    azul en Photoderm y dorado en Vossman home sin tocar nada.

    Se carga después de adminlte.css. Lo que una web necesite de más, en su propia hoja.
*/

.dashboard {
    --dashboard-accent: var(--app-sidebar-background-color, #0c6ea8);
    --dashboard-accent-dark: color-mix(in srgb, var(--dashboard-accent) 72%, #000);
    --dashboard-accent-soft: color-mix(in srgb, var(--dashboard-accent) 12%, #fff);
    --dashboard-ink: #24303a;
    --dashboard-card-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
    --dashboard-card-radius: 1.15rem;
}

/* ---- cabecera */
.dashboard-hero {
    background: linear-gradient(125deg, var(--dashboard-accent-dark), var(--dashboard-accent) 68%,
                color-mix(in srgb, var(--dashboard-accent) 55%, #fff));
    border: 0;
    border-radius: var(--dashboard-card-radius);
    color: #fff;
    padding: 2rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    box-shadow: var(--dashboard-card-shadow) !important;
    position: relative;
    overflow: hidden;
}

.dashboard-hero::after {
    content: "";
    position: absolute;
    width: 18rem;
    height: 18rem;
    right: -6rem;
    top: -10rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
}

.dashboard-hero h1 {
    font-size: clamp(1.5rem, 4vw, 2.3rem);
    font-weight: 750;
    margin: 0;
}

.dashboard-hero p {
    margin: 0;
}

.dashboard-actions {
    display: flex;
    gap: .75rem;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ---- contadores */
.dashboard-kpi {
    background: var(--bs-body-bg);
    border: 0;
    border-radius: var(--dashboard-card-radius);
    min-height: 104px;
    padding: 1.15rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--bs-body-color);
    box-shadow: var(--dashboard-card-shadow) !important;
    transition: transform .18s ease, box-shadow .18s ease;
}

a.dashboard-kpi:hover,
a.dashboard-kpi:focus {
    transform: translateY(-3px);
    box-shadow: 0 1.25rem 3.25rem rgba(0, 0, 0, .21) !important;
    color: var(--bs-body-color);
}

.dashboard-kpi-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .9rem;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.dashboard-kpi strong {
    display: block;
    font-size: 1.65rem;
    line-height: 1.05;
    color: var(--dashboard-ink);
}

.dashboard-kpi small {
    display: block;
    color: var(--bs-secondary-color);
    margin-top: .35rem;
}

/* ---- tarjetas */
.dashboard-card {
    border: 0;
    border-radius: var(--dashboard-card-radius);
    box-shadow: var(--dashboard-card-shadow) !important;
    overflow: hidden;
}

.dashboard-card .card-header {
    border: 0;
    background: var(--bs-body-bg);
    padding: 1.25rem 1.35rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-card .card-header > div:first-child {
    min-width: 0;
}

.dashboard-card .card-header > .btn,
.dashboard-card .card-header > .btn-group {
    flex: 0 0 auto;
    margin-left: auto;
}

.dashboard-card h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--dashboard-ink);
}

.dashboard-card .card-header p {
    font-size: .82rem;
    color: var(--bs-secondary-color);
    margin: .25rem 0 0;
}

/* ---- rejilla de recursos */
.resource-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    background: var(--bs-body-bg);
    border: 0;
    border-radius: var(--dashboard-card-radius);
    box-shadow: var(--dashboard-card-shadow) !important;
    overflow: hidden;
}

.resource-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    min-height: 76px;
    padding: .9rem 1.1rem;
    border-right: 1px solid var(--bs-border-color-translucent);
    color: var(--bs-body-color);
    text-decoration: none;
}

.resource-stat:last-child {
    border-right: 0;
}

a.resource-stat:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.resource-stat > i {
    font-size: 1.3rem;
    width: 1.5rem;
    text-align: center;
}

.resource-stat strong,
.resource-stat small {
    display: block;
}

.resource-stat strong {
    color: var(--dashboard-ink);
    font-size: 1.25rem;
    line-height: 1;
}

.resource-stat small {
    color: var(--bs-secondary-color);
    margin-top: .2rem;
}

/* ---- barras de reparto */
.dashboard-bars {
    display: grid;
    gap: 1rem;
}

.dashboard-bar {
    display: grid;
    grid-template-columns: minmax(125px, 1.1fr) minmax(140px, 3fr) 88px;
    align-items: center;
    gap: 1rem;
}

.dashboard-bar-label span,
.dashboard-bar-label small {
    display: block;
}

.dashboard-bar-label span {
    font-weight: 650;
    color: var(--dashboard-ink);
}

.dashboard-bar-label small {
    color: var(--bs-secondary-color);
}

.dashboard-bar-track {
    height: .72rem;
    background: var(--bs-tertiary-bg);
    border-radius: 2rem;
    overflow: hidden;
}

.dashboard-bar-track span {
    display: block;
    min-width: 4px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--dashboard-accent-dark), var(--dashboard-accent));
}

.dashboard-bar > strong {
    text-align: right;
    font-size: .9rem;
    color: var(--dashboard-ink);
}

/* ---- anillo de progreso */
.dashboard-ring {
    --progress: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--dashboard-accent) calc(var(--progress) * 1%), var(--bs-tertiary-bg) 0);
    position: relative;
}

.dashboard-ring::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: var(--bs-body-bg);
}

.dashboard-ring div {
    position: relative;
    text-align: center;
}

.dashboard-ring strong,
.dashboard-ring span {
    display: block;
}

.dashboard-ring strong {
    font-size: 1.8rem;
    color: var(--dashboard-ink);
}

.dashboard-ring span {
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

/* ---- cuando no hay nada que enseñar */
.dashboard-empty {
    text-align: center;
    color: var(--bs-secondary-color);
}

.dashboard-empty i {
    font-size: 2.2rem;
    opacity: .35;
    display: block;
    margin-bottom: .6rem;
}

.dashboard-empty p {
    margin: 0;
    font-size: .9rem;
}

/* ---- titulillo de sección */
.dashboard-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 .15rem 1rem;
}

.dashboard-section-heading h2 {
    color: var(--dashboard-ink);
    font-size: 1.2rem;
    font-weight: 750;
    margin: 0;
}

.dashboard-section-heading h2 i {
    color: var(--dashboard-accent);
}

@media (max-width: 767.98px) {
    .dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }

    .dashboard-actions {
        justify-content: flex-start;
    }

    .dashboard-bar {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .dashboard-bar > strong {
        text-align: left;
    }
}

/* ==================================================================================================
   Tarjetas de panel opcionales (ProgarCore2026, octubre de 2026). Pensadas primero para el móvil:
   bloques enteros que se tocan con el dedo, cifras grandes y nada que dependa del ratón. Sólo
   cambian lo que lleve estas clases.
   ================================================================================================== */

/* ---- tarjeta con degradado: título, icono y cifra grande, y una línea de detalle debajo.
   Colores: grad-card--azul / --verde / --naranja / --rosa / --morado / --gris; sin ninguna, el de la web. */
.grad-card {
    --grad-desde: color-mix(in srgb, var(--app-sidebar-background-color, #0c6ea8) 82%, #000);
    --grad-hasta: color-mix(in srgb, var(--app-sidebar-background-color, #0c6ea8) 70%, #fff);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
    min-height: 6.5rem;
    padding: .9rem 1rem;
    border-radius: .85rem;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--grad-desde), var(--grad-hasta));
    box-shadow: 0 .4rem 1rem color-mix(in srgb, var(--grad-desde) 30%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
}
a.grad-card:hover, a.grad-card:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 .7rem 1.4rem color-mix(in srgb, var(--grad-desde) 40%, transparent);
}
a.grad-card:active { transform: translateY(0); }
.grad-card--azul { --grad-desde: #4099ff; --grad-hasta: #73b4ff; }
.grad-card--verde { --grad-desde: #2ed8b6; --grad-hasta: #59e0c5; }
.grad-card--naranja { --grad-desde: #ffb64d; --grad-hasta: #ffcb80; }
.grad-card--rosa { --grad-desde: #ff5370; --grad-hasta: #ff869a; }
.grad-card--morado { --grad-desde: #7759de; --grad-hasta: #a08cf0; }
.grad-card--gris { --grad-desde: #5f6f81; --grad-hasta: #8a99aa; }
.grad-card-titulo { font-size: .85rem; font-weight: 500; opacity: .95; line-height: 1.2; }
.grad-card-cuerpo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.grad-card-cuerpo > i { font-size: 1.6rem; opacity: .95; }
.grad-card-cifra { font-size: 1.9rem; font-weight: 400; line-height: 1; }
.grad-card-pie { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; opacity: .9; margin-top: auto; }

/* ---- estadística mínima: icono de línea en color a un lado y la cifra con su rótulo al otro;
   con stat-card-barra, una barra fina de progreso; stat-card--ancha para título + subtítulo + cifra. */
.stat-card {
    --stat-color: var(--app-sidebar-background-color, #0c6ea8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    height: 100%;
    padding: 1rem 1.15rem;
    border-radius: .75rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #24303a);
    border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .08));
    box-shadow: 0 .15rem .9rem rgba(16, 24, 40, .08);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
a.stat-card:hover, a.stat-card:focus-visible { color: inherit; transform: translateY(-2px); box-shadow: 0 .5rem 1.4rem rgba(16, 24, 40, .13); }
.stat-card--azul { --stat-color: #4099ff; }
.stat-card--verde { --stat-color: #2ed8b6; }
.stat-card--naranja { --stat-color: #ff9f43; }
.stat-card--rosa { --stat-color: #ff5370; }
.stat-card--morado { --stat-color: #7759de; }
.stat-card--gris { --stat-color: #6c7a89; }
.stat-card-icono { font-size: 1.9rem; color: var(--stat-color); flex: 0 0 auto; width: 2.4rem; text-align: center; }
.stat-card-datos { flex: 1 1 0; min-width: 0; text-align: right; }
.stat-card--izquierda .stat-card-datos { text-align: left; }
.stat-card--izquierda .stat-card-icono { order: 2; }
.stat-card-cifra { display: block; font-size: 1.55rem; font-weight: 300; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* La cifra en el color de la tarjeta, oscurecido: los colores claros (verde, naranja) no se leían sobre blanco. */
.stat-card--color .stat-card-cifra { color: color-mix(in srgb, var(--stat-color) 55%, #000); }
.stat-card-rotulo { display: block; font-size: .82rem; color: var(--bs-secondary-color, #6b7785); }
.stat-card-barra { flex: 1 0 100%; height: .3rem; margin-top: .45rem; border-radius: 1rem; background: var(--bs-secondary-bg, #e9edf2); overflow: hidden; display: flex; }
.stat-card-barra > span { display: block; height: 100%; background: var(--stat-color); }
.stat-card--ancha .stat-card-datos { text-align: left; }
.stat-card--ancha .stat-card-cifra-final { margin-left: auto; font-size: 1.45rem; font-weight: 300; white-space: nowrap; }

/* Las cifras no se parten nunca («1.620.88» / «4»): en una tarjeta estrecha (dos por fila en el móvil) el icono pasa
   arriba y la cifra ocupa todo el ancho, con la letra ajustada al ancho de la tarjeta (consulta de contenedor). Para
   los navegadores sin consultas de contenedor, un tamaño menor en pantallas pequeñas. */
.stat-card { container-type: inline-size; }
@media (max-width: 575.98px) { .stat-card-cifra { font-size: 1.2rem; } }
@container (max-width: 13rem) {
    .stat-card-icono { flex-basis: 100%; width: auto; font-size: 1.45rem; text-align: left; }
    .stat-card-datos { flex-basis: 100%; }
    .stat-card-cifra { font-size: clamp(1.05rem, 17cqi, 1.55rem); }
    .stat-card--izquierda .stat-card-icono { order: 0; }
}

/* ---- noticia con la foto de fondo, un velo oscuro y el texto encima. Toda la tarjeta se pulsa con
   el stretched-link del título (un solo enlace de verdad, no un div que hace de enlace). */
.news-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 16rem;
    border-radius: 1rem;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(140deg, color-mix(in srgb, var(--app-sidebar-background-color, #0c6ea8) 75%, #000),
                var(--app-sidebar-background-color, #0c6ea8));
    box-shadow: 0 .5rem 1.4rem rgba(16, 24, 40, .18);
}
.news-card-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .4s ease; }
.news-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(10, 20, 30, .05) 0%, rgba(10, 20, 30, .45) 45%, rgba(10, 20, 30, .88) 100%);
}
.news-card:hover .news-card-foto { transform: scale(1.05); }
.news-card-cuerpo { padding: 1.15rem 1.25rem 1.25rem; }
.news-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; font-size: .78rem; opacity: .92; }
.news-card-etiqueta { color: #ffd166; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.news-card-titulo { margin: .35rem 0; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.news-card-titulo a { color: inherit; text-decoration: none; }
.news-card-texto {
    margin: 0;
    font-size: .85rem;
    opacity: .85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- el tiempo: arriba el estado, el lugar y la temperatura sobre un degradado que depende del
   tiempo que hace (weather-card--despejado / --nubes / --lluvia / --tormenta / --nieve / --niebla);
   abajo, en blanco, los días. */
.weather-card {
    --weather-fondo: linear-gradient(165deg, #2f80ed, #56ccf2);
    height: 100%;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 .5rem 1.4rem rgba(16, 24, 40, .14);
}
.weather-card--despejado { --weather-fondo: linear-gradient(165deg, #2f80ed 0%, #56ccf2 70%, #ffd76a 130%); }
.weather-card--nubes { --weather-fondo: linear-gradient(165deg, #4b6584, #8fa5bd); }
.weather-card--lluvia { --weather-fondo: linear-gradient(165deg, #23395b, #3f7f93); }
.weather-card--tormenta { --weather-fondo: linear-gradient(165deg, #2c1e4a, #5b3f8c); }
.weather-card--nieve { --weather-fondo: linear-gradient(165deg, #6d8fc7, #a9d6f2); }
.weather-card--niebla { --weather-fondo: linear-gradient(165deg, #6b7489, #b4bccb); }
.weather-card-arriba { position: relative; padding: 1.1rem 1.25rem 1.35rem; color: #fff; text-align: center; background: var(--weather-fondo); }
.weather-card-lugar { font-size: .9rem; opacity: .92; }
.weather-card-estado { font-size: 1.25rem; font-weight: 300; margin-top: .1rem; }
.weather-card-ahora { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: .4rem 0 .35rem; }
.weather-card-ahora > i { font-size: 2.6rem; color: #fff !important; opacity: .95; }
.weather-card-temp { font-size: 3.4rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.weather-card-temp small { font-size: 45%; font-weight: 300; vertical-align: top; margin-left: .1rem; }
.weather-card-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; font-size: .82rem; opacity: .92; }
.weather-card-dias { list-style: none; margin: 0; padding: .35rem 1rem .75rem; }
.weather-card-dias li {
    display: grid;
    grid-template-columns: minmax(3.4rem, 1fr) 1.6rem 4.4rem 4.6rem 2.4rem;
    align-items: center;
    gap: .35rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent, #eef1f4);
    font-size: .86rem;
}
.weather-card-dias li:last-child { border-bottom: 0; }
.weather-card-dias li.weather-card-cabecera { padding: .35rem 0 .15rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color, #6b7785); }
.weather-card-dia { text-transform: capitalize; }
.weather-card-dias .text-end { white-space: nowrap; }
.weather-card-max { font-weight: 600; }
.weather-card-min { color: var(--bs-secondary-color, #6b7785); }