.school-logo {
  display: block;
  object-fit: contain;
}

.new-message-notice {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 120;
  min-width: 280px;
  padding: 15px 22px;
  border: 1px solid #1c6f95;
  border-left: 7px solid #24a7d2;
  background: linear-gradient(#f9fdff, #d9f3fb);
  color: #123764;
  font-weight: 800;
  letter-spacing: .4px;
  box-shadow: 0 10px 28px #21333d55;
  opacity: 0;
  transform: translate(18px, 18px);
  pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out;
}

.new-message-notice.show {
  opacity: 1;
  transform: translate(0, 0);
}

body.page-blink::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 115;
  pointer-events: none;
  animation: pageNotificationBlink .62s ease-in-out;
}

@keyframes pageNotificationBlink {
  0%, 100% { background: transparent; }
  18%, 58% { background: rgba(255,255,255,.55); }
  38% { background: rgba(21,159,201,.14); }
}

@media screen {
  body {
    zoom: .67;
  }
}

.login-logo {
  width: 118px;
  height: 118px;
  margin: 0 auto 6px;
}

.home-logo {
  position: static;
  width: 170px;
  height: 170px;
  opacity: .92;
}

.home-view {
  display: grid;
  place-items: center;
}

.identity-app-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.identity-mailbox {
  width: 20px;
  height: 20px;
  background: url("/assets/mailbox-red.png") center / contain no-repeat;
}

.sync-logo {
  grid-row: 1 / 4;
  width: 56px;
  height: 56px;
  display: block;
  object-fit: contain;
}

.header-logo {
  width: 70px;
  height: 70px;
}

@media (max-width: 800px) {
  .login-logo {
    width: 96px;
    height: 96px;
  }

  .home-logo {
    width: 120px;
    height: 120px;
  }
}

.toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.toolbar-icon,
.tree-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.toolbar-icon {
  width: 18px;
  height: 18px;
}

.tree-icon {
  width: 15px;
  height: 15px;
  margin-right: 4px;
  vertical-align: -2px;
}

.toolbar-icon::before,
.toolbar-icon::after,
.tree-icon::before,
.tree-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.icon-documents::before {
  left: 2px;
  top: 5px;
  width: 14px;
  height: 10px;
  background: linear-gradient(#ffc94c, #df8d18);
  border: 1px solid #a96600;
  clip-path: polygon(0 20%,42% 20%,52% 0,100% 0,100% 100%,0 100%);
}

.icon-documents::after {
  left: 6px;
  top: 0;
  width: 8px;
  height: 8px;
  background: #fff176;
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 92%,50% 70%,21% 92%,32% 57%,2% 35%,39% 35%);
}

.icon-server::before {
  left: 2px;
  top: 3px;
  width: 14px;
  height: 12px;
  background: linear-gradient(#d8e4ef, #788fa5);
  border: 1px solid #516c84;
}

.icon-server::after {
  left: 5px;
  top: 6px;
  width: 8px;
  height: 2px;
  background: #24435e;
  box-shadow: 0 4px 0 #24435e;
}

.icon-options::before,
.icon-admin::before {
  inset: 2px;
  border-radius: 50%;
  background: conic-gradient(#7d91a8 0 12%, transparent 12% 20%, #7d91a8 20% 32%, transparent 32% 40%, #7d91a8 40% 52%, transparent 52% 60%, #7d91a8 60% 72%, transparent 72% 80%, #7d91a8 80% 92%, transparent 92%);
  border: 2px solid #66798f;
}

.icon-options::after,
.icon-admin::after {
  inset: 6px;
  border-radius: 50%;
  background: #eef6fb;
}

.icon-casillas::before,
.icon-table::before {
  left: 2px;
  top: 3px;
  width: 14px;
  height: 12px;
  background: linear-gradient(90deg, transparent 31%, #5f89a8 31% 36%, transparent 36% 64%, #5f89a8 64% 69%, transparent 69%), linear-gradient(transparent 31%, #5f89a8 31% 36%, transparent 36% 64%, #5f89a8 64% 69%, transparent 69%), #d7eef8;
  border: 1px solid #5f89a8;
}

.icon-exit::before,
.icon-back::before {
  left: 1px;
  top: 5px;
  width: 16px;
  height: 8px;
  background: linear-gradient(#95cf4c, #4f9d19);
  clip-path: polygon(0 50%,42% 0,42% 30%,100% 30%,100% 70%,42% 70%,42% 100%);
  border-radius: 1px;
}

.icon-help::before {
  inset: 2px;
  border-radius: 50%;
  background: linear-gradient(#fefefe, #8fb8ef);
  border: 1px solid #527eb5;
}

.icon-help::after {
  content: "?";
  left: 6px;
  top: 0;
  color: #1e5795;
  font-size: 13px;
  font-weight: bold;
}

.tree-title {
  display: flex;
  align-items: center;
}

.tree-item,
.tree-child {
  display: flex;
  align-items: center;
  width: 100%;
}

.tree-item span:nth-child(2),
.tree-child span:nth-child(2) {
  flex: 1;
  text-align: left;
}

.tree-child {
  margin-left: 19px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  color: #1f1f1f;
  font: inherit;
  cursor: pointer;
}

.tree-child:hover,
.tree-child.active {
  background: #c7ddf5;
  outline: 1px solid #7aa4cf;
}

.tree-child em {
  margin-left: 4px;
  color: #333;
  font-style: normal;
}

.icon-bandejas::before,
.icon-processed::before {
  inset: 1px;
  border-radius: 50%;
  background: radial-gradient(circle, #e7f3ff 0 28%, #5aa3df 29% 54%, #2f76b8 55% 100%);
  border: 1px solid #306fa9;
}

.icon-inbox::before,
.icon-outbox::before,
.icon-transmitted::before {
  inset: 1px;
  border-radius: 50%;
  background: #75a9df;
  border: 1px solid #3b71ac;
}

.icon-inbox::after {
  left: 5px;
  top: 3px;
  width: 5px;
  height: 8px;
  background: #fff;
  clip-path: polygon(0 44%,50% 100%,100% 44%,66% 44%,66% 0,34% 0,34% 44%);
}

.icon-outbox::after,
.icon-transmitted::after {
  left: 5px;
  top: 4px;
  width: 5px;
  height: 8px;
  background: #fff;
  clip-path: polygon(0 56%,50% 0,100% 56%,66% 56%,66% 100%,34% 100%,34% 56%);
}

.icon-draft::before,
.icon-workflow::before {
  inset: 1px;
  border-radius: 50%;
  background: linear-gradient(#b9e78d, #57aa47);
  border: 1px solid #478c36;
}

.icon-draft::after,
.icon-workflow::after {
  left: 4px;
  top: 7px;
  width: 7px;
  height: 2px;
  background: #fff;
  box-shadow: 0 -3px 0 #fff;
  transform: rotate(-35deg);
}

.icon-recovered::before {
  inset: 1px;
  border-radius: 50%;
  background: linear-gradient(#ffd097, #e87922);
  border: 1px solid #b65a13;
}

.icon-recovered::after {
  left: 3px;
  top: 4px;
  width: 8px;
  height: 7px;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
}

.icon-deleted::before {
  inset: 1px;
  border-radius: 50%;
  background: #c95c5c;
  border: 1px solid #8b2d2d;
}

.icon-deleted::after {
  left: 3px;
  top: 7px;
  width: 9px;
  height: 2px;
  background: #fff;
}

.icon-station::before {
  left: 5px;
  top: 1px;
  width: 4px;
  height: 11px;
  background: linear-gradient(#ffffff, #c7c7c7);
  border: 1px solid #888;
}

.icon-station::after {
  left: 2px;
  top: 10px;
  width: 10px;
  height: 3px;
  background: #b7b7b7;
  border: 1px solid #888;
}

.tree-title {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 2px 4px;
}

.tree-title b {
  flex: 1;
  text-align: left;
}

.tree-title em {
  font-style: normal;
  font-weight: bold;
  padding-right: 4px;
}

.icon-documents::before {
  inset: 1px;
  width: auto;
  height: auto;
  border: 0;
  background: linear-gradient(135deg, #fff38a 0%, #ffc738 45%, #ee8614 100%);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 92%,50% 70%,21% 92%,32% 57%,2% 35%,39% 35%);
}

.icon-documents::after {
  content: none;
}

.icon-receive {
  background: url("/assets/ui/procesados.png") center / contain no-repeat;
}

.icon-receive::before,
.icon-receive::after {
  content: none;
}

.icon-processed::before {
  inset: 1px;
  width: auto;
  height: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #dfffff 0 16%, #48b7df 17% 38%, #1c78b9 39% 100%);
  border: 1px solid #185f9c;
  box-shadow: inset -3px -2px 0 rgba(0,0,0,.18);
}

.icon-processed::after {
  content: none;
}

.icon-bandejas,
.icon-inbox,
.icon-outbox,
.icon-draft,
.icon-processed,
.icon-recovered,
.icon-deleted,
.icon-server,
.icon-options,
.icon-casillas {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-bandejas { background-image: url("/assets/ui/bandejas.png"); }
.icon-inbox { background-image: url("/assets/ui/entrada.png"); }
.icon-outbox { background-image: url("/assets/ui/salida.png"); }
.icon-draft { background-image: url("/assets/ui/preenvio.png"); }
.icon-processed { background-image: url("/assets/ui/procesados.png"); }
.icon-recovered { background-image: url("/assets/ui/recuperados.png"); }
.icon-deleted { background-image: url("/assets/ui/eliminados.png"); }
.icon-server { background-image: url("/assets/ui/servidor.png"); }
.icon-options { background-image: url("/assets/ui/opciones.png"); }
.icon-casillas { background-image: url("/assets/ui/operacion-casillas.png"); }

.icon-bandejas::before,
.icon-bandejas::after,
.icon-inbox::before,
.icon-inbox::after,
.icon-outbox::before,
.icon-outbox::after,
.icon-draft::before,
.icon-draft::after,
.icon-processed::before,
.icon-processed::after,
.icon-recovered::before,
.icon-recovered::after,
.icon-deleted::before,
.icon-deleted::after,
.icon-server::before,
.icon-server::after,
.icon-options::before,
.icon-options::after,
.icon-casillas::before,
.icon-casillas::after {
  content: none !important;
}

.account-options-dialog {
  width: min(470px, 92vw);
  min-width: 420px;
}

.account-options-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -8px -8px 18px;
  padding: 7px 10px;
  color: #163f66;
  background: linear-gradient(90deg, #55c4de, #b7e8f1);
  border-bottom: 1px solid #639aad;
}

.account-options-dialog fieldset {
  display: grid;
  gap: 12px;
  margin: 12px 0 4px;
  padding: 18px;
  border: 1px solid #9faeb4;
}

.account-options-dialog label {
  display: grid;
  grid-template-columns: 155px 1fr;
  gap: 10px;
  align-items: center;
}

.icon-server::before {
  left: 1px;
  top: 2px;
  width: 12px;
  height: 9px;
  background: linear-gradient(#ffffff, #d9d9d9);
  border: 1px solid #888;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
}

.icon-server::after {
  left: 6px;
  top: 8px;
  width: 11px;
  height: 7px;
  background: linear-gradient(#eaf4ff, #89aac6);
  border: 1px solid #4f708b;
  border-radius: 1px 1px 3px 3px;
  box-shadow: inset 0 -3px 0 #5c7f9e;
}

.icon-options::before {
  left: 1px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: conic-gradient(#8e8e8e 0 12%, transparent 12% 20%, #8e8e8e 20% 32%, transparent 32% 40%, #8e8e8e 40% 52%, transparent 52% 60%, #8e8e8e 60% 72%, transparent 72% 80%, #8e8e8e 80% 92%, transparent 92%);
  border: 2px solid #777;
}

.icon-options::after {
  left: 10px;
  top: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: conic-gradient(#aaa 0 12%, transparent 12% 20%, #aaa 20% 32%, transparent 32% 40%, #aaa 40% 52%, transparent 52% 60%, #aaa 60% 72%, transparent 72% 80%, #aaa 80% 92%, transparent 92%);
  border: 2px solid #858585;
}

.icon-back::before {
  left: 1px;
  top: 4px;
  width: 16px;
  height: 10px;
  background: linear-gradient(#9bd64a, #3e9c1f);
  clip-path: polygon(0 50%,42% 0,42% 30%,100% 30%,100% 70%,42% 70%,42% 100%);
  border-radius: 1px;
}

.icon-back::after {
  content: none;
}

.icon-admin::before {
  inset: 1px;
  border-radius: 50%;
  background: linear-gradient(#54a8e8, #1269b0);
  border: 1px solid #0d4d87;
}

.icon-admin::after {
  left: 5px;
  top: 4px;
  width: 8px;
  height: 8px;
  background: #fff;
  clip-path: polygon(0 0,100% 0,100% 30%,50% 30%,100% 80%,80% 100%,30% 50%,30% 100%,0 100%);
}

.icon-casillas::before {
  left: 1px;
  top: 5px;
  width: 12px;
  height: 9px;
  background: #fff;
  border: 1px solid #9a9a9a;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
}

.icon-casillas::after {
  right: 0;
  top: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #dfffff 0 16%, #48b7df 17% 38%, #1c78b9 39% 100%);
  border: 1px solid #185f9c;
}

.icon-exit::before {
  inset: 1px;
  border-radius: 50%;
  background: linear-gradient(#f36b61, #b71818);
  border: 1px solid #8b1010;
  clip-path: none;
}

.icon-exit::after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 11px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 -3px 0 -1px #fff;
}

.icon-help::before {
  inset: 1px;
  border-radius: 50%;
  background: linear-gradient(#56b0f0, #0c69b5);
  border: 1px solid #084f8a;
}

.icon-help::after {
  content: "!";
  left: 7px;
  top: 0;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.icon-bandejas::before {
  inset: 1px;
  border-radius: 50%;
  background: linear-gradient(#56b0f0, #0c69b5);
  border: 1px solid #084f8a;
}

.icon-bandejas::after {
  left: 4px;
  top: 5px;
  width: 8px;
  height: 7px;
  background: #fff;
  clip-path: polygon(0 45%,50% 0,100% 45%,100% 100%,63% 100%,63% 62%,37% 62%,37% 100%,0 100%);
}

.icon-station::before,
.icon-transmitted::before {
  left: 2px;
  top: 5px;
  width: 11px;
  height: 7px;
  background: linear-gradient(#fff, #e7e7e7);
  border: 1px solid #8c8c8c;
  border-radius: 6px 6px 1px 1px;
}

.icon-station::after,
.icon-transmitted::after {
  left: 12px;
  top: 3px;
  width: 2px;
  height: 11px;
  background: #6f6f6f;
  box-shadow: -5px 9px 0 -1px #777;
}

.tree-icon.icon-mailbox {
  width: 16px;
  height: 16px;
  background: url("/assets/mailbox-red.png") center / contain no-repeat;
}

.tree-icon.icon-mailbox::before,
.tree-icon.icon-mailbox::after {
  content: none !important;
}

.icon-draft::before {
  inset: 1px;
  border-radius: 50%;
  background: linear-gradient(#a3dc5d, #3d9928);
  border: 1px solid #2f7a21;
}

.icon-draft::after {
  left: 4px;
  top: 7px;
  width: 8px;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 0 #fff, 3px -3px 0 -1px transparent;
}

.icon-draft {
  background: linear-gradient(transparent 0 0);
}

.icon-draft::after {
  transform: none;
  box-shadow: 0 0 0 #fff;
}

.icon-draft span {
  display: none;
}

.icon-draft::before {
  box-shadow: inset 0 0 0 0 #fff;
}

.icon-draft::after {
  height: 8px;
  width: 8px;
  background: linear-gradient(#fff,#fff) center/8px 2px no-repeat, linear-gradient(#fff,#fff) center/2px 8px no-repeat;
}

.icon-recovered::before {
  inset: 1px;
  width: auto;
  height: auto;
  border: 0;
  background: linear-gradient(#ffd36f, #e87918);
  clip-path: polygon(55% 0,100% 44%,72% 44%,72% 72%,43% 72%,43% 100%,0 58%,28% 58%,28% 28%,55% 28%);
  border-radius: 0;
}

.icon-recovered::after {
  content: none;
}

.drop-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
}

.menu-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
}

.menu-icon::before,
.menu-icon::after,
.submenu-arrow::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.drop-menu button > span:nth-child(2) {
  flex: 1;
  text-align: left;
}

.submenu-arrow {
  position: relative;
  width: 12px;
  height: 16px;
  flex: 0 0 auto;
}

.submenu-arrow::before {
  top: 3px;
  left: 3px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #1b1b1b;
}

.icon-config-local::before {
  left: 5px;
  top: 13px;
  width: 23px;
  height: 4px;
  background: linear-gradient(#cfcfcf, #888);
  border-radius: 2px;
  transform: rotate(-42deg);
  box-shadow: 0 0 0 1px rgba(90,90,90,.25);
}

.icon-config-local::after {
  left: 7px;
  top: 4px;
  width: 4px;
  height: 22px;
  background: linear-gradient(#e7e7e7, #9c9c9c);
  border-radius: 2px;
  transform: rotate(42deg);
  box-shadow: 0 9px 0 1px #d65242, 0 9px 0 3px rgba(150,30,30,.22);
}

.icon-operators::before {
  left: 4px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff0c8 0 20%, #d49a5b 21% 100%);
  box-shadow: 9px 1px 0 -2px #5cb7d2;
}

.icon-operators::after {
  left: 2px;
  top: 17px;
  width: 24px;
  height: 11px;
  background: linear-gradient(90deg, #48b74b 0 42%, #2f93cf 43% 100%);
  border-radius: 9px 9px 2px 2px;
  transform: rotate(6deg);
}

.icon-statistics::before {
  left: 4px;
  top: 21px;
  width: 22px;
  height: 2px;
  background: #7b7b7b;
  box-shadow: 0 5px 0 #7b7b7b;
}

.icon-statistics::after {
  left: 7px;
  top: 8px;
  width: 5px;
  height: 13px;
  background: #2d83cf;
  box-shadow: 7px -5px 0 #63bd3e, 14px 3px 0 #e98422;
}

.icon-log::before {
  left: 4px;
  top: 4px;
  width: 21px;
  height: 22px;
  background: repeating-linear-gradient(#f6f6f6 0 4px, #e9e9e9 5px 6px);
  border: 1px solid #9b9b9b;
  box-shadow: 3px 3px 0 #dedede;
}

.icon-log::after {
  left: 8px;
  top: 8px;
  width: 12px;
  height: 1px;
  background: #b9b9b9;
  box-shadow: 0 5px 0 #b9b9b9, 0 10px 0 #b9b9b9;
}

.icon-backup::before {
  left: 9px;
  top: 3px;
  width: 12px;
  height: 22px;
  background: linear-gradient(#9ed35d, #5bae2c);
  clip-path: polygon(24% 0,76% 0,76% 58%,100% 58%,50% 100%,0 58%,24% 58%);
  border: 1px solid #4b9627;
}

.icon-backup::after {
  left: 5px;
  top: 23px;
  width: 20px;
  height: 3px;
  background: #8dbc57;
  border-radius: 2px;
}

.icon-recover-docs::before {
  left: 3px;
  top: 6px;
  width: 22px;
  height: 18px;
  border: 6px solid #f0b63d;
  border-left-color: #d88719;
  border-bottom-color: #d88719;
  border-radius: 50%;
  transform: rotate(28deg);
}

.icon-recover-docs::after {
  left: 18px;
  top: 3px;
  width: 10px;
  height: 10px;
  background: #f0b63d;
  clip-path: polygon(0 0,100% 45%,20% 100%);
  transform: rotate(20deg);
}

/* Ajustes finos segun referencias ampliadas */
.icon-exit::before {
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ff9b91 0 16%, #e2382e 17% 62%, #a51414 63% 100%);
  border: 1px solid #7e0e0e;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.55);
}

.icon-exit::after {
  left: 4px;
  top: 3px;
  width: 10px;
  height: 10px;
  background:
    linear-gradient(#fff,#fff) center 0 / 2px 8px no-repeat,
    radial-gradient(circle at center 58%, transparent 0 38%, #fff 39% 52%, transparent 53%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.icon-config-local::before {
  left: 4px;
  top: 13px;
  width: 24px;
  height: 5px;
  background: linear-gradient(90deg, #c84f3f 0 28%, #dcdcdc 29% 64%, #808080 65% 100%);
  border: 0;
  border-radius: 4px 1px 1px 4px;
  transform: rotate(-45deg);
  box-shadow: 0 0 0 1px rgba(120,120,120,.25);
}

.icon-config-local::after {
  left: 4px;
  top: 13px;
  width: 24px;
  height: 5px;
  background:
    radial-gradient(circle at 87% 50%, transparent 0 3px, #9d9d9d 3.2px 6px, transparent 6.2px) right center / 9px 9px no-repeat,
    linear-gradient(90deg, #bfc4c5 0 22%, #ececec 23% 55%, #8f9699 56% 100%);
  border: 0;
  border-radius: 1px 5px 5px 1px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(100,100,100,.16);
}

.icon-bandejas::after {
  left: 3px;
  top: 4px;
  width: 9px;
  height: 8px;
  background: #fff;
  clip-path: polygon(0 48%,50% 3%,100% 48%,88% 48%,88% 100%,61% 100%,61% 66%,39% 66%,39% 100%,12% 100%,12% 48%);
}

.icon-draft::after {
  left: 4px;
  top: 4px;
  width: 7px;
  height: 7px;
  background:
    linear-gradient(#fff,#fff) center / 7px 2px no-repeat,
    linear-gradient(#fff,#fff) center / 2px 7px no-repeat;
  border: 0;
  transform: none;
  box-shadow: none;
}

.compose-sti-dialog {
  width: min(1120px, 96vw);
  max-height: calc(100vh / .67 - 24px);
  overflow: hidden;
  background: #f4f3ec;
}

.sti-compose-header {
  display: grid;
  grid-template-columns: 110px 1fr 110px;
  align-items: center;
  padding: 20px 34px 12px;
  color: #151515;
  text-align: center;
}

.sti-compose-header::after {
  content: "";
}

.sti-compose-header .header-logo {
  justify-self: start;
  width: 82px;
  height: 82px;
}

.sti-compose-header > div {
  justify-self: center;
  text-align: center;
}

.sti-compose-header b,
.sti-compose-header strong {
  display: block;
  margin: 8px 0;
  font-weight: 800;
}

.sti-fieldset {
  background: #f5f4ee;
  padding: 8px 18px 14px;
}

.sti-header-grid {
  display: grid;
  grid-template-columns: 160px 160px 170px 220px;
  gap: 9px 28px;
  align-items: end;
}

.sti-header-grid label {
  display: block;
  width: 100%;
  color: #38321f;
  font-weight: 700;
}

.message-type-label {
  grid-column: 1 / 4;
}

.priority-label {
  grid-column: 1;
}

.date-label {
  grid-column: 2;
}

.classification-label {
  grid-column: 3;
}

.ta-origin-label {
  grid-column: 4;
  min-width: 220px;
}

.del-label {
  grid-column: 1;
}

.sti-header-grid select,
.sti-header-grid input,
.topic-row input {
  height: 24px;
  padding: 2px 5px;
  border: 1px solid #9a9a8e;
  background: #ecebe3;
  font: 13px Tahoma, "Segoe UI", sans-serif;
}

.sti-header-grid label select,
.sti-header-grid label input {
  width: 100%;
}

.sti-header-grid #origin:disabled {
  color: #1f2c33;
  background: #ecebe3;
  opacity: 1;
  cursor: default;
}

.date-label {
  position: relative;
}

.date-picker-wrap {
  display: grid;
  grid-template-columns: 1fr 28px;
}

.date-picker-wrap input {
  border-right: 0;
}

.date-picker-button {
  height: 24px;
  border: 1px solid #7f9aae;
  background: linear-gradient(#f5f9fb, #c8d8e0);
  color: #234b63;
  cursor: pointer;
}

.header-calendar {
  position: absolute;
  z-index: 120;
  left: 206px;
  top: 398px;
  width: 310px;
  padding: 7px 9px 9px;
  border: 1px solid #6f8fa6;
  background: #f0efe8;
  box-shadow: 3px 5px 12px #2d3d4450;
  color: #1e2b30;
  font: 14px Tahoma, "Segoe UI", sans-serif;
}

.calendar-head {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  margin-bottom: 5px;
  text-align: center;
}

.calendar-head button {
  border: 0;
  background: transparent;
  color: #0f2e42;
  font-size: 15px;
  cursor: pointer;
}

.calendar-title {
  font-size: 16px;
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.calendar-weekdays span {
  padding: 4px 0 3px;
  font-weight: 700;
}

.calendar-days button {
  height: 22px;
  border: 1px solid transparent;
  background: transparent;
  color: #2f3a3d;
  font-size: 14px;
  cursor: pointer;
}

.calendar-days button.outside-month {
  color: #8d8c82;
}

.calendar-days button.today {
  border-color: #1f78b6;
  background: #dceaf2;
}

.calendar-days button.selected {
  border-color: #134d83;
  background: #9ec5dc;
  outline: 1px dotted #102d46;
  outline-offset: -4px;
}

.calendar-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  font-size: 14px;
}

.calendar-footer .today-box {
  width: 42px;
  height: 18px;
  border: 1px solid #6f9fbd;
  background: #f5f4ee;
}

.link-button {
  border: 0;
  background: transparent;
  color: #263b9c;
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
}

.centered {
  display: block;
  margin: 6px auto;
}

.sti-destinations {
  display: grid;
  grid-template-columns: 1fr 54px 1fr 1fr;
  gap: 22px;
  align-items: end;
  margin: 8px 0 14px;
}

.sti-destinations b,
.sti-destinations span {
  display: block;
  color: #2d2a1c;
  font-weight: 800;
}

.sti-destinations select {
  width: 100%;
  height: 118px;
  background: #f6f6f2;
  border: 1px solid #8c8c86;
}

.message-row textarea {
  min-height: 130px;
  font-family: "Courier New", monospace;
}

.context-menu {
  min-width: 315px;
}

.context-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.context-submenu {
  display: none;
  position: absolute;
  left: calc(100% - 4px);
  top: -4px;
  min-width: 190px;
  padding: 4px;
  border: 1px solid #7f8d92;
  background: #f3f5f5;
  box-shadow: 3px 5px 12px #26394055;
}

.context-send-item {
  position: relative;
}

.context-send-item:hover > .context-submenu,
.context-send-item:focus-within > .context-submenu {
  display: block;
}

.context-submenu-arrow {
  position: absolute;
  right: 8px;
  top: 8px;
  color: #23343d;
  font-size: 10px;
  pointer-events: none;
}

.context-icon {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.context-menu button {
  min-height: 31px;
}

.ctx-edit-art {
  background-image: url("/assets/context/edit.png");
}

.ctx-send-art {
  background-image: url("/assets/context/send.png");
}

.ctx-export-art {
  background-image: url("/assets/context/export.png");
}

.ctx-forward-art {
  background-image: url("/assets/context/forward.png");
}

.ctx-delete-art {
  background-image: url("/assets/context/delete.png");
}

.ctx-shipcom-art {
  background-image: url("/assets/context/shipcom.png");
}

.ctx-manual-art {
  background-image: url("/assets/context/manual.png");
}

.ctx-auto-art {
  background-image: url("/assets/context/automatic.png");
}

.context-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #759079;
}

.context-dot.manual {
  background: radial-gradient(circle, #e9ffe7 0 35%, #73c44e 36% 100%);
}

.context-dot.auto {
  background: radial-gradient(circle, #eef7ff 0 35%, #91bdce 36% 100%);
}

.paper {
  width: 780px;
  min-height: 680px;
  padding: 0;
  background: #efeee8;
  border: 1px solid #7b7b77;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  font-family: Arial, sans-serif;
}

.naval-page {
  position: relative;
  width: 700px;
  min-height: 620px;
  margin: 32px auto;
  padding: 44px 34px;
  background: #f7f6ef;
  color: #111;
  font-family: Arial, sans-serif;
  font-size: 10pt;
}

.naval-page .page-no {
  position: absolute;
  right: 46px;
  top: 32px;
  font-weight: 700;
}

.naval-page h2 {
  margin: 0 0 28px;
  text-align: center;
  font-size: 10pt;
  letter-spacing: .3px;
}

.naval-meta {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.2fr 1fr;
  gap: 24px;
  margin-bottom: 18px;
}

.naval-meta span b {
  display: block;
}

.bt-line {
  margin: 68px 0 14px;
  padding-top: 6px;
  border-top: 3px solid #111;
}

.naval-page h3 {
  text-align: center;
  font-size: 10pt;
  font-weight: 400;
}

.naval-page .paper-message {
  min-height: 58px;
  white-space: pre-wrap;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.responsable {
  margin-top: 18px;
}

.document-tabs button {
  margin-right: 22px;
  border: 0;
  background: transparent;
  padding: 5px 8px;
  cursor: pointer;
}

.document-tabs {
  position: relative;
}

.compose-actions-top {
  position: absolute;
  right: 16px;
  top: 4px;
  display: flex;
  gap: 17px;
  align-items: center;
}

.compose-icon-button {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
}

.compose-icon-button::before,
.compose-icon-button::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.compose-icon-button.print::before {
  left: 9px;
  top: 13px;
  width: 30px;
  height: 22px;
  background: linear-gradient(#242a30 0 34%, #c6d0d7 35% 66%, #3c454c 67% 100%);
  border: 1px solid #77858a;
}

.compose-icon-button.print::after {
  left: 14px;
  top: 30px;
  width: 20px;
  height: 12px;
  background: linear-gradient(#fff8b0, #d6c74e);
  border: 1px solid #9f983e;
}

.compose-icon-button.preview::before {
  left: 10px;
  top: 6px;
  width: 28px;
  height: 36px;
  background: repeating-linear-gradient(#eef2f2 0 5px, #c7d1d1 6px 7px);
  border: 1px solid #a4adad;
  box-shadow: 2px 2px 0 #d5d5d0;
}

.compose-icon-button.preview::after {
  left: 12px;
  top: 23px;
  width: 16px;
  height: 16px;
  border-left: 2px solid #202020;
  border-bottom: 2px solid #202020;
  transform: rotate(-35deg);
}

.compose-icon-button.save::before {
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #d7f6a7 0 20%, #83d24d 21% 67%, #27891f 68% 100%);
  border: 1px solid #28751d;
}

.compose-icon-button.save::after {
  left: 20px;
  top: 14px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid white;
  filter: drop-shadow(0 0 1px #659f50);
}

.compose-icon-button.cancel::before,
.compose-icon-button.cancel::after {
  left: 21px;
  top: 6px;
  width: 8px;
  height: 38px;
  border-radius: 3px;
  background: linear-gradient(#ff8f85, #c61b1b);
  box-shadow: 0 0 1px #6e0f0f;
}

.compose-icon-button.cancel::before {
  transform: rotate(45deg);
}

.compose-icon-button.cancel::after {
  transform: rotate(-45deg);
}

.document-tabs .tab-active {
  border: 1px solid #a0a8a8;
  border-bottom-color: #f4f3ec;
  background: #f4f3ec;
  font-weight: 700;
}

.viewer-title {
  align-items: center;
}

.viewer-title-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.viewer-print-button,
.viewer-close-button {
  position: relative;
  width: 30px;
  height: 26px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.viewer-close-button {
  color: #35454c;
  font-weight: 700;
  font-size: 16px;
}

.viewer-print-button::before,
.viewer-print-button::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.viewer-print-button::before {
  left: 4px;
  top: 6px;
  width: 22px;
  height: 14px;
  background: linear-gradient(#242a30 0 34%, #c6d0d7 35% 66%, #3c454c 67% 100%);
  border: 1px solid #77858a;
}

.viewer-print-button::after {
  left: 8px;
  top: 17px;
  width: 14px;
  height: 8px;
  background: linear-gradient(#fff8b0, #d6c74e);
  border: 1px solid #9f983e;
}

[data-sort] {
  cursor: pointer;
  user-select: none;
}

[data-sort].sort-active {
  color: #102d63;
  background: linear-gradient(#ffffff, #cddbe0);
}

[data-sort].sort-active::after {
  content: " ▼";
  color: #1b5270;
  font-size: 11px;
}

[data-sort].sort-active[data-dir="asc"]::after {
  content: " ▲";
}

.destination-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 12px 0 6px;
}

.destination-links #selectDestinations {
  justify-self: center;
}

.destination-links #selectExcepted {
  justify-self: center;
}

.sti-destinations {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 120px;
}

.sti-destinations select {
  height: 120px;
}

.destinations-dialog {
  width: 640px;
}

.destinations-window {
  padding: 18px 22px;
  background: #efefeb;
}

.destination-mode {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.destination-picker {
  display: grid;
  grid-template-columns: 230px 55px 220px 28px;
  gap: 20px;
  align-items: center;
}

.destination-picker select {
  width: 100%;
  height: 215px;
  background: #f8f8f2;
  border: 1px solid #8b8b86;
}

.destination-targets {
  display: grid;
  gap: 6px;
}

.destination-targets select {
  height: 92px;
}

.green-arrows,
.dest-order {
  display: grid;
  gap: 8px;
  align-content: center;
}

.green-arrows button {
  width: 43px;
  height: 43px;
  border: 1px solid #7f8f78;
  border-radius: 4px;
  background: radial-gradient(circle, #dffff0 0 24%, #78cc43 25% 70%, #4f9d20 71%);
  color: white;
  font-size: 25px;
  font-weight: 800;
}

.dest-order button {
  border: 0;
  background: transparent;
  color: #67b936;
  font-size: 20px;
  font-weight: 800;
}

.message-editor-dialog {
  width: min(1000px, 96vw);
  height: min(720px, 94vh);
  background: #f0f0ea;
}

.editor-title {
  padding: 5px 8px;
  font-size: 12px;
}

.editor-menu,
.editor-toolbar {
  padding: 5px 10px;
  border-bottom: 1px solid #c2c2bc;
  font-size: 12px;
}

.editor-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
}

.editor-toolbar select {
  height: 24px;
  padding: 2px;
}

.editor-toolbar button {
  min-width: 24px;
  height: 24px;
}

.message-editor-page {
  width: 520px;
  min-height: 620px;
  margin: 20px auto;
  padding: 34px;
  background: #fff;
  border: 1px solid #777;
  outline: none;
  font: 10pt Arial, sans-serif;
  white-space: pre-wrap;
}

.editor-toolbar button.active {
  background: #b7d8f0;
  border: 1px inset #6e8fa5;
  font-weight: 800;
}

.editor-toolbar .editor-align-group {
  display: inline-flex;
  gap: 2px;
  padding-left: 5px;
  border-left: 1px solid #aaa;
}

.editor-toolbar .editor-align-button {
  font: 700 13px/1 Arial, sans-serif;
}

.editor-zoom-select {
  width: 68px;
}

.editor-ruler {
  position: relative;
  width: 586px;
  height: 25px;
  margin: 8px auto -12px;
  border: 1px solid #a8a8a1;
  background:
    repeating-linear-gradient(to right, #555 0 1px, transparent 1px 7.32px) bottom/100% 5px no-repeat,
    repeating-linear-gradient(to right, #333 0 1px, transparent 1px 73.2px) bottom/100% 10px no-repeat,
    linear-gradient(#fafaf7, #e4e4de);
  color: #333;
  font: 9px Arial, sans-serif;
}

.editor-ruler-numbers {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  padding: 2px 5px 0;
  text-align: center;
}

.editor-ruler::before,
.editor-ruler::after {
  content: "";
  position: absolute;
  top: 2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.editor-ruler::before {
  left: 31px;
  border-top: 8px solid #555;
}

.editor-ruler::after {
  right: 31px;
  border-bottom: 8px solid #555;
}

.editor-menu {
  display: flex;
  gap: 20px;
  align-items: center;
}

.editor-menu button {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.editor-menu-wrap {
  position: relative;
}

.editor-file-menu {
  position: absolute;
  top: 18px;
  left: 0;
  z-index: 90;
  min-width: 150px;
  padding: 3px;
  background: #f1f3f3;
  border: 1px solid #849399;
  box-shadow: 3px 5px 12px #33444c55;
}

.editor-file-menu button {
  display: block;
  width: 100%;
  padding: 7px 10px;
  text-align: left;
}

.editor-file-menu button:hover {
  background: #188ac0;
  color: #fff;
}

.editor-file-menu hr {
  border: 0;
  border-top: 1px solid #b7bfc2;
  margin: 3px 0;
}

.tree-title em,
.folder-parent > em:first-child {
  flex: 0 0 14px;
  padding: 0;
  margin: 0 2px 0 0;
  text-align: center;
  font-style: normal;
  font-weight: 800;
}

.tree-title .tree-icon,
.folder-parent .tree-icon {
  flex: 0 0 auto !important;
  margin-right: 5px;
}

.tree-title b,
.folder-parent > span:nth-of-type(2) {
  flex: 1;
}

.tree-item > span:nth-of-type(2),
.tree-child > span:nth-of-type(2) {
  flex: 1;
  text-align: left;
}

.tree-item > em:last-child,
.tree-child > em:last-child {
  margin-left: auto;
  font-style: normal;
  color: #333;
}

.tree-child {
  margin-left: 34px;
}

.icon-outbox::before {
  inset: 1px;
  border-radius: 50%;
  background: linear-gradient(#8dbce9, #407fbe);
  border: 1px solid #2f6da9;
}

.icon-outbox::after {
  left: 5px;
  top: 4px;
  width: 5px;
  height: 8px;
  background: #fff;
  clip-path: polygon(0 56%,50% 0,100% 56%,66% 56%,66% 100%,34% 100%,34% 56%);
  box-shadow: none;
}

.attachments-panel {
  display: grid;
  grid-template-columns: 1fr 150px;
  min-height: 560px;
  padding: 12px;
  background: #f4f3ec;
}

.attachment-canvas {
  border: 1px solid #8f8f86;
  background: #f7f6ef;
  overflow: auto;
}

.attachment-actions {
  padding: 20px 8px;
  display: grid;
  align-content: start;
  gap: 2px;
}

.attachment-actions button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 31px;
  border: 1px solid #92928b;
  background: linear-gradient(#fff, #deded8);
  font-size: 12px;
}

.attachment-actions b {
  color: #508c45;
  font-size: 20px;
}

.menu-subwrap {
  position: relative;
}

.drop-submenu {
  position: absolute;
  left: calc(100% - 4px);
  top: 0;
  z-index: 40;
  min-width: 230px;
  padding: 4px;
  background: #f1f3f3;
  border: 1px solid #849399;
  box-shadow: 3px 5px 12px #33444c55;
}

.drop-submenu button {
  min-width: 220px;
}

.green-arrows button {
  position: relative;
  width: 43px;
  height: 43px;
  border: 1px solid #858585;
  border-radius: 0;
  background: #f3f3ef;
  color: transparent;
  font-size: 0;
  box-shadow: none;
}

.green-arrows button::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #79cf39;
  border: 3px solid #198823;
}

.green-arrows button::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: 20px;
  height: 18px;
  background: #fff;
  clip-path: polygon(0 28%,56% 28%,56% 0,100% 50%,56% 100%,56% 72%,0 72%);
}

.green-arrows button:nth-child(2)::after,
.green-arrows button:nth-child(4)::after {
  transform: rotate(180deg);
}

.icon-exit {
  width: 18px;
  height: 18px;
}

.icon-exit::before {
  left: 1px;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d92323;
  border: 1px solid #8f1111;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.2), inset 1px 1px 0 rgba(255,255,255,.35);
}

.icon-exit::after {
  left: 5px;
  top: 4px;
  width: 8px;
  height: 9px;
  background:
    linear-gradient(#fff,#fff) center 0 / 2px 7px no-repeat,
    radial-gradient(circle at center 58%, transparent 0 37%, #fff 39% 55%, transparent 57%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.advanced-filters {
  position: relative;
  display: grid;
  grid-template-columns: 128px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 12px;
  padding: 10px 12px 8px 18px;
  background: #eef1ee;
}

.advanced-filters .filter-title {
  position: absolute;
  left: 20px;
  top: -12px;
  padding: 0 6px;
  background: #eef1ee;
  color: #29486c;
  font-size: 12px;
}

.filter-search-button {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  justify-self: start;
  width: 78px;
  border: 0;
  background: transparent;
  color: #355168;
  cursor: pointer;
  transform-origin: center;
  transition: transform .08s ease;
}

.filter-search-button span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, #daf8a9 0 18%, #7ccf4d 19% 68%, #248b1f 69% 100%);
  border: 2px solid #26771f;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.35);
  position: relative;
}

.filter-search-button span::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 10px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid #fff;
  filter: drop-shadow(0 0 1px #5d8c42);
}

.filter-search-button b {
  margin-top: 2px;
  font-weight: 600;
}

.filter-grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: 145px 160px 160px 180px 220px 190px 190px;
  gap: 5px 14px;
  align-items: end;
}

.filter-grid label {
  display: grid;
  gap: 2px;
  font-size: 12px;
  color: #2d4460;
}

.filter-grid input,
.filter-grid select {
  height: 24px;
  padding: 2px 5px;
  font-size: 12px;
}

.filter-check {
  grid-row: span 2;
  align-self: center;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
}

.filter-search-text {
  grid-column: 1 / 4;
}

.virtual-filter {
  grid-column: 4 / 8;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: #2d4460;
}

.virtual-filter span {
  font-weight: 700;
}

.virtual-filter label {
  display: inline-flex !important;
  gap: 4px;
  align-items: center;
}

.compose-icon-button,
.viewer-print-button,
.viewer-close-button,
.filter-search-button {
  transition: transform .08s ease, filter .08s ease;
}

.compose-icon-button:active,
.viewer-print-button:active,
.viewer-close-button:active,
.filter-search-button:active {
  transform: scale(1.1);
  filter: brightness(1.04);
}

.operator-window {
  width: min(1180px, 100%);
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid #b5b9b9;
  background: #f3f3ef;
  box-shadow: 0 10px 24px #41525a30;
  overflow: hidden;
}

.operator-window-toolbar {
  height: 32px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  background: linear-gradient(90deg, #2cb2d4, #9adfec);
  border-bottom: 1px solid #7aaebb;
}

.operator-window-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-right: 1px solid #64a7b6;
  background: transparent;
  color: #1d3a77;
  font-weight: 700;
  padding: 0 14px;
}

.operator-admin-icon,
.icon-operator-add {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: 0 0 22px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.operator-admin-icon {
  background-image: url("/assets/ui/main-administration.png");
}

.icon-operator-add {
  background-image: url("/assets/ui/attach-add.png");
}

.options-drop-menu {
  min-width: 205px;
}

.options-drop-menu .icon-options {
  background: url("/assets/ui/opciones.png") center / contain no-repeat;
}

.server-messages-dialog {
  width: min(1180px, 94vw);
  max-width: none;
  padding: 0;
}

.server-messages-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.server-messages-title strong {
  flex: 1;
}

.server-messages-title button {
  border: 0;
  background: transparent;
  font-weight: bold;
  cursor: pointer;
}

.server-messages-body {
  min-height: 260px;
  max-height: 62vh;
  margin: 10px;
  overflow: auto;
  border: 1px solid #8b98a4;
}

.server-messages-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.server-messages-body th,
.server-messages-body td {
  padding: 5px 7px;
  border: 1px solid #b5bec6;
  text-align: left;
  white-space: nowrap;
}

.server-messages-body th {
  color: #10285e;
  background: #e8eef3;
}

.operator-window h3 {
  margin: 8px 0 7px;
  text-align: center;
  color: #17265e;
  font-size: 21px;
}

.operator-window .operator-list {
  width: calc(100% - 28px);
  max-height: 170px;
  margin: 0 auto;
  overflow: auto;
  border: 1px solid #8c9292;
  background: #fff;
}

.operator-window .operator-list table {
  table-layout: fixed;
  min-width: 0;
}

.operator-window .operator-list th,
.operator-window .operator-list td {
  padding: 3px 5px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.operator-mini-actions {
  width: calc(100% - 28px);
  display: flex;
  gap: 7px;
  margin: 7px auto 2px;
}

.operator-mini-actions button {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #b9b9b0;
  background: #f8f8f4;
  color: #277529;
  font-weight: 900;
}

.operator-detail-grid {
  display: grid;
  grid-template-columns: minmax(330px, 1.05fr) minmax(230px, .8fr) minmax(300px, .95fr);
  gap: 14px;
  padding: 0 18px 14px;
}

.operator-detail-grid fieldset {
  margin: 0;
  padding: 8px 10px 10px;
  border: 0;
  background: transparent;
}

.operator-detail-grid legend,
.operator-profile h4 {
  width: 100%;
  color: #1b2f70;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 6px;
}

.operator-detail-grid label {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  color: #26334f;
  font-size: 12px;
}

.operator-detail-grid input,
.operator-detail-grid select {
  height: 21px;
  padding: 2px 5px;
  border: 1px solid #a5aaa7;
  background: #f4f4ef;
  font-size: 12px;
}

.operator-profile label,
.operator-profile .blocked-check {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.operator-profile input[type="radio"],
.operator-profile input[type="checkbox"] {
  width: auto;
  height: auto;
}

.operator-save {
  display: block;
  margin: 12px auto 0;
  padding: 5px 12px;
}

.operator-access label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.operator-access select {
  width: 100%;
  height: 68px;
}

.operator-access-buttons {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 5px 0;
}

.operator-access-buttons button {
  width: 27px;
  height: 27px;
  border: 1px solid #94a078;
  background: linear-gradient(#d8f39d, #73b72f);
  color: #276a22;
  font-size: 18px;
  font-weight: 900;
}

#operatorsPanel {
  padding: 8px;
  overflow: hidden;
}

#operatorsPanel .operator-window {
  max-height: calc(100vh / .67 - 142px);
}

.backup-panel {
  width: min(1040px, 96%);
  min-height: 500px;
  margin: 18px auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #8d999d;
  background: #f1f1ec;
  box-shadow: 0 10px 25px #40515a35;
}

.backup-window-title {
  height: 30px;
  padding: 6px 10px;
  background: linear-gradient(#f9f9f5, #e4e6e3);
  border-bottom: 1px solid #a9b0b0;
  font-size: 12px;
}

.backup-return {
  width: 100%;
  height: 37px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 0;
  background: linear-gradient(90deg,#28a8cf,#9edee9);
  color: #174b6d;
  text-align: left;
  font-weight: 650;
}

.backup-criteria,
.backup-process {
  margin: 12px 18px !important;
  padding: 10px 14px 14px !important;
  background: #f5f5f0;
}

.backup-filter-row {
  display: grid;
  grid-template-columns: 1.7fr 1.25fr .85fr .85fr 86px 100px;
  gap: 12px;
  align-items: end;
}

.backup-filter-row label {
  margin: 0 !important;
  font-size: 12px;
  font-weight: 700;
}

.backup-filter-row select,
.backup-filter-row input {
  width: 100%;
  height: 28px;
  padding: 2px 5px;
}

.backup-filter-row > button {
  height: 33px;
  padding: 4px 12px;
}

.backup-total {
  align-self: stretch;
  display: grid;
  place-items: center;
  text-align: center;
  color: #1d2a66;
  font-size: 12px;
  font-weight: 700;
}

.backup-total b {
  font-size: 29px;
}

.backup-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 30px;
  margin-top: 8px;
  color: #26366b;
}

.backup-summary span {
  font-size: 12px;
}

.backup-summary b {
  color: #c22a21;
}

.backup-summary i {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  background: #1776b5;
  border: 1px solid #0d4c7c;
}

.backup-progress-line {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 12px;
  align-items: center;
}

.backup-progress {
  height: 20px;
  overflow: hidden;
  border: 1px solid #7f9299;
  background: #fff;
}

.backup-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg,#2b8e26,#69c74a);
  transition: width .25s ease;
}

.backup-action {
  height: 42px;
  border: 1px solid #a9b0aa;
  background: linear-gradient(#fafaf7,#dcded8);
  color: #21723c;
  font-size: 17px;
  font-weight: 750;
}

.backup-disk {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 27px;
  margin-left: 8px;
  border: 2px solid #17242b;
  background: #e8efe8;
  color: #1d8b3f;
}

.backup-log {
  min-height: 135px;
  margin-top: 10px;
  padding: 7px;
  overflow: auto;
  border: 1px solid #a6adaa;
  background: #f8f8f4;
  font: 11px Consolas, monospace;
  white-space: pre-wrap;
}

.recover-panel {
  width: min(760px, 92%);
  margin: 45px auto;
  background: #f2f2ed;
}

.recovery-log {
  min-height: 180px;
}

.result-dialog {
  min-width: 330px;
  padding: 28px 34px 22px;
  border: 1px solid #7f8f95;
  background: #f5f6f2;
  box-shadow: 0 14px 40px #26394055;
  text-align: center;
}

.result-dialog::backdrop {
  background: #28394030;
}

.result-dialog strong {
  display: block;
  margin-bottom: 24px;
  color: #172d64;
  font-size: 18px;
}

@media(max-width:1000px) {
  .backup-filter-row {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

#operatorsPanel .operator-data label:nth-last-child(-n+2) {
  margin-bottom: 4px;
}

@media (max-width: 1000px) {
  .operator-detail-grid {
    grid-template-columns: 1fr;
  }
}

.statistics-dialog {
  width: min(1120px, 96vw);
  background: #ececec;
}

.report-window-title {
  height: 32px;
  padding: 6px 8px 0;
  background: #f4f4f0;
  color: #5a6570;
  font-size: 18px;
}

.report-menu {
  display: flex;
  align-items: end;
  min-height: 34px;
  padding: 0 8px;
  background: #f4f4f0;
  border-bottom: 1px solid #b8b8b8;
}

.report-file-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  height: 34px;
  padding: 4px 16px 4px 14px !important;
  border: 1px solid #9aa4a8 !important;
  border-bottom: 0 !important;
  background: #f5f6f3 !important;
  color: #243d73;
  font-size: 18px;
  font-weight: 700;
}

.report-menu-mark {
  width: 20px;
  height: 18px;
  display: inline-block;
  background:
    linear-gradient(90deg,#2b8dc2 0 45%,transparent 46%) 3px 2px/14px 13px no-repeat,
    linear-gradient(#f0b32f,#d27718) 10px 6px/9px 10px no-repeat;
  border-left: 2px solid #8ed1e2;
}

.report-file-menu {
  min-width: 390px;
  padding: 8px 0;
}

.report-file-menu button,
.editor-file-menu button {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
}

.report-file-menu button {
  min-height: 34px;
  padding-left: 48px;
  color: #263c73;
  font-size: 17px;
  font-weight: 650;
}

.report-file-menu span,
.editor-file-menu span {
  margin-left: auto;
  color: #27345a;
  font-weight: 600;
}

#openOperations.disabled,
#openOperations:disabled {
  color: #6f7f86;
  background: linear-gradient(#d8dddf, #bfc8cb);
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: .72;
}

#openOperations.disabled .toolbar-icon,
#openOperations:disabled .toolbar-icon {
  opacity: .55;
}

.sync-overlay.nonmodal {
  background: transparent !important;
  pointer-events: none;
}

.sync-overlay.nonmodal .sync-box {
  pointer-events: none;
}

.statistics-paper {
  width: 760px;
  min-height: 920px;
  margin: 22px auto 34px;
  padding: 72px 45px;
  background: white;
  border: 1px solid #888;
  box-shadow: 0 0 0 1px #d5d5d5;
  color: #1f2d35;
  font-family: Arial, sans-serif;
}

.statistics-paper h2 {
  margin: 0 0 24px;
  text-align: center;
  font-size: 17px;
  color: #2a4357;
}

.statistics-paper table {
  width: 100%;
  table-layout: fixed;
  white-space: normal;
  font-size: 10px;
}

.statistics-paper th,
.statistics-paper td {
  border: 1px solid #454545;
  padding: 4px 3px;
  text-align: center;
  vertical-align: middle;
}

.statistics-paper th {
  position: static;
  background: #e4e8e8;
}

.statistics-paper .report-foot {
  margin-top: 28px;
  font-size: 10px;
  color: #41535c;
}

@media print {
  @page {
    size: Letter portrait;
    margin: 14mm;
  }

  body {
    background: #fff !important;
  }

  body * {
    visibility: hidden !important;
  }

  #documentPreview,
  #documentPreview * {
    visibility: visible !important;
  }

  #documentPreview {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  #documentPreview.paper {
    font-family: Arial, sans-serif !important;
  }

  #documentPreview .naval-page {
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 16mm 10mm !important;
    background: #fff !important;
    box-sizing: border-box !important;
    font-size: 10.5pt !important;
  }

  #documentPreview .paper-message {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  body.report-printing #documentPreview,
  body.report-printing #documentPreview * {
    visibility: hidden !important;
  }

  body.report-printing #statisticsReport,
  body.report-printing #statisticsReport * {
    visibility: visible !important;
  }

  body.report-printing #statisticsReport {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 10mm !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  .viewer-title,
  .dialog-title,
  .dialog-actions,
  .viewer-title-actions,
  .report-menu,
  #toast,
  #syncOverlay {
    display: none !important;
  }
}

/* Iconos finales aportados para la interfaz academica. */
.tree-icon.icon-bandejas,
.tree-icon.icon-inbox,
.tree-icon.icon-outbox,
.tree-icon.icon-draft,
.tree-icon.icon-processed,
.tree-icon.icon-recovered,
.tree-icon.icon-deleted,
.toolbar-icon.icon-receive,
.toolbar-icon.icon-server,
.toolbar-icon.icon-options,
.toolbar-icon.icon-casillas {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.tree-icon.icon-bandejas { background: url("/assets/ui/bandejas.png") center / contain no-repeat !important; }
.tree-icon.icon-inbox { background: url("/assets/ui/entrada.png") center / contain no-repeat !important; }
.tree-icon.icon-outbox { background: url("/assets/ui/salida.png") center / contain no-repeat !important; }
.tree-icon.icon-draft { background: url("/assets/ui/preenvio.png") center / contain no-repeat !important; }
.tree-icon.icon-processed { background: url("/assets/ui/procesados.png") center / contain no-repeat !important; }
.tree-icon.icon-recovered { background: url("/assets/ui/recuperados.png") center / contain no-repeat !important; }
.tree-icon.icon-deleted { background: url("/assets/ui/eliminados.png") center / contain no-repeat !important; }
.toolbar-icon.icon-receive { background: url("/assets/ui/procesados.png") center / contain no-repeat !important; }
.toolbar-icon.icon-server { background: url("/assets/ui/servidor.png") center / contain no-repeat !important; }
.toolbar-icon.icon-options { background: url("/assets/ui/opciones.png") center / contain no-repeat !important; }
.toolbar-icon.icon-casillas { background: url("/assets/ui/operacion-casillas.png") center / contain no-repeat !important; }

.tree-icon.icon-bandejas::before,
.tree-icon.icon-bandejas::after,
.tree-icon.icon-inbox::before,
.tree-icon.icon-inbox::after,
.tree-icon.icon-outbox::before,
.tree-icon.icon-outbox::after,
.tree-icon.icon-draft::before,
.tree-icon.icon-draft::after,
.tree-icon.icon-processed::before,
.tree-icon.icon-processed::after,
.tree-icon.icon-recovered::before,
.tree-icon.icon-recovered::after,
.tree-icon.icon-deleted::before,
.tree-icon.icon-deleted::after,
.toolbar-icon.icon-receive::before,
.toolbar-icon.icon-receive::after,
.toolbar-icon.icon-server::before,
.toolbar-icon.icon-server::after,
.toolbar-icon.icon-options::before,
.toolbar-icon.icon-options::after,
.toolbar-icon.icon-casillas::before,
.toolbar-icon.icon-casillas::after {
  content: none !important;
}

/* Revision de documento a pantalla de trabajo completa. */
body.compose-workspace-open .identity-bar,
body.compose-workspace-open .toolbar,
body.editor-workspace-open .identity-bar,
body.editor-workspace-open .toolbar {
  filter: grayscale(1);
  opacity: .64;
  pointer-events: none;
}

body.compose-workspace-open .operation-connection,
body.compose-workspace-open .connection-bar,
body.editor-workspace-open .operation-connection,
body.editor-workspace-open .connection-bar {
  display: none !important;
}

.compose-sti-dialog[open] {
  position: fixed;
  inset: 75px 0 0 0;
  width: calc(100vw / .67);
  max-width: none;
  height: calc(100vh / .67 - 75px);
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #f4f3ec;
  box-shadow: none;
}

.compose-sti-dialog::backdrop {
  background: transparent;
}

.compose-sti-dialog #composeForm {
  height: 100%;
  display: grid;
  grid-template-rows: 32px 58px 1fr;
}

.compose-sti-dialog .dialog-title {
  min-height: 32px;
}

.compose-sti-dialog .document-tabs {
  min-height: 58px;
}

.compose-sti-dialog #composeDocumentPanel,
.compose-sti-dialog #composeAttachmentsPanel {
  min-height: 0;
  overflow: auto;
}

.compose-icon-button {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.compose-icon-button.print { background-image: url("/assets/ui/compose-print.png") !important; }
.compose-icon-button.preview { background-image: url("/assets/ui/compose-preview.png") !important; }
.compose-icon-button.save { background-image: url("/assets/ui/compose-save.png") !important; }
.compose-icon-button.cancel { background-image: url("/assets/ui/compose-close.png") !important; }

.compose-icon-button::before,
.compose-icon-button::after {
  content: none !important;
}

.readonly-compose #writeNavalMessage {
  color: #143f9a;
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

.message-editor-dialog[open] {
  position: fixed;
  inset: 75px 0 0 0;
  width: calc(100vw / .67);
  max-width: none;
  height: calc(100vh / .67 - 75px);
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: auto;
  background: #efefea;
  box-shadow: none;
}

.message-editor-dialog::backdrop {
  background: transparent;
}

.message-editor-page {
  min-height: calc(100vh / .67 - 180px);
}

.transcription-header {
  width: 100%;
  margin-bottom: 18px;
  border-collapse: collapse;
  white-space: normal;
}

.transcription-header td {
  padding: 3px 8px;
  border: 1px solid transparent;
  color: #000;
}

.transcription-naval-header {
  position: relative;
  width: 100%;
  margin-bottom: 4px;
  line-height: 1.15;
  color: #000;
  font: 10pt Arial, sans-serif;
}

.transcription-naval-header .transcription-page-no {
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 700;
}

.transcription-naval-header h2 {
  margin: 0 0 6px;
  text-align: center;
  font-size: 10pt;
}

.transcription-meta {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.2fr 1fr;
  gap: 12px;
  margin-bottom: 3px;
}

.transcription-meta span b {
  display: block;
}

.transcription-naval-header p {
  margin: 0;
  line-height: 1.15;
}

.transcription-recipient-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  margin: 0;
  line-height: 1.15;
}

.transcription-recipient-row .naval-recipient-grid {
  row-gap: 0;
}

.transcription-bt {
  margin: 6px 0 3px;
  padding-top: 3px;
  border-top: 2px solid #000;
}

.transcription-naval-header h3 {
  margin: 0 0 6px;
  text-align: center;
  font-size: 10pt;
  font-weight: 400;
}

.confirmation-dialog {
  width: min(540px, calc(100vw - 32px));
  padding: 0 0 18px;
  border: 1px solid #aeb6bf;
  border-radius: 9px;
  color: #172033;
  background: #f7f7f7;
  box-shadow: 0 14px 38px #0004;
  font: 14px Arial, sans-serif;
}

.confirmation-title {
  padding: 12px 16px;
  border-bottom: 1px solid #d1d5da;
  background: #fff;
}

.confirmation-dialog p {
  min-height: 52px;
  margin: 0;
  padding: 24px 18px 10px;
  line-height: 1.45;
}

.confirmation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 24px;
}

.confirmation-actions button {
  min-width: 104px;
}

.window-size-button,
.statistics-close-button {
  width: 28px;
  height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #35454c;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.report-window-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.report-window-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.viewer-dialog.window-maximized,
.statistics-dialog.window-maximized {
  position: fixed;
  inset: 10px;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
}

.viewer-dialog.window-maximized,
.statistics-dialog.window-maximized {
  overflow: auto;
}

.viewer-dialog.window-maximized #documentPreview,
.statistics-dialog.window-maximized #statisticsReport {
  margin-left: auto;
  margin-right: auto;
}

.readonly-compose #writeNavalMessage:disabled {
  color: #777;
  opacity: .55;
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}

.paper,
.naval-page {
  background: #fff !important;
  color: #000 !important;
}

.viewer-print-button {
  background: url("/assets/context/statistics-printer.png") center / contain no-repeat !important;
}

.viewer-print-button::before,
.viewer-print-button::after {
  content: none !important;
}

.attachment-actions b {
  display: block;
  width: 27px;
  height: 27px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#addAttachment b { background-image: url("/assets/ui/attach-add.png"); }
#openAttachment b { background-image: url("/assets/ui/attach-open.png"); }
#deleteAttachment b { background-image: url("/assets/ui/attach-delete.png"); }
#exportAttachment b { background-image: url("/assets/ui/attach-export.png"); }

.toolbar-icon.icon-admin {
  background: url("/assets/ui/main-administration.png") center / contain no-repeat !important;
}

.toolbar-icon.icon-casillas {
  background: url("/assets/ui/operacion-casillas.png") center / contain no-repeat !important;
}

.toolbar-icon.icon-options {
  background: url("/assets/ui/opciones.png") center / contain no-repeat !important;
}

.toolbar-icon.icon-exit {
  background: url("/assets/ui/main-exit.png") center / contain no-repeat !important;
}

.toolbar-icon.icon-help {
  background: url("/assets/ui/main-help.png") center / contain no-repeat !important;
}

.toolbar-icon.icon-admin::before,
.toolbar-icon.icon-admin::after,
.toolbar-icon.icon-exit::before,
.toolbar-icon.icon-exit::after,
.toolbar-icon.icon-help::before,
.toolbar-icon.icon-help::after {
  content: none !important;
}

/* Conexion al servidor. */
.connection-bar,
.operation-connection {
  display: flex;
  align-items: center;
  gap: 6px;
}

.connection-bar .connection-server-icon,
.operation-connection .connection-server-icon {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: url("/assets/ui/connection-server.png") center / contain no-repeat;
  box-shadow: none;
}

/* Configuracion local inspirada en la interfaz de referencia. */
#adminView:has(#configurationPanel:not(.hidden)) > .section-heading {
  display: none;
}

.configuration-local-panel {
  width: min(1050px, 96%);
  min-height: 555px;
  margin: 18px auto;
  padding: 0 18px 18px;
  border: 1px solid #a9adb0;
  background: #f5f5f1;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  color: #1d3152;
}

.configuration-window-title {
  height: 32px;
  display: flex;
  align-items: center;
  color: #202020;
  font-size: 13px;
}

.configuration-return {
  width: calc(100% + 36px);
  height: 36px;
  margin: 0 -18px 12px;
  padding-left: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-top: 1px solid #59bed8;
  border-bottom: 1px solid #2a8fae;
  background: linear-gradient(#55c4e1,#2ba3c4);
  color: #13437c;
  font-weight: 700;
  text-align: left;
}

.configuration-local-panel h3 {
  margin: 8px 0 12px;
  font-size: 16px;
}

.configuration-identities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 10px 55px 18px;
  border-bottom: 1px solid #c1c1bd;
}

.configuration-identity {
  min-height: 92px;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 6px 10px;
}

.configuration-identity label {
  display: grid;
  grid-template-columns: 150px minmax(145px,1fr);
  align-items: center;
  gap: 8px;
  color: #243655;
}

.configuration-identity input,
.configuration-identity select {
  height: 27px;
  border: 0;
  border-bottom: 1px solid #767676;
  background: transparent;
  color: #1a2f50;
  font-weight: 700;
}

.configuration-device-icon,
.configuration-server-icon {
  grid-row: 1 / 3;
  width: 58px;
  height: 58px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.configuration-device-icon {
  background-image: linear-gradient(145deg,#43b8cb,#0a598d);
  border: 5px solid #d4e1e5;
  border-radius: 5px;
  box-shadow: 8px 8px 0 -5px #6b7c82;
}

.configuration-server-icon {
  background-image: url("/assets/ui/connection-server.png");
}

.configuration-body {
  display: grid;
  grid-template-columns: minmax(0,1.65fr) minmax(290px,.75fr);
  gap: 38px;
  padding: 18px 38px 0;
}

.sound-routes h4,
.notification-settings h4 {
  margin: 0 0 14px;
  padding-bottom: 5px;
  border-bottom: 1px solid #aaa;
  font-size: 14px;
}

.sound-route {
  display: grid;
  grid-template-columns: 205px minmax(120px,1fr) 76px 28px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.sound-route > span {
  text-align: right;
}

.sound-route input {
  height: 25px;
  border: 0;
  border-bottom: 1px solid #777;
  background: transparent;
  color: #234678;
  font-weight: 700;
}

.change-sound {
  border: 0;
  background: transparent;
  color: #1f3352;
}

.sound-indicator {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%,#baff74 0 15%,#149229 16% 48%,#07180d 52% 100%);
  box-shadow: inset 0 0 0 2px #4d5750;
}

.notification-choice {
  display: grid;
  grid-template-columns: 1fr 44px;
  align-items: center;
  min-height: 54px;
  font-weight: 600;
}

.notification-choice input {
  margin-right: 7px;
}

.notice-icon {
  width: 38px;
  height: 38px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.notice-icon.audible { background-image: linear-gradient(135deg,transparent 35%,#33a838 36% 47%,transparent 48%), radial-gradient(circle at 70% 50%,transparent 0 44%,#2a952d 45% 52%,transparent 53%); }
.notice-icon.visible { background-image: linear-gradient(60deg,transparent 22%,#f6a914 23% 74%,transparent 75%); }
.notice-icon.both { background-image: linear-gradient(60deg,transparent 22%,#f6a914 23% 70%,transparent 71%), radial-gradient(circle at 75% 50%,transparent 0 38%,#2a952d 39% 48%,transparent 49%); }

.configuration-update-title {
  margin: 15px 0 8px;
  font-weight: 700;
}

.configuration-save,
.configuration-cancel {
  width: 150px;
  height: 36px;
  margin: 5px 0 5px 42px;
  border: 1px solid #b8b8b5;
  background: linear-gradient(#fff,#e5e5e0);
  color: #263650;
  font-weight: 700;
}

.configuration-save::before,
.configuration-cancel::before {
  display: inline-block;
  margin-right: 14px;
  font-size: 25px;
  vertical-align: middle;
}

.configuration-save::before { content: "✓"; color: #26a645; }
.configuration-cancel::before { content: "✕"; color: #e32626; }

/* Filtro inferior ocupando ambas columnas del area de trabajo. */
.workspace {
  grid-template-columns: 255px minmax(0,1fr);
  grid-template-rows: minmax(0,1fr) auto;
}

.folders {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
}

.document-area {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  padding-bottom: 0;
}

.advanced-filters {
  grid-column: 1 / 3;
  grid-row: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  min-height: 104px;
  margin: 0;
  padding: 16px 18px 8px;
  border: 1px solid #9fa49e;
  background: #eef1ee;
}

.advanced-filters .filter-title {
  left: 18px;
}

.filter-search-button {
  position: relative;
  margin: 0;
  transition: transform .12s ease, filter .12s ease;
}

.filter-column {
  display: grid;
  align-content: start;
  gap: 7px;
  flex: 0 0 auto;
}

.filter-action-column {
  width: 66px;
}

.filter-date-column {
  width: 215px;
}

.filter-document-column {
  width: 300px;
}

.filter-state-column {
  width: 215px;
}

.filter-column label {
  min-width: 0;
  min-height: 25px;
  display: grid;
  grid-template-columns: 96px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  color: #2d4460;
  font-size: 12px;
  white-space: nowrap;
}

.filter-date-column > label:not(.filter-check) {
  grid-template-columns: 52px minmax(0,1fr);
}

.filter-document-column label {
  grid-template-columns: 138px minmax(0,1fr);
}

.filter-state-column label {
  grid-template-columns: 82px minmax(0,1fr);
}

.filter-check {
  display: flex !important;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}

.filter-column input[type="date"],
.filter-column select {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  height: 24px;
  padding: 2px 5px;
  border: 1px solid #a8aca8;
  background: #fff;
  color: #263c58;
  font-size: 12px;
}

.filter-search-button::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 88px;
  top: 8px;
  width: max-content;
  padding: 5px 8px;
  border: 1px solid #767676;
  background: #fffde1;
  color: #222;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s ease;
  z-index: 3;
}

.filter-search-button:hover::after {
  opacity: 1;
}

.virtual-filter,
.filter-grid,
.filter-search-text {
  display: none !important;
}

/* Los iconos reaccionan al posicionar el mouse. */
.compose-icon-button:hover,
.viewer-print-button:hover,
.viewer-close-button:hover,
.filter-search-button:hover {
  transform: scale(1.1);
  filter: brightness(1.05);
}

/* Submenu Nuevo Mensaje visible al posicionar el mouse. */
.menu-subwrap > .drop-submenu {
  display: none;
}

.menu-subwrap:hover > .drop-submenu,
.menu-subwrap:focus-within > .drop-submenu {
  display: block;
}

.drop-submenu .new-message-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.drop-submenu kbd {
  min-width: 60px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
}

@media (max-width: 1050px) {
  .configuration-identities {
    gap: 20px;
    padding-inline: 20px;
  }

  .configuration-body {
    gap: 15px;
    padding-inline: 15px;
  }

  .sound-route {
    grid-template-columns: 165px minmax(105px,1fr) 66px 24px;
  }
}

@media print {
  body.message-printing {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.message-printing > * {
    display: none !important;
  }

  body.message-printing > #viewerDialog {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  body.message-printing #viewerDialog > :not(#documentPreview) {
    display: none !important;
  }

  body.message-printing #documentPreview,
  body.message-printing #documentPreview * {
    visibility: visible !important;
  }

  body.message-printing #documentPreview {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    break-after: avoid-page !important;
    page-break-after: avoid !important;
  }

  body.message-printing #documentPreview .naval-page {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10mm 8mm !important;
    overflow: visible !important;
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
  }

  body.message-printing #documentPreview .bt-line {
    margin-top: 24mm !important;
  }
}

/* Iconos individuales del menu Documentos. */
.documents-drop-menu {
  min-width: 390px;
}

.documents-drop-menu button {
  min-width: 380px;
  min-height: 38px;
  gap: 9px;
}

.document-menu-icon {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.menu-new-message { background-image: url("/assets/ui/attach-add.png"); }
.menu-message-preview { background-image: url("/assets/ui/compose-preview.png"); }
.menu-import-arrow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%2327bdd9' stroke='%230878a2' stroke-width='3' d='M6 23h28V11l24 21-24 21V41H6z'/%3E%3C/svg%3E");
}

.menu-import-encrypted {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='5' y='10' width='35' height='44' rx='4' fill='%23aeb8bd' stroke='%2346525a' stroke-width='3'/%3E%3Ccircle cx='22.5' cy='31' r='10' fill='%2326323a' stroke='%23edf2f4' stroke-width='3'/%3E%3Ccircle cx='22.5' cy='31' r='3' fill='%23b9c6cc'/%3E%3Cpath fill='%2327bdd9' stroke='%2307799c' stroke-width='2' d='M29 25h15v-8l15 14-15 14v-8H29z'/%3E%3C/svg%3E");
}

.menu-import-usb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='17' y='18' width='30' height='40' rx='4' fill='%232a3338' stroke='%23050708' stroke-width='3'/%3E%3Crect x='22' y='5' width='20' height='16' rx='2' fill='%23c6cdd0' stroke='%23596368' stroke-width='3'/%3E%3Crect x='26' y='8' width='4' height='7' fill='%234c565b'/%3E%3Crect x='34' y='8' width='4' height='7' fill='%234c565b'/%3E%3Ccircle cx='32' cy='46' r='5' fill='%2375838b'/%3E%3C/svg%3E");
}
.menu-import-shipcom { background-image: url("/assets/context/shipcom.png"); }

.documents-drop-menu button > span:nth-child(2) {
  flex: 1;
  text-align: left;
}

.documents-drop-menu .drop-submenu,
.documents-drop-menu .drop-submenu button {
  min-width: 300px;
}

/* Lineas segmentadas del arbol de bandejas. */
#folderTreeBody {
  position: relative;
  padding-left: 10px;
}

#folderTreeBody::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 4px;
  bottom: 18px;
  border-left: 1px dotted #777;
  pointer-events: none;
}

#folderTreeBody > .tree-item,
#folderTreeBody > .folder-parent {
  position: relative;
}

#folderTreeBody > .tree-item::before,
#folderTreeBody > .folder-parent::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 13px;
  border-top: 1px dotted #777;
  pointer-events: none;
}

.tree-children {
  position: relative;
  margin-left: 21px;
  padding-left: 17px;
}

.tree-children::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 13px;
  border-left: 1px dotted #777;
  pointer-events: none;
}

.tree-children .tree-child {
  position: relative;
  margin-left: 0;
}

.tree-children .tree-child::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 14px;
  border-top: 1px dotted #777;
  pointer-events: none;
}

/* Pantalla de ingreso horizontal segun la referencia del SOPT. */
.login-screen {
  min-height: 100vh;
  padding: 28px;
  background:
    linear-gradient(145deg, transparent 0 58%, rgba(0,117,180,.42) 58% 67%, transparent 67%),
    linear-gradient(28deg, transparent 0 59%, rgba(0,165,209,.28) 59% 72%, transparent 72%),
    radial-gradient(ellipse at 80% 110%, #0566ae 0 18%, #19a5c7 19% 26%, transparent 27%),
    linear-gradient(135deg,#d9eef3 0 45%,#a9d7e5 58%,#eaf5f7 100%);
}

.login-window {
  width: min(950px,calc(100vw - 50px));
  min-height: 440px;
  border: 1px solid #8e9797;
  border-radius: 13px;
  overflow: hidden;
  background: rgba(246,246,240,.96);
  box-shadow: 0 15px 45px rgba(32,55,67,.38);
}

.login-title-bar {
  height: 42px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #c1c3be;
  background: linear-gradient(#fafaf5,#e6e7e1);
  color: #363b3c;
  font-size: 15px;
}

.login-title-bar span:last-child {
  margin-right: 40px;
}

.login-body {
  min-height: 395px;
  padding: 24px 38px 32px;
  display: grid;
  grid-template-columns: 270px minmax(0,1fr);
  gap: 35px;
  align-items: center;
  text-align: left;
}

.login-emblem-panel {
  display: grid;
  place-items: center;
  align-self: stretch;
}

.login-logo {
  width: 230px;
  height: 230px;
  margin: 0;
  object-fit: contain;
}

.login-access-panel {
  align-self: stretch;
  padding: 20px 22px 10px;
  display: grid;
  grid-template-rows: auto 1fr auto 34px;
  align-items: center;
}

.login-access-panel h1 {
  margin: 2px 0 38px;
  color: #152466;
  font: 700 28px Arial,sans-serif;
  text-align: center;
}

.login-fields {
  width: min(470px,100%);
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

.login-body .login-fields label {
  display: grid;
  grid-template-columns: 150px minmax(190px,1fr);
  gap: 14px;
  align-items: center;
  color: #182556;
  font: 700 17px Arial,sans-serif;
}

.login-fields input {
  height: 32px;
  padding: 3px 6px;
  border: 0;
  border-bottom: 2px solid #22789e;
  background: rgba(255,255,255,.35);
  color: #182b40;
  outline: none;
}

.login-fields input:focus {
  border-bottom-color: #0a4e78;
  background: #fff;
}

.login-actions {
  width: min(470px,100%);
  margin: 24px auto 0;
  display: flex;
  justify-content: space-between;
  gap: 65px;
}

.login-classic-button {
  min-width: 150px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #5d6970;
  background: linear-gradient(#fff,#e3e4df);
  color: #1e2e58;
  font: 700 17px Arial,sans-serif;
  box-shadow: inset 0 0 0 1px #fff;
}

.login-classic-button:hover {
  background: linear-gradient(#fff,#d5e9ee);
}

.login-classic-button span {
  width: 25px;
  height: 25px;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.login-enter span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23199a43' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' d='M4 17l8 8L28 7'/%3E%3C/svg%3E");
}

.login-cancel span {
  background-image: url("/assets/ui/compose-close.png");
}

.login-access-panel .error-text {
  min-height: 28px;
  margin: 4px 0 0;
  color: #a32822;
  text-align: center;
}

@media (max-width: 760px) {
  .login-window {
    width: calc(100vw - 24px);
  }

  .login-title-bar span:last-child {
    margin-right: 0;
    font-size: 11px;
  }

  .login-body {
    grid-template-columns: 180px 1fr;
    gap: 15px;
    padding-inline: 18px;
  }

  .login-logo {
    width: 165px;
    height: 165px;
  }

  .login-access-panel h1 {
    font-size: 21px;
  }

  .login-body .login-fields label {
    grid-template-columns: 100px 1fr;
  }

  .login-actions {
    gap: 12px;
  }
}

/* Ajustes finales para escala base equivalente al 67% del navegador. */
.desktop {
  height: calc(100vh / .67);
}

.operations {
  height: calc(100vh / .67 - 30px);
}

.login-screen {
  min-height: calc(100vh / .67);
}

.login-window {
  width: min(950px, calc(100vw / .67 - 50px));
}

.icon-recover-docs {
  background: url("/assets/ui/recuperados.png") center / contain no-repeat !important;
}

.icon-recover-docs::before,
.icon-recover-docs::after {
  content: none !important;
}

.naval-recipient-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: start;
  margin: 5px 0;
  font: 10pt Arial, sans-serif;
}

.naval-recipient-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px 12px;
  width: 100%;
}

.naval-recipient-grid > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.about-dialog {
  width: min(570px, 90vw);
  padding: 0 0 18px;
  background: #f4f4ef;
  border: 1px solid #707a7d;
  font: 13px Arial, sans-serif;
}

.about-title {
  display: flex;
  justify-content: space-between;
  padding: 7px 10px;
  background: linear-gradient(#f8f8f6, #deded9);
  border-bottom: 1px solid #aaa;
}

.about-title button {
  border: 0;
  background: transparent;
  font-weight: 700;
}

.about-product {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 20px 28px 8px;
}

.about-product strong {
  font-size: 38px;
}

.about-product span {
  font-size: 16px;
  font-weight: 700;
}

.about-school-logo {
  display: block;
  width: 145px;
  height: 145px;
  object-fit: contain;
  margin: 8px auto 14px;
}

.about-dialog p {
  margin: 8px 28px;
  line-height: 1.45;
  text-align: center;
}

.about-close {
  display: block;
  margin: 15px auto 0;
}

#configStation { height: 28px !important; }

.advanced-filters {
  display: grid;
  grid-template-columns: 72px 250px 340px 250px;
  column-gap: 24px;
  row-gap: 0;
  align-items: start;
  justify-content: start;
  overflow-x: auto;
  overflow-y: visible;
  min-width: 0;
}

.filter-column {
  width: auto;
  min-width: 0;
  max-width: none;
}

.filter-action-column {
  grid-column: 1;
}

.filter-date-column {
  grid-column: 2;
}

.filter-document-column {
  grid-column: 3;
}

.filter-state-column {
  grid-column: 4;
}

.filter-date-column > label:not(.filter-check) {
  grid-template-columns: 52px 174px;
}

.filter-document-column label {
  grid-template-columns: 155px 161px;
}

.filter-state-column label {
  grid-template-columns: 88px 138px;
}

.filter-column label,
.filter-column span,
.filter-column input,
.filter-column select {
  min-width: 0;
  max-width: 100%;
}

.filter-column input[type="date"],
.filter-column select {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1050px) {
  .advanced-filters {
    grid-template-columns: 68px 230px 315px 230px;
    column-gap: 18px;
  }

  .filter-date-column > label:not(.filter-check) {
    grid-template-columns: 48px 164px;
  }

  .filter-document-column label {
    grid-template-columns: 145px 152px;
  }

  .filter-state-column label {
    grid-template-columns: 82px 130px;
  }
}

/* Alineacion definitiva de Configuracion Local. */
.configuration-identities {
  grid-template-columns: minmax(340px,1fr) minmax(340px,1fr);
  gap: 24px;
  padding-inline: 24px;
}

.configuration-identity {
  grid-template-columns: 64px minmax(0,1fr);
}

.configuration-identity label {
  grid-template-columns: 155px minmax(190px,1fr);
  min-width: 0;
}

.configuration-identity input,
.configuration-identity select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 3px 8px;
  line-height: 20px;
  overflow: visible;
  text-overflow: clip;
}

.configuration-body {
  grid-template-columns: minmax(510px,1.7fr) minmax(210px,.75fr);
  gap: 12px;
  padding: 18px 8px 0;
  align-items: start;
}

.sound-routes {
  min-width: 0;
  padding: 15px 18px 18px;
}

.sound-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 78px 26px;
  align-items: center;
  gap: 10px;
  min-height: 39px;
}

.sound-row label {
  min-width: 0;
  display: grid;
  grid-template-columns: 185px minmax(175px,1fr);
  align-items: center;
  gap: 14px;
  margin: 0;
  white-space: nowrap;
}

.sound-row input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 27px;
  padding: 3px 7px;
  border: 0;
  border-bottom: 1px solid #777;
  background: transparent;
  color: #234678;
  font-weight: 700;
}

.sound-row .change-sound {
  width: 78px;
  padding: 4px;
  text-align: center;
}

.sound-globe {
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%,#baff74 0 15%,#149229 16% 48%,#07180d 52% 100%);
  box-shadow: inset 0 0 0 2px #4d5750;
}

.notification-options {
  min-width: 0;
  padding: 15px 18px 18px;
}

.notification-options > label {
  width: 100%;
  min-height: 42px;
  margin: 0;
  display: grid;
  grid-template-columns: 22px minmax(130px,1fr) 40px;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.notification-options > label input {
  margin: 0;
  justify-self: center;
}

.notification-options > label span {
  justify-self: center;
}

.notification-options h4 {
  margin: 14px 0 8px;
}

@media (max-width: 450px) {
  .configuration-identities {
    grid-template-columns: 1fr;
  }

  .configuration-body {
    grid-template-columns: 1fr;
  }
}

/* Contadores junto al nombre de cada carpeta. */
#folderTreeBody .tree-item > span:nth-of-type(2),
#folderTreeBody .tree-child > span:nth-of-type(2) {
  flex: 0 1 auto;
  width: auto;
}

#folderTreeBody .tree-item > em:last-child,
#folderTreeBody .tree-child > em:last-child {
  margin-left: 4px;
  margin-right: auto;
  flex: 0 0 auto;
}

/* Titulo del filtro completamente visible sobre el boton Buscar. */
.advanced-filters {
  padding-top: 31px;
}

.advanced-filters .filter-title {
  top: 6px;
  left: 18px;
  z-index: 2;
  white-space: nowrap;
}

.filter-action-column {
  padding-top: 5px;
}

/* Avisos y botones de Configuracion Local segun la referencia. */
.notification-options {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
}

.notification-options > label {
  grid-template-columns: 22px minmax(115px,1fr) 54px;
  min-height: 68px;
}

.notification-options > label span {
  width: 58px;
  height: 58px;
  display: block;
  font-size: 0;
  color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.notification-options .audible-mark {
  background-image: url("/assets/ui/notice-audible.png");
}

.notification-options .visible-mark {
  background-image: url("/assets/ui/notice-visible.png");
}

.notification-options .both-mark {
  background-image: url("/assets/ui/notice-both.png");
}

.notification-options h4 {
  margin: 18px 0 12px;
  padding-top: 10px;
  border-top: 1px solid #b5b5b0;
}

.notification-options .configuration-action {
  width: 190px;
  height: 45px;
  margin: 0 0 12px 0;
  padding: 4px 16px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  justify-self: start;
  border: 1px solid #a7aaa7;
  background: linear-gradient(#fff,#e3e4df);
  color: #263650;
  font-weight: 700;
  text-align: left;
}

.notification-options .configuration-action span {
  width: 34px;
  height: 34px;
  display: block;
  font-size: 0;
  color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.notification-options .configuration-action.save span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%232caf45' stroke-width='9' stroke-linecap='round' stroke-linejoin='round' d='M6 25l11 11L42 10'/%3E%3C/svg%3E");
}

.notification-options .configuration-action.cancel span {
  background-image: url("/assets/ui/compose-close.png");
}

/* Iconos de opciones para mensajes recibidos y transmitidos. */
.ctx-open-new { background-image: url("/assets/context/open-blue.png") !important; }
.ctx-transcribe-new { background-image: url("/assets/context/transcribe-green.png") !important; }
.ctx-statistics-new { background-image: url("/assets/context/statistics-printer.png") !important; }
.ctx-binoculars-art { background-image: url("/assets/context/transmission-binoculars.png") !important; }
.ctx-export-text-new { background-image: url("/assets/context/export-text.png") !important; }

.transmission-status-dialog {
  width: min(900px,92vw);
  min-height: 430px;
  max-height: none;
  overflow: hidden;
}

.transmission-status-title {
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  color: #173368;
}

.transmission-status-title > button {
  margin-left: auto;
}

.transmission-status-body {
  display: grid;
  grid-template-columns: minmax(300px,.85fr) minmax(390px,1.15fr);
  gap: 18px;
  padding: 22px;
}

.transmission-status-body fieldset {
  margin: 0;
  padding: 18px;
}

.transmission-message-data dl {
  display: grid;
  grid-template-columns: 145px minmax(0,1fr);
  gap: 12px 10px;
  margin: 0;
}

.transmission-message-data dt {
  font-weight: 700;
  color: #243b61;
}

.transmission-message-data dd {
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #aab1b3;
  color: #172e50;
}

.transmission-recipients table {
  table-layout: fixed;
}

.transmission-recipients th,
.transmission-recipients td {
  padding: 9px 10px;
}

.transmission-state {
  font-weight: 800;
  color: #1b4f78;
}

@media (max-width: 760px) {
  .transmission-status-body {
    grid-template-columns: 1fr;
  }
}

/* Iconografia administrativa entregada para SOPT Academico. */
.icon-config-local,
.icon-operators,
.icon-statistics,
.icon-log,
.icon-backup,
.icon-recover-docs {
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
.icon-config-local { background-image: url("/assets/ui/admin-config.png") !important; }
.icon-operators { background-image: url("/assets/ui/admin-operators.png") !important; }
.icon-statistics { background-image: url("/assets/ui/admin-statistics.png") !important; }
.icon-log { background-image: url("/assets/ui/admin-log.png") !important; }
.icon-backup { background-image: url("/assets/ui/admin-backup.png") !important; }
.icon-recover-docs { background-image: url("/assets/ui/admin-recover.png") !important; }
.icon-config-local::before,
.icon-config-local::after,
.icon-operators::before,
.icon-operators::after,
.icon-statistics::before,
.icon-statistics::after,
.icon-log::before,
.icon-log::after,
.icon-backup::before,
.icon-backup::after,
.icon-recover-docs::before,
.icon-recover-docs::after { content: none !important; }

.bt-line.bt-line-annex {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.bt-line.bt-line-annex strong {
  font-size: 10pt;
  font-weight: 400;
}

/* Separacion visual equivalente a una tabulacion en la barra de identidad. */
.identity-bar {
  column-gap: 42px !important;
  white-space: nowrap;
}
.identity-app-name { margin-right: 8px; }

/* El planeta queda al mismo diametro visual que Salir y Ayuda. */
.toolbar-icon.icon-casillas {
  transform: scale(1.28);
  transform-origin: center;
}