.page-diagramas { background: #f5f6f8; }
.page-diagramas .diagramas-hero { padding: 0; clip-path: none; -webkit-clip-path: none; }
.page-diagramas .diagramas-hero .section-hero__bg { padding: 160px 0 60px; background: #0c3688 url('../img/img-home-ronin.jpg') center 58% / cover no-repeat; background-attachment: scroll; }
.page-diagramas .diagramas-hero .section-hero__bg::before { background: linear-gradient(90deg,rgba(5,22,56,.88),rgba(5,22,56,.45)); }
.page-diagramas .diagramas-hero .section-hero__title span { color: #fff; }
.page-diagramas .diagramas-hero .uk-h1 { font-size: clamp(36px,5vw,60px); }
.page-diagramas .diagramas-hero .section-hero__breadcrumb { margin-top: 24px; justify-content: flex-start; }
.diagramas-content { padding-top: 40px; padding-bottom: 64px; }
.page-diagramas .diagramas-card { padding: 32px; background: #fff; margin: 0 0 28px; border: 1px solid #e2e7ef; border-radius: 4px; box-shadow: 0 5px 20px rgba(12,54,136,.04); }
.page-diagramas .diagramas-selector { border-top: 4px solid #ee2d3d; }
.page-diagramas .section-title { margin-bottom: 20px; }
.page-diagramas .section-title .uk-h2 { font-size: clamp(26px,3.5vw,38px); margin-top: 8px; }
.diagramas-model-form { display: flex; gap: 20px; align-items: flex-end; margin-top: 24px; }
.diagramas-model-form > div { flex: 1; min-width: 0; }
.diagramas-model-form label, .diagramas-select label { display: block; font-size: 14px; color: #333; margin-bottom: 8px; }
.page-diagramas .uk-select { height: 56px; border: 1px solid #bfc9db; color: #0c3688; font-size: 16px; border-radius: 3px; background-color: #fafbfe; }
.page-diagramas .uk-select:focus { border-color: #0c3688; outline: 2px solid rgba(12,54,136,.15); }
.diagramas-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.diagramas-toolbar p { margin: 0; color: #0c3688; font-weight: 700; }
.diagramas-back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: #fff; color: #0c3688; border-radius: 4px; }
.diagramas-heading { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; }
.diagramas-select { width: 340px; max-width: 100%; flex-shrink: 0; }
.diagramas-zoom-controls { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 16px 0; }
.diagramas-zoom-controls label { color: #0c3688; font-weight: 700; margin: 0; }
.diagramas-zoom-controls input { width: 180px; accent-color: #0c3688; }
.diagramas-zoom-controls .uk-button { font-size: 15px; height: 44px; line-height: 42px; }
.diagramas-viewer { position: relative; max-height: 640px; min-height: 200px; overflow: auto; border: 1px solid #dce2ed; background: #fff; cursor: grab; overscroll-behavior: contain; }
.diagramas-viewer.is-dragging { cursor: grabbing; }
#zoom_view { position: relative; width: 100%; margin: 0 auto; }
.page-diagramas #img_zoom { display: block; width: 100%; max-width: none; height: auto; margin: 0; user-select: none; }
#diagrama-marcadores { position: absolute; inset: 0; pointer-events: none; }
#diagrama-marcadores .marcador { position: absolute; display: block; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; pointer-events: auto; cursor: pointer; }
#diagrama-marcadores .marcador[hidden] { display: none; }
#diagrama-marcadores .marcador:hover, #diagrama-marcadores .marcador.is-selected, #diagrama-marcadores .marcador:focus-visible { border-color: #ee2d3d; background: rgba(238,45,61,.18); outline: 2px solid #ee2d3d; outline-offset: 1px; }
#diagrama-estado { margin: 12px 0 0; font-size: 14px; }
.diagramas-table-scroll { overflow-x: auto; }
#partes_diagrama { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14px; }
#partes_diagrama th { background: #0c3688; color: #fff; padding: 14px; text-align: left; }
#partes_diagrama td { padding: 12px 14px; border-bottom: 1px solid #e4e8ef; color: #333; }
#partes_diagrama tr:nth-child(even) { background: #f6f8fb; }
#partes_diagrama tr.is-selected { background: #fff1f2; box-shadow: inset 3px 0 #ee2d3d; }
.go_part { min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid #c9d4e7; border-radius: 3px; background: #fff; color: #0c3688; cursor: pointer; font: inherit; font-weight: 700; }
.page-diagramas .diagramas-related { padding: 0; }
.diagramas-related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.diagramas-related-card { padding: 20px; border-radius: 4px; background: #fff; color: #0c3688; border: 1px solid #e1e7ef; }
.diagramas-related-card img { display: block; width: 100%; height: 180px; object-fit: contain; background: #fff; margin-bottom: 16px; }
.diagramas-related-card span { display: block; font-weight: 700; }
@media (max-width: 767px) {
  .page-diagramas .diagramas-hero .section-hero__bg { padding: 130px 0 40px; }
  .diagramas-content { padding-top: 24px; padding-bottom: 40px; }
  .page-diagramas .diagramas-card { padding: 20px 16px; }
  .diagramas-model-form, .diagramas-heading { flex-direction: column; align-items: stretch; }
  .diagramas-select { width: 100%; }
  .diagramas-model-form .uk-button { width: 100%; }
  .diagramas-viewer { max-height: 480px; }
  .diagramas-zoom-controls { gap: 14px; }
  .diagramas-related-grid { grid-template-columns: 1fr; }
}