*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#0f172a;color:#e5e7eb}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:#020617;border-bottom:1px solid #1e293b}
.brand{font-size:24px;font-weight:800;color:#38bdf8}
.brand span{font-size:13px;color:#94a3b8}
nav a{color:#e5e7eb;text-decoration:none;margin-left:16px;font-weight:700}
nav a:hover{color:#38bdf8}
.container{padding:22px;max-width:1400px;margin:auto}
.card{background:#111827;border:1px solid #1f2937;border-radius:16px;padding:18px;margin-bottom:18px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}

.kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-bottom:18px;
}

.kpi{
  background:#020617;
  border:1px solid #1e293b;
  border-radius:14px;

  padding:14px 16px;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
}

.kpi-value{
  display:flex;
  align-items:flex-start;

  width:100%;
  min-height:30px;

  margin:0 0 6px 0;

  font-size:24px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.03em;

  color:#38bdf8;

  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;

  text-shadow:
    0 2px 10px rgba(0,0,0,.35),
    0 0 18px rgba(56,189,248,.10);
}

.kpi-label{
  margin:0;

  font-size:14px;
  font-weight:700;
  line-height:1.15;

  color:#ffffff;
  opacity:.92;
}

.kpi-date{
  font-size:24px;
  letter-spacing:-.03em;
}


h1,h2,h3{margin-top:0}
input,select,button,textarea{padding:11px;border-radius:10px;border:1px solid #334155;background:#020617;color:#e5e7eb}
textarea{font-family:Arial,Helvetica,sans-serif;resize:vertical;}
.details-textarea{
  width:100%;
  max-width:650px;
  min-height:92px;
  display:block;
  margin-top:6px;
}
.btn-limpiar {color: #facc15;  /* amarillo tipo warning */
}
.btn{display:inline-flex;align-items:center;justify-content:center;height:32px;width:70px;padding:0;border-radius:4px;font-size:12px;font-weight:700;text-decoration:none;border:0;box-sizing:border-box}
.btn.secondary{background:#334155}
.btn.danger{background:#b91c1c}
.btn-ver{background:#38bdf8;color:#0b1220}
.btn-editar{background:#6366f1;color:#fff}
.btn-delete{background:#dc2626;color:#fff}
.btn-delete:hover{background:#b91c1c}

table{width:100%;border-collapse:collapse;background:#111827;border-radius:12px;overflow:hidden}
th,td{padding:11px;border-bottom:1px solid #1f2937;text-align:left}
th{background:#020617;color:#93c5fd}
.status-ok{color:#22c55e;font-weight:800}
.status-warn{color:#f59e0b;font-weight:800}
.status-error{color:#ef4444;font-weight:800}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:12px}
.small{color:#94a3b8;font-size:13px}
.login-wrap{max-width:420px;margin:70px auto}
canvas{max-height:260px}

.readonly-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px;margin:20px 0}
.readonly-box{background:#020617;border:1px solid #334155;border-radius:10px;padding:12px;color:#e5e7eb;font-weight:bold}

.measurements-card h2{margin-bottom:18px}
.measurements-table{width:100%;table-layout:fixed;border-collapse:collapse;background:#111827;border:1px solid #1f2937;border-radius:12px;overflow:hidden}
.measurements-table thead,.measurements-table tbody tr{display:table;width:100%;table-layout:fixed}
.measurements-table tbody{display:block;max-height:420px;overflow-y:auto}
.measurements-table th,.measurements-table td{padding:11px;border-bottom:1px solid #1f2937;text-align:left;box-sizing:border-box}


.measurements-table th{background:#020617;color:#93c5fd}

.measurements-table th:nth-child(1),.measurements-table td:nth-child(1){width:31%}
.measurements-table th:nth-child(2),.measurements-table td:nth-child(2){width:17%}
.measurements-table th:nth-child(3),.measurements-table td:nth-child(3){width:13%}
.measurements-table th:nth-child(4),.measurements-table td:nth-child(4){width:20%}
.measurements-table th:nth-child(5),.measurements-table td:nth-child(5){width:19%}

.th-filter{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  width:100%;
}

.th-filter span{
  font-size:14px;
  font-weight:800;
  color:#93c5fd;
  line-height:1;
}

.th-filter select{
  width:100%;
}


.th-filter span{white-space:nowrap;font-weight:800}
.col-filter{width:100%;min-width:90px;padding:7px 9px;font-size:13px;border-radius:8px;border:1px solid #334155;background:#020617;color:#e5e7eb}

.chart-filter{align-items:end;margin:18px 0}
.chart-filter label{display:block;color:#93c5fd;font-weight:800;margin-bottom:6px}
.filter-actions{display:flex;gap:10px;align-items:end}

.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:10px}
.detail-head h1 span{font-size:14px;color:#93c5fd}
.detail-head .chart-filter{display:flex;align-items:center;gap:8px;margin:0;flex-wrap:nowrap}
.detail-head .chart-filter label{margin:0;font-size:14px;color:#e5e7eb}
.detail-head .chart-filter input{width:135px}
.detail-head .chart-filter button,.detail-head .chart-filter .btn{white-space:nowrap}

.detail-head-main{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:8px}
.detail-title{flex:1;min-width:0}
.detail-title-line{margin-bottom:10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.detail-field{font-size:22px;color:#cbd5e1;font-weight:800}
.detail-silo{font-size:30px;color:#e5e7eb;font-weight:800}
.detail-last-measure{font-size:18px;color:#38bdf8;font-weight:700}

.chart-filter-top{display:flex;align-items:center;gap:6px;margin:0;flex-wrap:wrap}
.chart-filter-top label{margin:0;color:#e5e7eb}
.chart-filter-top input{width:150px}
.chart-filter-top .date-picker{cursor:pointer;user-select:none;caret-color:transparent}
.chart-filter-top button,.chart-filter-top .btn{white-space:nowrap}

.detail-meta{text-align:right;line-height:1.9;font-size:16px;white-space:nowrap;padding-top:7px}
.detail-meta b{color:#ffffff}
.detail-meta span{color:#94a3b8;margin:0 5px}

.grid .card{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.card-details{min-height:22px;margin-bottom:14px}
.card-details-text{display:inline-block;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;cursor:pointer}
.card-details-text:hover{color:#38bdf8;text-decoration:underline}



.grid .card p:last-child{
  margin-top:6px;
  margin-bottom:0;
}

.measurements-table tbody::-webkit-scrollbar{width:14px}
.measurements-table tbody::-webkit-scrollbar-track{background:#020617}
.measurements-table tbody::-webkit-scrollbar-thumb{background:#64748b;border-radius:12px;border:3px solid #020617}
.measurements-table tbody::-webkit-scrollbar-thumb:hover{background:#94a3b8}
.measurements-table tbody::-webkit-scrollbar-button:single-button{display:block;height:14px;background-color:#020617;border:1px solid #334155}
.measurements-table tbody::-webkit-scrollbar-button:single-button:vertical:decrement{background:linear-gradient(135deg,transparent 45%,#93c5fd 46% 55%,transparent 56%) center / 8px 8px no-repeat,#020617}
.measurements-table tbody::-webkit-scrollbar-button:single-button:vertical:increment{background:linear-gradient(315deg,transparent 45%,#93c5fd 46% 55%,transparent 56%) center / 8px 8px no-repeat,#020617}

#detailsModal.details-modal{position:fixed;inset:0;background:rgba(2,6,23,.78);z-index:99999;display:none;align-items:center;justify-content:center;padding:24px}
#detailsModal.details-modal.show{display:flex}
#detailsModal .details-modal-box{width:min(620px,94vw);max-height:75vh;overflow-y:auto;background:#111827;border:1px solid #334155;border-radius:14px;padding:22px;box-shadow:0 18px 50px rgba(0,0,0,.45);position:relative}
#detailsModal .details-modal-box h3{margin:0 38px 14px 0;color:#e5e7eb}
#detailsModal .details-modal-text{white-space:pre-wrap;text-overflow:ellipsis;line-height:1.45;color:#e5e7eb;max-width:100%}
#detailsModal .details-modal-close{position:absolute;top:10px;right:12px;width:32px;height:32px;border:0;border-radius:8px;background:#1e293b;color:#e5e7eb;font-size:22px;cursor:pointer}
#detailsModal .details-modal-close:hover{background:#334155}

.silos-table th.actions-title,.silos-table td.table-actions{text-align:center;width:240px}
.table-actions{display:flex;justify-content:center;align-items:center;gap:6px}
.table-actions .btn{width:68px;height:32px;min-width:68px;max-width:68px;padding:0;margin:0;font-size:12px;line-height:1;border-radius:8px;font-weight:700;text-align:center;box-sizing:border-box}

@media (max-width:900px){
  .detail-head-main{flex-direction:column}
  .detail-meta{text-align:left;white-space:normal}
}
.silo-visual-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:12px 0 22px;
  min-height:190px;
}

.silo-visual{
  width:116px;
  height:165px;
  position:relative;
}

.silo-top{
  width:116px;
  height:24px;
  border:2px solid #64748b;
  border-bottom:0;
  border-radius:58px 58px 0 0;
  background:#1e293b;
}

.silo-body{
  width:116px;
  height:120px;
  position:relative;
  overflow:hidden;
  border-left:2px solid #64748b;
  border-right:2px solid #64748b;
  background:#0f172a;
}

.silo-bottom{
  width:116px;
  height:22px;
  border:2px solid #64748b;
  border-top:0;
  border-radius:0 0 58px 58px;
  background:#1e293b;
}

.silo-fill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:#38bdf8;
}

.silo-level-line{
  position:absolute;
  left:0;
  right:0;
  height:3px;
  background:#facc15;
}

.silo-percent{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
  color:white;
}

.silo-legend{
  margin-top:10px;
  color:#cbd5e1;
  font-size:14px;
}

.silo-legend b{
  color:white;
}
.silo-svg {
  width: 140px;
  height: auto;
  display: block;
  margin: 10px auto;
}

.silo-body-shape {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 2;
}

.silo-fill {
  fill: url(#siloGradient);
  opacity: 0.9;
}

.silo-roof {
  fill: #1e293b;
  stroke: #94a3b8;
  stroke-width: 2;
}

.silo-base {
  fill: #020617;
  stroke: #94a3b8;
  stroke-width: 2;
}

.silo-level-line {
  stroke: #facc15;
  stroke-width: 3;
}

.silo-text {
  fill: #ffffff;
  font-size: 20px;
  font-weight: 800;
  text-anchor: middle;
}
.silo-img-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:12px 0 18px;
}

.silo-img-container{
  position:relative;
  width:180px;
}

.silo-img{
  width:100%;
  display:block;
  filter:brightness(0.9) contrast(1.1);
}

.silo-fill-mask{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to top,#0284c7,#38bdf8,#67e8f9);
  opacity:0.65;
  mix-blend-mode:multiply;
  pointer-events:none;
}

.silo-level-line{
  position:absolute;
  left:0;
  right:0;
  height:3px;
  background:#facc15;
  box-shadow:0 0 6px #facc15;
}

.silo-text{
  position:absolute;
  top:45%;
  left:50%;
  transform:translate(-50%,-50%);
  color:white;
  font-size:24px;
  font-weight:900;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}

.silo-data-row{
  display:flex;
  justify-content:space-between;
  width:180px;
  font-size:13px;
  color:#94a3b8;
}

.silo-data-row b{
  color:white;
}
.silo-img-wrap{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:10px 0 14px;
  overflow:hidden;
}

.silo-img-container{
  position:relative;
  width:170px;
  height:240px;
  overflow:hidden;
  margin:0 auto;
}

.silo-img{
  width:170px !important;
  height:240px !important;
  object-fit:contain;
  display:block;
}

.silo-fill-mask{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to top,#0284c7,#38bdf8,#67e8f9);
  opacity:.45;
  pointer-events:none;
}

.silo-level-line{
  position:absolute;
  left:0;
  right:0;
  height:3px;
  background:#facc15;
  box-shadow:0 0 8px #facc15;
}

.silo-text{
  position:absolute;
  top:42%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:24px;
  font-weight:900;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}

.silo-data-row{
  width:170px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
  color:#94a3b8;
}

.silo-data-row b{
  color:#fff;
}

/* === SILO DASHBOARD FINAL - fuerza visual, evita estilos viejos/cacheados === */
/* === SILO PREMIUM LIMPIO (ÚNICA VERSION) === */

.silo-dashboard-visual{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:10px 0 16px;
  gap:8px;
}

.silo-premium-svg{
  width:220px;
  height:auto;
  display:block;
  margin:4px auto 2px;
}

/* eliminamos cualquier basura anterior */
.silo-clean-svg,
.silo-img-wrap,
.silo-visual-wrap{
  display:none !important;
}

.silo-data-row{
  width:170px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  color:#94a3b8;
  font-size:13px;
  font-weight:700;
}

.silo-data-row b{
  color:#f8fafc;
}

.silo-fill-anim{
  transition: all 0.8s cubic-bezier(.22,1,.36,1);
}
.silo-extra{
  width:170px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#64748b;
}
.card p{
  margin:4px 0;
  line-height:1.25;
}

/* títulos */
.card h2{
  margin-bottom:10px;
}

/* bloques principales */
.card p{
  margin:4px 0;
}

/* separación antes del silo */
.card .silo-dashboard-visual{
  margin-top:12px;
}

/* bloque inferior */
.silo-data-row{
  margin-top:6px;
}
.grid .card > p{
  margin:4px 0 !important;
  line-height:1.22 !important;
}

.card-details{
  min-height:0 !important;
  margin:4px 0 !important;
}

.small{
  margin-top:6px !important;
  margin-bottom:6px !important;
}
.card p{
  margin:3px 0 !important;
  line-height:1.18 !important;
}

.card h2{
  margin-bottom:8px !important;
}

.card-details{
  min-height:0 !important;
  margin:3px 0 !important;
}

.small{
  margin-top:6px !important;
  margin-bottom:4px !important;
}

.silo-dashboard-visual{
  margin-top:8px !important;
  margin-bottom:8px !important;
}

.silo-premium-svg{
  width:220px;
  height:auto;
  display:block;
  margin:0 auto !important;
}

.silo-data-row{
  margin-top:2px !important;
}
/* === DASHBOARD CARD PRO - 2026-05-03 === */
.dashboard-grid{
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}

.silo-card-pro{
  position:relative;
  overflow:hidden;
  padding:25px;
  border:1px solid rgba(148,163,184,.18);
  background:
    radial-gradient(circle at 22% 0%, rgba(56,189,248,.13), transparent 34%),
    linear-gradient(180deg, #111827 0%, #0b1220 100%);
  box-shadow:0 18px 45px rgba(0,0,0,.30);
}

.silo-card-pro::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(255,255,255,.055), transparent 34%);
}

.silo-card-header{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;

  margin-bottom:18px;
  padding-bottom:10px;

  border-bottom:1px solid rgba(148,163,184,.10);
}

.silo-card-header h2{
  margin:0 !important;
  color:#f8fafc;
  line-height:1.05;
  letter-spacing:-.02em;
}

.silo-card-header h2 .campo-nombre{
  display:block;
  font-size:13px;
  font-weight:700;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:2px;
}

.silo-card-header h2 .silo-nombre{
  display:block;
  font-size:26px;
  font-weight:900;
  color:#ffffff;
  line-height:1;
}

.silo-card-serial{
  min-height:16px;
  margin-top:4px;
  color:#64748b;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.sync-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  border:1px solid currentColor;
  white-space:nowrap;

  margin-top:1px;
  align-self:flex-start;

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.sync-badge:hover{
  transform:translateY(-1px);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 22px rgba(34,197,94,.20);
}

.sync-badge.status-ok:hover{
  border-color:#4ade80;
  background:rgba(34,197,94,.18);
}

.sync-badge.status-warn:hover{
  border-color:#fbbf24;
  background:rgba(245,158,11,.18);
}


.sync-badge span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 12px currentColor;
}

.sync-badge.status-ok{
  color:#22c55e;
  background:rgba(34,197,94,.12);
}

.sync-badge.status-warn{
  color:#f59e0b;
  background:rgba(245,158,11,.12);
}

.silo-metrics{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:6px;
}

.silo-card-pro .silo-dashboard-visual{
  position:relative;

  margin:-6px 0 14px !important;

  padding:0;
}

.metric-box-full{
  width:100%;
  min-height:60px;
}

.metric-box-full{
  position:relative;
  z-index:2;
}

.metric-box{
  padding:11px 12px;
  border:1px solid rgba(51,65,85,.85);
  border-radius:12px;
  background:rgba(2,6,23,.42);
}

.metric-box span{
  display:block;
  margin-bottom:5px;
  color:#93c5fd;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.metric-box b{
  display:block;
  color:#fff;
  font-size:14px;
  font-weight:800;
}

.silo-card-pro .silo-dashboard-visual{
  position:relative;
  margin:18px 0 20px !important;
  padding:4px;
}

.silo-card-pro .silo-premium-svg{
  width:220px;
  height:auto;
  display:block;
  margin:0 auto !important;
}

.silo-card-pro .silo-fill-anim{
  transition:all .8s cubic-bezier(.22,1,.36,1);
}

.silo-alert{
  position:relative;
  width:100%;
  min-height:62px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  margin:4px 0 12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(239,68,68,.30);
  background:linear-gradient(180deg, rgba(239,68,68,.10), rgba(127,29,29,.08));
  color:#fecaca;
  text-align:left;
  cursor:pointer;
  appearance:none;
}

.silo-alert:hover{
  border-color:rgba(248,113,113,.55);
  background:linear-gradient(180deg, rgba(239,68,68,.15), rgba(127,29,29,.10));
}

.silo-alert span{
  display:block;
  color:#fca5a5;
  font-size:10px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.silo-alert b{
  display:block;
  width:100%;
  max-width:100%;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  color:#fee2e2;
  font-size:13px;
  line-height:1.25;
  font-weight:800;
}

.silo-alert.empty{
  border-color:rgba(51,65,85,.85);
  background:rgba(2,6,23,.35);
  color:#94a3b8;
  cursor:pointer;
}

.silo-alert.empty:hover{
  border-color:rgba(51,65,85,.85);
  background:rgba(2,6,23,.35);
}

.silo-alert.empty span,
.silo-alert.empty b{
  color:#94a3b8;
}

.btn-card-detail{
  width:100%;
  height:40px;
  border-radius:12px;
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  color:#fff !important;
  font-size:13px;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:0 10px 22px rgba(37,99,235,.22);
}

.btn-card-detail:hover{
  background:linear-gradient(180deg,#3b82f6,#2563eb);
}

@media (max-width:480px){
  .silo-metrics{grid-template-columns:1fr}
  .silo-card-header{flex-direction:column;align-items:flex-start;}
  .sync-badge{align-self:flex-start}
}
.silo-alert{
  overflow:hidden;
}
.silo-click {
  display: block;
  cursor: pointer;
  text-decoration: none;
}

.silo-click:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

.silo-click:active {
  transform: scale(0.98);
}
/* === TITULO CARD: CAMPO + SILO === */

.card-header-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
  flex:1;
}

.card-header-text{
  padding-top:2px;
}

.card-header-text .campo-nombre{
  display:inline-flex;
  align-items:center;
  max-width:128px;
  padding:4px 11px;
  margin-bottom:10px;

  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(37,99,235,.20),
    rgba(29,78,216,.08)
  );

  border:1px solid rgba(96,165,250,.26);

  color:#7dd3fc;

  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 18px rgba(56,189,248,.10);

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.card-header-text .silo-nombre{
  font-size:34px;
  font-weight:900;
  line-height:.88;
  letter-spacing:-.06em;

  color:#ffffff;

  text-shadow:
    0 3px 14px rgba(0,0,0,.45);

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.silo-header-main{
  width:100% !important;

  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
}

.header-right{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;

  padding-top:0.5px !important;
}

.serial-right{
  margin-top:8px !important;

  color:#475569 !important;

  font-size:10px !important;
  font-weight:800 !important;

  letter-spacing:.18em !important;
  text-transform:uppercase !important;

  line-height:1 !important;

  opacity:.95 !important;
}

.silo-header-main{
  align-items:flex-start !important;
}


.card-header-text .serial{
  margin-top:8px;

  color:#475569;

  font-size:10px;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
}
.card-header-text .campo-nombre:hover{
  transform:translateY(-1px);

  border-color:#7dd3fc;

  background:linear-gradient(
    180deg,
    rgba(59,130,246,.34),
    rgba(37,99,235,.22)
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(125,211,252,.35),
    0 0 24px rgba(56,189,248,.28);
}

.edit-silo-card{
  max-width:1220px;
  margin:0 auto;
  padding:26px;
}

.edit-silo-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding-bottom:18px;
  margin-bottom:22px;
  border-bottom:1px solid #1e293b;
}

.edit-silo-header h1{
  margin:0 0 14px 0;
  font-size:32px;
  line-height:1;
  letter-spacing:-.04em;
}

.edit-silo-title{
  font-size:15px;
  font-weight:900;
  color:#ffffff;
}

.edit-silo-subtitle{
  margin-top:5px;
  font-size:13px;
  color:#93c5fd;
}

.edit-readonly-grid{
  grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:14px;
  margin:0 0 26px 0;
}

.edit-readonly-grid label,
.edit-silo-form label{
  display:block;
  margin-bottom:7px;
  color:#cbd5e1;
  font-size:13px;
  font-weight:800;
}

.readonly-box-highlight{
  color:#38bdf8;
  border-color:#2563eb;
  background:linear-gradient(180deg,#020617,#07111f);
}

.edit-silo-form{
  max-width:760px;
}

.edit-form-row{
  margin-bottom:18px;
}

.edit-form-field input,
.edit-form-field textarea{
  width:100%;
}

.edit-form-field-wide{
  width:100%;
}

.edit-silo-form .details-textarea{
  max-width:none;
  min-height:110px;
}

.edit-actions{
  display:flex;
  gap:10px;
  margin-top:28px;
}

.btn-save{
  background:#2563eb;
  color:#ffffff;
  width:92px;
  height:36px;
  border-radius:8px;
}

.btn-back{
  background:#334155;
  color:#e5e7eb;
  width:82px;
  height:36px;
  border-radius:8px;
}

.btn-save:hover{
  background:#1d4ed8;
}

.btn-back:hover{
  background:#475569;
}

@media(max-width:900px){
  .edit-readonly-grid{
    grid-template-columns:repeat(2,minmax(180px,1fr));
  }
}

@media(max-width:520px){
  .edit-readonly-grid{
    grid-template-columns:1fr;
  }

  .edit-silo-card{
    padding:18px;
  }
}
.kpi-truncate{
  display:block;
  width:100%;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  text-transform:none;
}
.measurement-row{
  cursor:pointer;
}

.measurement-row:hover td{
  background:#172033;
}

.measurement-modal{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.78);
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.measurement-modal.show{
  display:flex;
}

.measurement-modal-box{
  width:min(620px,94vw);
  background:#111827;
  border:1px solid #334155;
  border-radius:16px;
  padding:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  position:relative;
}

.measurement-modal-box h3{
  margin:0 40px 12px 0;
  color:#e5e7eb;
  font-size:24px;
}

.measurement-modal-date{
  margin-bottom:18px;
  color:#94a3b8;
}

.measurement-modal-box label{
  display:block;
  margin:14px 0 6px;
  color:#93c5fd;
  font-weight:800;
}

.measurement-modal-box input,
.measurement-modal-box textarea{
  width:100%;
  background:#020617;
  color:#e5e7eb;
  border:1px solid #334155;
  border-radius:10px;
  padding:11px 12px;
  font-size:15px;
  outline:none;
  box-sizing:border-box;
}

.measurement-modal-box textarea{
  resize:vertical;
  min-height:120px;
}

.measurement-modal-box input:focus,
.measurement-modal-box textarea:focus{
  border-color:#38bdf8;
  box-shadow:0 0 0 2px rgba(56,189,248,.15);
}

.measurement-modal-close{
  position:absolute;
  top:10px;
  right:12px;
  width:34px;
  height:34px;
  border:0;
  border-radius:9px;
  background:#1e293b;
  color:#e5e7eb;
  font-size:24px;
  cursor:pointer;
}

.measurement-modal-close:hover{
  background:#334155;
}

.measurement-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}
.measurements-table th{
  vertical-align:top;
  padding-top:14px;
  padding-bottom:14px;
}