@charset "utf-8";
/* ================================================================
   JTB Buscador — CSS v3  (tonos más claros, navbar moderna)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ── Variables ─────────────────────────────────────────────────── */
:root {
    /* Fondo: slate medio-claro */
    --bg:        #1e2b38;
    --bg2:       #273544;
    --bg3:       #304050;
    --bg4:       #3a4d62;
    --border:    #405060;
    --border-lt: #506070;

    /* Acentos teal suaves */
    --teal:      #4ecdc4;
    --teal-lt:   #7eddd7;
    --teal-dk:   #38a89d;
    --teal-glow: rgba(78,205,196,0.18);

    /* Otros acentos */
    --amber:     #f5b942;
    --red:       #e06c75;
    --green:     #61c9a8;

    /* Texto — más luminoso */
    --text:      #c8d8e8;
    --text-lt:   #e4edf5;
    --text-dim:  #7a90a8;
    --white:     #f0f6fc;

    /* Radios */
    --r-xs: 3px;
    --r-sm: 5px;
    --r-md: 9px;
    --r-lg: 14px;

    /* Sombras */
    --shadow:    0 2px 10px rgba(0,0,0,0.25);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.35);
    --shadow-lg: 0 8px 36px rgba(0,0,0,0.45);

    --t: all 0.16s ease;
    --font-h: 'Rajdhani', sans-serif;
    --font-b: 'Inter', sans-serif;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body, div, span, applet, object, iframe,
h1,h2,h3,h4,h5,h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}

body {
    font-family: var(--font-b);
    font-size: 14px; line-height: 1.55;
    background: var(--bg); color: var(--text);
    -webkit-font-smoothing: antialiased;
    min-width: 320px;
}

ol, ul { list-style: none; }
table  { border-collapse: collapse; border-spacing: 0; }
ins    { text-decoration: none; }
del    { text-decoration: line-through; }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
::selection    { background: var(--teal); color: var(--bg); }

/* Scrollbar */
::-webkit-scrollbar             { width: 5px; height: 5px; }
::-webkit-scrollbar-track       { background: var(--bg2); }
::-webkit-scrollbar-thumb       { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal-dk); }

/* ── Util ─────────────────────────────────────────────────────── */
.clear { clear: both; }

/* ── Flotante ─────────────────────────────────────────────────── */
#flotante {
    position: absolute; display: none;
    font-family: var(--font-b); font-size: 12px;
    border: 1px solid var(--teal);
    background: var(--bg2); color: var(--text-lt);
    border-radius: var(--r-md); padding: 8px 14px;
    box-shadow: var(--shadow-md); z-index: 9999;
}

/* ── Wrapper ──────────────────────────────────────────────────── */
#torra  { width: 100%; background: var(--bg); }
#wrapper {
    width: 100% !important; max-width: 100% !important;
    background: var(--bg); box-sizing: border-box;
}

/* ── HEADER ───────────────────────────────────────────────────── */
#header {
    width: 100%; height: 70px;
    background: linear-gradient(100deg, var(--bg) 0%, var(--bg2) 55%, var(--bg3) 100%);
    border-bottom: 2px solid var(--teal);
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: relative; overflow: hidden;
}
#header::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(78,205,196,0.06) 0%, transparent 70%);
    pointer-events: none;
}

#logo { width: 363px; height: 60px; float: left; margin: 5px 0 0; flex-shrink: 0; }
#logo span { display: none; }
#logo a {
    display: block; width: 363px; height: 60px;
    background: url(../imagenes/animacion.gif) no-repeat left center;
}

#visitante {
    float: right; text-align: right;
    color: var(--text-dim); font-size: 12px; line-height: 1.45; flex-shrink: 0;
}
#visitante p {
    font-family: var(--font-h); font-weight: 600;
    font-size: 15px; color: var(--teal-lt); letter-spacing: 0.3px;
}

/* ── NAVBAR ───────────────────────────────────────────────────── */
#navi {
    width: 100%;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    min-height: 46px;
    display: flex; align-items: center;
    position: sticky; top: 0; z-index: 200;
    box-shadow: 0 2px 10px rgba(0,0,0,0.28);
    padding: 0 8px;
    gap: 0;
}

/* botones de nav */
#navi ul {
    width: auto; display: flex; float: left;
    align-items: center; gap: 4px; padding: 5px 0; flex-wrap: nowrap;
}
#navi ul li { float: none; }
#navi ul li a {
    display: flex; align-items: center; gap: 6px;
    text-decoration: none;
    border-radius: var(--r-sm); padding: 7px 14px;
    color: var(--text); background: transparent;
    font-family: var(--font-h); font-weight: 600;
    font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase;
    transition: var(--t); border: 1px solid transparent; white-space: nowrap;
    line-height: 1;
}
#navi ul li a:hover {
    background: var(--teal-glow);
    color: var(--teal-lt);
    border-color: rgba(78,205,196,0.25);
}
#navi ul li a.active,
#navi ul li a[style*="background:#ffffff"] {
    background: var(--teal); color: var(--bg);
    border-color: transparent;
    box-shadow: 0 0 10px rgba(78,205,196,0.3);
}
#navi ul li a img { opacity: 0.75; transition: var(--t); }
#navi ul li a:hover img { opacity: 1; }

/* separador visual entre nav y búsqueda */
#navi ul::after {
    content: '';
    display: block;
    width: 1px; height: 22px;
    background: var(--border);
    margin-left: 8px;
    flex-shrink: 0;
}

/* ── BÚSQUEDA (derecha de navbar) ─────────────────────────────── */
#busqueda {
    width: 46%; background: transparent;
    float: right; display: flex; align-items: center; gap: 6px;
    padding: 4px 0;
}

#busqueda form {
    width: 68%; float: right;
    display: flex; align-items: center; gap: 5px;
}
#busqueda form input[type="text"],
#busqueda form input[type="search"] {
    flex: 1; padding: 7px 12px; font-size: 13px;
    font-family: var(--font-b);
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--bg3); color: var(--text-lt);
    transition: var(--t);
}
#busqueda form input[type="text"]:focus,
#busqueda form input[type="search"]:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(78,205,196,0.12);
    outline: none; background: var(--bg4);
}
#busqueda form input[type="submit"] {
    padding: 7px 16px; font-size: 13px;
    font-family: var(--font-h); font-weight: 700;
    letter-spacing: 0.5px; cursor: pointer;
    border: none; border-radius: var(--r-sm);
    background: var(--teal); color: var(--bg);
    transition: var(--t);
}
#busqueda form input[type="submit"]:hover {
    background: var(--teal-lt);
    box-shadow: 0 0 10px rgba(78,205,196,0.35);
}

#busqueda ul {
    width: 30%; float: left; background: var(--bg3);
    border-radius: var(--r-sm);
}
#busqueda ul li a {
    display: block; text-decoration: none;
    background: var(--bg3); color: var(--text);
    border-radius: var(--r-sm); border: 1px solid var(--border);
    padding: 7px 10px; font-size: 12px; transition: var(--t);
}
#busqueda ul li a:hover,
#busqueda ul li.nivel1 a:hover,
#busqueda ul li:hover a.nivel1 { background: var(--bg4); color: var(--teal-lt); }
#busqueda ul li ul li a:hover,
#busqueda ul li ul li:hover a.nivel2 { background: var(--teal); color: var(--bg); }
#busqueda ul li ul { width: 100%; display: none; }
#busqueda ul li:hover ul.nivel2,
#busqueda ul li a:hover ul.nivel2 {
    display: block; position: absolute; left: 0; z-index: 300;
    background: var(--bg2); border: 1px solid var(--teal);
    border-radius: var(--r-md); box-shadow: var(--shadow-lg);
    min-width: 190px; overflow: hidden;
}
#busqueda ul li ul li a {
    width: 100%; font-size: 13px; padding: 9px 14px;
    border-radius: 0; border: none;
    border-bottom: 1px solid var(--border);
}
#busqueda ul li ul.nivel2 li { width: 100%; height: auto; }
#busqueda ul li.nivel1 { width: 100%; float: right; font-size: 13px; }
#busqueda ul li:hover { position: relative; }
#busqueda ul li a.nivel1,
#busqueda ul li a.nivel2 { display: block !important; position: relative; width: 100%; }

/* ── DESPLEGABLES ─────────────────────────────────────────────── */
#desplega, #desplega1, #desplega2, #desplega3, #desplega4 {
    background: var(--bg2); display: block; position: absolute;
    height: auto; border: 1px solid var(--teal);
    border-top: 2px solid var(--teal);
    border-radius: 0 0 var(--r-md) var(--r-md);
    visibility: hidden; text-align: left; top: 118px; z-index: 500;
    box-shadow: var(--shadow-lg); overflow: hidden;
}
#desplega  { width: 38%; left: 16.7%; }
#desplega1 { width: 33%; left: 3px; }
#desplega2 { width: 20%; left: 10.2%; }
#desplega3 { width: 24%; left: 6.35%; }
#desplega4 { width: 38%; left: 13%; }

#desplega a, #desplega1 a, #desplega2 a, #desplega3 a, #desplega4 a {
    display: block; background: transparent; padding: 11px 18px;
    color: var(--text); font-family: var(--font-b); font-size: 13px;
    text-decoration: none; transition: var(--t); margin: 0;
    border-bottom: 1px solid var(--border);
}
#desplega a:hover, #desplega1 a:hover, #desplega2 a:hover,
#desplega3 a:hover, #desplega4 a:hover {
    background: var(--teal-glow); color: var(--teal-lt); padding-left: 24px;
}

/* ── TAREAS / SELECTOR CT ─────────────────────────────────────── */
#tareas {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--r-lg); margin: 12px auto 10px;
    width: 96%; padding: 12px 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    box-shadow: var(--shadow);
}
#tareas select {
    font-size: 14px; padding: 8px 12px; border-radius: var(--r-sm);
    border: 1px solid var(--border); background: var(--bg3);
    color: var(--text-lt); font-family: var(--font-b);
    cursor: pointer; min-width: 220px; transition: var(--t);
}
#tareas select:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(78,205,196,0.12); }
#tareas input[type="submit"] {
    padding: 8px 20px; font-size: 13px; font-family: var(--font-h);
    font-weight: 700; letter-spacing: 0.5px; cursor: pointer;
    border: none; border-radius: var(--r-sm);
    background: var(--teal); color: var(--bg); transition: var(--t);
}
#tareas input[type="submit"]:hover {
    background: var(--teal-lt);
    box-shadow: 0 0 12px rgba(78,205,196,0.35); transform: translateY(-1px);
}
#tareas button {
    padding: 8px 18px; font-size: 13px; font-family: var(--font-h);
    font-weight: 600; letter-spacing: 0.4px; cursor: pointer;
    border: 1px solid var(--teal); border-radius: var(--r-sm);
    background: transparent; color: var(--teal); transition: var(--t);
}
#tareas button:hover { background: var(--teal); color: var(--bg); transform: translateY(-1px); }
#tareas a {
    color: var(--teal-lt); font-size: 13px; font-family: var(--font-h);
    font-weight: 600; text-decoration: none; letter-spacing: 0.3px;
    padding: 5px 10px; border-radius: var(--r-sm); transition: var(--t);
}
#tareas a:hover { background: var(--teal-glow); color: var(--white); }
#lolo { padding: 10px; width: 100%; }

/* ── MAPA CANVAS ──────────────────────────────────────────────── */
#map_primero { height: auto; }
#map_canvas {
    border-radius: var(--r-lg); width: 100%; height: 640px;
    border: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden;
}

/* ── PIE ──────────────────────────────────────────────────────── */
#pie {
    background: var(--bg2); border-top: 1px solid var(--border);
    min-height: 44px; width: 100%; display: flex; align-items: center; padding: 4px 14px;
}
#pie ul { display: flex; flex-wrap: wrap; gap: 4px; }
#pie ul li { margin: 3px 2px; }
#pie ul li a {
    display: block; color: var(--text-dim); text-decoration: none;
    font-family: var(--font-h); font-weight: 600; font-size: 12px;
    letter-spacing: 0.5px; text-transform: uppercase;
    padding: 5px 12px; border-radius: var(--r-sm);
    border: 1px solid transparent; transition: var(--t);
}
#pie ul li a:hover { color: var(--teal-lt); border-color: var(--border); background: var(--teal-glow); }

/* ── INFO WINDOW MAPA ─────────────────────────────────────────── */
#info { background: var(--bg2); border-radius: var(--r-md); overflow: hidden; min-width: 270px; }
#info_nombre {
    background: linear-gradient(135deg, var(--teal-dk), var(--teal));
    padding: 10px 16px;
}
#info_nombre p {
    font-family: var(--font-h); font-weight: 700;
    font-size: 17px; color: var(--bg); letter-spacing: 0.4px;
}
#info_datos { background: var(--bg3); padding: 12px 16px; width: 100%; height: auto; margin: 0; }
#info_datos strong {
    display: block; color: var(--teal); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.8px; margin-top: 8px; float: none;
}
#info_datos strong p { color: var(--text-lt); font-size: 13px; font-weight: 400; margin: 2px 0 0; float: none; }
#info_datos a {
    display: inline-block; margin-top: 10px; padding: 6px 14px;
    background: var(--teal); color: var(--bg); text-decoration: none;
    border-radius: var(--r-sm); font-weight: 700;
    font-family: var(--font-h); font-size: 13px; transition: var(--t);
}
#info_datos a:hover { background: var(--teal-lt); box-shadow: 0 0 10px rgba(78,205,196,0.35); }

/* ── TABLA LISTADO ────────────────────────────────────────────── */
#listado { width: 100%; padding: 10px; }
#listado table tr td a { color: var(--text); text-decoration: none; display: block; transition: var(--t); }
#listado table tr td a:hover { color: var(--teal-lt); }
#listado table tr td a img { width: 22px; margin: 0 2px; opacity: 0.75; transition: var(--t); }
#listado table tr td a img:hover { opacity: 1; }

#nom, #tra, #nuct, #POTENCIA, #TARIFA, #ref, #opcion {
    background: var(--bg2); color: var(--text); border: 1px solid var(--border); padding: 6px 9px; font-size: 13px;
}
#nom { width: 60%; } #tra { width: 10%; } #ref { width: 90%; } #opcion { width: 40%; }
#nuct, #POTENCIA, #TARIFA { width: 100px; }

#nom-1, #tra-1, #nuct-1, #POTENCIA-1, #TARIFA-1, #ref-1, #opcion-1 {
    background: var(--bg3); color: var(--text); border: 1px solid rgba(64,80,96,0.5); padding: 6px 9px; font-size: 13px;
}
#nom-1 { width: 60%; } #ref-1 { width: 90%; } #opcion-1 { width: 40%; }
#tra-1, #nuct-1, #POTENCIA-1, #TARIFA-1 { width: 100px; }

#letrero, #letrero1, #letrero2, #letrero3 {
    text-align: center; padding: 10px 16px; background: var(--bg3);
    color: var(--teal-lt); border-bottom: 2px solid var(--teal);
    font-family: var(--font-h); font-weight: 700; font-size: 13px;
    letter-spacing: 1px; text-transform: uppercase;
}
#linea-1 { align-content: center; width: 25px; }

/* ── PAGINACIÓN ───────────────────────────────────────────────── */
#paginacion { width: 98%; padding: 0 0 28px; }
#paginacion p { font-size: 14px; text-align: center; padding: 18px; }
#paginacion p a {
    display: inline-block; padding: 7px 15px; margin: 0 3px;
    text-decoration: none; color: var(--teal-lt);
    border-radius: var(--r-sm); border: 1px solid var(--border);
    font-family: var(--font-h); font-weight: 600; transition: var(--t);
}
#paginacion p a:hover, #paginacion p a:active {
    background: var(--teal); color: var(--bg); border-color: var(--teal);
}

/* ── TRANSFORMADORES ──────────────────────────────────────────── */
#transfomadores {
    width: 18%; float: left; background: var(--bg2); margin: 2%;
    border-radius: var(--r-md); border: 1px solid var(--border); padding: 12px;
}
#transfomadores a { color: var(--teal-lt); text-decoration: none; display: block; margin: 5px; }
#transfomadores form select {
    width: 100%; font-size: 13px; padding: 7px 10px;
    background: var(--bg3); color: var(--text-lt);
    border: 1px solid var(--border); border-radius: var(--r-sm);
}
#transfomadores form select option { background: var(--bg2); color: var(--text); }

/* ── TRABAJOS ─────────────────────────────────────────────────── */
#trabajos { width: 99%; display: table; height: 100%; margin: auto; padding: 2% 0 0 1%; border-radius: var(--r-md); }
#tipo { display: table-row; background: var(--bg3); float: left; }
#tipo img { width: 15%; height: 200px; border-radius: var(--r-sm); }
#titulo { width: 75%; color: var(--teal-lt); text-align: center; float: right; margin: 0 10px; font-family: var(--font-h); font-size: 22px; font-weight: 700; }
#donde { font-size: 14px; float: left; background: var(--bg); margin: 0 10px; padding: 8px 12px; width: 300px; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--text); }
#faena { font-size: 14px; float: right; margin: 0 10px; background: var(--bg3); padding: 8px 12px; width: 50%; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--text); }

#trabajos_nuevos { background: linear-gradient(135deg, var(--bg2), var(--bg3)); width: 90%; height: auto; padding: 6% 5%; border-radius: var(--r-lg); border: 1px solid var(--border); margin: 20px auto; }
#trabajos_nuevos form p { display: block; width: 30%; float: left; font-size: 15px; color: var(--text); font-family: var(--font-h); font-weight: 600; }
#trabajos_de { background: var(--bg3); color: var(--teal-lt); width: 95%; margin: 1%; padding: 2%; font-size: 170%; text-align: center; border-radius: var(--r-md); font-family: var(--font-h); font-weight: 700; letter-spacing: 1px; border-bottom: 2px solid var(--teal); }

#bustrabajos { background: var(--bg2); width: 99%; display: block; height: 100%; margin: auto; padding: 10px; float: right; border-radius: var(--r-md); }
#bustrabajos form select { font-size: 150%; width: 30%; padding: 0.5%; text-align: center; background: var(--bg3); color: var(--text-lt); border-radius: var(--r-md); margin: 5px 0 0 10px; border: 1px solid var(--border); transition: var(--t); }
#bustrabajos form select:focus { border-color: var(--teal); outline: none; }
#bustrabajos form select option { font-size: 14px; background: var(--bg2); }
#bustrabajos form input { font-size: 150%; width: 20%; padding: 0.5%; text-align: center; background: var(--teal); color: var(--bg); border-radius: var(--r-md); margin: 5px 0 0 10px; border: none; font-weight: 700; font-family: var(--font-h); cursor: pointer; transition: var(--t); }
#bustrabajos form input:hover { background: var(--teal-lt); box-shadow: 0 0 12px rgba(78,205,196,0.35); }

/* ── PANEL RUTAS LATERAL (#ir) ────────────────────────────────── */
#ir { font-size: 0.8em; width: 25%; background: var(--bg2); margin: 0; float: left; height: 700px; overflow: scroll; border-right: 1px solid var(--border); }
#ir ul { margin: 0; padding: 0; width: 100%; }
#ir li { list-style: none; }
#ir ul li { text-align: left; }
#ir ul.top-level { background: var(--bg3); }
#ir ul.top-level li { border-bottom: 1px solid var(--border); }
#ir ul.sub-level { display: none; }
#ir li:hover .sub-level { background: var(--bg2); border: 1px solid var(--teal); display: block; position: absolute; left: 75px; top: 5px; border-radius: var(--r-sm); box-shadow: var(--shadow-md); }
#ir ul.sub-level li { border: none; float: left; width: 200px; }
#ir a { color: var(--text); cursor: pointer; display: block; height: 26px; line-height: 26px; text-indent: 10px; text-decoration: none; width: 100%; font-size: 12px; transition: var(--t); }
#ir a:hover { color: var(--teal-lt); }
#ir li:hover { background: rgba(78,205,196,0.08); position: relative; }
#ir .sub-level { background: var(--bg3); }
#ir .sub-level .sub-level { background: var(--bg2); }
#ir li:hover .sub-level .sub-level { display: none; }
#ir .sub-level li:hover .sub-level { display: block; }

/* ── CONTENEDORES VARIOS ──────────────────────────────────────── */
#ruta { width: 75%; float: left; background: var(--bg2); }
#ruta p { font-size: 16px; margin: 10px 0; color: var(--text); }

#fotos { background: var(--bg2); width: 100%; max-width: 960px; height: auto; padding: 10px; margin: 5px 0 0; border-radius: var(--r-md); }
#fotobusqueda { background: var(--bg3); width: auto; min-height: 35px; text-align: center; padding: 8px; border-radius: var(--r-sm); }
#foto_logo { margin: 2%; float: right; width: 70%; text-align: center; }
#foto_logo h5 { font-size: 200%; color: var(--teal-lt); font-family: var(--font-h); }
#foto { width: 70%; float: right; border: 1px solid var(--border); margin: 20px; background: var(--bg3); border-radius: var(--r-md); overflow: hidden; }
#foto p { border-top: 1px solid var(--border); padding: 10px; color: var(--text); font-size: 13px; }
#foto img { width: 100%; display: block; }

#cuerpos { width: 100%; background: var(--bg2); float: left; border: 1px solid var(--border); margin: 10px 0; border-radius: var(--r-md); }
#cuerpos ul li { display: block; float: left; color: var(--teal-lt); }
#cuerpo { width: 100%; background: var(--bg2); float: left; margin: 3px 0 10px; }
#cuerpo table input { padding: 5px 10px; margin-left: 20px; background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); }
#cuerpo table tr td p { font-size: 15px; color: var(--teal-lt); }

#base { width: 100%; float: left; min-height: 758px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-md); margin: 3px 0 0; }
#datos { margin: 10px; float: left; width: 30%; min-height: 275px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
#datos p { background: linear-gradient(135deg, var(--teal-dk), var(--teal)); color: var(--bg); font-size: 13px; margin: 5px; padding: 8px; font-weight: 700; text-align: center; border-radius: var(--r-sm); }
#datos2 { width: 66.4%; background: var(--bg3); float: right; border: 1px solid var(--border); margin: 10px 10px 0 0; border-radius: var(--r-md); }

#seleccionar { width: 100%; height: 25px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); }
#parrafo { font-size: 20px; color: var(--teal-lt); font-family: var(--font-h); font-weight: 700; }
#foto_subir { width: 94%; border: 1px solid var(--border); padding: 20px; height: 450px; margin: 0 0 0 20px; border-radius: var(--r-md); background: var(--bg2); }

#in { text-align: center; padding: 20px; }
#letre { display: none; }
#das { float: left; font-size: 8px; margin: 3px; }
#ct { visibility: hidden; width: 100%; height: 35px; float: left; text-align: center; background: var(--bg3); border-bottom: 1px solid var(--border); margin: 0 0 10px 10px; }
#menu { width: 50px; background: var(--teal); color: var(--bg); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    #navi ul { flex-wrap: wrap; }
    #busqueda { width: 38%; }
}
@media (max-width: 768px) {
    #visitante { display: none; }
    #navi { flex-wrap: wrap; min-height: auto; padding: 4px 8px; }
    #navi ul { width: 100%; flex-wrap: wrap; }
    #busqueda { width: 100%; float: none; }
    #busqueda form { width: 100%; }
    #header { height: auto; padding: 8px 14px; flex-wrap: wrap; }
    #logo { width: 220px; }
    #logo a { width: 220px; height: 44px; background-size: contain; }
    #map_canvas { height: 400px; }
    #tareas { width: 100%; margin: 8px 0; border-radius: 0; }
    #pie ul li a { padding: 4px 9px; font-size: 11px; }
}