/* ============================================================
   Reefer Management System — Panel de control (Grafito + Lima)
   Ver DESIGN.md: dos colores estructurales (grafito/lima) + sistema
   de profundidad "raised / pressed". Los colores de estado
   (verde/naranja/rojo) son datos, nunca chrome.
   ============================================================ */
#rms-loadbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; opacity: 0;
  background: linear-gradient(90deg, #8bab10, #c6ff33);
  box-shadow: 0 0 8px rgba(139, 171, 16, .6);
  z-index: 2000; pointer-events: none;
}

:root {
  --navy-950: #0c0d0e;
  --navy-900: #17181b;
  --navy-800: #23261e;
  --navy-700: #33382a;
  --cyan-500: #c6ff33;
  --cyan-400: #d6ff70;
  --cyan-050: #f3fadd;
  --lime-ink: #6b8f00;

  --surface: #f1f2ec;
  --panel: #ffffff;
  --ink: #16180f;
  --ink-soft: #63685c;

  --ok: #16a34a;
  --warn: #f59e0b;
  --danger: #dc2626;

  /* compat: nombres usados en vistas existentes */
  --navy: var(--navy-900);
  --navy-2: var(--navy-800);
  --blue: var(--cyan-500);
  --green: var(--ok);
  --orange: var(--warn);
  --red: var(--danger);
  --bg: var(--surface);
  --card-border: #dfe1d6;
  --sidebar-w: 232px;

  --raised-light: -3px -3px 8px rgba(255,255,255,.7), 4px 6px 14px rgba(20,22,14,.12);
  --raised-light-sm: -2px -2px 5px rgba(255,255,255,.7), 2px 3px 8px rgba(20,22,14,.12);
  --pressed-light: inset -2px -2px 5px rgba(255,255,255,.6), inset 3px 3px 8px rgba(20,22,14,.16);
  --raised-navy: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(8,9,6,.35);
  --pressed-navy: inset 2px 2px 6px rgba(8,9,6,.5), inset -1px -1px 0 rgba(255,255,255,.04);
}

* { box-sizing: border-box; }
body { background: var(--surface); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: .9rem; color: var(--ink); }

.app-wrap { display: flex; min-height: 100vh; }

/* ===== Sidebar ===== */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  background: linear-gradient(175deg, #0c0d0e 0%, #17181b 42%, #23261e 72%, #33382a 100%);
  color: #fff; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: 1040;
  box-shadow: 3px 0 20px rgba(8,9,6,.25);
  overflow: hidden;
}
.sidebar::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; filter: blur(38px);
  background:
    radial-gradient(circle at 18% 6%, rgba(198,255,51,.22), transparent 40%),
    radial-gradient(circle at 95% 55%, rgba(198,255,51,.10), transparent 45%),
    radial-gradient(circle at 15% 98%, rgba(241,242,236,.10), transparent 40%);
}
.sidebar-brand, .sidebar-nav, .sidebar-foot { position: relative; z-index: 1; }
.sidebar-brand { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-brand i {
  font-size: 1.6rem; color: var(--cyan-400); width: 2.4rem; height: 2.4rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border-radius: .7rem;
  background: var(--navy-800); box-shadow: var(--raised-navy);
}
.brand-title { font-weight: 800; font-size: 1.15rem; letter-spacing: .5px; }
.brand-sub { font-size: .68rem; opacity: .65; text-transform: uppercase; letter-spacing: 1px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem .6rem; }
.sidebar-nav .nav-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .85rem; margin-bottom: .2rem; color: #b6bcaa; text-decoration: none; font-size: .86rem;
  border-radius: .55rem; transition: box-shadow .15s, color .15s, transform .1s;
}
.sidebar-nav .nav-item:hover { color: #fff; box-shadow: var(--raised-navy); transform: translateY(-1px); }
.sidebar-nav .nav-item.active {
  background: var(--navy-800); color: var(--cyan-400); font-weight: 600;
  box-shadow: var(--pressed-navy);
}
.sidebar-nav .nav-item.active i { color: var(--cyan-400); }
.sidebar-nav .nav-item i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar-foot { padding: .9rem 1.1rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; }

/* ===== Main / topbar ===== */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: linear-gradient(100deg, #17181b 0%, #23261e 55%, #33382a 100%); color: #fff;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem 1.2rem; position: sticky; top: 0; z-index: 1030;
  box-shadow: 0 4px 14px rgba(8,9,6,.25);
}
.topbar-title { font-weight: 700; font-size: 1.02rem; }
.topbar-search { position: relative; }
.topbar-search input {
  background: var(--navy-950); border: none;
  border-radius: 20px; color: #fff; padding: .35rem .9rem .35rem 2.1rem; width: 230px; font-size: .85rem;
  box-shadow: var(--pressed-navy);
}
.topbar-search input:focus { outline: none; box-shadow: var(--pressed-navy), 0 0 0 2px var(--cyan-500); }
.topbar-search input::placeholder { color: rgba(255,255,255,.45); }
.topbar-search i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--cyan-400); opacity: .9; }
.topbar-clock { font-variant-numeric: tabular-nums; font-size: .85rem; opacity: .85; align-items: center; gap: .4rem; }
.topbar-btn {
  color: #dbe0cd !important; width: 36px; height: 36px; border-radius: .6rem;
  display: flex; align-items: center; justify-content: center; transition: box-shadow .15s, color .15s;
}
.topbar-btn:hover { color: var(--cyan-400) !important; box-shadow: var(--raised-navy); }
.notif-menu { width: 330px; max-width: 90vw; border: none; border-radius: .75rem; overflow: hidden; box-shadow: var(--raised-light), 0 12px 30px rgba(20,22,14,.18); }
.notif-head { background: var(--navy-900); color: #fff; padding: .6rem .9rem; font-weight: 600; font-size: .85rem; }
.notif-body { max-height: 340px; overflow-y: auto; }
.notif-item { padding: .55rem .9rem; border-bottom: 1px solid #eef0e7; display: block; text-decoration: none; color: inherit; }
.notif-item:hover { background: var(--cyan-050); }
.notif-item .t { font-weight: 600; font-size: .82rem; }
.notif-item .m { font-size: .78rem; color: var(--ink-soft); }

.content { padding: 1.1rem 1.3rem; flex: 1; }
.app-foot { text-align: center; font-size: .74rem; color: #8a8f81; padding: .6rem; }

/* ===== Cards / KPIs — superficies "elevadas" del panel ===== */
.card {
  border: none; border-radius: .75rem; background: var(--panel);
  box-shadow: var(--raised-light);
}
.card-header {
  background: var(--panel); border-bottom: 1px solid var(--card-border);
  font-weight: 700; color: var(--navy-900); font-size: .86rem; text-transform: uppercase; letter-spacing: .3px;
  border-radius: .75rem .75rem 0 0 !important;
}
.card-header.navy { background: var(--navy-900); color: #fff; border-bottom: 0; }

.kpi { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; }
.kpi .ico {
  width: 46px; height: 46px; border-radius: .65rem; display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; flex-shrink: 0; box-shadow: var(--raised-light-sm);
}
.kpi .val { font-size: 1.65rem; font-weight: 800; line-height: 1.1; color: var(--navy-900); }
.kpi .lbl { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); }
.kpi .sub { font-size: .74rem; color: #8a8f81; }
.kpi .delta-up { color: var(--ok); font-weight: 700; }
.kpi .delta-down { color: var(--danger); font-weight: 700; }
.ico-blue   { background: var(--cyan-050); color: var(--lime-ink); }
.ico-navy   { background: #eceee3; color: var(--navy-900); }
.ico-green  { background: #e2f6ea; color: var(--ok); }
.ico-orange { background: #fef1dc; color: var(--warn); }
.ico-red    { background: #fde5e5; color: var(--danger); }

/* ===== Botones — el mismo relieve raised/pressed ===== */
.btn {
  border-radius: .55rem; border: none; font-weight: 600; transition: box-shadow .12s, transform .08s;
}
.btn-primary { background: var(--cyan-500); border-color: var(--cyan-500); color: #161a0c; box-shadow: var(--raised-light-sm); }
.btn-primary:hover { background: var(--cyan-400); border-color: var(--cyan-400); color: #161a0c; }
.btn-success { background: var(--ok); border-color: var(--ok); box-shadow: var(--raised-light-sm); }
.btn-danger  { background: var(--danger); border-color: var(--danger); box-shadow: var(--raised-light-sm); }
.btn-outline-primary { color: var(--navy-900); border: 1.5px solid var(--card-border); background: var(--panel); box-shadow: var(--raised-light-sm); }
.btn-outline-secondary, .btn-outline-success, .btn-outline-danger { box-shadow: var(--raised-light-sm); border-width: 1.5px; }
.btn:active, .btn.active { box-shadow: var(--pressed-light) !important; transform: translateY(1px); }
.btn-sm { border-radius: .5rem; }

/* ===== Badges extra ===== */
.badge-danger  { background: var(--danger); color: #fff; }
.badge-orange  { background: #f97316; color: #fff; }
.badge-warning { background: var(--warn); color: #fff; }
.badge-success { background: var(--ok); color: #fff; }
.badge-info    { background: var(--cyan-500); color: #161a0c; }
.badge-secondary { background: #6b6f61; color: #fff; }
.badge-dark    { background: var(--navy-800); color: #fff; }
.badge-primary { background: var(--cyan-500); color: #161a0c; }

/* Semáforo (dot) — el único uso "libre" de verde/ámbar/rojo: datos, no chrome */
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.dot-success { background: var(--ok); } .dot-warning { background: var(--warn); }
.dot-danger { background: var(--danger); animation: pulse 1.2s infinite; } .dot-secondary { background: #94a3b8; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); } 50% { box-shadow: 0 0 0 5px rgba(220,38,38,0); } }

/* ===== Tablas ===== */
.table { font-size: .84rem; }
.table thead th { background: #eef0e7; color: var(--navy-900); font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; border-bottom: 2px solid #dfe2d5; white-space: nowrap; }
.table-hover tbody tr:hover { background: var(--cyan-050); }
.table td { vertical-align: middle; }
.temp-hot  { color: var(--danger); font-weight: 700; }
.temp-cold { color: var(--lime-ink); font-weight: 700; }
.temp-ok   { color: var(--ok); font-weight: 700; }

/* ===== Patio (mapa) ===== */
.yard-block { margin-bottom: 1.2rem; }
.yard-grid { display: grid; gap: 4px; }
.yard-cell {
  aspect-ratio: 1; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: .58rem; font-weight: 700; color: #fff; cursor: pointer; min-width: 26px;
  transition: transform .1s; box-shadow: var(--raised-light-sm);
}
.yard-cell:hover { transform: scale(1.15); z-index: 5; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.yard-disponible { background: #d6d8ce; color: #52564a; }
.yard-ocupada    { background: var(--cyan-500); color: #161a0c; }
.yard-critica    { background: var(--danger); animation: pulse 1.2s infinite; }
.yard-mantenimiento { background: var(--warn); }
.yard-bloqueada  { background: var(--navy-800); }
.yard-lbl { font-size: .62rem; color: #6b6f61; text-align: center; }

/* ===== SLA ===== */
.sla-row { display: flex; align-items: center; justify-content: space-between; padding: .48rem 0; border-bottom: 1px dashed #e6e8de; font-size: .84rem; }
.sla-row:last-child { border-bottom: 0; }

/* ===== Timeline ===== */
.timeline { position: relative; padding-left: 1.6rem; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: #dfe2d5; }
.tl-item { position: relative; padding-bottom: 1rem; }
.tl-item::before { content: ''; position: absolute; left: -1.6rem; top: 3px; width: 12px; height: 12px; margin-left: 3px; border-radius: 50%; background: var(--cyan-500); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--cyan-500); }
.tl-item.tl-danger::before { background: var(--danger); box-shadow: 0 0 0 2px var(--danger); }
.tl-item.tl-success::before { background: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
.tl-item.tl-warning::before { background: var(--warn); box-shadow: 0 0 0 2px var(--warn); }
.tl-fecha { font-size: .72rem; color: #8a8f81; }

/* ===== Login ===== */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #111214 0%, #1d1f1a 28%, #3c4a1a 52%, #8bab10 72%, #c6ff33 86%, #eef1e4 100%);
}
.login-page::before {
  content: ''; position: absolute; inset: 0; opacity: .6; filter: blur(60px); pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(198,255,51,.35), transparent 50%),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.14), transparent 45%),
    radial-gradient(circle at 68% 85%, rgba(139,171,16,.32), transparent 55%),
    radial-gradient(circle at 8% 88%, rgba(17,18,20,.5), transparent 50%);
}
.login-card {
  position: relative; z-index: 1;
  width: 400px; max-width: 92vw; border-radius: 1.1rem; overflow: hidden;
  box-shadow: 0 30px 70px rgba(8,9,6,.55), var(--raised-light);
}
.login-head { background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); color: #fff; text-align: center; padding: 1.8rem 1rem 1.3rem; }
.login-head i {
  font-size: 2.2rem; color: var(--cyan-400); width: 4rem; height: 4rem; line-height: 4rem;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--navy-800); box-shadow: var(--raised-navy);
}
.login-card .btn-primary { width: 100%; }

/* ===== Charts ===== */
.chart-box { position: relative; width: 100%; }

/* ===== Live indicator ===== */
.live-dot { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--ok); font-weight: 700; }
.live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse-g 1.5s infinite; }
@keyframes pulse-g { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 50% { box-shadow: 0 0 0 5px rgba(22,163,74,0); } }

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .sidebar { position: fixed; left: calc(-1 * var(--sidebar-w)); transition: left .25s; height: 100vh; }
  .sidebar.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.4); }
}
@media print {
  .sidebar, .topbar, .app-foot, .no-print, .btn, .pagination { display: none !important; }
  .content { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}