:root {
  --azul: #0f2f57;
  --azul-2: #164a7a;
  --celeste: #33a9dc;
  --celeste-suave: #eaf7fc;
  --verde: #16815f;
  --verde-suave: #edf8f3;
  --blanco: #ffffff;
  --gris-50: #f5f8fb;
  --gris-100: #e8eef4;
  --gris-300: #c9d4df;
  --gris-600: #5f6d7a;
  --gris-800: #243241;
  --error: #b42318;
  --ok: #13795b;
  --shadow: 0 18px 45px rgba(15, 47, 87, 0.12);
  --sidebar-width: 270px;
}

* {
  box-sizing: border-box;
}

[data-app-section][hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  color: var(--gris-800);
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg, #eef8fd 0%, var(--gris-50) 42%, #ffffff 100%);
}

body.home-page {
  position: relative;
  background: #07111b;
}

body.home-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("assets/fondo-inicio.png") center / cover no-repeat;
  opacity: 1;
}

@media (max-aspect-ratio: 3 / 2) {
  body.home-page::before {
    background-size: contain;
    background-position: center bottom;
  }
}

body.home-page > * {
  position: relative;
  z-index: 1;
}

/* La regla de capas anterior no debe incorporar el sidebar al flujo vertical. */
body.home-page > .sidebar {
  position: fixed;
  z-index: 100;
}

body.home-page > .topbar {
  position: sticky;
}

body.home-page > .sidebar-backdrop {
  position: fixed;
  z-index: 90;
}

body.login-page {
  position: relative;
  min-height: 100vh;
  background: #07111b;
}

body.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("assets/fondo-inicio.png") center / cover no-repeat;
  opacity: 0.9;
}

body.login-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(7, 17, 27, 0.88), rgba(15, 47, 87, 0.58));
}

body.login-page > * {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--azul);
  color: var(--blanco);
  border-bottom: 4px solid var(--celeste);
}

.topbar__inner {
  width: min(1440px, calc(100% - 40px));
  margin: 0 auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.topbar h1 {
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 2.5vw, 2.15rem);
  letter-spacing: 0;
}

.brand__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .12em;
  line-height: 1.05;
}

.brand__title-prefix {
  color: var(--azul-2);
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .04em;
}

.brand__title-name {
  color: var(--azul);
  background: linear-gradient(135deg, var(--azul) 18%, #168fc5 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 850;
  letter-spacing: -.035em;
  text-shadow: 0 5px 16px rgba(15, 47, 87, .12);
}

.brand__title-extension {
  margin-left: .3em;
  color: var(--celeste);
  font-size: .58em;
  font-weight: 700;
  letter-spacing: .02em;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand__logo {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18));
}

.topbar__actions,
.filters__actions,
.form-grid__actions,
.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.topbar__actions form,
.inline-form {
  margin: 0;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--blanco);
  font-size: 0.86rem;
  font-weight: 700;
}

.user-chip span + span {
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.26);
}

.page {
  width: min(1180px, calc(100% - 32px));
  margin: 28px auto 48px;
  min-width: 0;
}

.home-page .page {
  width: auto;
  max-width: 1500px;
  margin: 26px 24px 48px calc(var(--sidebar-width) + 24px);
}

.panel {
  background: var(--blanco);
  border: 1px solid var(--gris-100);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 28px);
  margin-bottom: 24px;
  min-width: 0;
}

.sidebar-toggle {
  width: 40px;
  height: 40px;
  margin-left: auto;
  flex: none;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 10px;
  display: grid;
  place-content: center;
  gap: 4px;
  background: rgba(255,255,255,.08);
  cursor: pointer;
}
.sidebar-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: white;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 25;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  color: var(--blanco);
  background: linear-gradient(180deg, #0b294c 0%, var(--azul) 55%, #091f39 100%);
  border-right: 1px solid rgba(255,255,255,.1);
  box-shadow: 12px 0 35px rgba(4,17,31,.18);
  overflow-y: auto;
}

/* Panel lateral claro con identidad institucional. */
body.home-page > .sidebar {
  color: var(--azul);
  background:
    radial-gradient(circle at 10% 0, rgba(51, 169, 220, .2), transparent 31%),
    linear-gradient(180deg, #f7fcff 0%, #eaf7fc 52%, #ffffff 100%);
  border-right: 1px solid rgba(51, 169, 220, .3);
  box-shadow: 14px 0 36px rgba(15, 47, 87, .14);
}

.sidebar__header { border-bottom-color: rgba(15, 47, 87, .1); }
.sidebar__header strong { color: var(--azul); }
.sidebar__header span,
.sidebar__user span { color: var(--gris-600); }
.sidebar__label { color: #688096; }

.sidebar__link {
  color: #35516d;
  border-color: transparent;
}
.sidebar__link:hover,
.sidebar__link:focus-visible,
.sidebar__link.is-active {
  color: var(--azul);
  border-color: rgba(51, 169, 220, .25);
  background: linear-gradient(90deg, rgba(51,169,220,.18), rgba(255,255,255,.8));
}
.sidebar__link.is-active { box-shadow: inset 3px 0 var(--celeste), 0 7px 18px rgba(15,47,87,.07); }
.sidebar__link--particular:hover { background: linear-gradient(90deg, rgba(22,129,95,.14), rgba(255,255,255,.8)); }
.sidebar__icon { color: #168fc5; }
.sidebar__icon svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar__footer { border-top-color: rgba(15, 47, 87, .1); }
.sidebar__avatar { box-shadow: 0 7px 16px rgba(51,169,220,.24); }
.sidebar__user strong { color: var(--azul); }
.sidebar__action {
  color: var(--azul-2);
  border-color: rgba(15,47,87,.16);
  background: rgba(255,255,255,.62);
}
.sidebar__action:hover { color: var(--azul); background: var(--blanco); border-color: rgba(51,169,220,.35); }
.sidebar__action--logout { color: var(--error); }
.sidebar-toggle {
  border-color: rgba(15,47,87,.2);
  background: var(--blanco);
  box-shadow: 0 6px 16px rgba(15,47,87,.1);
}
.sidebar-toggle span { background: var(--azul-2); }

#inicio, #inventario-equipos, #panel-control-equipos, #inventario-particulares { scroll-margin-top: 92px; }

.sidebar__header { display:flex; align-items:center; gap:12px; min-height:86px; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.12); }
.sidebar__header img { width:44px; height:44px; }
.sidebar__header div, .sidebar__user div { min-width:0; display:grid; gap:2px; }
.sidebar__header strong { font-size:1.18rem; letter-spacing:.04em; }
.sidebar__header span, .sidebar__user span { color:rgba(255,255,255,.68); font-size:.76rem; }
.sidebar__close { display:none; margin-left:auto; border:0; background:transparent; color:white; font-size:1.8rem; cursor:pointer; }
.sidebar__nav { padding:22px 14px; display:grid; gap:6px; }
.sidebar__label { margin:0 12px 8px; color:rgba(255,255,255,.48); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.sidebar__link { display:flex; align-items:center; gap:12px; min-height:46px; padding:10px 12px; border-radius:10px; color:rgba(255,255,255,.78); font-size:.9rem; font-weight:700; transition:.18s ease; }
.sidebar__link:hover, .sidebar__link:focus-visible, .sidebar__link.is-active { color:white; background:rgba(51,169,220,.2); outline:none; }
.sidebar__link.is-active { box-shadow:inset 3px 0 var(--celeste); }
.sidebar__link--particular:hover { background:rgba(22,129,95,.28); }
.sidebar__icon { width:24px; color:#8bd8ff; text-align:center; font-size:1.15rem; }
.sidebar__footer { margin-top:auto; padding:16px; display:grid; gap:9px; border-top:1px solid rgba(255,255,255,.12); }
.sidebar__user { display:flex; align-items:center; gap:10px; margin-bottom:4px; padding:6px; }
.sidebar__avatar { width:38px; height:38px; display:grid; place-items:center; flex:none; border-radius:50%; color:white!important; background:var(--celeste); font-weight:800; }
.sidebar__action { padding:9px 12px; border:1px solid rgba(255,255,255,.15); border-radius:8px; color:rgba(255,255,255,.78); text-align:center; font-size:.82rem; font-weight:700; }
.sidebar__action:hover { background:rgba(255,255,255,.08); color:white; }
.sidebar__action--logout { color:#ffd5d2; }
.sidebar-backdrop { display:none; }
.sidebar-toggle--mobile { display: none; }

@media (min-width: 1101px) {
  .home-page .topbar { margin-left:var(--sidebar-width); }
  .home-page .topbar .brand__logo { display:block; }
  .home-page .topbar__inner { padding-left:8px; }
  .home-page .sidebar,
  .home-page .topbar,
  .home-page .page { transition: margin .24s ease, transform .24s ease, width .24s ease; }
  .home-page.sidebar-collapsed .sidebar { transform: translateX(calc(-100% + 58px)); overflow: visible; }
  .home-page.sidebar-collapsed .sidebar__header { justify-content: flex-end; padding-inline: 8px; border-bottom: 0; }
  .home-page.sidebar-collapsed .sidebar__header > img,
  .home-page.sidebar-collapsed .sidebar__header > div,
  .home-page.sidebar-collapsed .sidebar__nav,
  .home-page.sidebar-collapsed .sidebar__footer { visibility: hidden; pointer-events: none; }
  .home-page.sidebar-collapsed .sidebar-toggle { visibility: visible; pointer-events: auto; }
  .home-page.sidebar-collapsed .topbar { margin-left: 58px; }
  .home-page.sidebar-collapsed .topbar .brand__logo { display: block; }
  .home-page.sidebar-collapsed .page {
    width: auto;
    max-width: none;
    margin-left: 76px;
    margin-right: 18px;
  }
}

.panel--institutional,
.panel--particular {
  position: relative;
  overflow: hidden;
  border-left-width: 6px;
}

.panel--institutional {
  border-left-color: var(--celeste);
  background: var(--blanco);
}

.panel--particular {
  border-left-color: var(--verde);
  background: var(--blanco);
}

.panel--institutional::before,
.panel--particular::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  pointer-events: none;
}

.panel--institutional::before {
  background: var(--celeste);
}

.panel--particular::before {
  background: var(--verde);
}

.panel--no-accent-lines {
  border-left: 1px solid var(--gris-100);
}

.panel--no-accent-lines::before {
  display: none;
}

.panel--institutional .eyebrow {
  color: var(--celeste);
}

.panel--toolbar.panel--institutional {
  margin-bottom: 12px;
}

.panel--institutional-stack {
  margin-bottom: 12px;
}

.panel--particular .eyebrow {
  color: var(--verde);
}

.panel--toolbar.panel--particular {
  margin-bottom: 12px;
}

.panel--particular .counter {
  background: var(--verde-suave);
  color: #0f684d;
}

.panel--particular .collapse-toggle,
.panel--particular .btn--primary,
.panel--particular .btn--secondary {
  background: var(--verde);
  box-shadow: 0 10px 22px rgba(22, 129, 95, 0.22);
}

.panel--particular .collapse-toggle:hover,
.panel--particular .collapse-toggle:focus-visible,
.panel--particular .btn--primary:hover,
.panel--particular .btn--secondary:hover {
  background: #106b4f;
}

.panel--particular input:focus,
.panel--particular select:focus,
.panel--particular textarea:focus {
  border-color: var(--celeste);
  box-shadow: 0 0 0 4px rgba(51, 169, 220, 0.16);
}

.panel--toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.panel--toolbar h2 {
  margin: 4px 0 0;
  color: var(--azul);
  font-size: 1.35rem;
}

.section-title {
  margin-bottom: 20px;
}

.section-title--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.section-title__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.section-title h2 {
  margin: 4px 0 0;
  color: var(--azul);
  font-size: 1.35rem;
}

.eyebrow {
  margin: 0;
  color: var(--celeste);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.counter {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--celeste-suave);
  color: var(--azul-2);
  font-weight: 700;
  white-space: nowrap;
}

.collapse-toggle {
  width: 38px;
  height: 38px;
  border: 1px solid var(--gris-300);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--celeste);
  color: var(--blanco);
  cursor: pointer;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.collapse-toggle:hover,
.collapse-toggle:focus-visible {
  background: var(--celeste);
  box-shadow: 0 10px 22px rgba(51, 169, 220, 0.24);
  transform: translateY(-1px);
  outline: none;
}

.collapse-toggle--small {
  width: 30px;
  height: 30px;
  border-color: #d7e3f0;
  border-radius: 999px;
  background: var(--blanco);
  color: #006bcf;
  font-size: 1.2rem;
  box-shadow: 0 7px 18px rgba(15, 47, 87, 0.12);
}

.collapse-toggle--small:hover,
.collapse-toggle--small:focus-visible {
  background: var(--blanco);
  color: #005db5;
  box-shadow: 0 10px 22px rgba(15, 47, 87, 0.16);
}

.collapsible-content {
  display: block;
  min-width: 0;
}

.collapsible-content.is-collapsed {
  display: none;
}

.dashboard-panel {
  display: grid;
  gap: 20px;
}

.status-group {
  display: grid;
  gap: 16px;
  min-height: 64px;
  padding: 18px;
  border: 1px solid #f1f5f9;
  border-radius: 18px;
  background: var(--blanco);
  box-shadow: 0 14px 34px rgba(15, 47, 87, 0.08);
}

.status-group + .status-group {
  margin-top: 8px;
}

.status-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.status-group__header h3 {
  margin: 0;
  color: #4b5565;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.status-group__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
}

.status-card {
  border: 1px solid var(--gris-100);
  border-radius: 8px;
  background: #fbfdff;
  padding: 16px;
  display: grid;
  gap: 8px;
  min-height: 132px;
}

.status-card__label,
.status-card__note {
  color: var(--gris-600);
  font-size: 0.84rem;
  font-weight: 700;
}

.status-card strong {
  color: var(--azul);
  font-size: 2rem;
  line-height: 1;
}

.status-card--total {
  border-top: 4px solid var(--celeste);
}

.status-card--ok {
  border-top: 4px solid #16a34a;
}

.status-card--danger {
  border-top: 4px solid #cf334d;
}

.status-card--warning {
  border-top: 4px solid #f59e0b;
}

.status-card--gray {
  border-top: 4px solid #64748b;
}

.status-card--violet {
  border-top: 4px solid #7c3aed;
}

.status-card--brown {
  border-top: 4px solid #8b5e34;
}

.status-card--muted {
  border-top: 4px solid var(--gris-300);
}

.form-grid,
.filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.filters {
  grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) auto;
  align-items: end;
  margin-bottom: 18px;
}

label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

label span {
  color: var(--gris-600);
  font-size: 0.9rem;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--gris-300);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--gris-800);
  background: var(--blanco);
  font: inherit;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

textarea {
  resize: vertical;
  min-height: 92px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--celeste);
  box-shadow: 0 0 0 4px rgba(51, 169, 220, 0.16);
}

#modal-alta-particular input:focus,
#modal-alta-particular select:focus,
#modal-alta-particular textarea:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 4px rgba(22, 129, 95, 0.16);
}

.field-error {
  border-color: var(--error);
  box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.12);
}

.form-grid__wide {
  grid-column: 1 / -1;
}

.form-grid__actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.btn,
.btn-icon {
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 15px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn:hover,
.btn-icon:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--celeste);
  color: var(--blanco);
  box-shadow: 0 10px 22px rgba(51, 169, 220, 0.24);
}

.btn--secondary {
  background: var(--celeste);
  color: var(--blanco);
  box-shadow: 0 10px 22px rgba(51, 169, 220, 0.24);
}

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.42);
  color: var(--blanco);
  background: rgba(255, 255, 255, 0.08);
}

.btn--light {
  background: var(--gris-100);
  color: var(--azul);
}

.filters__actions .btn {
  min-width: 120px;
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gris-100);
  border-radius: 8px;
}

table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--blanco);
}

th,
td {
  padding: 12px 13px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--gris-100);
  font-size: 0.94rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: normal;
}

th {
  background: var(--azul);
  color: var(--blanco);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

th:nth-child(1),
td:nth-child(1) {
  width: 16%;
}

th:nth-child(2),
td:nth-child(2) {
  width: 25%;
}

th:nth-child(3),
td:nth-child(3),
th:nth-child(4),
td:nth-child(4) {
  width: 13%;
}

th:nth-child(5),
td:nth-child(5) {
  width: 16%;
}

th:nth-child(6),
td:nth-child(6) {
  width: 11%;
  text-align: center;
}

th:nth-child(7),
td:nth-child(7) {
  width: 13%;
}

th:nth-child(7),
td:nth-child(7) {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

td:nth-child(7) {
  border-left-color: var(--gris-100);
}

th:nth-child(6),
th:nth-child(7) {
  white-space: nowrap;
}

.table--institucional,
.table--particulares {
  min-width: 1040px;
}

.table--institucional th:nth-child(7),
.table--institucional td:nth-child(7) {
  min-width: 136px;
}

.panel--particular table th {
  background: var(--verde);
}

.table--particulares th:nth-child(1),
.table--particulares td:nth-child(1) {
  width: 19%;
}

.table--particulares th:nth-child(2),
.table--particulares td:nth-child(2) {
  width: 9%;
}

.table--particulares th:nth-child(3),
.table--particulares td:nth-child(3) {
  width: 22%;
}

.table--particulares th:nth-child(4),
.table--particulares td:nth-child(4),
.table--particulares th:nth-child(5),
.table--particulares td:nth-child(5) {
  width: 12%;
}

.table--particulares th:nth-child(6),
.table--particulares td:nth-child(6) {
  width: 15%;
  text-align: center;
}

.table--particulares th:nth-child(7),
.table--particulares td:nth-child(7) {
  width: 11%;
  text-align: center;
}

.table--particulares th:nth-child(6),
.table--particulares th:nth-child(7) {
  white-space: nowrap;
}

.table--particulares th:nth-child(7),
.table--particulares td:nth-child(7) {
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.table--particulares td:nth-child(7) {
  border-left-color: var(--gris-100);
}

.image-uploader {
  display: block;
}

.image-uploader__title {
  display: block;
  margin-bottom: 8px;
  color: var(--azul);
  font-weight: 700;
}

.image-uploader__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.image-uploader__item {
  min-width: 0;
  padding: 12px;
  border: 1px dashed var(--gris-300);
  border-radius: 8px;
  background: var(--gris-50);
}

.image-uploader__preview {
  display: block;
  width: min(100%, 150px);
  aspect-ratio: 4 / 3;
  margin: 10px auto 0;
  object-fit: cover;
  border: 1px solid var(--gris-100);
  border-radius: 8px;
  background: var(--blanco);
  cursor: zoom-in;
}

.image-uploader__preview[hidden] {
  display: none;
}

.image-uploader__preview:focus-visible {
  outline: 3px solid rgba(51, 169, 220, 0.28);
  outline-offset: 2px;
}

.file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 10px;
  padding: 7px 14px;
  border: 1px solid var(--gris-300);
  border-radius: 6px;
  background: var(--blanco);
  color: var(--azul);
  font-weight: 700;
  cursor: pointer;
}

.file-button--danger {
  color: var(--error);
}

.file-button--danger.is-active {
  background: #fdeceb;
  border-color: #f6c5c0;
}

.image-uploader__item:focus-within .file-button {
  outline: 3px solid rgba(22, 129, 95, 0.22);
  outline-offset: 2px;
}

.file-button__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-status {
  display: block;
  margin-top: 8px;
  color: var(--ok);
  font-size: 0.86rem;
  font-weight: 700;
}

.file-status[hidden] {
  display: none;
}

.saved-images {
  display: block;
}

.saved-images__title {
  display: block;
  margin-bottom: 8px;
  color: var(--azul);
  font-weight: 700;
}

.saved-images__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.saved-images__item {
  margin: 0;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--gris-100);
  border-radius: 8px;
  background: var(--gris-50);
}

.saved-images__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--gris-100);
  background: var(--blanco);
  cursor: zoom-in;
}

.edit-particular-page .saved-images__image,
.edit-particular-page .saved-images__placeholder {
  width: min(100%, 150px);
  margin-inline: auto;
}

.edit-particular-page .saved-images__replacement[hidden],
.edit-particular-page [data-image-original][hidden] {
  display: none;
}

.edit-particular-page .saved-images__item {
  padding: 10px;
  text-align: center;
}

.edit-particular-page .saved-images__actions {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.edit-particular-page .saved-images__actions .image-replace,
.edit-particular-page .saved-images__actions .image-delete,
.edit-particular-page .saved-images__actions .file-button {
  margin: 0;
}

.edit-particular-page .saved-images__actions .file-button {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
}

.edit-particular-page .saved-images__actions .file-status {
  flex-basis: 100%;
  margin-top: 5px;
  font-size: 0.75rem;
}

.saved-images__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--gris-300);
  border-radius: 8px;
  background: var(--blanco);
  color: var(--gris-600);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.saved-images__image:focus-visible {
  outline: 3px solid rgba(22, 129, 95, 0.28);
  outline-offset: 2px;
}

.image-replace {
  display: block;
  margin-top: 10px;
}

.saved-images__item:focus-within .file-button {
  outline: 3px solid rgba(22, 129, 95, 0.22);
  outline-offset: 2px;
}

.image-delete {
  margin-top: 10px;
  border-color: #f6c5c0;
}

.saved-images__item figcaption {
  margin: 8px 0 0;
  color: var(--gris-600);
  font-size: 0.86rem;
  font-weight: 700;
}

.image-viewer {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 45;
  background: rgba(15, 47, 87, 0.78);
}

.image-viewer.is-open {
  display: flex;
}

.image-viewer__image {
  max-width: min(960px, 96vw);
  max-height: 90vh;
  border-radius: 8px;
  background: var(--blanco);
  box-shadow: 0 24px 70px rgba(15, 47, 87, 0.34);
}

.image-viewer__actions {
  position: fixed;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 10px;
  z-index: 1;
}

.image-viewer__close,
.image-viewer__fullscreen,
.image-viewer__download {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: var(--blanco);
  color: var(--azul);
  cursor: pointer;
  font-weight: 700;
}

.image-viewer__close svg,
.image-viewer__fullscreen svg,
.image-viewer__download svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.image-viewer__close:hover,
.image-viewer__fullscreen:hover,
.image-viewer__download:hover {
  background: var(--celeste-suave);
}

.image-viewer:fullscreen {
  padding: 0;
  background: #08182b;
}

.image-viewer:fullscreen .image-viewer__image {
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
}

@media (max-width: 720px) {
  .image-uploader__grid,
  .saved-images__grid {
    grid-template-columns: 1fr;
  }
}

tbody tr:hover {
  background: var(--celeste-suave);
}

tbody tr:last-child td {
  border-bottom: 0;
}

.empty {
  text-align: center;
  color: var(--gris-600);
  padding: 28px;
}

.empty--compact {
  margin: 0;
  padding: 16px;
}

.btn-icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1rem;
  white-space: nowrap;
  border: 1px solid #f2bfc6;
  border-radius: 8px;
  background: #fffafb;
  color: #d8233a;
  box-shadow: none;
}

.btn-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

td.actions {
  text-align: center;
  vertical-align: middle;
  padding-left: 10px;
  padding-right: 10px;
}

.actions__group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 98px;
}

.actions__group .inline-form {
  flex: 0 0 auto;
}

.actions__group .btn-icon {
  flex: 0 0 44px;
}

.inline-form {
  display: inline-flex;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.alert-editor {
  border: 1px solid #f18b9b;
  border-radius: 8px;
  background: #fff1f3;
  padding: 16px;
  display: grid;
  gap: 14px;
}

.alert-editor__title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #cf334d;
}

.alert-badge {
  border: 1px solid #ea7890;
  border-radius: 999px;
  padding: 5px 12px;
  color: #cf334d;
  background: #fff7f8;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.alert-editor p {
  margin: 0;
  color: var(--gris-600);
  font-size: 0.92rem;
}

.alert-dot {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 13px;
}

.alert-dot--red {
  background: #cf334d;
}

.alert-dot--orange {
  background: #f59e0b;
}

.alert-dot--green {
  background: #16a34a;
}

.alert-dot--gray {
  background: #64748b;
}

.alert-dot--violet {
  background: #7c3aed;
}

.alert-dot--brown {
  background: #8b5e34;
}

.alert-cell {
  text-align: center;
}

.alert-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--blanco);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(15, 47, 87, 0.12);
}

.alert-indicator.alert-dot--red {
  background: #cf334d;
}

.alert-indicator.alert-dot--orange {
  background: #f59e0b;
}

.alert-indicator.alert-dot--green {
  background: #16a34a;
}

.alert-indicator.alert-dot--gray {
  background: #64748b;
}

.alert-indicator.alert-dot--violet {
  background: #7c3aed;
}

.alert-indicator.alert-dot--brown {
  background: #8b5e34;
}

.muted {
  color: var(--gris-600);
}

.btn-icon--edit {
  background: #fffafb;
  border-color: #f2bfc6;
  color: #d8233a;
}

.btn-icon--delete {
  background: #fffafb;
  border-color: #f2bfc6;
  color: #d8233a;
}

.btn-icon--edit:hover,
.btn-icon--edit:focus-visible {
  background: #fff3f5;
  border-color: #e98f9d;
  color: #b7162b;
  box-shadow: 0 8px 16px rgba(216, 35, 58, 0.12);
}

.btn-icon--delete:hover,
.btn-icon--delete:focus-visible {
  background: #fff3f5;
  border-color: #e98f9d;
  color: #b7162b;
  box-shadow: 0 8px 16px rgba(216, 35, 58, 0.12);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--gris-100);
  border-radius: 8px;
  background: #f8fbfe;
  box-shadow: 0 10px 24px rgba(15, 47, 87, 0.08);
}

.pagination a,
.pagination__ellipsis {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--azul);
  font-size: 0.9rem;
  font-weight: 700;
}

.pagination a {
  background: transparent;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.pagination a:hover,
.pagination a:focus-visible {
  background: var(--celeste-suave);
  border-color: rgba(51, 169, 220, 0.28);
  outline: none;
  transform: translateY(-1px);
}

.pagination a.is-active {
  background: var(--azul);
  color: var(--blanco);
  border-color: var(--azul);
  box-shadow: 0 8px 18px rgba(15, 47, 87, 0.22);
}

.pagination__control {
  padding: 0 14px;
  background: var(--blanco);
  border-color: var(--gris-300) !important;
  box-shadow: 0 8px 18px rgba(15, 47, 87, 0.08);
}

.pagination__control.is-disabled {
  pointer-events: none;
  color: var(--gris-600);
  background: var(--gris-100);
  border-color: var(--gris-100) !important;
  box-shadow: none;
  opacity: 0.72;
}

.pagination__ellipsis {
  color: var(--gris-600);
  min-width: 28px;
}

.alert {
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(15, 47, 87, 0.08);
  transition: opacity 0.24s ease, transform 0.24s ease, margin 0.24s ease, padding 0.24s ease;
}

.alert--success {
  background: #e7f6ef;
  color: var(--ok);
  border: 1px solid #bfe7d3;
}

.alert--error {
  background: #fdeceb;
  color: var(--error);
  border: 1px solid #f6c5c0;
}

.alert--hide {
  opacity: 0;
  transform: translateY(-8px);
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: min(420px, calc(100% - 36px));
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--azul);
  color: var(--blanco);
  box-shadow: var(--shadow);
  z-index: 20;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.toast--hide {
  opacity: 0;
  transform: translateY(10px);
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 30;
}

.modal.is-open {
  display: flex;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 47, 87, 0.58);
  backdrop-filter: blur(4px);
}

.modal__dialog {
  position: relative;
  width: min(920px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: var(--blanco);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(15, 47, 87, 0.28);
  padding: clamp(18px, 3vw, 28px);
}

.modal__dialog--institutional {
  border-top: 5px solid var(--celeste);
}

.modal__dialog--particular {
  border-top: 5px solid var(--verde);
}

.modal__dialog--particular .eyebrow {
  color: var(--verde);
}

.modal__dialog--particular .btn--primary {
  background: var(--verde);
  box-shadow: 0 10px 22px rgba(22, 129, 95, 0.22);
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.modal__header h2 {
  margin: 4px 0 0;
  color: var(--azul);
  font-size: 1.35rem;
}

.modal__close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: var(--gris-100);
  color: var(--azul);
  cursor: pointer;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 700;
}

body.modal-open {
  overflow: hidden;
}

.login-shell {
  min-height: 100vh;
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: 32px 0;
}

.login-card {
  width: min(430px, 100%);
  padding: clamp(24px, 5vw, 36px);
  border: 1px solid rgba(232, 238, 244, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.login-card__logo {
  width: 74px;
  height: 74px;
  display: block;
  margin: 0 auto 18px;
  filter: drop-shadow(0 12px 18px rgba(15, 47, 87, 0.18));
}

.login-card h1 {
  margin: 8px 0 8px;
  color: var(--azul);
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  line-height: 1.1;
  text-align: center;
}

.login-card .eyebrow,
.login-card__subtitle {
  text-align: center;
}

.login-card__subtitle {
  margin: 0 0 22px;
  color: var(--gris-600);
  font-weight: 700;
}

.login-card__alert {
  margin-bottom: 18px;
}

.login-form {
  display: grid;
  gap: 16px;
}

.password-field {
  position: relative;
  display: block;
}

.password-field input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--azul-2);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.16s ease, color 0.16s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  background: var(--celeste-suave);
  color: var(--azul);
  outline: none;
}

.password-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-toggle__eye-off {
  display: none;
}

.password-toggle[aria-pressed="true"] .password-toggle__eye {
  display: none;
}

.password-toggle[aria-pressed="true"] .password-toggle__eye-off {
  display: block;
}

.login-form__submit {
  width: 100%;
  margin-top: 4px;
}

@media (max-width: 920px) {
  .topbar__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filters {
    grid-template-columns: 1fr;
  }

  .topbar__actions {
    justify-content: flex-start;
  }

  .filters__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1100px) {
  .sidebar {
    width: min(310px, 88vw);
    transform: translateX(-100%);
    transition: transform .24s ease;
  }

  .sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-open { overflow: hidden; }
  .sidebar-backdrop { position:fixed; inset:0; z-index:24; background:rgba(4,17,31,.58); backdrop-filter:blur(2px); }
  .sidebar-open .sidebar-backdrop { display:block; }
  .sidebar__close { display:block; }
  .sidebar-toggle--mobile { display: grid; flex: none; }
  .sidebar .sidebar-toggle { display: none; }
  body:not(.sidebar-open) .sidebar__header { justify-content:flex-start; padding-inline:20px; }
  .home-page .page { width:min(100% - 32px, 1180px); margin:24px auto 44px; }
  .topbar__inner { width:min(100% - 32px, 1180px); flex-direction:row; align-items:center; }
  .topbar__actions--desktop { margin-left:auto; }
  .brand { flex:1; }
  .brand__logo { width:46px; height:46px; flex-basis:46px; }
}

@media (max-width: 760px) {
  .topbar__actions--desktop { display:none; }
  .topbar h1 { font-size:1.15rem; }
  .topbar .eyebrow { font-size:.66rem; }
  .filters { grid-template-columns:1fr; }
  .image-uploader__grid, .saved-images__grid { grid-template-columns:1fr; }
}

@media (min-width: 1101px) and (max-width: 1350px), (min-aspect-ratio: 1 / 1) and (max-width: 1200px) {
  :root { --sidebar-width: 238px; }
  .home-page .page { margin-right:18px; margin-left:calc(var(--sidebar-width) + 18px); }
  .panel { padding:20px; }
  .status-grid { grid-template-columns:repeat(4, minmax(110px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; }
}

@media (max-width: 680px) {
  .topbar__inner,
  .page {
    width: min(100% - 20px, 1180px);
  }

  .brand {
    align-items: flex-start;
  }

  .brand__logo {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .panel {
    padding: 16px;
  }

  .panel--toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .panel--toolbar .btn {
    width: 100%;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }

  .topbar__actions,
  .topbar__actions form,
  .topbar__actions .btn,
  .user-chip,
  .form-grid__actions,
  .form-grid__actions .btn,
  .form-grid__actions a,
  .filters__actions,
  .filters__actions .btn,
  .filters__actions a {
    width: 100%;
  }

  .user-chip {
    align-items: flex-start;
    flex-direction: column;
  }

  .user-chip span + span {
    padding-left: 0;
    border-left: 0;
  }

  .section-title--split {
    align-items: flex-start;
    flex-direction: column;
  }

  table {
    min-width: 760px;
  }

  th,
  td {
    padding: 10px 9px;
    font-size: 0.86rem;
  }

  .pagination {
    gap: 8px;
  }

  .pagination__control {
    flex: 1 1 120px;
  }

  .pagination__pages {
    order: -1;
    width: 100%;
    justify-content: center;
  }
}

/* Refinamiento visual 2026: conserva la paleta y la estructura funcional. */
:root {
  --shadow: 0 18px 48px rgba(7, 31, 57, .13);
  --shadow-soft: 0 8px 24px rgba(7, 31, 57, .09);
  --radius-lg: 20px;
  --radius-md: 13px;
  --surface-glass: rgba(255, 255, 255, .96);
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.topbar {
  border-bottom-width: 1px;
  background: rgba(10, 40, 74, .94);
  box-shadow: 0 8px 30px rgba(3, 18, 34, .18);
  backdrop-filter: blur(16px);
}

.topbar__inner { min-height: 76px; padding-block: 10px; }
.topbar h1 { font-weight: 750; letter-spacing: -.025em; }
.topbar .eyebrow { color: #9ddfff; }

.sidebar {
  background:
    radial-gradient(circle at 0 0, rgba(51, 169, 220, .22), transparent 34%),
    linear-gradient(180deg, #0b294c 0%, #0f2f57 58%, #081d35 100%);
  box-shadow: 16px 0 45px rgba(4, 17, 31, .22);
}

.sidebar__header { min-height: 76px; }
.sidebar__nav { gap: 8px; }
.sidebar__link { min-height: 48px; border: 1px solid transparent; border-radius: 12px; }
.sidebar__link:hover, .sidebar__link:focus-visible, .sidebar__link.is-active {
  border-color: rgba(139, 216, 255, .16);
  background: linear-gradient(90deg, rgba(51,169,220,.24), rgba(51,169,220,.1));
}
.sidebar__action { min-height: 40px; display: grid; place-items: center; border-radius: 10px; }

.home-page .page { max-width: 1560px; }

.panel {
  border-color: rgba(201, 212, 223, .7);
  border-radius: var(--radius-lg);
  background: var(--surface-glass);
  box-shadow: var(--shadow);
}

.panel--institutional,
.panel--particular { border-left-width: 1px; }
.panel--institutional::before,
.panel--particular::before { height: 3px; }

.panel--toolbar { min-height: 96px; }
.panel--toolbar h2,
.section-title h2 { font-size: clamp(1.18rem, 1.7vw, 1.48rem); letter-spacing: -.02em; }
.eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.counter { border: 1px solid rgba(51,169,220,.14); }

.status-group {
  padding: clamp(14px, 2vw, 20px);
  border-color: var(--gris-100);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.status-card {
  position: relative;
  min-height: 122px;
  padding: 17px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #fff, #f7fafc);
  box-shadow: 0 5px 16px rgba(15, 47, 87, .06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.status-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,47,87,.11); }
.status-card strong { font-size: clamp(1.75rem, 3vw, 2.2rem); letter-spacing: -.04em; }

input, select, textarea {
  min-height: 46px;
  border-color: #cbd7e2;
  border-radius: 11px;
  background-color: #fbfdff;
}
input:hover, select:hover, textarea:hover { border-color: #aebdcb; }

.btn, .btn-icon {
  min-height: 44px;
  border-radius: 11px;
  font-size: .9rem;
  box-shadow: none;
}
.btn:focus-visible, .btn-icon:focus-visible, .collapse-toggle:focus-visible,
.sidebar-toggle:focus-visible, .sidebar__link:focus-visible {
  outline: 3px solid rgba(51, 169, 220, .4);
  outline-offset: 2px;
}
.btn--primary, .btn--secondary {
  background: linear-gradient(135deg, var(--celeste), #238fc3);
  box-shadow: 0 9px 20px rgba(51,169,220,.22);
}
.btn--light { border: 1px solid var(--gris-100); background: #f3f7fa; }

.table-wrap {
  border-color: #dce5ed;
  border-radius: 13px;
  box-shadow: inset 0 1px rgba(255,255,255,.7);
  scrollbar-width: thin;
  scrollbar-color: #94aabd #edf2f6;
}
th { background: linear-gradient(180deg, #143b66, var(--azul)); }
th, td { padding-block: 13px; }
tbody tr { transition: background .15s ease; }
tbody tr:nth-child(even) { background: #f8fbfd; }
tbody tr:hover { background: #eef8fc; }
.panel--particular table th { background: linear-gradient(180deg, #198866, #126f53); }
.panel--particular tbody tr:hover { background: #eef8f4; }

.modal__backdrop { backdrop-filter: blur(5px); }
.modal__dialog { border-radius: 22px; box-shadow: 0 28px 80px rgba(3,18,34,.32); }
.modal__header { position: sticky; top: 0; z-index: 2; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }

.login-shell { padding: 28px; }
.login-card {
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 32px 80px rgba(0,0,0,.3);
  backdrop-filter: blur(18px);
}
.login-card__logo { filter: drop-shadow(0 12px 22px rgba(15,47,87,.2)); }

/* En pantallas cuadradas se prioriza el ancho útil y una grilla equilibrada. */
@media (min-width: 761px) and (max-width: 1180px),
       (min-width: 761px) and (max-aspect-ratio: 5 / 4) {
  .home-page .page { width: calc(100% - 36px); margin: 22px auto 40px; }
  .topbar__inner { width: calc(100% - 36px); }
  .status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters__actions { grid-column: 1 / -1; }
  .panel { padding: 20px; }
}

@media (min-width: 1101px) and (max-width: 1400px) and (max-aspect-ratio: 5 / 4) {
  :root { --sidebar-width: 238px; }
  .home-page .page {
    width: auto;
    margin-left: calc(var(--sidebar-width) + 18px);
    margin-right: 18px;
  }
  .home-page .topbar { margin-left: var(--sidebar-width); }
  .topbar__inner { width: calc(100% - 36px); }
}

@media (max-width: 760px) {
  .topbar__inner { min-height: 68px; }
  .panel { border-radius: 16px; }
  .panel--toolbar { min-height: auto; }
  .modal__dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; }
}

@media (max-width: 520px) {
  .home-page .page { width: calc(100% - 20px); margin-top: 14px; }
  .topbar__inner { width: calc(100% - 20px); }
  .brand { gap: 10px; }
  .brand__logo { width: 42px; height: 42px; flex-basis: 42px; }
  .panel { padding: 14px; margin-bottom: 14px; }
  .section-title { margin-bottom: 15px; }
  .status-group { padding: 12px; }
  .status-card { min-height: 108px; }
  .login-shell { padding: 14px; }
  .login-card { border-radius: 20px; }

  /* Panel de control compacto y alineado en celulares. */
  #panel-control-equipos {
    gap: 14px;
  }

  #panel-control-equipos .section-title--split {
    gap: 12px;
  }

  #panel-control-equipos .section-title__actions {
    width: 100%;
    justify-content: space-between;
  }

  #panel-control-equipos .status-group {
    gap: 10px;
    min-height: 0;
    padding: 14px;
  }

  #panel-control-equipos .status-group + .status-group {
    margin-top: 0;
  }

  #panel-control-equipos .status-group__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  #panel-control-equipos .status-group__header h3 {
    min-width: 0;
    font-size: .9rem;
    line-height: 1.3;
  }

  #panel-control-equipos .status-group__actions {
    flex-wrap: nowrap;
  }
}

/* Tema final del menu lateral (se declara al final para cubrir estados responsive). */
.home-page .sidebar {
  background: var(--celeste);
}

.home-page .sidebar__header { border-bottom-color: rgba(15,47,87,.1); }
.home-page .sidebar__header strong,
.home-page .sidebar__user strong { color: var(--azul); }
.home-page .sidebar__header span,
.home-page .sidebar__user span { color: var(--gris-600); }
.home-page .sidebar__label { color: #688096; }
.home-page .sidebar__link { color: #35516d; }
.home-page .sidebar__link:hover,
.home-page .sidebar__link:focus-visible,
.home-page .sidebar__link.is-active {
  color: var(--azul);
  border-color: rgba(51,169,220,.25);
  background: linear-gradient(90deg, rgba(51,169,220,.18), rgba(255,255,255,.82));
}
.home-page .sidebar__link.is-active { box-shadow: inset 3px 0 var(--celeste), 0 7px 18px rgba(15,47,87,.07); }
.home-page .sidebar__link--particular:hover { background: linear-gradient(90deg, rgba(22,129,95,.14), rgba(255,255,255,.82)); }
.home-page .sidebar__icon { color: #168fc5; }
.home-page .sidebar__footer { border-top-color: rgba(15,47,87,.1); }
.home-page .sidebar__action {
  color: var(--azul-2);
  border-color: rgba(15,47,87,.16);
  background: rgba(255,255,255,.68);
}
.home-page .sidebar__action:hover { color: var(--azul); background: white; border-color: rgba(51,169,220,.35); }
.home-page .sidebar__action--export { border-color: var(--celeste); }
.home-page .sidebar__action--logout {
  color: var(--error);
  border-color: currentColor;
}

/* La barra superior comparte la identidad visual de los botones del menu. */
.home-page .topbar {
  color: var(--azul);
  border-bottom: 3px solid var(--celeste);
  background:
    radial-gradient(circle at 10% 0, rgba(51, 169, 220, .28), transparent 34%),
    linear-gradient(90deg, #f7fcff 0%, #eaf7fc 52%, #ffffff 100%);
  box-shadow: inset 3px 0 var(--celeste), 0 7px 18px rgba(15, 47, 87, .07);
  backdrop-filter: blur(16px);
}
.home-page .sidebar-toggle { border-color: rgba(15,47,87,.2); background: white; }
.home-page .sidebar-toggle span { background: var(--azul-2); }

/* Modulos alineados visualmente con los botones del menu lateral. */
.home-page .panel[data-app-section] {
  border: 1px solid rgba(51,169,220,.25);
  border-left: 4px solid var(--celeste);
  border-radius: 14px;
  background:
    linear-gradient(105deg, rgba(51,169,220,.14) 0%, rgba(234,247,252,.92) 24%, rgba(255,255,255,.96) 72%);
  box-shadow: 0 9px 24px rgba(15,47,87,.09);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.home-page .panel[data-app-section]:hover {
  transform: translateY(-1px);
  border-color: rgba(51,169,220,.42);
  box-shadow: 0 13px 30px rgba(15,47,87,.12);
}
.home-page .panel[data-app-section]::before {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--celeste), rgba(51,169,220,.08));
}
.home-page .panel[data-app-section] h2 { color: var(--azul); }
.home-page .panel[data-app-section] .eyebrow { color: #168fc5; }

.home-page .panel--particular[data-app-section] {
  border-color: rgba(22,129,95,.24);
  border-left-color: var(--verde);
  background:
    linear-gradient(105deg, rgba(22,129,95,.12) 0%, rgba(237,248,243,.94) 24%, rgba(255,255,255,.96) 72%);
}
.home-page .panel--particular[data-app-section]:hover {
  border-color: rgba(22,129,95,.4);
  box-shadow: 0 13px 30px rgba(15,77,58,.11);
}
.home-page .panel--particular[data-app-section]::before {
  background: linear-gradient(90deg, var(--verde), rgba(22,129,95,.08));
}
.home-page .panel--particular[data-app-section] .eyebrow { color: var(--verde); }

.home-page .panel[data-app-section] .counter {
  border: 1px solid rgba(51,169,220,.22);
  background: rgba(255,255,255,.72);
  box-shadow: 0 5px 14px rgba(15,47,87,.06);
}
.home-page .panel--particular[data-app-section] .counter { border-color: rgba(22,129,95,.2); }

/* Equipos particulares comparte la misma identidad visual institucional. */
.home-page .sidebar__link--particular:hover,
.home-page .sidebar__link--particular:focus-visible,
.home-page .sidebar__link--particular.is-active {
  color: var(--azul);
  border-color: rgba(51,169,220,.25);
  background: linear-gradient(90deg, rgba(51,169,220,.18), rgba(255,255,255,.82));
  box-shadow: inset 3px 0 var(--celeste), 0 7px 18px rgba(15,47,87,.07);
}

.home-page .panel--particular[data-app-section] {
  border-color: rgba(51,169,220,.25);
  border-left-color: var(--celeste);
  background:
    linear-gradient(105deg, rgba(51,169,220,.14) 0%, rgba(234,247,252,.92) 24%, rgba(255,255,255,.96) 72%);
  box-shadow: 0 9px 24px rgba(15,47,87,.09);
}
.home-page .panel--particular[data-app-section]:hover {
  border-color: rgba(51,169,220,.42);
  box-shadow: 0 13px 30px rgba(15,47,87,.12);
}
.home-page .panel--particular[data-app-section]::before {
  background: linear-gradient(90deg, var(--celeste), rgba(51,169,220,.08));
}
.home-page .panel--particular[data-app-section] .eyebrow { color: #168fc5; }
.home-page .panel--particular[data-app-section] .counter {
  color: var(--azul-2);
  border-color: rgba(51,169,220,.22);
  background: rgba(255,255,255,.72);
}
.home-page .panel--particular[data-app-section] .btn--primary,
.home-page .panel--particular[data-app-section] .btn--secondary,
.home-page .panel--particular[data-app-section] .collapse-toggle {
  color: var(--blanco);
  background: linear-gradient(135deg, var(--celeste), #238fc3);
  box-shadow: 0 9px 20px rgba(51,169,220,.22);
}
.home-page .panel--particular[data-app-section] .btn--primary:hover,
.home-page .panel--particular[data-app-section] .btn--secondary:hover,
.home-page .panel--particular[data-app-section] .collapse-toggle:hover,
.home-page .panel--particular[data-app-section] .collapse-toggle:focus-visible {
  background: linear-gradient(135deg, #2c9fd2, #1d7faa);
}

/* Unificacion celeste del alta y el inventario de equipos particulares. */
#modal-alta-particular.modal .modal__dialog--particular {
  border-top-color: var(--celeste);
}
#modal-alta-particular .eyebrow,
#modal-alta-particular .image-uploader__title,
#modal-alta-particular .saved-images__title {
  color: #168fc5;
}
#modal-alta-particular .btn--primary,
#modal-alta-particular .btn--secondary {
  color: var(--blanco);
  background: linear-gradient(135deg, var(--celeste), #238fc3);
  box-shadow: 0 9px 20px rgba(51,169,220,.22);
}
#modal-alta-particular .btn--primary:hover,
#modal-alta-particular .btn--secondary:hover {
  background: linear-gradient(135deg, #2c9fd2, #1d7faa);
}
#modal-alta-particular input:focus,
#modal-alta-particular select:focus,
#modal-alta-particular textarea:focus {
  border-color: var(--celeste);
  box-shadow: 0 0 0 4px rgba(51,169,220,.16);
}
#modal-alta-particular .image-uploader__item:focus-within .file-button,
#modal-alta-particular .saved-images__item:focus-within .file-button {
  outline-color: rgba(51,169,220,.28);
}
#modal-alta-particular .file-status { color: #168fc5; }

/* Accion principal de la edicion de equipos particulares. */
.edit-particular-page .panel--particular .eyebrow {
  color: var(--celeste);
}

.edit-particular-page .form-grid__actions .btn--primary {
  color: var(--blanco);
  background: linear-gradient(135deg, var(--celeste), #238fc3);
  box-shadow: 0 9px 20px rgba(51,169,220,.22);
}

.edit-particular-page .form-grid__actions .btn--primary:hover {
  background: linear-gradient(135deg, #2c9fd2, #1d7faa);
}

/* Encabezado de edicion particular sin superposiciones en celulares. */
@media (max-width: 680px) {
  .edit-particular-page .topbar,
  .edit-institutional-page .topbar {
    position: relative;
  }

  .edit-particular-page .topbar__inner,
  .edit-institutional-page .topbar__inner {
    width: calc(100% - 24px);
    min-height: 0;
    padding-block: 12px;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .edit-particular-page .brand,
  .edit-institutional-page .brand {
    width: 100%;
    align-items: center;
  }

  .edit-particular-page .brand__logo,
  .edit-institutional-page .brand__logo {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .edit-particular-page .topbar__actions,
  .edit-institutional-page .topbar__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  .edit-particular-page .user-chip,
  .edit-institutional-page .user-chip {
    grid-column: 1 / -1;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: 8px;
    padding: 8px 10px;
  }

  .edit-particular-page .user-chip span + span,
  .edit-institutional-page .user-chip span + span {
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.26);
  }

  .edit-particular-page .topbar__actions .btn,
  .edit-institutional-page .topbar__actions .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    white-space: normal;
    text-align: center;
  }

}

.home-page .panel--particular[data-app-section] table th {
  background: linear-gradient(180deg, #143b66, var(--azul));
}
.home-page .panel--particular[data-app-section] tbody tr:hover {
  background: #eef8fc;
}
.home-page .panel--particular[data-app-section] input:focus,
.home-page .panel--particular[data-app-section] select:focus,
.home-page .panel--particular[data-app-section] textarea:focus {
  border-color: var(--celeste);
  box-shadow: 0 0 0 4px rgba(51,169,220,.16);
}

/* Superficies opacas para mejorar la lectura sobre el fondo ilustrado. */
.home-page .panel[data-app-section],
.home-page .panel--particular[data-app-section] {
  background: linear-gradient(105deg, #edf8fc 0%, #f7fbfd 28%, #ffffff 72%);
  backdrop-filter: none;
}
.home-page .panel[data-app-section] .counter,
.home-page .panel--particular[data-app-section] .counter {
  background: #ffffff;
}

/* Encabezados celestes para ambas tablas de inventario. */
.home-page #inventario-equipos table th,
.home-page #inventario-particulares table th {
  color: var(--blanco);
  background: linear-gradient(180deg, #3cb2e2 0%, var(--celeste) 55%, #2495c7 100%);
  border-bottom-color: #2189b7;
}