* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; color: #111; }
header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid #eee; }
header h1 { margin: 0; font-size: 18px; }
.actions button { margin-left: 8px; }

main { display: grid; grid-template-columns: 2fr 1fr; height: calc(100vh - 56px); }
#map { width: 100%; height: 100%; }
#panel { padding: 12px; overflow-y: auto; border-left: 1px solid #eee; }

#station-info { margin-bottom: 12px; }
#station-info .title { font-weight: 600; margin-bottom: 4px; }
#series, #forecast { margin-top: 12px; }
pre { background: #fafafa; padding: 8px; border: 1px solid #eee; overflow-x: auto; }

#chatbot { margin-top: 16px; border-top: 1px solid #eee; padding-top: 12px; }
#chatbot textarea { width: 100%; min-height: 80px; padding: 8px; }
.row { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.upload input { display: none; }
.upload { background: #f0f0f0; border: 1px solid #ddd; padding: 6px 10px; border-radius: 4px; cursor: pointer; }
button { cursor: pointer; padding: 6px 10px; border-radius: 4px; border: 1px solid #ddd; background: white; }
button:hover { background: #f7f7f7; }

.chat-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #0055cc;
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.chat-window {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 360px;
  max-height: 600px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  background-color: #0055cc;
  color: white;
  padding: 2px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-header .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 8px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: #f9f9f9;
}

.chat-message {
  max-width: 80%;
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 12px;
  line-height: 1.4;
}

.user-message {
  background-color: #0055cc;
  color: white;
  align-self: flex-end;
}

.bot-message {
  background-color: #e6e6e6;
  color: #333;
  align-self: flex-start;
}

.chat-input {
  display: flex;
  border-top: 1px solid #ddd;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
}

.chat-input button {
  background-color: #0055cc;
  color: white;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
}


.icon-btn{
  background: transparent; border: 0; color: #344054;
  width: 36px; height: 36px; cursor: pointer;
  display: grid; place-items: center; border-radius: 8px;
}
.icon-btn i{ font-size: 18px; }
.icon-btn:hover{ background: #eef2f7; }

.chat-input-row{
  display: grid; grid-template-columns: 40px 1fr 44px; gap: 8px; align-items: center;
}
#chatText{
  width: 100%; min-height: 44px; max-height: 120px; resize: vertical;
  border: 1px solid #d0d6e1; border-radius: 10px; padding: 10px 12px;
}
.send-btn{
  background: #0A5AC2; color: #fff; border: 0; border-radius: 10px;
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
}
.send-btn i{ font-size: 18px; }
.send-btn:hover{ filter: brightness(1.05); }


    :root{ --panel-bg:#ffffff; --panel-border:#e7e9ee; --panel-shadow:0 8px 24px rgba(18,26,39,.08); }
    html,body{ height:100%; margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#1b1f24; background:#f5f7fb; }
    .app-shell{ display:flex; flex-direction:column; height:100%; }
    .topbar{
      background:#fff; border-bottom:1px solid var(--panel-border); box-shadow:var(--panel-shadow);
      padding:10px 14px; position:sticky; top:0; z-index:100;
    }
    .topbar-inner{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .brand{ font-weight:700; margin-right:8px; }
    .divider{ width:1px; height:28px; background:#e4e7ee; margin:0 6px; }
    .ctrl{ display:flex; align-items:center; gap:8px; }
    .ctrl input, .ctrl select{
      padding:8px 10px; border:1px solid #e2e6ef; border-radius:10px; outline:none; background:#fff;
    }
    .ctrl input:focus, .ctrl select:focus{ border-color:#0A5AC2; box-shadow:0 0 0 3px rgba(10,90,194,.15); }
    .content{ flex:1; display:flex; gap:14px; padding:14px; }
    .panel{
      flex:1; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:14px;
      box-shadow:var(--panel-shadow); overflow:hidden; display:flex; flex-direction:column;
    }*/

    /* altura del mapa */
    #map{ flex:1; min-height: calc(100vh - 160px); }
    /* asegurar chat por encima del mapa */
    .chat-toggle{ z-index:3000; }
    .chat-window{ z-index:2999; }

/* Botón flotante Jarvis: estados */
.jarvis-fab{
  position: fixed; right: 20px; bottom: 20px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #0A5AC2; color: #fff; border: 0;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  z-index: 10000;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease;
}
.jarvis-fab i{ font-size: 22px; line-height: 1; }

/* Hover/Focus: mantenemos fondo oscuro para que el icono blanco se vea bien */
.jarvis-fab:hover,
.jarvis-fab:focus-visible{
  background: #094aa0;    /* un poco más oscuro */
  color: #fff;             /* aseguramos icono blanco */
  filter: brightness(1.02);
  transform: translateY(-1px);
  outline: none;
}

/* Active: feedback rápido sin invertir colores */
.jarvis-fab:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* (Opcional) quitar double-tap highlight en iOS */
.jarvis-fab, .jarvis-fab *{
  -webkit-tap-highlight-color: transparent;
}

.history-row{ margin-top:10px;}

.select {
  max-width: 320px;
}
#item-select:disabled {
  opacity: .6;
  cursor: not-allowed;
}


/* === Marcadores Leaflet con Font Awesome === */
.jarvis-marker {
  /* quita borde/imagen por defecto de Leaflet en <img> */
  background: transparent !important;
  border: 0 !important;
}

.jarvis-marker .marker-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease;
  border: 2px solid rgba(255,255,255,.9);
}

.jarvis-marker .marker-dot i {
  font-size: 14px;            /* tamaño del icono FA */
  line-height: 1;
}

.jarvis-marker:hover .marker-dot {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}

/* Río */
.marker--river .marker-dot {
  background: #5f83b2;        /* azul agua */
}

/* Estación */
.marker--station .marker-dot {
  background: #5f83b2;        /* verde */
}

/* Variante “desactivado” (si quieres) */
.marker--muted .marker-dot {
  filter: grayscale(0.6) brightness(0.9);
  opacity: .7;
}

/* Mejora accesible: foco via teclado */
.leaflet-marker-icon.jarvis-marker:focus-visible .marker-dot {
  outline: 3px solid #ffd54f;
  outline-offset: 2px;
}