:root {
  --brand: #14505C;         /* petróleo */
  --brand-oscuro: #0D3A43;
  --fondo: #F1F4F5;
  --card: #FFFFFF;
  --texto: #1E2A2E;
  --text-mute: #5F6F74;
  --borde: #DCE3E5;
  --tinta-c: #0093C9;
  --tinta-m: #C2185B;
  --tinta-y: #E0A800;
  --tinta-k: #2B2B2B;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
}

/* ---------- Barra ---------- */
.barra { background: var(--brand); }
.barra .nav-link { color: rgba(255,255,255,.78); font-size: 14px; }
.barra .nav-link:hover, .barra .nav-link.active { color: #fff; }
.barra .nav-link.active { box-shadow: inset 0 -3px 0 var(--tinta-y); }
.barra .navbar-toggler { color: #fff; border-color: rgba(255,255,255,.4); }
.usuario-barra { color: #fff; font-size: 14px; }
.usuario-barra .rol { opacity: .7; text-transform: capitalize; }
.btn-salir { color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-salir:hover { background: rgba(255,255,255,.12); color: #fff; }

.marca-app { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; color: #fff; }
.marca-app:hover { color: #fff; }
.marca-sub { font-weight: 400; opacity: .75; }
.tinta-puntos { display: inline-grid; grid-template-columns: 7px 7px; gap: 3px; }
.tinta-puntos i { width: 7px; height: 7px; border-radius: 50%; }
.tinta-puntos i:nth-child(1) { background: var(--tinta-c); }
.tinta-puntos i:nth-child(2) { background: var(--tinta-m); }
.tinta-puntos i:nth-child(3) { background: var(--tinta-y); }
.tinta-puntos i:nth-child(4) { background: #fff; }

/* ---------- Contenido ---------- */
.titulo-seccion { font-size: 22px; font-weight: 600; margin: 0; }
.panel { background: var(--card); border: 1px solid var(--borde); border-radius: 10px; padding: 1.25rem; }
.panel-titulo { font-size: 15px; font-weight: 600; margin-bottom: .75rem; }
.fila-borde + .fila-borde { border-top: 1px solid var(--borde); }

.tarjeta-dato { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--borde); border-left: 4px solid var(--brand); border-radius: 10px; padding: 1rem 1.1rem; height: 100%; color: var(--texto); text-decoration: none; }
.tarjeta-dato .dato { font-size: 28px; font-weight: 600; line-height: 1.1; }
.tarjeta-dato .etiqueta { font-size: 13px; color: var(--text-mute); }
.tarjeta-dato.enlace:hover { border-color: var(--brand); color: var(--texto); }
.tarjeta-dato.atencion { border-left-color: var(--tinta-y); }
.tarjeta-dato.alerta { border-left-color: var(--tinta-m); }

.btn-marca { background: var(--brand); color: #fff; border: none; }
.btn-marca:hover, .btn-marca:focus { background: var(--brand-oscuro); color: #fff; }
.campo-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-mute); margin-bottom: 4px; }
:focus-visible { outline: 2px solid var(--tinta-c); outline-offset: 2px; }

/* ---------- Patrón modal (panel-modal-crud) ---------- */
.modal-fondo { display: none; position: fixed; inset: 0; background: rgba(13, 58, 67, .45); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; }
.modal-fondo.activo { display: flex; }
.modal-caja { background: var(--card); border-radius: 14px; padding: 1.5rem; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; }
.modal-caja.ancho { max-width: 820px; }
.modal-caja .modal-titulo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; font-weight: 600; }
.modal-caja .modal-titulo p { margin: 0; }
.modal-caja .modal-cerrar { background: none; border: none; color: var(--text-mute); font-size: 20px; cursor: pointer; }
.btn-nuevo { background: var(--brand); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.btn-nuevo:hover { background: var(--brand-oscuro); }

/* ---------- Login ---------- */
.pagina-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--brand); padding: 1rem; }
.login-caja { background: var(--card); border-radius: 14px; padding: 2rem; width: 100%; max-width: 380px; }
.login-caja .marca-app { color: var(--brand); }
.login-caja .tinta-puntos i:nth-child(4) { background: var(--tinta-k); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Tablas y acciones ---------- */
.tabla-lista th { font-size: 12px; font-weight: 600; color: var(--text-mute); border-bottom-width: 1px; }
.tabla-lista td { vertical-align: middle; }
.tabla-lista tr.inactivo td { opacity: .5; }
.acciones { white-space: nowrap; text-align: right; }
.acciones .btn { padding: 2px 8px; }
.font-oid { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }
.chip-tipo { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.chip-tipo .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-k); }
.chip-tipo.color .punto { background: conic-gradient(var(--tinta-c) 0 33%, var(--tinta-m) 0 66%, var(--tinta-y) 0); }
.estado-snmp { font-size: 12px; }
.estado-snmp.ok { color: #1E7B45; }
.estado-snmp.pendiente { color: #9A6B00; }

.caja-clave { background: var(--fondo); border: 1px dashed var(--borde); border-radius: 8px; padding: .75rem 1rem; display: grid; gap: .5rem; }
.caja-clave span:not(.campo-label) { font-size: 16px; font-weight: 600; word-break: break-all; }
.enlace-usuario { color: #fff; text-decoration: none; }
.enlace-usuario:hover { color: #fff; text-decoration: underline; }

/* ---------- Equipos ---------- */
.consumible { border: 1px solid var(--borde); border-radius: 8px; padding: .5rem .6rem; display: grid; gap: 4px; }
.consumible span { font-size: 12px; font-weight: 600; }
.barra-nivel { height: 8px; background: var(--fondo); border-radius: 4px; overflow: hidden; }
.barra-nivel i { display: block; height: 100%; width: 0; }
.linea-tiempo { list-style: none; padding-left: 0; margin: 0; border-left: 2px solid var(--borde); }
.linea-tiempo li { position: relative; padding: 0 0 .9rem 1rem; }
.linea-tiempo li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.nav-tabs .badge { font-size: 11px; }

/* ---------- Contrato ---------- */
.lista-datos { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: 14px; }
.lista-datos dt { font-weight: 400; color: var(--text-mute); }
.lista-datos dd { margin: 0; font-weight: 600; }
.tabla-lista tr.inactivo-suave td { color: var(--text-mute); }
.bloque-contador input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.codigo-grande { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 26px !important; letter-spacing: .12em; color: var(--brand); }