:root{
    --bg: #E7ECEA;
    --panel: #FFFFFF;
    --ink: #16232A;
    --ink-soft: #55676E;
    --line: #D3DBD9;
    --teal: #0E7C86;
    --teal-deep: #0A5A62;
    --teal-soft: #E3F0F1;
    --amber: #E8871E;
    --amber-soft: #FCEEDC;
    --danger: #C4472A;
    --radius: 14px;
    --shadow: 0 6px 20px rgba(19,45,48,0.10);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 96px;
  }
  h1,h2,h3, .num{
    font-family: 'Space Grotesk', 'Inter', sans-serif;
  }

  header{
    background: linear-gradient(135deg, var(--teal-deep), var(--teal));
    color: white;
    padding: 22px 18px 26px;
    border-radius: 0 0 20px 20px;
    position: relative;
    overflow: hidden;
  }
  header::after{
    content:"";
    position:absolute; right:-40px; top:-40px;
    width:160px; height:160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
  }
  header::before{
    content:"";
    position:absolute; right:30px; bottom:-60px;
    width:110px; height:110px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
    opacity: 0.85; margin-bottom: 6px; font-weight:600;
  }
  .brand svg{width:18px; height:18px; flex-shrink:0;}
  header h1{
    margin:0; font-size: 24px; font-weight:700; line-height:1.25;
    position:relative; z-index:1;
  }
  header p{
    margin: 6px 0 0; font-size: 13.5px; opacity:0.85; max-width: 320px;
    position:relative; z-index:1;
  }

  main{ padding: 16px 14px 0; max-width: 560px; margin: 0 auto; }

  .card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
  }
  .card h2{
    font-size: 12.5px; text-transform: uppercase; letter-spacing:0.08em;
    color: var(--teal-deep); font-weight:700;
    display:flex; align-items:center; gap:7px;
    margin: -16px -16px 14px; padding: 12px 16px;
    background: var(--teal-soft);
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .step-dot{
    width:18px; height:18px; border-radius:50%;
    background: var(--teal); color:white;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:10.5px; font-weight:700; font-family:'Space Grotesk',sans-serif;
    flex-shrink:0;
  }

  /* Tarjetas del flujo de calefacción — misma banda, en ámbar en vez
     de teal, para que se note que estás en la parte de "calor" antes
     incluso de leer nada (ver .opt.amber en los tiles). */
  .card.amber h2{ background: var(--amber-soft); color: #8A5411; }
  .card.amber .step-dot{ background: var(--amber); color: #3A2405; }

  label{
    display:block; font-size: 13px; font-weight:600; margin: 12px 0 6px;
    color: var(--ink);
  }
  label:first-of-type{ margin-top:0; }
  input[type=text], input[type=tel]{
    width:100%; padding: 11px 12px; border-radius: 10px;
    border: 1.5px solid var(--line); font-size: 15px; font-family:inherit;
    background: #FBFCFC; color: var(--ink);
  }
  input:focus{ outline: 2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }

  .opt-grid{ display:grid; gap:8px; }
  .opt-grid.cols-2{ grid-template-columns: 1fr 1fr; }
  .opt-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
  .opt-grid.cols-4{ grid-template-columns: repeat(4, 1fr); }

  .opt-group-heading{
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
    margin-top: 8px;
  }
  .opt-group-heading:first-child{ margin-top: 0; }
  .card.amber .opt-group-heading{ color: #8A5411; }

  .opt{
    border: 1.5px solid var(--line);
    background: #FBFCFC;
    border-radius: 10px;
    padding: 10px 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    text-align:center;
    cursor:pointer;
    user-select:none;
    transition: border-color .12s, background .12s, color .12s;
    line-height:1.3;
  }
  .opt small{ display:block; font-weight:500; font-size:11px; opacity:0.75; margin-top:2px;}
  .opt.active{
    border-color: var(--teal);
    background: var(--teal);
    color: white;
  }
  .opt.active small{ opacity:0.9; }
  .opt.amber.active{ background: var(--amber); border-color: var(--amber); color: #3A2405; }

  select{
    width:100%; padding: 11px 12px; border-radius: 10px;
    border: 1.5px solid var(--line); font-size: 15px; font-family:inherit;
    background: #FBFCFC; color: var(--ink); appearance:none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355676E' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  }

  textarea{
    width:100%; padding: 11px 12px; border-radius: 10px;
    border: 1.5px solid var(--line); font-size: 14.5px; font-family: inherit;
    background: #FBFCFC; color: var(--ink); resize: vertical; min-height: 60px;
  }

  .hint{ font-size:12px; color:var(--ink-soft); margin-top:5px; }
  .hint.warn{ color: var(--danger); font-weight:600; }

  .summary-card{
    background: var(--ink);
    color: white;
    border-radius: var(--radius);
    padding: 18px 16px;
  }
  .summary-card h2{ color: rgba(255,255,255,0.6); }
  .line-item{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
  }
  .line-item span:last-child{ font-family:'Space Grotesk',sans-serif; font-weight:600; }
  .line-item.empty{ color: rgba(255,255,255,0.35); font-style: italic; }
  .line-item.discount span:last-child{ color:#7CD9A8; }
  .total-row{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-top: 14px; padding-top: 12px; border-top: 1.5px solid rgba(255,255,255,0.2);
  }
  .total-row .label{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color: rgba(255,255,255,0.6); font-weight:600;}
  .total-row .num{ font-size: 30px; font-weight:700; }
  .total-sub{ font-size:11.5px; color: rgba(255,255,255,0.45); margin-top:2px; }

  .actions{ display:flex; gap:10px; margin-top: 16px; }
  .actions-row{ display:flex; gap:10px; margin-top:8px; }
  .btn{
    flex:1; border:none; border-radius: 10px; padding: 13px 10px;
    font-size: 14px; font-weight:700; font-family:'Inter',sans-serif;
    display:flex; align-items:center; justify-content:center; gap:7px;
    cursor:pointer; transition: transform .1s, opacity .1s, box-shadow .15s ease;
  }
  .btn:hover:not(:disabled){ box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
  .btn:active{ transform: scale(0.97); }
  .btn svg{ width:16px; height:16px; }
  .btn-primary{ background: var(--teal); color: white; }
  .btn-primary:hover:not(:disabled){ background: var(--teal-deep); }
  .btn-whatsapp{ background:#25D366; color:#0B2E1B; }
  .btn-pdf{ background: var(--amber); color:#3A2405; }
  .btn-email{ background: rgba(255,255,255,0.12); color:white; border: 1px solid rgba(255,255,255,0.25); }
  .btn-copy{ background: transparent; color: rgba(255,255,255,0.55); font-size:12.5px; font-weight:600; padding: 8px; }
  .btn:disabled{ opacity:0.4; cursor:not-allowed; }

  /* Botones "de utilidad" — volver, cancelar, editar/borrar en listas.
     Sustituyen a los ~23 style="..." inline que había repartidos por
     index.html/equipos.js/presupuestos.js/visitas.js/trabajos.js. */
  .btn-secondary{
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  .btn-secondary:hover{ border-color: var(--teal); color: var(--teal-deep); background: rgba(14,124,134,0.05); box-shadow: var(--shadow); }
  .btn-secondary:active{ transform: scale(0.97); }

  .btn-icon{
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    transition: background .15s ease, transform .1s ease, color .15s ease;
  }
  .btn-icon:hover{ background: rgba(14,124,134,0.1); color: var(--teal-deep); }
  .btn-icon:active{ transform: scale(0.88); }
  .btn-icon.btn-icon-danger:hover{ background: rgba(196,71,42,0.1); color: var(--danger); }

  .sticky-bar{
    position: fixed; bottom:0; left:0; right:0;
    background: var(--panel);
    border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    display:flex; justify-content:space-between; align-items:center;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
  }
  .sticky-bar .label{ font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
  .sticky-bar .num{ font-size:20px; font-weight:700; color: var(--teal-deep); }

  .notice{
    background: var(--amber-soft); border: 1px solid #F0CC9A; color: #8A5411;
    border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin-top: 10px; line-height:1.4;
  }

  footer{ text-align:center; padding: 18px 16px 8px; font-size:11px; color:var(--ink-soft); }

  /* Login screen */
  #loginScreen, #setPasswordScreen{
    min-height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 20px;
  }
  .login-box{
    background: var(--panel);
    border-radius: var(--radius);
    padding: 28px 24px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  }
  .login-box h1{
    font-family:'Space Grotesk', sans-serif;
    font-size: 20px;
    margin: 0 0 4px;
    color: var(--ink);
  }
  .login-box p{
    color: var(--ink-soft);
    font-size: 13px;
    margin: 0 0 20px;
  }
  #loginError, #setPasswordError, #signupError, #empresaSetupError{
    display:none;
    background: #FDECEA;
    color: var(--danger);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 12px;
  }
  #loginError.msg-info, #signupError.msg-info{
    background: #E7F5EE;
    color: #1F8A5A;
  }
  /* Botón hamburguesa */
  #btnMenuToggle{
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    display: flex;
  }
  #btnMenuToggle svg{ width:18px; height:18px; display:block; }

  /* Menú lateral */
  #menuBackdrop{
    position: fixed;
    inset: 0;
    background: rgba(15,25,25,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 40;
  }
  #menuBackdrop.open{ opacity: 1; pointer-events: auto; }

  /* Menú "de cristal": semitransparente con desenfoque en vez de un
     panel sólido — pedido explícitamente en vez de la alternativa de
     auto-ocultar al hacer scroll. */
  #sideMenu{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 80vw;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 50;
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    /* Sin esto, si el contenido (con "Histórico" desplegado) supera
       el alto de la pantalla, los últimos elementos del menú quedan
       fuera de la vista sin ninguna forma de llegar a ellos -- el
       panel en sí nunca tuvo scroll propio, solo lo tenía el
       desplegable interno de Histórico. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #sideMenu.open{ transform: translateX(0); }

  .side-menu-header{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    padding: 8px 10px 18px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 10px;
  }

  .menu-item{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 12px 10px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .menu-item svg{ width:18px; height:18px; flex-shrink:0; }
  .menu-item.active{ background: rgba(14,124,134,0.1); color: var(--teal-deep); font-weight: 600; }
  .menu-item:hover{ background: rgba(14,124,134,0.06); }
  .menu-item-danger{ color: var(--danger); }
  .menu-item-danger:hover{ background: #FDECEA; }

  .menu-divider{ height: 1px; background: var(--line); margin: 8px 4px; }

  .menu-chevron{ margin-left: auto; width:14px !important; height:14px !important; transition: transform 0.2s ease; }
  .menu-item.open .menu-chevron{ transform: rotate(90deg); }
  /* Antes usaba max-height animado con un valor fijo adivinado (200px,
     luego 400px) -- cada vez que "Histórico" ganaba una opción más
     (Órdenes de trabajo, Anticipos) había que volver a subirlo a
     mano, y mientras tanto las últimas opciones quedaban recortadas
     sin avisar. display:none/block no tiene ningún límite de altura
     que se pueda quedar corto -- "abierto" siempre enseña el
     desplegable entero, cueste lo que cueste de alto (el propio
     scroll de #sideMenu se encarga si no cupiera en pantalla). Se
     pierde la animación de deslizar, se gana que nunca vuelva a
     pasar esto. */
  .submenu{ display: none; }
  .submenu.open{ display: block; }
  .submenu-item{ padding-left: 34px; font-size: 13px; }

  /* Toast de aviso */
  .toast-aviso{
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink);
    color: white;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
    max-width: 85vw;
    text-align: center;
  }
  .toast-aviso.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
  .toast-aviso.toast-error{ background: var(--danger); }

  /* Presupuestos guardados */
  .presupuesto-item{
    background: var(--panel);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
  }
  .presupuesto-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
  .presupuesto-item .cliente{ font-weight:600; color:var(--ink); font-size:14px; }
  .presupuesto-item .meta{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
  .presupuesto-item .total{ font-weight:700; color:var(--ink); font-size:15px; white-space:nowrap; }
  .estado-row{ display:flex; align-items:center; gap:10px; margin-top:10px; }
  .badge{ font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:0.1px; }
  /* Relleno sólido en vez de fondo pálido + texto de color — a simple
     vista (sin tener que leer la palabra) se distingue el estado. */
  .badge-enviado{ background:#3C6E9E; color:#fff; }
  .badge-aceptado{ background:#1F8A5A; color:#fff; }
  .badge-rechazado{ background:var(--danger); color:#fff; }
  .badge-confirmada{ background:#3C6E9E; color:#fff; }
  .badge-realizada{ background:#1F8A5A; color:#fff; }
  .badge-cancelada{ background:var(--danger); color:#fff; }
  .badge-pendiente{ background:transparent; color:var(--ink-soft); border:1px dashed var(--line); }
  /* Estado de una orden de trabajo (Calendario y Órdenes de trabajo)
     — namespace propio para no chocar con badge-pendiente de arriba
     (visitas sin confirmar), que es deliberadamente discreto. */
  .badge-orden-pendiente{ background:#D08A2E; color:#fff; }
  .badge-orden-asignado{ background:#3C6E9E; color:#fff; }
  .badge-orden-realizado{ background:#1F8A5A; color:#fff; }
  .badge-orden-cancelada{ background:var(--danger); color:#fff; }
  .badge-holded{ background: var(--teal-soft); color: var(--teal-deep); }
  .badge-holded-pendiente{ background: transparent; color: var(--ink-soft); border: 1px dashed var(--line); }
  .estado-select{ margin:0; padding:6px 10px; font-size:12px; width:auto; flex:1; }
  .btn-ver-detalle{
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
  }
  .presupuesto-top{ cursor: pointer; }
  .presupuesto-detalle{
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
  }
  .detalle-linea{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ink-soft);
    padding: 3px 0;
  }
  .detalle-linea.discount span:last-child{ color: #7CD9A8; }
  .detalle-linea.detalle-total{
    font-weight: 700;
    color: var(--ink);
    font-size: 13.5px;
    border-top: 1px solid var(--line);
    margin-top: 6px;
    padding-top: 8px;
  }
  .detalle-notas{ font-size:12px; color:var(--ink-soft); margin-top:8px; font-style:italic; }

  /* Fotos — trabajos.js / visitas.js, vía fotos.js */
  .fotos-seccion{ margin-top:10px; }
  .fotos-titulo{ font-size:12px; color:var(--ink-soft); font-weight:600; margin-bottom:6px; }
  .fotos-grid{ display:flex; flex-wrap:wrap; gap:8px; }
  .foto-mini{
    position: relative;
    width: 64px; height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
    border: 1px solid var(--line);
  }
  .foto-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
  .foto-mini-borrar{
    position: absolute; top:2px; right:2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(15,25,25,0.65);
    color: white;
    border: none;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    padding: 0;
    cursor: pointer;
  }
  .foto-anadir{
    width: 64px; height: 64px;
    border-radius: 8px;
    border: 1.5px dashed var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--ink-soft);
    cursor: pointer;
    flex-shrink: 0;
  }
  .btn-duplicar{
    width: 100%;
    background: var(--teal);
    color: white;
    border: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 12px;
  }

  /* Extras del presupuesto */
  .extra-row{
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
  }
  .extra-row .extra-concepto{ flex: 2; margin: 0; }
  .extra-row .extra-precio{ flex: 1; margin: 0; }
  .extra-row .extra-quitar{
    background: #FDECEA;
    color: var(--danger);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
  }
  #btnAnadirExtra{
    width: 100%;
    background: white;
    color: var(--teal);
    border: 1.5px dashed var(--teal);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
  }
  /* "Proponer este modelo para el catálogo" — mismo botón en split/aire,
     calefacción y radiadores, antes desincronizado de sus ids reales
     (#btnProponerModelo no existía, quedó huérfano tras un rename). */
  .btn-proponer{
    width: 100%;
    background: white;
    color: var(--teal);
    border: 1.5px solid var(--teal);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
  }
  .btn-proponer:hover{ background: rgba(14,124,134,0.05); }
  .btn-proponer:active{ transform: scale(0.98); }
  .btn-proponer:disabled{ opacity: 0.6; cursor: not-allowed; }

  /* "+ Añadir" / "+ Nueva visita" — pastilla rellena, pequeña, junto a
     un título de pantalla. */
  .btn-pill{
    background: var(--teal);
    color: white;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  .btn-pill:hover{ background: var(--teal-deep); box-shadow: var(--shadow); }
  .btn-pill:active{ transform: scale(0.96); }

  /* Panel admin */
  .propuesta-item{
    background: var(--panel);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
  }
  .propuesta-item .marca{ font-weight: 600; color: var(--ink); font-size: 14px; }
  .propuesta-item .meta{ font-size: 12px; color: var(--ink-soft); margin: 4px 0 10px; }
  .propuesta-item .acciones{ display:flex; gap: 8px; }
  .btn-aprobar, .btn-rechazar{
    flex: 1;
    border: none;
    padding: 9px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .btn-aprobar{ background: var(--teal); color: white; }
  .btn-rechazar{ background: #FDECEA; color: var(--danger); }
  .btn-aprobar:disabled, .btn-rechazar:disabled{ opacity: 0.5; cursor: not-allowed; }
  /* Barra de filtros (Presupuestos / Facturas) */
  .filtro-bar{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }
  .filtro-bar > input[type=text]{
    flex-basis: 100%;
    margin: 0;
  }
  .filtro-fechas{
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .filtro-fechas input[type=date]{
    flex: 1;
    padding: 10px 8px;
    border-radius: 10px;
    border: 1.5px solid var(--line);
    font-size: 13px;
    font-family: inherit;
    background: #FBFCFC;
    color: var(--ink);
  }
  .filtro-fechas span{ color: var(--ink-soft); font-size: 12px; }
  .filtro-bar > button{
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
  }
  #btnFiltrarPresupuestos, #btnFiltrarFacturas{
    background: var(--teal);
    color: white;
  }
  #btnLimpiarFiltroPresupuestos, #btnLimpiarFiltroFacturas{
    background: transparent;
    border: 1px solid var(--line) !important;
    color: var(--ink-soft);
  }

  /* Badges de estado de factura */
  .badge-pendiente_cobro{ background:#FCEEDC; color:#8A5411; }
  .badge-cobrada{ background:#E7F5EE; color:#1F8A5A; }

  /* Botones de acción en el detalle de presupuesto/factura/gasto —
     mismo estilo para todas las acciones "positivas" (ver, descargar,
     enviar), sin dejar ninguna sin clase real como pasó aquí antes. */
  .btn-duplicar, .btn-descargar-pdf-factura, .btn-descargar-pdf,
  .btn-ver-factura-desde-presupuesto, .btn-enviar-holded, .btn-enviar-holded-gasto,
  .btn-ver-adjunto-gasto{
    width: 100%;
    background: var(--teal);
    color: white;
    border: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 12px;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  .btn-duplicar:hover, .btn-descargar-pdf-factura:hover, .btn-descargar-pdf:hover,
  .btn-ver-factura-desde-presupuesto:hover, .btn-enviar-holded:hover, .btn-enviar-holded-gasto:hover,
  .btn-ver-adjunto-gasto:hover{ background: var(--teal-deep); box-shadow: var(--shadow); }
  .btn-duplicar:active, .btn-descargar-pdf-factura:active, .btn-descargar-pdf:active,
  .btn-ver-factura-desde-presupuesto:active, .btn-enviar-holded:active, .btn-enviar-holded-gasto:active,
  .btn-ver-adjunto-gasto:active{ transform: scale(0.98); }
  .btn-enviar-holded:disabled, .btn-enviar-holded-gasto:disabled{ opacity: 0.6; cursor: not-allowed; }
  .btn-emitir-factura{
    width: 100%;
    background: var(--amber);
    color: #3A2405;
    border: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 12px;
  }
  .btn-whatsapp-factura{
    width: 100%;
    background: #25D366;
    color: #0B2E1B;
    border: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 8px;
  }
  .btn-borrar, .btn-anular-factura{
    width: 100%;
    background: transparent;
    color: var(--danger);
    border: 1.5px solid var(--danger);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 16px;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  .btn-borrar:hover, .btn-anular-factura:hover{ background: rgba(196,71,42,0.08); box-shadow: var(--shadow); }
  .btn-borrar:active, .btn-anular-factura:active{ transform: scale(0.98); }

  /* Modal de emisión de factura / asignación de trabajo / perfil / visita (mismo estilo) */
  #facturaModalBackdrop, #trabajoModalBackdrop, #perfilModalBackdrop, #visitaModalBackdrop, #equipoModalBackdrop, #gastoModalBackdrop, #parteModalBackdrop, #categoriaModalBackdrop, #proveedorModalBackdrop, #ayudaModalBackdrop, #rd115ModalBackdrop{
    position: fixed;
    inset: 0;
    background: rgba(15,25,25,0.55);
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 60;
    opacity: 0;
    transition: opacity .18s ease;
  }
  #facturaModalBackdrop.modal-open, #trabajoModalBackdrop.modal-open,
  #perfilModalBackdrop.modal-open, #visitaModalBackdrop.modal-open,
  #equipoModalBackdrop.modal-open, #gastoModalBackdrop.modal-open, #parteModalBackdrop.modal-open, #categoriaModalBackdrop.modal-open, #proveedorModalBackdrop.modal-open, #ayudaModalBackdrop.modal-open, #rd115ModalBackdrop.modal-open{
    opacity: 1;
  }
  #facturaModal, #trabajoModal, #perfilModal, #visitaModal, #equipoModal, #gastoModal, #parteModal, #categoriaModal, #proveedorModal, #ayudaModal, #rd115Modal{
    background: var(--panel);
    border-radius: var(--radius);
    padding: 22px 20px;
    max-width: 420px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    transform: translateY(12px) scale(0.98);
    transition: transform .18s ease;
  }
  #facturaModalBackdrop.modal-open #facturaModal,
  #trabajoModalBackdrop.modal-open #trabajoModal,
  #perfilModalBackdrop.modal-open #perfilModal,
  #visitaModalBackdrop.modal-open #visitaModal,
  #equipoModalBackdrop.modal-open #equipoModal,
  #gastoModalBackdrop.modal-open #gastoModal,
  #parteModalBackdrop.modal-open #parteModal,
  #categoriaModalBackdrop.modal-open #categoriaModal,
  #proveedorModalBackdrop.modal-open #proveedorModal,
  #ayudaModalBackdrop.modal-open #ayudaModal,
  #rd115ModalBackdrop.modal-open #rd115Modal{
    transform: translateY(0) scale(1);
  }
  #facturaModal label:first-of-type, #trabajoModal label:first-of-type, #perfilModal label:first-of-type, #visitaModal label:first-of-type, #equipoModal label:first-of-type, #gastoModal label:first-of-type, #parteModal label:first-of-type, #categoriaModal label:first-of-type, #proveedorModal label:first-of-type{ margin-top: 0; }
  #facturaModalMsg, #trabajoModalMsg, #perfilModalMsg, #visitaModalMsg, #equipoModalMsg, #gastoModalMsg, #parteModalMsg, #categoriaModalMsg, #proveedorModalMsg{ border-radius: 8px; padding: 8px 10px; background: rgba(196,71,42,0.08); }

  /* Ayuda (pantalla "Ayuda" + iconos "?") — contenido corto, no
     invasivo: el icono no ocupa casi sitio y el modal reutiliza el
     mismo backdrop/animación que el resto de modales de la app. */
  .ayuda-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--teal-soft);
    color: var(--teal-deep);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    padding: 0;
  }
  .ayuda-icon:hover{ background: var(--teal); color: white; border-color: var(--teal); }
  .ayuda-modal-cuerpo p{ font-size: 13.5px; color: var(--ink); line-height: 1.5; margin: 0 0 10px; }
  .ayuda-modal-cuerpo p:last-child{ margin-bottom: 0; }

  details.ayuda-tema{
    background: var(--panel);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
  }
  details.ayuda-tema summary{
    font-weight: 600;
    color: var(--ink);
    font-size: 14px;
    cursor: pointer;
    list-style: none;
  }
  details.ayuda-tema summary::-webkit-details-marker{ display: none; }
  details.ayuda-tema summary::before{ content: '▸'; display: inline-block; margin-right: 8px; color: var(--teal); transition: transform .15s ease; }
  details.ayuda-tema[open] summary::before{ transform: rotate(90deg); }
  details.ayuda-tema p{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin: 10px 0 0; }
  details.ayuda-tema p:first-of-type{ margin-top: 12px; }
  .ayuda-badge-admin{
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 1px 7px;
    margin-left: 4px;
  }

  /* Canvas de firma del parte de trabajo — a mano, sin librería */
  #parteFirmaCanvas{
    width: 100%; height: 150px; display: block;
    border: 1.5px solid var(--line); border-radius: 8px;
    background: #fff; touch-action: none; cursor: crosshair;
    margin-top: 6px;
  }

  /* Calendario: asignar trabajo / marcar como realizado */
  .btn-asignar-trabajo{
    width: 100%;
    background: var(--teal);
    color: white;
    border: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 12px;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  .btn-asignar-trabajo:hover{ background: var(--teal-deep); box-shadow: 0 4px 14px rgba(14,124,134,0.25); }
  .btn-asignar-trabajo:active{ transform: scale(0.98); }
  .btn-marcar-realizado, .btn-marcar-realizado-sel, .btn-finalizar-orden{
    width: 100%;
    background: #1F8A5A;
    color: white;
    border: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  .btn-marcar-realizado:hover, .btn-marcar-realizado-sel:hover, .btn-finalizar-orden:hover{ background: #187047; box-shadow: 0 4px 14px rgba(31,138,90,0.25); }
  .btn-marcar-realizado:active, .btn-marcar-realizado-sel:active, .btn-finalizar-orden:active{ transform: scale(0.98); }

  header{ position: relative; }

  /* Calendario (FullCalendar) — que encaje con la tipografía y los
     colores del resto de la app, y quepa bien en pantallas de móvil. */
  #calendarioGrid{
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    margin-bottom: 8px;
  }
  #calendarioGrid .fc-toolbar-title{
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
  }
  #calendarioGrid .fc-button{
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--ink);
    box-shadow: none;
    padding: 4px 8px;
    font-size: 12px;
    text-transform: capitalize;
  }
  #calendarioGrid .fc-button-primary:not(:disabled).fc-button-active,
  #calendarioGrid .fc-button-primary:not(:disabled):active{
    background: var(--teal);
    border-color: var(--teal);
    color: white;
  }
  #calendarioGrid .fc-toolbar{
    flex-wrap: wrap;
    gap: 8px;
  }
  #calendarioGrid .fc-event{
    border: none;
    cursor: grab;
    font-size: 11px;
    padding: 1px 3px;
  }
  #calendarioGrid .fc-event.fc-evento-realizado{
    opacity: 0.6;
  }
  .tab-toggle{
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  .tab-toggle:hover:not(.tab-toggle-active){ border-color: var(--teal); color: var(--teal-deep); }
  .tab-toggle-active{
    background: var(--teal);
    border-color: var(--teal);
    color: white;
  }
  /* Pestaña "Calderas" en Equipos — calor, no frío: mismo ámbar que
     ya usan los tiles y tarjetas de calefacción, no el teal genérico. */
  .tab-toggle.amber:hover:not(.tab-toggle-active){ border-color: var(--amber); color: #8A5411; }
  .tab-toggle-active.amber{
    background: var(--amber);
    border-color: var(--amber);
    color: #3A2405;
  }
  /* .btn-editar-trabajo ya no lleva estilo propio — se usa .btn-secondary
     para el aspecto; el nombre de clase se conserva solo como gancho de
     selección delegada en trabajos.js/visitas.js. */

  /* Dashboard */
  .dash-cards{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .dash-card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: var(--shadow);
  }
  .dash-card-valor{
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
  }
  .dash-card-label{
    font-size: 11.5px;
    color: var(--ink-soft);
    margin-top: 2px;
  }
  .dash-card-alert .dash-card-valor{ color: var(--danger); }

  /* Fundido al cambiar de pantalla (menu.js, mostrarPantalla) — antes
     era un display:none/block seco, sin transición. */
  .pantalla-entrando{ animation: pantallaFadeIn .22s ease; }
  @keyframes pantallaFadeIn{
    from{ opacity: 0; transform: translateY(8px); }
    to{ opacity: 1; transform: translateY(0); }
  }

  /* Skeleton de carga (core.js, skeletonHtml) — sustituye al texto
     plano "Cargando…" en las pantallas de listado. */
  .skeleton-line{
    height: 52px;
    border-radius: var(--radius);
    margin-bottom: 10px;
    background: linear-gradient(90deg, var(--line) 25%, #EEF2F2 37%, var(--line) 63%);
    background-size: 400% 100%;
    animation: skeletonShimmer 1.4s ease infinite;
  }
  @keyframes skeletonShimmer{
    0%{ background-position: 100% 50%; }
    100%{ background-position: 0 50%; }
  }

  /* Chips de "esto ha entendido la IA" (ia.js) — aparecen uno a uno
     antes de saltar al presupuesto ya relleno. */
  .chip-ia{ animation: chipPop .28s ease backwards; }
  @keyframes chipPop{
    from{ opacity: 0; transform: translateY(4px) scale(0.94); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Foco visible consistente en toda la app — antes dependía del
     estilo por defecto del navegador, inconsistente entre elementos. */
  :focus-visible{
    outline: 2px solid var(--teal);
    outline-offset: 2px;
  }

  /* Pantalla de Inicio — cuadrícula de accesos directos, cada tile
     lleva a una pantalla que ya existe (ver mostrarVistaInicio en
     menu.js). Los tiles ocultos por rol usan display:none, igual que
     sus gemelos del menú lateral. */
  #inicioScreen{ padding: 16px; }
  .hub-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 4px 0 16px;
  }
  .hub-tile{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: var(--shadow);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
  }
  .hub-tile svg{
    width: 22px; height: 22px; stroke: var(--teal-deep);
    padding: 9px; box-sizing: content-box; border-radius: 50%;
    background: var(--teal-soft);
  }
  .hub-tile:hover{ border-color: var(--teal); background: rgba(14,124,134,0.05); }
  .hub-tile:active{ transform: scale(0.97); }

  /* "Nuevo presupuesto" es lo que se pulsa en la mayoría de las
     visitas — se le da el peso visual que ya tenía en uso real pero
     no en pantalla, en vez de pesar igual que los otros diez accesos. */
  .hub-tile.hero{
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 12px;
    padding: 20px;
    background: var(--teal);
    border-color: var(--teal);
    color: white;
    font-size: 14.5px;
  }
  .hub-tile.hero svg{ background: rgba(255,255,255,0.18); stroke: white; }
  .hub-tile.hero:hover{ background: var(--teal-deep); border-color: var(--teal-deep); }

  /* Inicio en móvil — pantalla fija tipo app (sin scroll en ningún
     sentido, como pidió Manu comparándolo con Coliseum): la cabecera
     ocupa su alto natural y los tiles se reparten el resto exacto de
     la pantalla a partes iguales, sea cual sea el móvil. Solo se activa
     con la clase que pone menu.js al mostrar Inicio — el resto de
     pantallas siguen con scroll normal, sin tocarlas. */
  @media (max-width: 1023px){
    html.pantalla-inicio, body.pantalla-inicio{
      height: 100vh; height: 100dvh;
      overflow: hidden;
    }
    body.pantalla-inicio{
      padding-bottom: 0;
    }
    body.pantalla-inicio #appContent{
      display: flex;
      flex-direction: column;
      height: 100vh; height: 100dvh;
    }
    body.pantalla-inicio header{ flex: 0 0 auto; }
    body.pantalla-inicio #inicioScreen{
      display: flex !important;
      flex: 1 1 auto;
      min-height: 0;
      flex-direction: column;
      padding: 10px 16px 14px;
      overflow: hidden;
    }
    body.pantalla-inicio .hub-grid{
      /* .screen-wide (max-width:560px + margin:0 auto) está pensado
         para cuando es un hijo normal de bloque, donde "auto" no
         encoge nada por debajo del ancho del contenedor. Al pasar
         #inicioScreen a flex, ese margin:auto sí se respeta como
         margen automático de flex item y encoge la rejilla a su
         contenido — de ahí el hueco enorme a los lados. Se anula aquí. */
      width: 100%;
      max-width: none;
      margin: 0;
      flex: 1 1 auto;
      min-height: 0;
      grid-auto-rows: minmax(0, 1fr);
      gap: 8px;
      padding: 0;
    }
    body.pantalla-inicio .hub-tile{
      padding: 6px;
      gap: 4px;
      font-size: 12px;
    }
    body.pantalla-inicio .hub-tile svg{ width: 18px; height: 18px; padding: 6px; }
    body.pantalla-inicio .hub-tile.hero{ padding: 14px; font-size: 13.5px; }

    /* El pie con el aviso de precios y los enlaces legales no pintan
       nada en un menú de inicio — y sobre todo, le quitan alto a los
       tiles hasta forzar scroll. Se quedan para el resto de pantallas. */
    body.pantalla-inicio #footerText,
    body.pantalla-inicio #legalLinksFooter{
      display: none;
    }

    /* Inicio en móvil, recorte de accesos directos: estos 8 se
       agrupan en Histórico o se quedan solo en el menú burger — el
       :root/JS de rol los reactiva con display:flex, de ahí el
       !important para forzar el hueco libre en pantallas pequeñas.
       En PC (media query de abajo) siguen todos, sin tocar nada. */
    #tileOrdenes, #tileVisitas, #tilePresupuestos, #tileGastos,
    #tileFacturas, #tileProveedores, #tileMiPerfil, #tilePrecios{
      display: none !important;
    }
  }

  #loadingScreen{
    min-height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--ink-soft);
    font-size: 14px;
  }

  /* Contenedor compartido por las pantallas de listado/gestión (antes
     era un style="max-width:560px; margin:0 auto;" repetido a mano en
     cada pantalla) — en móvil se comporta exactamente igual que antes. */
  .screen-wide{ max-width: 560px; margin: 0 auto; }

  /* Cabecera de columnas de las listas de presupuestos/facturas — solo
     tiene sentido en PC, donde las filas están en formato tabla (ver
     media query de escritorio más abajo). */
  .list-head-row{
    display: none;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    padding: 0 16px 6px;
  }

  /* ============================================================
     ESCRITORIO — a partir de aquí, todo pensado para pantallas con
     sitio de sobra. Por debajo de este ancho no cambia nada respecto
     al comportamiento móvil de arriba.
     ============================================================ */
  @media (min-width: 1024px){

    /* Sidebar fija en vez de menú hamburguesa */
    #sideMenu{
      transform: translateX(0);
      box-shadow: none;
      border-right: 1px solid var(--line);
    }
    #menuBackdrop{ display: none; }
    #btnMenuToggle{ display: none; }
    #appContent{ margin-left: 260px; }

    /* Contenedores más anchos */
    .screen-wide{ max-width: 1100px; }
    main{ max-width: 760px; }

    /* Listas de presupuestos/facturas: fila tipo tabla en vez de
       tarjeta apilada. El div sin clase que envuelve cliente/tipo/
       contacto "desaparece" del layout y sus hijos pasan a ser
       columnas del grid, junto al total — sin tocar presupuestos.js
       ni facturas.js. */
    .list-head-row{
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr auto;
      column-gap: 16px;
    }
    .presupuesto-top > div:first-child{ display: contents; }
    .presupuesto-top{
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr auto;
      align-items: center;
      column-gap: 16px;
    }
    /* Las facturas no tienen tipo_label — su fila trae un dato menos
       (cliente, contacto, total) que la de presupuestos, así que
       necesitan su propio número de columnas o el total se cuela
       bajo la columna "Contacto". */
    .list-head-row-factura,
    .factura-item .presupuesto-top{
      grid-template-columns: 1.6fr 1fr auto;
    }

    /* Formularios en 2 columnas — presupuestador y modales. Todo a
       ancho completo por defecto; solo los pares label+input/select
       adyacentes se colocan uno junto a otro. */
    .card,
    #facturaModal, #trabajoModal, #perfilModal, #visitaModal, #equipoModal, #gastoModal, #parteModal, #proveedorModal{
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 20px;
    }
    .card > *,
    #facturaModal > *, #trabajoModal > *, #perfilModal > *, #visitaModal > *, #equipoModal > *, #gastoModal > *, #parteModal > *, #proveedorModal > *{
      grid-column: 1 / -1;
    }
    .card > label + input, .card > label + select,
    #facturaModal label + input, #facturaModal label + select,
    #trabajoModal label + input, #trabajoModal label + select,
    #perfilModal label + input, #perfilModal label + select,
    #visitaModal label + input, #visitaModal label + select,
    #equipoModal label + input, #equipoModal label + select,
    #gastoModal label + input, #gastoModal label + select,
    #parteModal label + input, #parteModal label + select,
    #proveedorModal label + input, #proveedorModal label + select{
      grid-column: auto;
    }

    /* Modales más anchos, con más contexto visible */
    #facturaModal, #trabajoModal, #perfilModal, #visitaModal, #equipoModal, #gastoModal, #parteModal, #categoriaModal, #proveedorModal, #ayudaModal{
      max-width: 640px;
    }

    /* Dashboard: más densidad de KPIs por fila */
    .dash-cards{
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    /* Inicio: 4 columnas en vez de 2, tiles de tamaño uniforme */
    .hub-grid{
      grid-template-columns: repeat(4, 1fr);
    }

    /* El tile "Histórico" solo existe para recortar accesos en móvil
       (ver media query de arriba) — en PC ya están todos los accesos
       directos sueltos, así que no hace falta agruparlos. */
    #tileHistorico{ display: none; }
  }