@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#121212;
  --panel:#1E1E1E;
  --panel-2:#242424;
  --panel-3:#2A2A2A;
  --ink:#F5F5F5;
  --muted:#A8A8A8;
  --line:#333333;
  --primary:#FF8C00;
  --primary-2:#FFC400;
  --danger:#FF4D4D;
  --ok:#32D583;
  --warning:#FFB020;
  --shadow:0 14px 34px rgba(0,0,0,.34);
  --radius:12px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:15px;scroll-behavior:smooth}
body{
  background:#121212!important;
  color:var(--ink)!important;
  font-family:'Inter',Roboto,Segoe UI,Arial,sans-serif!important;
  padding-bottom:92px;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 8%,rgba(255,140,0,.13),transparent 28rem),
    radial-gradient(circle at 90% 22%,rgba(255,196,0,.08),transparent 24rem),
    linear-gradient(135deg,rgba(255,255,255,.025),transparent 42%);
  z-index:-1;
}

.container{max-width:1180px;padding:20px!important}
.card,.module-card,.checklist-card,.mobile-home,.dashboard article,.item,.check-section,.ot-form,.ot-form-section,.seed-equipos-panel{
  background:var(--panel)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow)!important;
}

.topbar{
  background:rgba(18,18,18,.92)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(14px);
}
.brand-mark,.login-logo-clean{
  background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;
  color:#171717!important;
  box-shadow:0 0 0 1px rgba(255,140,0,.2),0 10px 24px rgba(255,140,0,.25)!important;
}
.topbar h1,.module-card h2,.mobile-home h2,.checklist-title h2{color:#fff!important;font-weight:800;letter-spacing:-.03em}
.topbar p,.muted,.item small{color:var(--muted)!important}
.eyebrow{color:var(--primary)!important;letter-spacing:.13em}

button,.login-primary-btn,.mobile-menu-item,.ot-menu-btn{
  min-height:48px!important;
  border-radius:var(--radius)!important;
  background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;
  color:#181818!important;
  font-weight:900!important;
  border:1px solid rgba(255,196,0,.28)!important;
  box-shadow:0 10px 24px rgba(255,140,0,.18)!important;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,background .16s ease!important;
}
button:hover{filter:brightness(1.06)!important;transform:translateY(-1px)}
button:active,button.is-pressed{transform:scale(.97)!important;filter:saturate(1.25) brightness(.95)!important}
button.secondary,.secondary-inline,.ot-back-btn,.logout-button{
  background:#242424!important;
  color:#f5f5f5!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
}
.item button{background:#3a1717!important;color:#ffb4b4!important;border-color:#633!important;box-shadow:none!important}

input,textarea,select{
  min-height:48px!important;
  background:#161616!important;
  color:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  font-family:inherit!important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--primary)!important;
  box-shadow:0 0 0 3px rgba(255,140,0,.18)!important;
  background:#1b1b1b!important;
}
input::placeholder,textarea::placeholder{color:#7d7d7d!important}
label{color:#d7d7d7!important}

.app-shell{gap:20px!important}
.dashboard{gap:20px!important;margin-bottom:20px!important}
.dashboard article{position:relative;overflow:hidden;padding:20px!important}
.dashboard article::after{
  content:"";
  position:absolute;
  right:18px;
  top:18px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 14px var(--ok);
}
.dashboard article:nth-child(2)::after{background:var(--warning);box-shadow:0 0 14px var(--warning)}
.dashboard article:nth-child(3)::after{background:var(--danger);box-shadow:0 0 14px var(--danger)}
.dashboard strong{color:var(--primary-2)!important;font-weight:900!important}

/* Tarjetas SCADA */
.item,.ot-card{
  position:relative;
  padding:20px!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.item:hover{transform:translateY(-2px);border-color:#4a4a4a!important}
.item::before,.ot-card::before{
  content:"";
  position:absolute;
  left:12px;
  top:18px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 13px var(--ok);
}
.item strong,.item small,.item pre{margin-left:12px}
.ot-card{border-left:4px solid var(--primary)!important}
.ot-card:has(small)::before{background:var(--warning);box-shadow:0 0 13px var(--warning)}
.estado-solicitada::before{background:var(--warning)!important;box-shadow:0 0 13px var(--warning)!important}
.estado-abierta::before,.estado-curso::before{background:var(--primary-2)!important;box-shadow:0 0 13px var(--primary-2)!important}
.estado-cerrada::before{background:var(--ok)!important;box-shadow:0 0 13px var(--ok)!important}
.estado-pendiente::before,.urgencia-urgente::before{background:var(--danger)!important;box-shadow:0 0 13px var(--danger)!important}
.urgencia-alta::before{background:var(--primary)!important;box-shadow:0 0 13px var(--primary)!important}

.scada-card{display:grid!important;grid-template-columns:auto 1fr;gap:14px;align-items:start;overflow:hidden;background:linear-gradient(145deg,#1f1f1f,#171717)!important}
.scada-card::before{display:none!important}
.scada-led{width:13px;height:13px;margin-top:5px;border-radius:999px;background:var(--ok);box-shadow:0 0 16px var(--ok),0 0 0 5px rgba(50,213,131,.08)}
.scada-main{display:grid;gap:7px;min-width:0}
.scada-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.scada-title-row strong{margin:0!important;font-size:1.02rem!important;letter-spacing:-.02em;text-transform:uppercase}
.scada-code{flex:0 0 auto;display:inline-flex;align-items:center;min-height:28px;padding:4px 8px;border:1px solid #444;border-radius:8px;background:#151515;color:#ddd;font-size:.74rem;font-weight:900;letter-spacing:.04em}
.scada-location,.scada-type{display:block;margin:0!important;color:var(--muted);font-size:.86rem;line-height:1.25}
.scada-type{color:#d4d4d4}
.scada-actions{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:6px}
.scada-actions button{min-height:40px!important;padding:8px 12px!important}

.ot-chip{display:inline-flex;align-items:center;min-height:26px;margin:3px 5px 3px 0;padding:4px 8px;border-radius:999px;border:1px solid #3b3b3b;background:#181818;color:#dcdcdc;font-size:.78rem;font-weight:800}
.ot-chip.estado{border-color:rgba(255,140,0,.45);color:var(--primary-2);background:rgba(255,140,0,.12)}
.ot-chip.prioridad{border-color:rgba(255,77,77,.35);color:#ffb4b4;background:rgba(255,77,77,.1)}
.pending-hint{margin:.2rem 0 .4rem;color:var(--primary-2);font-size:.84rem;font-weight:800}.pending-hint.hidden{display:none}.is-required{border-color:var(--primary)!important}

/* Bottom navigation premium */
.tabs{
  position:fixed!important;
  left:16px!important;
  right:16px!important;
  bottom:14px!important;
  top:auto!important;
  z-index:80!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px!important;
  padding:10px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:20px!important;
  background:rgba(30,30,30,.92)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.52)!important;
  backdrop-filter:blur(18px)!important;
}
.tab-btn{
  position:relative;
  min-height:58px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  padding:8px 4px!important;
  border-radius:14px!important;
  background:transparent!important;
  color:#bdbdbd!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  font-size:0!important;
}
.tab-btn::before{
  content:""!important;
  width:24px;height:24px;display:block;background:currentColor;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
}
.tab-btn::after{font-size:11px;font-weight:800;line-height:1.1;color:inherit}
.tab-btn[data-target="inicioTab"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 13h8V3H3v10Zm2-8h4v6H5V5Zm-2 16h8v-6H3v6Zm2-4h4v2H5v-2Zm8 4h8V11h-8v10Zm2-8h4v6h-4v-6Zm-2-10v6h8V3h-8Zm2 2h4v2h-4V5Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 13h8V3H3v10Zm2-8h4v6H5V5Zm-2 16h8v-6H3v6Zm2-4h4v2H5v-2Zm8 4h8V11h-8v10Zm2-8h4v6h-4v-6Zm-2-10v6h8V3h-8Zm2 2h4v2h-4V5Z'/%3E%3C/svg%3E")}.tab-btn[data-target="inicioTab"]::after{content:"Dashboard"}
.tab-btn[data-target="ordenesTab"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m22 19.6-6.3-6.3c.6-1.9.2-4-1.3-5.5-1.6-1.6-3.9-2-5.9-1.2l3.8 3.8-2.8 2.8-3.9-3.7c-.8 2-.3 4.3 1.2 5.9 1.5 1.5 3.6 1.9 5.5 1.3l6.3 6.3 3.4-3.4ZM4.5 3 3 4.5l4 4 1.5-1.5-4-4Zm6.2 0L9.2 4.5l10.3 10.3 1.5-1.5L10.7 3Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='m22 19.6-6.3-6.3c.6-1.9.2-4-1.3-5.5-1.6-1.6-3.9-2-5.9-1.2l3.8 3.8-2.8 2.8-3.9-3.7c-.8 2-.3 4.3 1.2 5.9 1.5 1.5 3.6 1.9 5.5 1.3l6.3 6.3 3.4-3.4ZM4.5 3 3 4.5l4 4 1.5-1.5-4-4Zm6.2 0L9.2 4.5l10.3 10.3 1.5-1.5L10.7 3Z'/%3E%3C/svg%3E")}.tab-btn[data-target="ordenesTab"]::after{content:"Tareas"}
.tab-btn[data-target="checklistTab"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2ZM9.4 16.6 5.8 13l1.4-1.4 2.2 2.2 7.4-7.4 1.4 1.4-8.8 8.8Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2ZM9.4 16.6 5.8 13l1.4-1.4 2.2 2.2 7.4-7.4 1.4 1.4-8.8 8.8Z'/%3E%3C/svg%3E")}.tab-btn[data-target="checklistTab"]::after{content:"Check"}
.tab-btn[data-target="consumosTab"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 21V9h3v12H5Zm5 0V3h4v18h-4Zm6 0V13h3v8h-3ZM4 7l8-5 8 5v2l-8-5-8 5V7Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 21V9h3v12H5Zm5 0V3h4v18h-4Zm6 0V13h3v8h-3ZM4 7l8-5 8 5v2l-8-5-8 5V7Z'/%3E%3C/svg%3E")}.tab-btn[data-target="consumosTab"]::after{content:"Consumos"}
.tab-btn[data-target="equiposTab"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 3h10l2 5v13H5V8l2-5Zm1.3 2L7.5 7h9l-.8-2H8.3ZM7 9v10h10V9H7Zm2 2h6v2H9v-2Zm0 4h6v2H9v-2ZM3 10h2v8H3v-8Zm16 0h2v8h-2v-8Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 3h10l2 5v13H5V8l2-5Zm1.3 2L7.5 7h9l-.8-2H8.3ZM7 9v10h10V9H7Zm2 2h6v2H9v-2Zm0 4h6v2H9v-2ZM3 10h2v8H3v-8Zm16 0h2v8h-2v-8Z'/%3E%3C/svg%3E")}.tab-btn[data-target="equiposTab"]::after{content:"Calderas"}
.tab-btn.active,.tab-btn:hover{
  background:linear-gradient(135deg,rgba(255,140,0,.24),rgba(255,196,0,.14))!important;
  border-color:rgba(255,140,0,.34)!important;
  color:var(--primary-2)!important;
}

.mobile-home{display:none!important}
.mobile-menu-list{gap:20px!important}

.checklist-title,.check-section h3,.ot-form-section h3{
  background:#171717!important;
  border-color:var(--line)!important;
  border-left-color:var(--primary)!important;
  color:#fff!important;
}
.check-table,.check-table tr,.check-table .row-label{background:#181818!important;color:#f5f5f5!important}
.check-table th{background:#252525!important;color:var(--primary-2)!important}

/* Skeletons */
.skeleton-card,.dashboard.loading article,.list.loading::before,.ot-list.loading::before{
  position:relative;
  overflow:hidden;
  min-height:86px;
  border-radius:var(--radius);
  background:#1E1E1E!important;
  border:1px solid var(--line)!important;
}
.dashboard.loading article > *, .list.loading > *, .ot-list.loading > *{opacity:.18}
.dashboard.loading article::before,.list.loading::before,.ot-list.loading::before{
  content:"";
  display:block;
  height:86px;
  background:linear-gradient(90deg,#1E1E1E 0%,#2b2b2b 45%,#1E1E1E 90%);
  background-size:220% 100%;
  animation:skeletonSweep 1.15s infinite linear;
}
@keyframes skeletonSweep{0%{background-position:120% 0}100%{background-position:-120% 0}}

.message{color:#ffb4b4!important}
.status-online{background:rgba(50,213,131,.13)!important;color:#98f6c1!important;border-color:rgba(50,213,131,.35)!important}
.status-offline{background:rgba(255,77,77,.13)!important;color:#ffb4b4!important;border-color:rgba(255,77,77,.35)!important}

@media (min-width:760px){
  body{padding-bottom:106px}
  .container{padding:24px!important}
  .app-shell{display:block!important}
  .dashboard{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .grid-form{gap:20px!important}
}

@media (max-width:520px){
  .container{padding:20px 16px!important}
  .tabs{left:10px!important;right:10px!important;bottom:10px!important;padding:8px!important;gap:5px!important}
  .tab-btn{min-height:54px!important}
  .tab-btn::after{font-size:9.5px}
  .topbar{padding:14px 16px!important}
  .brand p{display:none}
}