/* CSS EXACTO del mockup original (BancoDesafios (12).html) — no se renombra ni se reestructura
   ninguna clase. Portado literal para que el sitio construido con Razor Pages/MVC se vea
   idéntico a la maqueta. Las únicas variables C.* del mockup (usadas en JS inline) se vuelcan
   aquí como los mismos valores hex, sin introducir custom properties nuevas. */
/* Foto de Providencia: versión liviana (800 px) en pantallas chicas. Ruta absoluta a propósito: el sitio vive en la raíz. */
:root{--foto-prov:url('/img/providencia.jpg')}
@media(max-width:800px){:root{--foto-prov:url('/img/providencia-800.jpg')}}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Outfit',system-ui,sans-serif;color:#1d1d1b;background:#f7f8fa;min-height:100vh}
button,input,select,textarea{font-family:'Outfit',system-ui,sans-serif}
input:focus,select:focus,textarea:focus{outline:none;border-color:#00629b!important;box-shadow:0 0 0 3px rgba(0,147,226,0.18)}
select{-webkit-appearance:none;appearance:none}
.inp{width:100%;border:1px solid #e8eaed;border-radius:8px;padding:.55rem .85rem;font-size:.84rem;color:#1d1d1b;background:#fff;outline:none;box-sizing:border-box}
.sel{width:100%;border:1px solid #e8eaed;border-radius:8px;padding:.55rem 2rem .55rem .85rem;font-size:.84rem;color:#1d1d1b;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .75rem center;outline:none;-webkit-appearance:none;appearance:none;box-sizing:border-box}
.card{background:#fff;border-radius:12px;border:1px solid #e8eaed;padding:1.5rem}
.lbl{font-size:.72rem;font-weight:600;color:#4a5568;margin-bottom:.3rem;display:block;text-transform:uppercase;letter-spacing:.04em}
.btn-p{background:#0088d3;color:#fff;border:none;border-radius:8px;padding:.65rem 1.5rem;font-weight:700;font-size:.85rem;cursor:pointer}
.btn-o{background:transparent;color:#00629b;border:1px solid #00629b;border-radius:8px;padding:.65rem 1.5rem;font-weight:600;font-size:.85rem;cursor:pointer}
.challenge-card{cursor:pointer;transition:all .18s;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.challenge-card:hover{box-shadow:0 8px 24px rgba(49,0,111,.14)!important;transform:translateY(-2px)}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* z-index 1500, no 100: es sticky y al hacer scroll queda sobre la vista Mapa (Leaflet escala
   hasta 1000 en sus propios controles) — con 100 el mapa lo tapaba al desplazarse. Antes era la
   regla de <nav>; con el sidebar, <nav> pasó a ser el propio menú lateral (.sidebar-nav) y la
   barra superior es <header class="topbar">. */
.topbar{background:linear-gradient(90deg,rgba(0,104,184,.80) 0%,rgba(0,147,226,.74) 55%,rgba(41,174,251,.66) 100%),var(--foto-prov) center 28%/cover no-repeat;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;position:sticky;top:0;z-index:1500}
footer{background:#00629b;color:rgba(255,255,255,.6);padding:2rem;text-align:center;font-size:.78rem;margin-top:3rem}

/* Layout general: barra superior fija + [sidebar | contenido] debajo. Sin sesión no hay sidebar
   (_Layout.cshtml no lo renderiza), así que .app-body simplemente no tiene ese hijo y #main ocupa
   todo el ancho igual que antes. */
.app-shell{display:flex;flex-direction:column;min-height:100vh}
.app-body{display:flex;flex:1;align-items:stretch}
#main{flex:1;min-width:0}

/* Sidebar de navegación (_Sidebar.cshtml) — visible solo con sesión iniciada. Se contrae con el
   botón hamburguesa (sidebar.js agrega/quita .sidebar-colapsado en <html>, no en el propio
   .sidebar, así que no hace falta duplicar el estado en dos lugares). */
.sidebar{width:220px;flex-shrink:0;background:#fff;border-right:1px solid #e8eaed;transition:width .15s ease}
html.sidebar-colapsado .sidebar{width:60px}
.sidebar-nav{display:flex;flex-direction:column;gap:.25rem;padding:1rem .6rem;position:sticky;top:60px}
.sidebar-item{position:relative;display:flex;align-items:center;gap:.75rem;padding:.65rem .75rem;border-radius:8px;color:#1d1d1b;text-decoration:none;font-size:.84rem;font-weight:600;white-space:nowrap}
.sidebar-item:hover{background:#f7f8fa}
.sidebar-item.activo{background:#e6f4fc;color:#00629b}
.sidebar-item-icono{font-size:1.05rem;flex-shrink:0;width:1.4rem;text-align:center}
html.sidebar-colapsado .sidebar-item-texto{display:none}
html.sidebar-colapsado .sidebar-item{justify-content:center}

/* Flyout: en modo contraído, al pasar el mouse sobre un ícono aparece la etiqueta a un costado —
   igual función que el texto que se esconde, visible solo mientras dura el hover. */
.sidebar-flyout{display:none;position:absolute;left:calc(100% + .6rem);top:50%;transform:translateY(-50%);background:#1d1d1b;color:#fff;padding:.4rem .7rem;border-radius:6px;font-size:.78rem;white-space:nowrap;z-index:1600;pointer-events:none}
html.sidebar-colapsado .sidebar-item:hover .sidebar-flyout{display:block}

.sidebar-toggle{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.3);border-radius:6px;width:36px;height:34px;font-size:1.05rem;cursor:pointer;flex-shrink:0}
.sidebar-toggle:hover{background:rgba(255,255,255,.08)}

/* Submenú de Panel Hub (Desafíos/Soluciones recibidas/Estadísticas) — se auto-expande cuando
   estás en alguna de esas páginas (Razor decide la clase "expandido", no hay JS de toggle: ver
   comentario en _Sidebar.cshtml). Sin ícono propio por ítem, a propósito — solo el padre lleva
   ícono, los hijos se distinguen por la indentación. */
.sidebar-grupo{position:relative}
.sidebar-item-chevron{margin-left:auto;font-size:.75rem;flex-shrink:0;transition:transform .15s ease;opacity:.6}
.sidebar-grupo.expandido .sidebar-item-chevron{transform:rotate(180deg)}
.sidebar-submenu{display:none;flex-direction:column;gap:.15rem;padding-left:2.15rem;margin-top:.15rem}
.sidebar-grupo.expandido .sidebar-submenu{display:flex}
.sidebar-subitem{display:block;padding:.5rem .75rem;border-radius:8px;color:#4a5568;text-decoration:none;font-size:.8rem;font-weight:600;white-space:nowrap}
.sidebar-subitem:hover{background:#f7f8fa}
.sidebar-subitem.activo{background:#e6f4fc;color:#00629b}
/* Con sidebar contraído, el submenú/chevron se esconden SIEMPRE, incluso si el grupo viene
   "expandido" desde el servidor (estás en una página de Panel Hub) — el selector necesita el
   mismo peso de ".sidebar-grupo.expandido" (3 clases) para poder ganarle, si no la regla de
   abajo con menos especificidad no aplica y el submenú se desborda fuera de la franja angosta. */
html.sidebar-colapsado .sidebar-item-chevron,
html.sidebar-colapsado .sidebar-grupo.expandido .sidebar-item-chevron,
html.sidebar-colapsado .sidebar-submenu,
html.sidebar-colapsado .sidebar-grupo.expandido .sidebar-submenu{display:none}

/* Flyout de Panel Hub con sidebar contraído: a diferencia de .sidebar-flyout (solo una etiqueta,
   sin poder hacer clic — pointer-events:none), este SÍ tiene que ser clickeable porque adentro
   van los 3 links del submenú (pedido de Jorge: "el flyout debe también incluir el submenu, debe
   mostrarse sí o sí"). El hover que lo activa está en .sidebar-grupo (ícono + flyout juntos), no
   en .sidebar-item, para que mover el mouse del ícono hacia el flyout no lo cierre a mitad de
   camino — con el hover solo en .sidebar-item el flyout desaparecería apenas el cursor saliera
   del ícono angosto, sin dar tiempo a llegar hasta los links. */
.sidebar-flyout-grupo{display:none;position:absolute;left:calc(100% + .6rem);top:-.4rem;background:#1d1d1b;border-radius:8px;padding:.5rem;min-width:190px;z-index:1600;box-shadow:0 12px 28px rgba(0,0,0,.3)}
.sidebar-flyout-titulo{color:rgba(255,255,255,.5);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.3rem .6rem .4rem}
.sidebar-flyout-item{display:block;color:#fff;font-size:.8rem;font-weight:600;text-decoration:none;padding:.5rem .6rem;border-radius:6px;white-space:nowrap}
.sidebar-flyout-item:hover{background:rgba(255,255,255,.1)}
.sidebar-flyout-item.activo{background:#3b82f6;color:#fff}
html.sidebar-colapsado .sidebar-grupo:hover .sidebar-flyout-grupo{display:block}

/* Botones de acción "pro" en las tablas del Panel Hub: solo ícono (mismo set SVG que el sidebar,
   Helpers/Iconos.cs), con el texto como atributo title del propio elemento — usa el tooltip
   nativo del navegador, sin JS ni componente propio. El texto de los filtros de arriba ("Todos
   (3)", etc.) NO se toca, sigue con su etiqueta visible como antes. */
.btn-accion{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;width:30px;height:30px;cursor:pointer;flex-shrink:0;text-decoration:none}
.btn-accion svg{width:1.05em;height:1.05em}
.btn-accion-verde{background:#d1fae5;color:#065f46}
.btn-accion-verde:hover{background:#a7f3d0}
.btn-accion-ambar{background:#fef3c7;color:#92400e}
.btn-accion-ambar:hover{background:#fde68a}
.btn-accion-gris{background:#eef0f3;color:#4a5568}
.btn-accion-gris:hover{background:#e2e5ea}
.btn-accion-azul{background:#dbeafe;color:#1e40af}
.btn-accion-azul:hover{background:#bfdbfe}
.btn-accion-rojo{background:#fee2e2;color:#991b1b}
.btn-accion-rojo:hover{background:#fecaca}

/* Exportar Excel: mismo tamaño/forma que .btn-p pero verde (pedido de Jorge), para que se
   distinga de las acciones "moradas" normales del sitio — asocia visualmente con Excel/planillas. */
.btn-verde{background:#059669;color:#fff;border:none;border-radius:8px;padding:.65rem 1.5rem;font-weight:700;font-size:.85rem;cursor:pointer}
.btn-verde:hover{background:#047857}

@media(max-width:768px){
    /* En pantallas chicas el sidebar expandido (220px) deja muy poco espacio al contenido —
       arranca contraído; el usuario lo puede expandir igual si lo necesita. */
    html:not(.sidebar-colapsado) .sidebar{width:60px}
    html:not(.sidebar-colapsado) .sidebar-item-texto{display:none}
    html:not(.sidebar-colapsado) .sidebar-item{justify-content:center}
    html:not(.sidebar-colapsado) .sidebar-item:hover .sidebar-flyout{display:block}
    html:not(.sidebar-colapsado) .sidebar-item-chevron,
    html:not(.sidebar-colapsado) .sidebar-grupo.expandido .sidebar-item-chevron,
    html:not(.sidebar-colapsado) .sidebar-submenu,
    html:not(.sidebar-colapsado) .sidebar-grupo.expandido .sidebar-submenu{display:none}
    html:not(.sidebar-colapsado) .sidebar-grupo:hover .sidebar-flyout-grupo{display:block}
}
table{width:100%;border-collapse:collapse}
th{padding:.8rem 1rem;text-align:left;font-size:.68rem;font-weight:700;color:#4a5568;text-transform:uppercase;letter-spacing:.05em;background:#f7f8fa;border-bottom:1px solid #e8eaed}
td{padding:.9rem 1rem;font-size:.8rem;color:#1d1d1b;vertical-align:top}
textarea{resize:vertical}
/* z-index alto a propósito: Leaflet (mapa de Explorar) usa hasta 1000 para sus controles de zoom
   (.leaflet-top/.leaflet-bottom), así que un overlay por debajo de eso queda tapado por el mapa —
   pasó con el modal de login sobre la vista Mapa UV. */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2000;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:2rem}
.modal-box{background:#fff;border-radius:14px;padding:2rem;max-width:600px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25);margin-top:2rem}
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2000;display:flex;align-items:center;justify-content:center}
.confirm-box{background:#fff;border-radius:12px;padding:2rem;max-width:380px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.uv-cell{transition:all .15s;cursor:pointer;height:52px;border-radius:8px;border-width:2px;border-style:solid;display:flex;flex-direction:column;align-items:center;justify-content:center}
.uv-cell:hover{opacity:.85}
@media(max-width:640px){.g3{grid-template-columns:minmax(0,1fr)!important}.g2{grid-template-columns:minmax(0,1fr)!important}.g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}.g5{grid-template-columns:minmax(0,1fr)!important}.topbar{padding:0 1rem}}

/* Ganchos de validación de ASP.NET (asp-validation-summary/asp-validation-for): no son clases de
   Bootstrap, son las que genera el propio framework. Se colorean con la misma paleta de error que
   ya usa el mockup para "Devuelto"/"Descartada"/"no es solución" (#991b1b sobre #fee2e2). */
.validation-summary-errors{background:#fee2e2;color:#991b1b;border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.82rem;line-height:1.6}
.validation-summary-errors ul{list-style:none}
.field-validation-error{color:#991b1b;font-size:.72rem;margin-top:.3rem;display:block}

/* Dropdown de cuenta en el nav (menu-cuenta.js). El botón vive pegado al borde derecho del nav,
   así que el panel se ancla con right:0 y se abre hacia la izquierda — si abriera hacia la
   derecha quedaría cortado fuera de la pantalla. */
.dropdown-cuenta{position:relative}
.dropdown-cuenta-boton{display:flex;align-items:center;gap:.5rem;background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.3);border-radius:6px;padding:.32rem .7rem .32rem .4rem;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit}
.dropdown-cuenta-avatar{background:#ffffff;color:#00629b;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem;flex-shrink:0}
.dropdown-cuenta-panel{display:none;position:absolute;top:calc(100% + .5rem);right:0;min-width:240px;background:#fff;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);border:1px solid #e8eaed;overflow:hidden;z-index:150}
.dropdown-cuenta-panel.abierto{display:block}
.dropdown-cuenta-header{padding:.85rem 1rem;background:#f7f8fa;border-bottom:1px solid #e8eaed}
.dropdown-cuenta-item{display:flex;align-items:center;gap:.55rem;padding:.7rem 1rem;font-size:.82rem;color:#1d1d1b;text-decoration:none}
.dropdown-cuenta-item:hover{background:#f7f8fa}
.dropdown-cuenta-separador{border-top:1px solid #e8eaed;margin:.25rem 0}

/* ── Tablero de métricas (estilo Power BI: segmentaciones + filtrado cruzado) ───────────────── */
.tb{max-width:1400px;margin:0 auto;padding:1.5rem}
.tb-cabecera{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.tb-cabecera h1{font-size:1.5rem;font-weight:800;color:#00629b;margin:0 0 .3rem}
.tb-cabecera p{color:#4a5568;font-size:.84rem;margin:0;max-width:62ch}
.tb-acciones{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.tb-tabs{display:inline-flex;background:#eef0f3;border-radius:10px;padding:3px}
.tb-tab{padding:.4rem .95rem;border-radius:8px;font-size:.78rem;font-weight:700;color:#4a5568;text-decoration:none}
.tb-tab-activo{background:#00629b;color:#fff}
.tb-btn{padding:.45rem .95rem;font-size:.78rem}
.tb-resumen{font-size:.82rem;color:#4a5568;margin:0 0 1rem;padding:.65rem .9rem;background:#f0f8fd;border-left:3px solid #00629b;border-radius:6px}
.tb-layout{display:grid;grid-template-columns:260px 1fr;gap:1.1rem;align-items:start}
.tb-filtros{position:sticky;top:.75rem;padding:1.1rem;max-height:calc(100vh - 1.5rem);overflow:auto}
.tb-filtros-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;font-size:.85rem;color:#00629b}
.tb-limpiar{background:none;border:none;color:#ef4444;font-size:.72rem;font-weight:700;cursor:pointer}
.tb-activos{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.8rem}
.tb-pill{background:#00629b;color:#fff;border:none;border-radius:20px;padding:.2rem .6rem;font-size:.66rem;font-weight:700;cursor:pointer}
.tb-pill::after{content:" ×";opacity:.7}
.tb-grupo{margin-bottom:1.1rem}
.tb-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.tb-chips-col{flex-direction:column;align-items:stretch;gap:.25rem}
.tb-chip{display:flex;align-items:center;gap:.45rem;border:1px solid #e2e8f0;background:#fff;border-radius:8px;padding:.32rem .6rem;font-size:.72rem;font-weight:600;color:#4a5568;cursor:pointer;text-align:left}
.tb-chips:not(.tb-chips-col) .tb-chip{justify-content:center}
.tb-chip[aria-pressed="true"]{background:#00629b;border-color:#00629b;color:#fff}
.tb-chip .pt{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.tb-chip .n{margin-left:auto;font-size:.66rem;opacity:.7;font-weight:700}
.tb-uvgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem}
.tb-uvgrid .tb-chip{padding:.3rem 0;justify-content:center;font-size:.68rem}
.tb-check{display:flex;gap:.4rem;align-items:center;font-size:.7rem;color:#4a5568;margin-top:.5rem}
.tb-link{display:block;font-size:.74rem;font-weight:600;color:#00629b;text-decoration:none;margin-bottom:.3rem}
.tb-link:hover{text-decoration:underline}
.tb-nota{font-size:.68rem;color:#9ca3af;margin:.3rem 0 0}
.tb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin-bottom:1.1rem}
.tb-kpi{background:#fff;border:1px solid #e8eaed;border-radius:12px;padding:.9rem 1rem .5rem;overflow:hidden}
.tb-kpi-et{font-size:.68rem;font-weight:700;color:#4a5568;text-transform:uppercase;letter-spacing:.04em}
.tb-kpi-val{font-size:1.75rem;font-weight:800;color:#00629b;line-height:1.15;margin:.15rem 0}
.tb-kpi-sub{font-size:.68rem;color:#9ca3af}
.tb-spark{height:34px;margin:.25rem -.4rem 0}
.tb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.tb-card{padding:1.1rem}
.tb-card header{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.6rem}
.tb-card h2{font-size:.85rem;font-weight:700;color:#00629b;margin:0}
.tb-ancho2{grid-column:span 2}
.tb-chart{height:300px;width:100%}
.tb-chart-alto{height:420px}
.tb-sel{width:auto;font-size:.74rem;padding:.35rem 1.8rem .35rem .6rem}
.tb-mapa-wrap{position:relative}
.tb-mapa{height:420px;border-radius:10px;border:1px solid #e8eaed;z-index:0}
.tb-leyenda{position:absolute;left:.7rem;bottom:.7rem;background:rgba(255,255,255,.94);border-radius:8px;padding:.45rem .65rem;font-size:.66rem;color:#4a5568;z-index:500;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.tb-leyenda .barra{height:8px;width:130px;border-radius:4px;background:linear-gradient(90deg,#e6f4fc,#00629b);margin:.2rem 0}
.tb-leyenda .rango{display:flex;justify-content:space-between}
.tb-tabla-wrap{overflow-x:auto}
.tb-tabla{width:100%;border-collapse:collapse;font-size:.76rem}
.tb-tabla th{text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:#6b7280;padding:.4rem .5rem;border-bottom:1px solid #e8eaed}
.tb-tabla td{padding:.5rem;border-bottom:1px solid #f1f2f4;vertical-align:middle}
.tb-tabla a{color:#00629b;font-weight:600;text-decoration:none}
.tb-barra{background:#eef0f3;border-radius:5px;height:8px;min-width:80px}
.tb-barra>i{display:block;height:8px;border-radius:5px;background:linear-gradient(90deg,#0093e2,#00629b)}
.tb-etapa{border-radius:12px;padding:.15rem .55rem;font-size:.66rem;font-weight:700;color:#fff;white-space:nowrap}
@media (max-width:1000px){
  .tb-layout{grid-template-columns:1fr}
  .tb-filtros{position:static;max-height:none}
  .tb-grid{grid-template-columns:1fr}
  .tb-ancho2{grid-column:span 1}
}

/* ── Participación vecinal (Detalle de desafío) ───────────────────────────────────────────── */
.lt-pasos{list-style:none;display:flex;gap:.25rem;padding:0;margin:0 0 1rem;overflow-x:auto}
.lt-paso{flex:1;min-width:92px;display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;position:relative}
.lt-paso:not(:last-child)::after{content:"";position:absolute;top:13px;left:calc(50% + 15px);right:calc(-50% + 15px);height:2px;background:#e2e8f0}
.lt-hecho:not(:last-child)::after{background:#00629b}
.lt-punto{width:28px;height:28px;border-radius:50%;border:2px solid #cbd5e1;background:#fff;color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:1}
.lt-pendiente .lt-punto{color:#94a3b8}
.lt-texto{font-size:.66rem;font-weight:600;color:#6b7280}
.lt-actual .lt-texto{color:#00629b;font-weight:800}
.lt-hitos{list-style:none;padding:0;margin:0;border-top:1px solid #e8eaed}
.lt-hitos li{font-size:.76rem;color:#4a5568;padding:.5rem 0;border-bottom:1px solid #f1f2f4}
.lt-fecha{display:inline-block;min-width:78px;color:#9ca3af;font-size:.7rem}
.idea{display:flex;gap:1rem;padding:.8rem .9rem;border:1px solid #e8eaed;border-radius:10px;margin-bottom:.6rem;align-items:flex-start}
.idea-adoptada{border-color:#6ee7b7;background:#f0fdf9}
.apoyo{background:#fff;border:1px solid #d1d5db;border-radius:8px;width:34px;height:30px;color:#6b7280;cursor:pointer;font-size:.8rem}
.apoyo-on{background:#00629b;border-color:#00629b;color:#fff}
.coment{padding:.7rem .85rem;border-left:3px solid #e2e8f0;background:#fafafa;border-radius:0 8px 8px 0;margin-bottom:.6rem}
.coment-oficial{border-left-color:#00629b;background:#f0f8fd}
.mini-btn{background:none;border:none;color:#6b7280;font-size:.68rem;font-weight:600;cursor:pointer;text-decoration:underline;padding:0}
textarea.inp{resize:vertical;font-family:inherit}

/* ── Barras de desplazamiento invisibles (el scroll sigue funcionando con rueda, trackpad y táctil) ── */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;background:transparent}
*::-webkit-scrollbar-thumb{background:transparent}

/* ── Foto de Providencia con velo azul de marca ──────────────────────────────────────────────
   La imagen es un fondo `cover`: se adapta al tamaño y forma del bloque (nunca al revés) y el
   azul la cubre casi por completo, de modo que solo se insinúan los edificios y la cordillera. */
.foto-azul{background:linear-gradient(180deg,rgba(0,104,184,.70) 0%,rgba(0,147,226,.60) 55%,rgba(41,174,251,.48) 100%),var(--foto-prov) center 35%/cover no-repeat;color:#fff}
.foto-azul-banner{border-radius:14px;padding:1.6rem 1.8rem;margin-bottom:1.2rem;background:linear-gradient(100deg,rgba(0,98,155,.74) 0%,rgba(0,147,226,.62) 60%,rgba(41,174,251,.50) 100%),var(--foto-prov) center 40%/cover no-repeat;color:#fff}
.foto-azul-banner h1{color:#fff!important}
.foto-azul-banner p{color:rgba(255,255,255,.92)!important}
.foto-azul-banner .tb-tabs{background:rgba(255,255,255,.22)}
.foto-azul-banner .tb-tab{color:#fff}
.foto-azul-banner .tb-tab-activo{background:#fff;color:#00629b}
.foto-azul-banner .btn-o{color:#fff;border-color:rgba(255,255,255,.8)}
footer.foto-azul{background:linear-gradient(180deg,rgba(0,80,140,.82),rgba(0,98,155,.76)),var(--foto-prov) center 60%/cover no-repeat;color:rgba(255,255,255,.85)}

/* Campana de notificaciones */
.campana{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;color:#fff;border:1px solid rgba(255,255,255,.3);text-decoration:none;margin-right:.4rem;font-size:1.05rem}
.campana:hover{background:rgba(255,255,255,.15)}
.campana-n{position:absolute;top:-6px;right:-6px;background:#e50440;color:#fff;border-radius:10px;min-width:18px;height:18px;padding:0 4px;font-size:.62rem;font-weight:800;display:flex;align-items:center;justify-content:center}

.verificado{color:#065f46;font-weight:700;font-size:.68rem}

/* "Cómo se resuelve": pasos */
.cs-pasos{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.cs-pasos li{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem .7rem;border-radius:10px;border:1px solid #e8eaed}
.cs-n{flex:0 0 26px;height:26px;border-radius:50%;background:#e8eaed;color:#6b7280;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.cs-pasos strong{display:block;font-size:.8rem;color:#1d1d1b}
.cs-pasos span:not(.cs-n){font-size:.74rem;color:#4a5568;line-height:1.5}
.cs-hecho .cs-n{background:#0093e2;color:#fff}
.cs-actual{border-color:#0093e2;background:#f0f8fd}
.cs-actual .cs-n{background:#0093e2;color:#fff}
@media(max-width:640px){#como-se-resuelve .g3{grid-template-columns:1fr!important}}

@media print{.topbar,.sidebar,footer,.no-imprimir{display:none!important}body{background:#fff}.app-body{display:block}main{padding:0!important}}
.cartel{max-width:720px;margin:2rem auto;text-align:center;border:3px solid #0093e2;border-radius:18px;padding:2rem 2.2rem;background:#fff}
.cartel h1{font-size:1.7rem;font-weight:800;color:#00629b;line-height:1.3;margin:1rem 0}
.cartel .qr{width:280px;height:280px;image-rendering:pixelated}

/* ═══════════════════════════ MÓVIL (optimización al 100 %) ═══════════════════════════
   Criterios: nada se desborda horizontalmente, objetivos táctiles ≥ 44 px, campos de 16 px (si no,
   iPhone hace zoom al enfocar), navegación al alcance del pulgar (barra inferior + cajón), respeta
   las áreas seguras (notch / barra de gestos) y no depende de hover. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,label,select,summary,input{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,147,226,.18)}
img,svg,video,canvas{max-width:100%}
.bottomnav,.nav-menu-btn,.sidebar-backdrop,.tb-filtros-btn,.stepper-movil{display:none}
.sidebar-backdrop[hidden]{display:none!important}

@media(max-width:900px){
    :root{--bn-h:64px}
    body.con-bottomnav{padding-bottom:calc(var(--bn-h) + env(safe-area-inset-bottom))}

    /* Barra superior compacta */
    .topbar{height:56px;padding-left:max(.75rem,env(safe-area-inset-left));padding-right:max(.75rem,env(safe-area-inset-right))}
    .marca img{height:34px!important}
    .marca-texto div:last-child{display:none}
    .marca-texto div:first-child{font-size:.78rem!important}
    .campana{display:none}
    .dropdown-cuenta-boton>span:nth-child(2){display:none}
    .dropdown-cuenta-boton{padding:.3rem .45rem}
    .dropdown-cuenta-panel{position:fixed;top:60px;right:.6rem;left:auto;min-width:0;width:min(92vw,300px)}
    .dropdown-cuenta-item{min-height:48px}
    .sidebar-toggle{width:42px;height:42px}

    /* Visitantes: menú desplegable + botón de ingreso */
    .nav-menu-btn{display:inline-flex;align-items:center;gap:.4rem;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:.5rem .8rem;font-size:.82rem;font-weight:700;min-height:42px;cursor:pointer}
    .nav-publico{display:none;position:fixed;top:56px;left:0;right:0;z-index:1800;flex-direction:column;gap:.5rem;padding:.9rem 1rem 1.2rem;background:linear-gradient(180deg,#00629b,#0088d3);box-shadow:0 14px 30px rgba(0,0,0,.25)}
    .nav-publico.abierto{display:flex}
    .nav-publico a{display:block!important;text-align:center;font-size:.95rem!important;padding:.8rem 1rem!important;min-height:48px;border-radius:10px!important}
    .topbar>div:last-child{gap:.4rem!important}

    /* Menú lateral → cajón */
    .sidebar{position:fixed!important;top:56px;left:0;bottom:0;width:min(86vw,320px)!important;transform:translateX(-105%);transition:transform .2s ease;z-index:1700;overflow-y:auto;overscroll-behavior:contain;border-right:1px solid #e8eaed;padding-bottom:calc(var(--bn-h) + env(safe-area-inset-bottom))}
    html.menu-abierto .sidebar{transform:none;box-shadow:0 0 40px rgba(0,0,0,.3)}
    html.menu-abierto{overflow:hidden}
    .sidebar-backdrop{position:fixed;inset:56px 0 0 0;background:rgba(0,0,0,.45);z-index:1650}
    html.menu-abierto .sidebar-backdrop:not([hidden]){display:block}
    .sidebar-nav{position:static;padding:.8rem}
    .sidebar .sidebar-item{justify-content:flex-start!important;gap:.9rem;padding:.9rem;font-size:.98rem;min-height:50px}
    .sidebar .sidebar-item-texto,html.sidebar-colapsado .sidebar-item-texto,html:not(.sidebar-colapsado) .sidebar-item-texto{display:inline!important}
    .sidebar .sidebar-grupo.expandido .sidebar-submenu,html.sidebar-colapsado .sidebar-grupo.expandido .sidebar-submenu,html:not(.sidebar-colapsado) .sidebar-grupo.expandido .sidebar-submenu{display:flex!important}
    .sidebar .sidebar-grupo.expandido .sidebar-item-chevron,html.sidebar-colapsado .sidebar-grupo.expandido .sidebar-item-chevron,html:not(.sidebar-colapsado) .sidebar-grupo.expandido .sidebar-item-chevron{display:inline!important}
    .sidebar-subitem{padding:.8rem .9rem;font-size:.92rem;min-height:46px}
    .sidebar-flyout,.sidebar-flyout-grupo{display:none!important}

    /* Barra inferior de navegación */
    .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1600;height:calc(var(--bn-h) + env(safe-area-inset-bottom));padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#fff;border-top:1px solid #e2e8f0;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
    .bn-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.64rem;font-weight:700;color:#6b7280;text-decoration:none;background:none;border:0;position:relative;cursor:pointer;font-family:inherit;padding:0 2px}
    .bn-item svg{width:23px;height:23px}
    .bn-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .bn-item.activo{color:#0088d3}
    .bn-central{color:#fff}
    .bn-central svg{width:30px;height:30px;background:#0088d3;border-radius:50%;padding:7px;margin-top:-22px;box-shadow:0 4px 12px rgba(0,136,211,.45);border:3px solid #fff;box-sizing:content-box}
    .bn-central span{color:#0088d3}
    .bn-badge{position:absolute;top:6px;left:calc(50% + 6px);background:#e50440;color:#fff;border-radius:10px;min-width:17px;height:17px;padding:0 4px;font-size:.6rem;display:flex;align-items:center;justify-content:center}
    footer{padding-bottom:1.5rem}

    /* Formularios táctiles */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea,.inp,.sel{font-size:16px!important;min-height:48px}
    input[type=file].inp{padding:.6rem}
    textarea,textarea.inp{min-height:104px}
    .inp,.sel{padding:.7rem .9rem}
    .sel{padding-right:2.2rem}
    .btn-p,.btn-o,.btn-verde{min-height:48px;font-size:.95rem;padding:.75rem 1.2rem}
    input[type=checkbox],input[type=radio]{width:22px;height:22px;flex-shrink:0}
    .mini-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 .6rem}
    .btn-accion{width:44px;height:44px}
    .lbl{font-size:.76rem}

    /* Ventanas (login/registro) a pantalla completa */
    .overlay{padding:0;align-items:stretch}
    .modal-box{border-radius:0;margin-top:0;max-width:none!important;min-height:100%;padding:1.25rem}
    .confirm-box{width:92%;padding:1.4rem}

    /* Popovers del Panel Hub (devolver, etc.) como hoja inferior */
    details>form[style*="position:absolute"]{position:fixed!important;left:.75rem!important;right:.75rem!important;top:auto!important;bottom:calc(var(--bn-h) + env(safe-area-inset-bottom) + .75rem)!important;width:auto!important;z-index:1900!important;max-height:60vh;overflow:auto}

    /* Acciones fijas (wizard) sobre la barra inferior */
    .accion-fija{position:fixed;left:0;right:0;bottom:calc(var(--bn-h) + env(safe-area-inset-bottom));z-index:1550;background:#fff;border-top:1px solid #e2e8f0;padding:.7rem max(.75rem,env(safe-area-inset-right)) .7rem max(.75rem,env(safe-area-inset-left));display:flex!important;gap:.6rem;box-shadow:0 -4px 14px rgba(0,0,0,.06)}
    .accion-fija>*{flex:1}
    .con-accion-fija{padding-bottom:5.5rem!important}
}

@media(max-width:640px){
    /* Cuadrículas inline → una columna (salvo las que se marcan) */
    #main [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
    #main .g4[style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    #main .grid-2m[style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    #main .grid-uv[style*="grid-template-columns"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
    #main .grid-chk[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;gap:.5rem!important}
    #main [style*="padding:2rem"]{padding:1rem!important}
    #main [style*="padding:3.5rem 2rem"],[style*="padding:3.5rem 2rem"]{padding:2.2rem 1rem!important}
    #main [style*="padding:2.5rem 2rem 0"],#main [style*="padding:3rem 2rem 0"],#main [style*="padding:3rem 2rem 3rem"]{padding-left:1rem!important;padding-right:1rem!important}
    [style*="font-size:1.9rem"]{font-size:1.55rem!important}
    #main h1{font-size:1.35rem!important;line-height:1.3}
    .card{padding:1rem}
    .foto-azul-banner{padding:1.1rem 1.1rem;border-radius:12px}
    #main div[style*="display:flex"][style*="gap:1rem"][style*="justify-content:center"]{flex-direction:column;align-items:stretch}
    #main div[style*="justify-content:center"] a[style*="display:inline-block"],#main div[style*="justify-content:center"]>a{text-align:center}
    /* Pie */
    footer{font-size:.74rem;padding:1.6rem 1rem 1.5rem}

    /* Tarjetas de desafío */
    .challenge-card{padding:1rem}
    .lt-pasos{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:.4rem}
    .lt-paso{min-width:84px;scroll-snap-align:center}
    .idea{flex-direction:column}
    .idea>div:last-child{display:flex;align-items:center;gap:.6rem}
    #como-se-resuelve .cs-pasos li{padding:.7rem}
    .coment{padding:.7rem}

    /* Tablas → tarjetas apiladas (las vistas ponen data-label en cada celda) */
    table.tabla-movil thead{display:none}
    table.tabla-movil,table.tabla-movil tbody,table.tabla-movil tr,table.tabla-movil td{display:block;width:100%}
    table.tabla-movil tr{border:1px solid #e8eaed;border-radius:12px;margin:.7rem;width:auto;padding:.4rem .2rem;background:#fff}
    table.tabla-movil td{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:.45rem .8rem;border:0;max-width:none!important;text-align:right}
    table.tabla-movil td::before{content:attr(data-label);font-weight:700;color:#6b7280;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;text-align:left;flex:0 0 34%}
    table.tabla-movil td:first-child{display:block;text-align:left}
    table.tabla-movil td:first-child::before{display:block;margin-bottom:.15rem}
    table.tabla-movil td[data-label="Acciones"]{display:block;text-align:left}
    table.tabla-movil td[data-label="Acciones"]::before{display:block;margin-bottom:.3rem}
    table.tabla-movil td[colspan]{display:block;text-align:center}
    table.tabla-movil td[colspan]::before{display:none}
    .card:has(>table.tabla-movil){background:transparent;border:0;padding:0}

    /* Wizard */
    #stepper{display:none!important}
    .stepper-movil{display:block;margin-bottom:1rem}
    .stepper-movil .barra{height:8px;border-radius:6px;background:#e2e8f0;overflow:hidden}
    .stepper-movil .barra i{display:block;height:100%;background:linear-gradient(90deg,#0088d3,#29aefb);transition:width .25s}
    .stepper-movil p{font-size:.82rem;font-weight:700;color:#00629b;margin-bottom:.4rem}
    fieldset.paso legend{font-size:1rem!important}
    .chk-fila{display:flex;align-items:center;gap:.7rem;font-size:.92rem!important;color:#1d1d1b!important;background:#f7f8fa;border:1px solid #e8eaed;border-radius:10px;padding:.75rem .85rem!important;min-height:48px}
    .chk-fila:has(input:checked){background:#e6f4fc;border-color:#0093e2}

    /* Tablero */
    .tb{padding:.75rem}
    .tb-cabecera{gap:.6rem}
    .tb-cabecera h1{font-size:1.25rem!important}
    .tb-acciones{width:100%}
    .tb-tabs{width:100%;display:flex}
    .tb-tab{flex:1;text-align:center;padding:.65rem .4rem;min-height:44px;display:flex;align-items:center;justify-content:center}
    .tb-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
    .tb-kpi{padding:.7rem .75rem .3rem}
    .tb-kpi-val{font-size:1.45rem}
    .tb-grid{gap:.8rem}
    .tb-card{padding:.8rem}
    .tb-chart{height:270px}
    .tb-chart-alto{height:380px}
    .tb-mapa{height:320px}
    .tb-leyenda{left:.4rem;bottom:.4rem;padding:.35rem .5rem}
    .tb-leyenda .barra{width:100px}
    .tb-card header{flex-wrap:wrap}
    .tb-sel{width:100%}
    .tb-chip{min-height:44px}
    .tb-uvgrid .tb-chip{min-height:44px}
    .tb-tabla{min-width:520px}
    .tb-filtros-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-bottom:.7rem}
    .tb-filtros{display:none;position:static}
    .tb-filtros.abierto{display:block}
    #mapaUv{height:380px!important}
    #mapaSugerencia,#mapaDesafio{height:300px!important}
}

@media(max-width:380px){
    .tb-kpis{grid-template-columns:1fr 1fr}
    .bn-item{font-size:.6rem}
}

/* Pantallas táctiles: sin efectos que dependan del hover */
@media(hover:none){
    .challenge-card:hover{transform:none;box-shadow:0 2px 6px rgba(0,0,0,.05)!important}
    .sidebar-flyout,.sidebar-flyout-grupo{display:none!important}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media(max-width:640px){
    #main .con-accion-fija{padding-bottom:7rem!important}
    .uv-chk{min-height:46px;justify-content:center;font-size:.86rem!important}
    .aviso-borrador{display:flex;flex-direction:column;gap:.5rem}
}
.aviso-borrador{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:.8rem 1rem;margin-bottom:1rem;font-size:.82rem;color:#92400e;display:flex;gap:.8rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tb-solo-movil{display:none}
@media(max-width:900px){.tb-solo-movil{display:inline}}
@media(max-width:560px){.marca-texto{display:none}.marca img{height:32px!important}}
/* Las columnas de cuadrícula/flex no deben crecer por su contenido (tablas, gráficos): minmax(0,1fr) y min-width:0 */
.tb-contenido,.tb-card,.tb-kpis>*,#main,.app-body>main{min-width:0}
@media(max-width:1000px){.tb-layout{grid-template-columns:minmax(0,1fr)}.tb-grid{grid-template-columns:minmax(0,1fr)}.tb-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media(max-width:640px){.tb-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

.challenge-card,.card{min-width:0}
.challenge-card h3,.challenge-card p{overflow-wrap:anywhere}

input[type=file]::file-selector-button{background:#e6f4fc;color:#00629b;border:0;border-radius:8px;padding:.55rem .9rem;margin-right:.7rem;font-weight:700;font-family:inherit;cursor:pointer}
@media(max-width:900px){input[type=file]::file-selector-button{min-height:40px;font-size:.9rem}}
[id]{scroll-margin-top:72px}

@media(max-width:640px){
    #main .g-filtro[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
    .g-filtro>div:last-child{display:flex;gap:.5rem}
    .g-filtro>div:last-child>*{flex:1;text-align:center}
}
@media(max-width:1000px){
    .tb-filtros-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;margin-bottom:.7rem}
    .tb-filtros{display:none;position:static;max-height:none}
    .tb-filtros.abierto{display:block}
}

/* Sugerencia de instalar la app (pwa.js) */
.pwa-banner{display:flex;align-items:center;gap:.8rem;padding:.6rem max(.9rem,env(safe-area-inset-left));background:#f0f8fd;border-bottom:1px solid #cfe8f6;color:#1d1d1b}
.pwa-banner img{border-radius:10px;flex-shrink:0}
.pwa-txt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.pwa-txt strong{font-size:.86rem;color:#00629b}
.pwa-txt span{font-size:.74rem;color:#4a5568}
.pwa-btn{background:#0088d3;color:#fff;border:0;border-radius:8px;padding:.55rem 1rem;font-weight:700;font-size:.82rem;cursor:pointer;white-space:nowrap;min-height:40px}
.pwa-x{background:none;border:0;color:#6b7280;font-size:1.5rem;line-height:1;cursor:pointer;min-width:40px;min-height:40px}
.pwa-hoja-fondo{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2500;display:flex;align-items:flex-end;justify-content:center}
.pwa-hoja{background:#fff;border-radius:18px 18px 0 0;padding:1.4rem 1.3rem calc(1.4rem + env(safe-area-inset-bottom));width:100%;max-width:520px}
.pwa-hoja h2{font-size:1.1rem;color:#00629b;margin-bottom:.8rem}
.pwa-hoja ol{padding-left:1.2rem;font-size:.92rem;line-height:1.7;color:#1d1d1b;margin-bottom:.8rem}
.pwa-nota{font-size:.78rem;color:#6b7280;margin-bottom:1rem}
.pwa-hoja .btn-p{width:100%}
@media(min-width:901px){.pwa-hoja-fondo{align-items:center}.pwa-hoja{border-radius:18px}}
@media print{.pwa-banner,.pwa-hoja-fondo{display:none!important}}

/* Login/registro dentro de la ventana modal: sin marco doble ni relleno extra */
.modal-box #cuenta-modal-contenido{padding:0!important;max-width:none!important;margin:0!important}
.modal-box #cuenta-modal-contenido>.card{border:0;padding:0;background:transparent;box-shadow:none}
.modal-box #cuenta-modal-contenido h1{font-size:1.45rem!important;margin-bottom:.4rem!important;padding-right:2rem}
.modal-box #cuenta-modal-contenido>p{margin-bottom:1.2rem!important}
/* Anchos intermedios (tablet / laptop chica): el nombre del sitio cede espacio al menú */
@media(max-width:1180px) and (min-width:901px){
    .marca-texto{display:none}
    .nav-publico a{padding:.38rem .6rem!important;font-size:.74rem!important}
}