/* =====================================================
   SMARTHOME MIKI - Estilos
   Paleta inspirada en el plano 3D del departamento:
   paredes turquesa (#36c9a0), pisos madera, base nocturna.
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500&display=swap');

:root {
  --fondo:      #141821;
  --panel:      #1d2330;
  --panel-2:    #252d3d;
  --borde:      #313b4f;
  --texto:      #e8ecf3;
  --texto-2:    #93a0b4;
  --acento:     #36c9a0;   /* turquesa de las paredes del plano */
  --acento-osc: #1e8a6c;
  --encendido:  #ffd75e;   /* ámbar de foco prendido */
  --peligro:    #ef5350;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}

h1, h2, h3, .marca { font-family: 'Space Grotesk', sans-serif; }

/* ---------- Navegación ---------- */
nav {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  flex-wrap: wrap;
}
nav .marca {
  font-weight: 700; font-size: 18px; margin-right: 18px;
  color: var(--acento); letter-spacing: 0.5px;
}
nav a {
  color: var(--texto-2); text-decoration: none;
  padding: 8px 14px; border-radius: 8px; font-size: 14px;
}
nav a:hover { background: var(--panel-2); color: var(--texto); }
nav a.activa { background: var(--acento-osc); color: #fff; }

main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }

/* ---------- Plano interactivo ---------- */
.plano-wrap {
  position: relative;
  border: 1px solid var(--borde);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
}
.plano-wrap img { display: block; width: 100%; height: auto; }

.marcador {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 2px solid var(--borde);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: box-shadow .4s, border-color .4s, background .4s;
  user-select: none;
}
.marcador.on {
  border-color: var(--encendido);
  background: #4a4020;
  box-shadow: 0 0 18px 6px rgba(255, 215, 94, .45);
}
.marcador.offline { opacity: .45; filter: grayscale(1); }
.marcador.arrastrable { cursor: grab; border-style: dashed; border-color: var(--acento); }
.marcador.arrastrable:active { cursor: grabbing; }

.sin-posicion {
  margin-top: 14px; padding: 12px 14px;
  background: var(--panel); border: 1px dashed var(--borde);
  border-radius: 10px; font-size: 14px; color: var(--texto-2);
}
.sin-posicion .chip {
  display: inline-block; margin: 3px 4px; padding: 5px 10px;
  background: var(--panel-2); border-radius: 16px; cursor: pointer;
}

/* ---------- Tablas ---------- */
table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 12px; overflow: hidden; }
th, td { padding: 11px 14px; text-align: left; font-size: 14px; }
th { background: var(--panel-2); color: var(--texto-2); font-weight: 500; }
tr { border-bottom: 1px solid var(--borde); }
tr:last-child { border-bottom: none; }

/* ---------- Botones ---------- */
button, .btn {
  padding: 9px 16px; border: none; border-radius: 8px;
  font-size: 14px; cursor: pointer;
  background: var(--panel-2); color: var(--texto);
  font-family: inherit;
}
button:hover { filter: brightness(1.15); }
.btn-acento  { background: var(--acento-osc); color: #fff; }
.btn-peligro { background: var(--peligro); color: #fff; }
.btn-mini    { padding: 4px 9px; font-size: 13px; }

.barra-acciones { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }

.badge { padding: 3px 9px; border-radius: 12px; font-size: 12px; }
.badge-ok  { background: rgba(54,201,160,.15); color: var(--acento); }
.badge-off { background: rgba(239,83,80,.15);  color: var(--peligro); }

/* ---------- SweetAlert2 tema oscuro ---------- */
.swal2-popup { background: var(--panel) !important; color: var(--texto) !important; border-radius: 14px !important; }
.swal2-title { color: var(--texto) !important; font-family: 'Space Grotesk', sans-serif !important; }
.swal2-input, .swal2-select {
  background: var(--panel-2) !important; color: var(--texto) !important;
  border: 1px solid var(--borde) !important;
}
.swal2-html-container { color: var(--texto-2) !important; }

.form-swal { display: flex; flex-direction: column; gap: 9px; text-align: left; }
.form-swal label { font-size: 13px; color: var(--texto-2); }
.form-swal input, .form-swal select {
  width: 100%; padding: 9px; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--panel-2); color: var(--texto);
  font-family: inherit;
}
.dias-check { display: flex; gap: 7px; flex-wrap: wrap; }
.dias-check label {
  background: var(--panel-2); padding: 6px 10px; border-radius: 8px;
  cursor: pointer; font-size: 13px; color: var(--texto);
}
.dias-check input:checked + span { color: var(--acento); font-weight: 600; }

@media (max-width: 640px) {
  th, td { padding: 8px 8px; font-size: 13px; }
  .ocultar-movil { display: none; }
}