/* Senderos — estilos propios del panel, encima de ui-kit.css (que no se toca).
   Solo clases con prefijo sd-, más la paleta propia de Senderos, que sustituye a la de Gesmendi. */

/* ---------- Paleta de Senderos ----------
   Azul de la web pública (senderos.nafarmendi.org) y, de acento, el amarillo de la marca de pintura de los PR.
   Neutros fríos (pizarra) en lugar de los grises verdosos de Gesmendi. Los tonos claros, oscuros, la barra lateral
   y Bootstrap se derivan solos de --g-brand y --g-accent (ui-kit.css). */
:root {
    --g-brand: #1a5da3;          --g-brand-rgb: 26, 93, 163;      /* 6,7:1 con texto blanco */
    --g-accent: #e3a812;         --g-accent-rgb: 227, 168, 18;    /* parpadeos y marca activa del menú (nunca con texto blanco) */
    --g-sidebar-end: color-mix(in srgb, var(--g-brand) 42%, #061426);

    --g-ink: #1b2532;
    --g-muted: #5a6678;
    --g-line: #e1e6ee;
    --g-canvas: #f3f5f9;
    --g-shadow: 0 1px 2px rgba(14, 30, 56, .06), 0 1px 3px rgba(14, 30, 56, .08);
    --g-shadow-lg: 0 10px 30px rgba(14, 30, 56, .10);

    --sd-accent-050: color-mix(in srgb, var(--g-accent) 16%, #fff);
    --sd-accent-ink: #7a5600;    /* texto sobre el amarillo claro: 5,9:1 */

    /* Marcas de pintura de los senderos homologados: blanco sobre rojo (GR), amarillo (PR) y verde (SL) */
    --sd-gr: #c8281e;
    --sd-pr: #f2c21b;
    --sd-sl: #2e8b3e;
}
/* Restos de la paleta verde que el kit escribe a mano */
.card-footer { background: #f8fafc; }
.g-badge-off, .g-kpi-icon.muted { background: #edf0f5; color: var(--g-muted); }
.g-pagehead .breadcrumb { --bs-breadcrumb-divider-color: #9aa5b5; }
.g-table tbody tr:hover { background: color-mix(in srgb, var(--g-brand) 4%, #fff); }
/* Con la marca azul, «info» pasa al verde de los SL: homologada = correcto */
.g-kpi-icon.info { background: #e3f3e7; color: #1f7a36; }
.g-kpi-icon.accent { background: var(--sd-accent-050); color: var(--sd-accent-ink); }
.btn-accent { --bs-btn-color: var(--g-ink); --bs-btn-hover-color: var(--g-ink); --bs-btn-active-color: var(--g-ink); }

/* ---------- Marca: la mascota de Senderos ---------- */
.sidebar-ui .brand-logo.sd-brand-logo { width: auto; height: 2.3rem; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.g-auth-art .g-brand img.sd-auth-logo { width: auto; height: 3.2rem; }

/* ---------- Indicadores con la marca de pintura ---------- */
.sd-ind { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .55rem .15rem .4rem; border: 1px solid var(--g-line); border-radius: .4rem; background: var(--g-surface); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.sd-ind::before { content: ""; width: .5rem; height: .85rem; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); background: linear-gradient(#fff 0 50%, var(--sd-marca, #9aa8a1) 50% 100%); }
.sd-ind-gr { --sd-marca: var(--sd-gr); }
.sd-ind-pr { --sd-marca: var(--sd-pr); }
.sd-ind-sl { --sd-marca: var(--sd-sl); }

/* ---------- Inicio ---------- */
a.card.sd-kpi-link { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.card.sd-kpi-link:hover { border-color: var(--g-brand); box-shadow: var(--g-shadow-lg); }
.sd-chart { display: block; width: 100%; height: auto; max-height: 160px; }
.card-header .g-count { white-space: nowrap; }
.sd-split { display: grid; gap: .55rem; align-content: start; }
.sd-split-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) 4rem; align-items: center; gap: .75rem; font-size: .9rem; }
.sd-meter { width: 100%; height: .55rem; border: 0; border-radius: 999px; background: var(--g-canvas); appearance: none; }
.sd-meter::-webkit-meter-bar { background: var(--g-canvas); border: 0; border-radius: 999px; height: .55rem; }
.sd-meter::-webkit-meter-optimum-value { background: var(--g-brand); border-radius: 999px; }
.sd-meter::-moz-meter-bar { background: var(--g-brand); border-radius: 999px; }

/* «Para revisar»: huecos de datos que se resuelven desde el listado de rutas filtrado */
.sd-pendientes { list-style: none; margin: 0 0 -1px; padding: 0; overflow: hidden; border-radius: 0 0 var(--g-radius) var(--g-radius); display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.sd-pendientes li { border-bottom: 1px solid var(--g-line); }
.sd-pendientes a { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.25rem; color: inherit; text-decoration: none; height: 100%; }
.sd-pendientes a:hover { background: color-mix(in srgb, var(--g-brand) 4%, #fff); }
.sd-pendientes a:hover .cell-main { color: var(--g-brand-700); }
.sd-pendientes a > .bi-chevron-right { color: var(--g-muted); }
.sd-pendientes .cell-main { display: block; font-weight: 600; }
.sd-pendientes .cell-sub { display: block; font-size: .825rem; color: var(--g-muted); }
.sd-pendiente-icon { width: 2.25rem; height: 2.25rem; border-radius: .6rem; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--sd-accent-050); color: var(--sd-accent-ink); }

/* ---------- Ficha de la ruta: pestañas ---------- */
.sd-ficha { overflow: visible; }
.sd-tabs { border-bottom: 0; padding: .5rem .75rem 0; gap: .15rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.sd-tabs .nav-link { color: var(--g-muted); font-weight: 600; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: .7rem .9rem; white-space: nowrap; background: transparent; }
.sd-tabs .nav-link:hover { color: var(--g-ink); border-bottom-color: var(--g-line); }
.sd-tabs .nav-link.active { color: var(--g-brand-700); border-bottom-color: var(--g-brand); background: transparent; }
.sd-tab-count { display: inline-block; min-width: 1.5rem; margin-left: .3rem; padding: 0 .4rem; border-radius: 999px; background: var(--g-brand-050); color: var(--g-brand-700); font-size: .72rem; line-height: 1.35rem; text-align: center; font-variant-numeric: tabular-nums; }
.sd-tab-count.is-empty { background: var(--sd-accent-050); color: var(--sd-accent-ink); }
.sd-ficha .card-form { max-width: none; }
/* Al abrir una pestaña desde la dirección (#fotos) Bootstrap enfoca el panel: sin marco negro alrededor */
.sd-ficha .tab-pane:focus, [data-fragment]:focus { outline: 0; }
.sd-ficha .g-form-actions { border-radius: 0 0 var(--g-radius) var(--g-radius); }

/* ---------- Fragmentos de la ficha (fotos, track, documentos, lugares) ---------- */
.sd-frag { padding: 1.25rem; }
.sd-frag-hint { color: var(--g-muted); font-size: .875rem; margin: 0 0 1rem; }
.sd-frag-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.sd-upload-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--g-line); }
.sd-upload-row > .flex-grow-1 { flex: 1 1 15rem; }

/* Zona para soltar ficheros */
.sd-drop { margin-bottom: 1.25rem; }
.sd-drop-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: 1.4rem 1rem; border: 2px dashed color-mix(in srgb, var(--g-brand) 30%, var(--g-line)); border-radius: var(--g-radius); background: var(--g-brand-050); color: var(--g-ink); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.sd-drop-label > .bi { font-size: 1.7rem; color: var(--g-brand); }
.sd-drop-label small { color: var(--g-muted); }
.sd-drop-label:hover, .sd-drop.is-over .sd-drop-label { border-color: var(--g-brand); background: var(--g-brand-100); }
.sd-drop input:focus-visible + .sd-drop-label { outline: 2px solid var(--g-brand); outline-offset: 2px; }
.sd-drop-status { min-height: 1.2rem; color: var(--g-brand-700); font-weight: 600; font-size: .875rem; }
.sd-drop.is-uploading .sd-drop-label { pointer-events: none; opacity: .85; }

/* Fotos */
.sd-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.sd-fotos[aria-busy="true"] { opacity: .6; }
.sd-skel-foto { aspect-ratio: 4 / 3; border-radius: var(--g-radius); }
.sd-foto { display: flex; flex-direction: column; border: 1px solid var(--g-line); border-radius: var(--g-radius); background: var(--g-surface); box-shadow: var(--g-shadow); overflow: hidden; }
.sd-foto.is-dragging { opacity: .45; outline: 2px dashed var(--g-brand); }
.sd-foto-img { position: relative; aspect-ratio: 4 / 3; background: var(--g-canvas); }
.sd-foto-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-foto-falta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; color: var(--g-muted); font-size: .85rem; }
.sd-foto-falta .bi { font-size: 1.6rem; }
.sd-foto-num { position: absolute; top: .5rem; left: .5rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(12, 26, 48, .72); color: #fff; font-size: .75rem; font-weight: 700; }
.sd-foto-body { padding: .6rem; display: grid; gap: .5rem; }
.sd-foto-nombre { display: flex; gap: .35rem; }
.sd-foto-tools { display: flex; gap: .25rem; align-items: center; }
[data-sort-handle] { cursor: grab; }
[data-sort-handle]:active { cursor: grabbing; }

/* Lugares de paso */
.sd-lugares { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; max-width: 46rem; }
.sd-lugares[aria-busy="true"] { opacity: .6; }
.sd-lugar { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border: 1px solid var(--g-line); border-radius: var(--g-radius-sm); background: var(--g-surface); }
.sd-lugar.is-dragging { opacity: .45; outline: 2px dashed var(--g-brand); }
.sd-lugar-num { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--g-brand-050); color: var(--g-brand-700); font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Track */
.sd-track { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; border: 1px solid var(--g-line); border-radius: var(--g-radius); background: var(--g-surface); }
.sd-track-icon { width: 2.75rem; height: 2.75rem; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; background: var(--g-brand-050); color: var(--g-brand); font-size: 1.3rem; flex: none; }
.sd-track .cell-main { font-weight: 600; }
.sd-track .cell-sub { display: block; font-size: .825rem; color: var(--g-muted); }
.sd-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .9rem 1.25rem; }

/* ---------- Editor de noticias ---------- */
.sd-editor { border: 1px solid var(--g-line); border-radius: var(--g-radius-sm); background: var(--g-surface); }
.sd-editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; padding: .35rem; border-bottom: 1px solid var(--g-line); background: #f8fafc; border-radius: var(--g-radius-sm) var(--g-radius-sm) 0 0; }
.sd-editor-sep { width: 1px; height: 1.4rem; background: var(--g-line); margin: 0 .25rem; }
.sd-editor-area.form-control { min-height: 18rem; border: 0; border-radius: 0 0 var(--g-radius-sm) var(--g-radius-sm); box-shadow: none; overflow-wrap: anywhere; }
.sd-editor-area:focus { box-shadow: inset 0 0 0 2px var(--bs-focus-ring-color); }
.sd-editor-area img { max-width: 100%; height: auto; }
.sd-editor-area p { margin-bottom: .75rem; }
.sd-editor-link { display: flex; gap: .4rem; padding: .5rem; border-top: 1px solid var(--g-line); }
.sd-editor-link[hidden] { display: none; }

/* ---------- Listados ---------- */
.sd-col-ruta { min-width: 17rem; }
.sd-col-tecnico { min-width: 10rem; font-size: .875rem; color: var(--g-muted); }
.sd-sub-estado { display: none; }
.g-toolbar .g-count { white-space: nowrap; }
/* Muchos filtros (rutas): si no caben en una línea pasan a la siguiente en vez de recortar el buscador y los textos. */
.g-toolbar-filters.sd-toolbar-wrap { flex-wrap: wrap; justify-content: flex-start; }
@media (min-width: 768px) {
    .sd-toolbar-wrap > .g-search { flex: 1 1 18rem; max-width: 26rem; }
    .sd-toolbar-wrap > .form-select { flex: none; }
    .g-toolbar-filters > .sd-select-track { flex: 0 1 22rem; }
    .sd-rango { flex: none; }
}

/* Filtros de fechas (descargas) */
.sd-rango { display: flex; align-items: center; gap: .5rem; }
.sd-rango label { color: var(--g-muted); font-size: .875rem; font-weight: 600; }
.sd-rango .form-control { width: auto; }
.sd-select-track { flex: 0 1 22rem; width: auto; min-width: 12rem; }

/* ---------- Varios ---------- */
.sd-scroll { max-height: 26rem; overflow-y: auto; }
.g-callout strong::first-letter { text-transform: uppercase; }

@media (max-width: 767.98px) {
    /* Listado de rutas en el móvil: el estado va bajo el nombre y la tabla cabe sin desplazarse */
    .sd-col-ruta { min-width: 0; }
    .sd-sub-estado { display: block; margin-top: .35rem; }
    .g-toolbar-filters > .form-select { flex: 1 1 calc(50% - .75rem); width: auto !important; min-width: 0; }
    .g-toolbar-filters > .g-search { flex-basis: 100%; max-width: none; }
    .g-toolbar-filters > .g-count { flex-basis: 100%; text-align: right; }
    .sd-rango { flex-basis: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .sd-rango .form-control { width: 100%; }
    .sd-select-track { flex: 1 1 100%; max-width: none; }
}

@media (max-width: 575.98px) {
    .sd-split-row { grid-template-columns: minmax(0, 1fr) 3.5rem; }
    .sd-split-row .sd-meter { display: none; }
    .sd-frag { padding: 1rem .75rem; }
    .sd-fotos { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem; }
    .sd-track { flex-direction: column; }
}