:root {
  --color-institucional-principal: #0a2238;
  --color-institucional-secundario: #174d78;
  --color-fondo: #f3f6f9;
  --color-superficie: #ffffff;
  --color-texto: #172334;
  --color-texto-secundario: #667286;
  --color-borde: #d8e0e8;
  --color-exito: #1b6f50;
  --color-advertencia: #805a13;
  --color-error: #a72731;
  --radio-control: 8px;
  --radio-tarjeta: 12px;
  --sombra-suave: 0 8px 24px rgba(7, 23, 39, .08);
  --ancho-contenido: 96%;
  --altura-encabezado: 150px;
  --navy-950: #071727;
  --navy-900: var(--color-institucional-principal);
  --navy-800: #0f3658;
  --navy-700: var(--color-institucional-secundario);
  --paper: var(--color-superficie);
  --soft: var(--color-fondo);
  --line: var(--color-borde);
  --ink: var(--color-texto);
  --muted: var(--color-texto-secundario);
  --success: var(--color-exito);
  --warning: var(--color-advertencia);
  --danger: var(--color-error);
}

html { overflow-x: hidden; }
body { margin: 0; color: var(--color-texto); background: var(--color-fondo); font-family: "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { border-radius: var(--radio-control); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(200, 157, 75, .42);
  outline-offset: 2px;
}

body .institutional-header,
body .header {
  height: var(--altura-encabezado);
  min-height: var(--altura-encabezado);
  color: #fff;
  background: radial-gradient(circle at 76% 48%, rgba(231, 209, 155, .14), transparent 18%), linear-gradient(110deg, #071727, var(--color-institucional-principal) 44%, var(--color-institucional-secundario));
  border-bottom: 4px solid #c89d4b;
}
body .institutional-header { grid-template-columns: 112px minmax(0, 1fr) 112px; gap: 18px; padding: 22px 3%; }
body .institutional-logo,
body .logo-institutional { width: 84px; height: 84px; object-fit: contain; border-radius: 50%; background: #fff; border: 4px solid #e7d19b; padding: 5px; box-shadow: 0 10px 26px rgba(0, 0, 0, .2); }
body .institutional-title { gap: 7px; }
body .institutional-title small { font-size: 11px; letter-spacing: .16em; }
body .institutional-title h1 { font-size: clamp(27px, 3vw, 40px); line-height: 1.08; }
body .institutional-title p { font-size: 14px; }
body .header-inner { width: var(--ancho-contenido); max-width: 1840px; min-height: var(--altura-encabezado); padding: 20px 2%; grid-template-columns: 96px 1fr 96px; }
body .header-copy h1 { font-size: clamp(27px, 3vw, 40px); }
body .prototype-header-actions .btn { min-height: 32px; padding: 6px 12px; }

body[data-prototype="true"] > .page-shell,
body.institutional-page > .page-shell { width: var(--ancho-contenido); max-width: 1840px; padding: 22px 0 36px; grid-template-columns: minmax(0, 1fr); }
.institutional-page .panel { min-width: 0; border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-suave); }
.institutional-page .table-responsive { width: 100%; min-width: 0; overflow-x: auto; }
.institutional-page table { width: 100%; border-collapse: collapse; }
.institutional-page th { background: var(--color-institucional-principal); color: #fff; }
.institutional-page th, .institutional-page td { padding: 12px 14px; border-bottom: 1px solid var(--color-borde); text-align: left; vertical-align: top; }
.institutional-page button { min-height: 44px; padding: 10px 15px; border: 0; background: var(--color-institucional-secundario); color: #fff; font-weight: 800; cursor: pointer; }
.institutional-page button.secondary { background: #eef3f8; color: var(--color-institucional-principal); border: 1px solid var(--color-borde); }
.institutional-page button.warn { background: var(--color-error); color: #fff; }
.institutional-page input, .institutional-page select, .institutional-page textarea { min-height: 44px; border: 1px solid #c9d3df; padding: 10px 12px; background: #fff; color: var(--color-texto); }

body[data-prototype-panel="true"] { background: var(--color-fondo); font-family: "Segoe UI", Arial, sans-serif; }
body[data-prototype-panel="true"] > .page-shell { width: var(--ancho-contenido); max-width: 1840px; margin: 0 auto; }
body[data-prototype-panel="true"] .hero { height: var(--altura-encabezado); min-height: var(--altura-encabezado); padding-block: 0; background: linear-gradient(110deg, #071727, var(--color-institucional-principal) 44%, var(--color-institucional-secundario)); border-bottom: 4px solid #c89d4b; border-radius: 0; }
body[data-prototype-panel="true"] .hero-logo { width: 84px; height: 84px; object-fit: contain; }
body[data-prototype-panel="true"] .module-card,
body[data-prototype-panel="true"] .access-card,
body[data-prototype-panel="true"] .admin-panel,
body[data-prototype-panel="true"] .admin-module-card { border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-suave); }
body[data-prototype-panel="true"] .module-btn,
body[data-prototype-panel="true"] .admin-module-card { border-radius: var(--radio-control); }

body[data-prototype-panel="true"] .session-bar { display: none; }
.prototype-mode-badge { position: fixed; right: 14px; bottom: 14px; z-index: 50; padding: 6px 10px; border: 1px solid #d9c27e; border-radius: 999px; color: #654d12; background: #fff9e8; font-size: 11px; font-weight: 800; box-shadow: var(--sombra-suave); }
.operations-center { width: 100%; max-width: 1840px; margin: 0 auto; padding: 28px 0 48px; display: grid; gap: 28px; }
.operations-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 4px 2px; }
.operations-eyebrow { display: block; margin-bottom: 6px; color: var(--color-institucional-secundario); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.operations-intro h1 { margin: 0; color: var(--color-institucional-principal); font-size: clamp(30px, 3vw, 42px); line-height: 1.1; }
.operations-intro p, .operations-section-heading p { margin: 7px 0 0; color: var(--color-texto-secundario); line-height: 1.5; }
.operations-profile { flex: none; padding: 9px 14px; border: 1px solid #c9d8e5; border-radius: 999px; color: var(--color-institucional-principal); background: #edf4fa; font-size: 13px; font-weight: 800; }
.operations-primary, .operations-metrics, .operations-section { display: grid; gap: 14px; }
.operations-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.operations-section-heading h2 { margin: 0; color: var(--color-institucional-principal); font-size: 21px; }
.operations-section-heading > span { flex: none; color: var(--color-texto-secundario); font-size: 12px; font-weight: 800; }
.operations-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.operations-action-card { min-height: 174px; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 20px; padding: 24px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: linear-gradient(135deg, var(--color-institucional-principal), var(--color-institucional-secundario)); box-shadow: 0 14px 32px rgba(7,23,39,.16); transition: transform .18s ease, box-shadow .18s ease; }
.operations-action-card:nth-child(2) { color: var(--color-institucional-principal); border-color: #c8d7e4; background: linear-gradient(145deg, #fff, #edf4fa); }
.operations-action-card:hover, .operations-module-card:hover { transform: translateY(-2px); box-shadow: 0 15px 32px rgba(7,23,39,.14); }
.operations-center .operations-icon-box { display: flex; align-items: center; justify-content: center; overflow: hidden; flex-grow: 0; flex-shrink: 0; line-height: 0; }
.operations-center .operations-icon-box--primary { width: 56px; height: 56px; flex-basis: 56px; border-radius: 14px; color: #e7d19b; background: rgba(255,255,255,.10); }
.operations-center .operations-icon-box--module { width: 44px; height: 44px; flex-basis: 44px; border-radius: 11px; color: var(--color-institucional-secundario); background: #edf4fa; }
.operations-center .operations-icon-box--metric { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; color: var(--color-institucional-secundario); background: #edf4fa; }
.operations-center .operations-icon-box--primary > .operations-icon { width: 28px; height: 28px; max-width: 28px; max-height: 28px; }
.operations-center .operations-icon-box--module > .operations-icon { width: 24px; height: 24px; max-width: 24px; max-height: 24px; }
.operations-center .operations-icon-box--metric > .operations-icon { width: 22px; height: 22px; max-width: 22px; max-height: 22px; }
.operations-center .operations-icon-box > .operations-icon { display: block; flex: 0 0 auto; padding: 0; overflow: hidden; }
.operations-action-card:nth-child(2) > .operations-icon-box { color: var(--color-institucional-secundario); background: #e5eef6; }
.operations-card-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.operations-card-copy strong { font-size: 19px; line-height: 1.25; }
.operations-card-copy small { color: inherit; opacity: .82; font-size: 13px; line-height: 1.45; }
.operations-link-label { margin-top: 4px; font-size: 12px; font-weight: 900; }
.operations-status { padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.operations-status.available { color: #17583f; background: #e3f5ec; }
.operations-status.adapting { color: #72500c; background: #fff2cf; }
.operations-status.soon { color: #536275; background: #e8edf2; }
.operations-action-card:first-child .operations-status.available { color: #e7f8f0; background: rgba(32,134,95,.45); }
.operations-live { display: inline-flex; align-items: center; gap: 7px; }
.operations-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-exito); box-shadow: 0 0 0 4px rgba(27,111,80,.12); }
.operations-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.operations-metric { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 17px; border: 1px solid var(--color-borde); border-radius: var(--radio-tarjeta); background: var(--color-superficie); box-shadow: var(--sombra-suave); }
.operations-metric span { min-width: 0; display: grid; gap: 2px; }
.operations-metric small { color: var(--color-texto-secundario); font-size: 11px; font-weight: 800; }
.operations-metric strong { color: var(--color-institucional-principal); font-size: 27px; line-height: 1; }
.operations-metric em { overflow: hidden; color: #7b8797; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.operations-module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.operations-module-card { min-height: 186px; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 14px; padding: 19px; color: var(--color-texto); text-decoration: none; border: 1px solid var(--color-borde); border-radius: var(--radio-tarjeta); background: var(--color-superficie); box-shadow: var(--sombra-suave); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.operations-module-card:hover { border-color: #aebfce; }
.operations-module-card .operations-card-copy { height: 100%; }
.operations-module-card .operations-card-copy strong { color: var(--color-institucional-principal); font-size: 16px; }
.operations-module-card .operations-link-label { margin-top: auto; color: var(--color-institucional-secundario); }
.operations-footnote { margin: -8px 0 0; padding: 13px 15px; color: var(--color-texto-secundario); border-left: 3px solid #c89d4b; background: #fff; font-size: 12px; }

@media (max-width: 1280px) {
  .operations-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .operations-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .operations-center { padding-top: 20px; gap: 22px; }
  .operations-intro { align-items: flex-start; flex-direction: column; gap: 12px; }
  .operations-action-grid, .operations-module-grid { grid-template-columns: 1fr; }
  .operations-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  :root { --altura-encabezado: 112px; }
  body .institutional-header { grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 7px; padding: 13px 10px; }
  body .institutional-logo, body .logo-institutional { width: 52px; height: 52px; border-width: 3px; padding: 3px; }
  body .institutional-title small, body .header-copy small { font-size: 8px; letter-spacing: .08em; }
  body .institutional-title h1, body .header-copy h1 { font-size: clamp(19px, 6vw, 26px); }
  body .institutional-title p, body .header-copy p { display: none; }
  body .header-inner { width: 100%; grid-template-columns: 58px minmax(0, 1fr) 58px; gap: 7px; padding: 13px 10px; }
  body.institutional-page > .page-shell { width: 100%; padding: 12px 10px 28px; }
  body.institutional-page > .page-shell, .institutional-page .panel, .institutional-page .table-responsive { min-width: 0; }
  .institutional-page .grid { grid-template-columns: 1fr; }
  .institutional-page .top { padding: 8px 10px; }
  .institutional-page .top a { min-height: 40px; display: inline-flex; align-items: center; }
  .institutional-page .actions { display: grid; grid-template-columns: 1fr; }
  .institutional-page .actions button { width: 100%; }
  .operations-center { width: calc(100% - 20px); padding: 18px 0 34px; }
  .operations-intro h1 { font-size: 28px; }
  .operations-action-card { min-height: 150px; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .operations-metric-grid { grid-template-columns: 1fr; }
  .operations-section-heading { align-items: flex-start; }
  .operations-module-card { min-height: 160px; }
}