/* El generador del mapa embebible. [C.12]
 *
 * Se apoya en hub.css: de ahi salen la paleta, .page, .card y .crumbs. Aqui
 * esta solo lo que esta pagina tiene y ninguna otra: la rejilla de dos
 * columnas, los controles del formulario y la caja del codigo. */

.gen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

/* La caja del resultado ocupa el ancho entero: dentro va una vista previa que
   con media columna no se puede juzgar. */
.gen-salida { grid-column: 1 / -1; }

/* El mapa del paso 2 y su contador, que va flotando encima: una barra debajo
   empujaria el mapa cada vez que cambia el numero, y eso al arrastrar es un
   salto constante. */
.gen-mapa-wrap {
    position: relative;
    margin-top: 14px;
}

#gen-mapa {
    height: 340px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: #0b0b0e;
}

#gen-mapa-cuenta {
    position: absolute;
    z-index: 500;   /* encima de los paneles de Leaflet (800 son los controles) */
    right: 10px;
    bottom: 10px;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: rgba(14, 14, 18, .9);
    font-size: 11.5px;
    color: var(--dim);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* ---- Controles ---- */
.gen-campo { display: block; }

.gen-campo > span {
    display: block;
    margin-bottom: 5px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--dim);
}

.gen-campo input,
.gen-campo select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--txt);
    font: inherit;
    font-size: 13.5px;
}

.gen-campo input:focus,
.gen-campo select:focus {
    outline: none;
    border-color: var(--accent-line);
}

.gen-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.gen-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    font-size: 13.5px;
    cursor: pointer;
}

/* ---- Tipologias, como fichas que se marcan ----
   Casillas y no un <select multiple>: son quince y el select multiple obliga a
   arrastrar con la tecla de control puesta, que fuera de una hoja de calculo no
   lo sabe nadie. */
.gen-tipos {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
    /* SIN `max-height` NI SCROLL PROPIO. Lo tuvo, y era justo lo que hacia
       incomodo marcar tipologias en un movil: una caja que se desplaza dentro
       de una pagina que tambien se desplaza obliga a acertar con el dedo en
       cual de las dos estas arrastrando. Ahora la lista fluye y lo que acota su
       altura es que solo se ensenyan las TIPOS_VISIBLES primeras. */
}

.gen-chip[hidden] { display: none; }

/* El recuento de cada tipologia, al lado del nombre. Es lo que permite ver de
   un vistazo cual llena un mapa y cual no. */
.gen-chip i {
    font-style: normal;
    font-size: 11px;
    color: var(--dimmer);
    font-variant-numeric: tabular-nums;
}

.gen-chip:has(input:checked) i { color: #ffc9cc; }

/* ---- Acciones rapidas de la lista ---- */
.gen-tipos-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.gen-mini {
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--dim);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.gen-mini:hover { border-color: var(--accent-line); color: var(--txt); }

.gen-mini-cuenta {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--dimmer);
}

.gen-mas {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 9px;
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--dim);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.gen-mas:hover { border-color: var(--accent-line); color: var(--txt); }
.gen-mas[hidden] { display: none; }

.gen-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.gen-chip:hover { border-color: var(--accent-line); }

.gen-chip input { accent-color: var(--accent); margin: 0; }

.gen-chip:has(input:checked) {
    border-color: var(--accent-line);
    background: var(--accent-dim);
}

/* ---- El codigo que se copia ---- */
#gen-codigo {
    width: 100%;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: #cfe3ff;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
    resize: vertical;
}

#gen-codigo:focus { outline: none; border-color: var(--accent-line); }

.gen-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 11px;
}

.gen-btn {
    padding: 9px 16px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-pill);
    background: var(--accent-dim);
    color: #ffc9cc;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}

.gen-btn:hover { background: rgba(255, 59, 70, .22); }

.gen-btn.ghost {
    border-color: var(--line);
    background: transparent;
    color: var(--dim);
}

.gen-btn.ghost:hover { color: var(--txt); border-color: var(--accent-line); }

.gen-sub {
    margin: 22px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--dim);
}

#gen-previa {
    width: 100%;
    height: 480px;
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #0b0b0e;
}

@media (max-width: 900px) {
    .gen-grid { grid-template-columns: 1fr; }
    .gen-fila { grid-template-columns: 1fr; }
}

/* ---- El buscador de municipios ----
   Va ENCIMA del mapa y con la lista flotando sobre él: es lo primero que hace
   quien llega, y una lista que empujara el mapa hacia abajo movería el
   encuadre justo mientras se está eligiendo. */
.gen-buscador {
    position: relative;
    /* POR ENCIMA DE LEAFLET, Y ESTO NO ES UN NUMERO AL AZAR.
       `.leaflet-top`/`.leaflet-bottom` -donde viven los botones de + y - - van
       en z-index 1000, y los paneles del mapa hasta 800. Con la lista en 900 se
       colaba DEBAJO de los controles de zoom y el primer resultado quedaba
       tapado. El contenedor entero sube por encima de los 1000 de Leaflet, y
       ademas crea el contexto de apilamiento para que la lista no dependa de
       quien haya alrededor. */
    z-index: 1100;
    margin-top: 14px;
}

.gen-buscador input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--txt);
    font: inherit;
    font-size: 14px;
}

.gen-buscador input:focus { outline: none; border-color: var(--accent-line); }
.gen-buscador input::placeholder { color: var(--dimmer); }

#gen-sugerencias {
    position: absolute;
    z-index: 1;   /* dentro del contexto que crea .gen-buscador */
    left: 0;
    right: 0;
    top: calc(100% + 5px);
    margin: 0;
    padding: 5px;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #101015;
    box-shadow: var(--shadow);
}

#gen-sugerencias[hidden] { display: none; }

#gen-sugerencias button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--txt);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#gen-sugerencias button:hover,
#gen-sugerencias button:focus-visible {
    background: var(--accent-dim);
    outline: none;
}

#gen-sugerencias button b { display: block; font-size: 14px; font-weight: 650; }
#gen-sugerencias button span { font-size: 11.5px; color: var(--dimmer); }

#gen-sugerencias .sin-resultados {
    padding: 9px 10px;
    font-size: 12.5px;
    color: var(--dimmer);
}

/* ---- La etiqueta del filtro por lugar ----
   Sustituye a la caja de texto suelta que filtraba SIN mover el mapa. Se ve, y
   se puede quitar: son las dos cosas que le faltaban. */
#gen-filtro-lugar { margin-top: 10px; }
#gen-filtro-lugar[hidden] { display: none; }

.chip-lugar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 13px;
    border: 1px solid var(--accent-line);
    border-radius: var(--r-pill);
    background: var(--accent-dim);
    font-size: 12.5px;
    color: #ffd6d8;
}

.chip-lugar b { color: #fff; }

.chip-lugar button {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    color: inherit;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.chip-lugar button:hover { background: rgba(0, 0, 0, .55); color: #fff; }

/* Un municipio sin sucesos se puede elegir igual -el mapa se llenará solo
   cuando los haya-, pero se dice en otro tono para que no parezca un error. */
#gen-sugerencias .sin-casos { color: var(--warm); }

/* ---- El aviso de casos solapados ----
   No es un error, así que no va en rojo: es un hecho del dato -muchos sucesos
   comparten la coordenada del centro de su municipio- que hay que saber ANTES
   de quitar las burbujas. En ámbar mientras sólo avisa; en rojo cuando ya está
   pasando, o sea cuando las burbujas están desmarcadas. */
.gen-aviso {
    margin: 10px 0 0;
    padding: 10px 12px;
    border: 1px solid rgba(245, 165, 36, .32);
    border-radius: var(--r-sm);
    background: rgba(245, 165, 36, .08);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--warm);
}

.gen-aviso[hidden] { display: none; }

.gen-aviso.es-grave {
    border-color: var(--accent-line);
    background: var(--accent-dim);
    color: #ffc9cc;
}

/* ---- El buscador de la lista de tipologías ----
   Con 34, escribir «sex» o «robo» es más rápido que leerlas, sobre todo en un
   móvil. `type="search"` y no `text`: el navegador le pone su × para vaciarlo,
   que es la mitad de la comodidad. */
.gen-buscar-tipos {
    margin-top: 14px;
}

.gen-buscar-tipos input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--txt);
    font: inherit;
    font-size: 13.5px;
}

.gen-buscar-tipos input:focus { outline: none; border-color: var(--accent-line); }
.gen-buscar-tipos input::placeholder { color: var(--dimmer); }

/* El × nativo de Chrome sale gris oscuro sobre fondo oscuro: invisible. */
.gen-buscar-tipos input::-webkit-search-cancel-button {
    filter: invert(1);
    opacity: .45;
    cursor: pointer;
}

#gen-tipos-vacio {
    margin: 12px 0 0;
    font-size: 13px;
}

#gen-tipos-vacio[hidden] { display: none; }

/* El selector de zoom, debajo del mapa: se elige DESPUÉS de encuadrar, que es
   el orden en que se hace de verdad. */
.gen-zoom { margin-top: 12px; }