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

:root {
   --color-bg: #0f1117;
   --color-surface: #1a1d27;
   --color-surface2: #222636;
   --color-border: #2e3347;
   --color-accent: #3b82f6;
   --color-accent-hover: #2563eb;
   --color-success: #22c55e;
   --color-danger: #ef4444;
   --color-warning: #f59e0b;
   --color-text: #e2e8f0;
   --color-text-muted: #64748b;
   --color-sidebar: #13151f;
   --radius: 10px;
   --shadow: 0 4px 20px rgba(0,0,0,.4);
}

html, body {
   height: 100%;
   font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
   background: var(--color-bg);
   color: var(--color-text);
   font-size: 14px;
}

/* ── Layout principal ──────────────────────────────────────────────────── */
.app-layout {
   display: flex;
   height: 100vh;
   overflow: hidden;
}

.app-sidebar {
   width: 200px;
   background: var(--color-sidebar);
   border-right: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
   padding: 20px 0;
   flex-shrink: 0;
}

.app-main {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.app-header {
   padding: 16px 24px;
   border-bottom: 1px solid var(--color-border);
   background: var(--color-surface);
}

.app-title {
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--color-text);
   letter-spacing: .3px;
}
.app-title:focus { outline: none; }

.app-content {
   flex: 1;
   overflow-y: auto;
   padding: 24px;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar-brand {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0 20px 20px;
   border-bottom: 1px solid var(--color-border);
   margin-bottom: 16px;
}

.brand-icon { font-size: 1.4rem; }
.brand-name { font-weight: 700; font-size: .95rem; color: var(--color-text); }

.sidebar-nav { padding: 0 12px; }

.sidebar-nav .nav-link {
   display: block;
   padding: 9px 14px;
   border-radius: 7px;
   color: var(--color-text-muted);
   text-decoration: none;
   font-size: .88rem;
   transition: background .15s, color .15s;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
   background: var(--color-surface2);
   color: var(--color-text);
}

/* ── Toolbar superior ─────────────────────────────────────────────────── */
.page-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
}

.modbus-status {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 7px 14px;
   border-radius: 20px;
   font-size: .85rem;
   border: 1px solid var(--color-border);
}

.modbus-conectado { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: var(--color-success); }
.modbus-sin-clientes { background: var(--color-surface); color: var(--color-text-muted); }

.modbus-dot {
   width: 8px; height: 8px;
   border-radius: 50%;
   background: currentColor;
}
.modbus-conectado .modbus-dot { animation: pulse 1.5s ease-in-out infinite; }

@keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: .4; }
}

.btn-reset-general {
   padding: 8px 18px;
   border-radius: 7px;
   border: 1px solid var(--color-border);
   background: var(--color-surface);
   color: var(--color-text);
   font-size: .85rem;
   cursor: pointer;
   transition: background .15s, border-color .15s;
}
.btn-reset-general:hover { background: var(--color-surface2); border-color: var(--color-accent); }

/* ── Grid de celdas ───────────────────────────────────────────────────── */
.celdas-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 18px;
}

/* ── Tarjeta de celda ─────────────────────────────────────────────────── */
.celda-card {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius);
   padding: 18px;
   display: flex;
   flex-direction: column;
   gap: 16px;
   box-shadow: var(--shadow);
   transition: border-color .2s;
}
.celda-activa { border-color: rgba(59,130,246,.5); }

.celda-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.celda-titulo {
   font-size: 1rem;
   font-weight: 700;
   color: var(--color-text);
}

.celda-estado-badge {
   font-size: .7rem;
   font-weight: 700;
   padding: 3px 10px;
   border-radius: 12px;
   letter-spacing: .5px;
}
.badge-on { background: rgba(34,197,94,.15); color: var(--color-success); border: 1px solid rgba(34,197,94,.3); }
.badge-off { background: rgba(100,116,139,.15); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ── Contador ─────────────────────────────────────────────────────────── */
.celda-contador {
   text-align: center;
   padding: 12px 0;
   background: var(--color-surface2);
   border-radius: 8px;
}
.contador-valor {
   display: block;
   font-size: 2.2rem;
   font-weight: 800;
   font-variant-numeric: tabular-nums;
   color: var(--color-accent);
   line-height: 1;
}
.contador-label {
   font-size: .75rem;
   color: var(--color-text-muted);
   margin-top: 4px;
   display: block;
}

/* ── Controles ────────────────────────────────────────────────────────── */
.btn-group-control {
   display: flex;
   gap: 8px;
}

.btn-group-control button {
   flex: 1;
   padding: 7px 4px;
   border-radius: 7px;
   border: 1px solid transparent;
   cursor: pointer;
   font-size: .8rem;
   font-weight: 600;
   transition: all .15s;
}
.btn-group-control button:disabled { opacity: .4; cursor: not-allowed; }

.btn-iniciar { background: rgba(34,197,94,.15); color: var(--color-success); border-color: rgba(34,197,94,.3); }
.btn-iniciar:not(:disabled):hover { background: rgba(34,197,94,.3); }

.btn-detener { background: rgba(239,68,68,.15); color: var(--color-danger); border-color: rgba(239,68,68,.3); }
.btn-detener:not(:disabled):hover { background: rgba(239,68,68,.3); }

.btn-reset { background: var(--color-surface2); color: var(--color-text-muted); border-color: var(--color-border); }
.btn-reset:hover { background: var(--color-border); color: var(--color-text); }

/* ── Velocidad ────────────────────────────────────────────────────────── */
.velocidad-control { display: flex; flex-direction: column; gap: 6px; }
.velocidad-label { font-size: .82rem; color: var(--color-text-muted); }
.velocidad-label strong { color: var(--color-text); }

.velocidad-slider {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   height: 4px;
   border-radius: 2px;
   background: var(--color-border);
   outline: none;
   cursor: pointer;
}
.velocidad-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 16px; height: 16px;
   border-radius: 50%;
   background: var(--color-accent);
   cursor: pointer;
   transition: background .15s;
}
.velocidad-slider::-webkit-slider-thumb:hover { background: var(--color-accent-hover); }

.velocidad-marks {
   display: flex;
   justify-content: space-between;
   font-size: .68rem;
   color: var(--color-text-muted);
}

/* ── Torreta de luces ─────────────────────────────────────────────────── */
.torreta-seccion {
   border-top: 1px solid var(--color-border);
   padding-top: 14px;
}

.torreta-titulo {
   display: block;
   font-size: .75rem;
   font-weight: 600;
   color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: .6px;
   margin-bottom: 10px;
}

.torreta-luces {
   display: flex;
   justify-content: space-around;
}

.luz-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px;
   font-size: .7rem;
   color: var(--color-text-muted);
}

/* ── LEDs ─────────────────────────────────────────────────────────────── */
.led {
   width: 18px; height: 18px;
   border-radius: 50%;
   border: 2px solid rgba(255,255,255,.1);
   transition: box-shadow .2s;
}

.led-off { background: #1e2235; }

.led-verde.led-on   { background: #22c55e; box-shadow: 0 0 8px #22c55e, 0 0 20px rgba(34,197,94,.4); }
.led-rojo.led-on    { background: #ef4444; box-shadow: 0 0 8px #ef4444, 0 0 20px rgba(239,68,68,.4); }
.led-amarillo.led-on{ background: #f59e0b; box-shadow: 0 0 8px #f59e0b, 0 0 20px rgba(245,158,11,.4); }
.led-azul.led-on    { background: #3b82f6; box-shadow: 0 0 8px #3b82f6, 0 0 20px rgba(59,130,246,.4); }

.led-verde.led-blink    { background: #22c55e; animation: blink-verde 0.8s step-end infinite; }
.led-rojo.led-blink     { background: #ef4444; animation: blink-rojo 0.8s step-end infinite; }
.led-amarillo.led-blink { background: #f59e0b; animation: blink-amarillo 0.8s step-end infinite; }
.led-azul.led-blink     { background: #3b82f6; animation: blink-azul 0.8s step-end infinite; }

@keyframes blink-verde    { 0%,100%{background:#22c55e;box-shadow:0 0 8px #22c55e;} 50%{background:#1e2235;box-shadow:none;} }
@keyframes blink-rojo     { 0%,100%{background:#ef4444;box-shadow:0 0 8px #ef4444;} 50%{background:#1e2235;box-shadow:none;} }
@keyframes blink-amarillo { 0%,100%{background:#f59e0b;box-shadow:0 0 8px #f59e0b;} 50%{background:#1e2235;box-shadow:none;} }
@keyframes blink-azul     { 0%,100%{background:#3b82f6;box-shadow:0 0 8px #3b82f6;} 50%{background:#1e2235;box-shadow:none;} }

/* ── Sirena ───────────────────────────────────────────────────────────── */
.sirena-icono { font-size: 1.2rem; }
.sirena-activa { animation: sirena-shake .5s ease-in-out infinite; }
@keyframes sirena-shake {
   0%,100%{transform:rotate(0deg);}
   25%{transform:rotate(-15deg);}
   75%{transform:rotate(15deg);}
}

/* ── Pasar gafete ─────────────────────────────────────────────────────── */
.gafete-seccion {
   border-top: 1px solid var(--color-border);
   padding-top: 14px;
}

.gafete-titulo {
   display: block;
   font-size: .75rem;
   font-weight: 600;
   color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: .6px;
   margin-bottom: 10px;
}

.gafete-botones {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.btn-gafete {
   padding: 6px 12px;
   border-radius: 7px;
   border: 1px solid var(--color-border);
   background: var(--color-surface2);
   color: var(--color-text);
   font-size: .78rem;
   font-weight: 600;
   cursor: pointer;
   transition: background .15s, border-color .15s;
}
.btn-gafete:hover { background: var(--color-border); border-color: var(--color-accent); }

/* ── Cargando ─────────────────────────────────────────────────────────── */
.cargando {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 300px;
   gap: 16px;
   color: var(--color-text-muted);
}

.spinner {
   width: 36px; height: 36px;
   border: 3px solid var(--color-border);
   border-top-color: var(--color-accent);
   border-radius: 50%;
   animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Scrollbar ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

/* ── Mensaje de error de Blazor (oculto salvo que ocurra un error real) ── */
#blazor-error-ui {
   background: lightyellow;
   bottom: 0;
   box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
   display: none;
   left: 0;
   padding: 0.6rem 1.25rem 0.7rem 1.25rem;
   position: fixed;
   width: 100%;
   z-index: 1000;
}

#blazor-error-ui .dismiss {
   cursor: pointer;
   position: absolute;
   right: 0.75rem;
   top: 0.5rem;
}

/* ── Botón de menú (sidebar abatible en móvil) ───────────────────────── */
.app-header {
   display: flex;
   align-items: center;
}

.btn-menu {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 4px;
   width: 34px;
   height: 34px;
   border: 1px solid var(--color-border);
   border-radius: 7px;
   background: var(--color-surface2);
   cursor: pointer;
   margin-right: 14px;
   flex-shrink: 0;
}
.btn-menu span {
   display: block;
   width: 18px;
   height: 2px;
   background: var(--color-text);
   margin: 0 auto;
}

.app-overlay { display: none; }

@media (max-width: 768px) {
   .btn-menu { display: flex; }

   .app-sidebar {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 100;
      transform: translateX(-100%);
      transition: transform .2s ease;
   }

   .sidebar-abierta .app-sidebar {
      transform: translateX(0);
      box-shadow: var(--shadow);
   }

   .sidebar-abierta .app-overlay {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 99;
   }
}