:root {
    --sc-ink: #18212f;
    --sc-muted: #667085;
    --sc-line: #cfd8e3;
    --sc-panel: #ffffff;
    --sc-page: #eef3f8;
    --sc-accent: #1f6feb;
    --sc-accent-dark: #164ea6;
    --sc-accent-bg: #eef4fb;       /* fondo tenue de acento: filtro, item resaltado */
    --sc-accent-bg-hover: #dbeafe; /* hover del tenue */
    --sc-accent-line: #c3d5f0;     /* borde de lo tenue */
    --sc-accent-deep: #154BA0;     /* pie del degradado del boton */
    --sc-danger: #b42318;       /* trazo, texto y fondo solido */
    --sc-danger-dark: #8a1a12;  /* hover del solido */
    --sc-danger-bg: #fff1f0;    /* fondo tenue: aviso, fila o campo con error */
    --sc-danger-bg-hover: #fee2e2;
    --sc-danger-line: #f2aaa4;  /* borde de lo tenue */
    --sc-ok: #047857;
    --sc-ok-bg: #ecfdf5;
    --sc-ok-line: #a7f3d0;
    --sc-warning: #92400e;
    --sc-warning-bg: #fffbeb;
    --sc-warning-line: #fde68a;
    --sc-shadow: 0 18px 42px rgba(24, 33, 47, 0.14);

    /* Neutros que antes estaban escritos a mano en decenas de reglas. Nombrarlos deja una sola
       fuente de verdad y es lo que permitiria, mas adelante, un tema oscuro. */
    --sc-ink-soft: #344054;      /* tinta intermedia: encabezado de grilla */
    --sc-line-soft: #e5eaf0;     /* separador entre filas, mas tenue que --sc-line */
    --sc-surface-soft: #f3f7fb;  /* fondo tenue: encabezado de tabla, pestania inactiva */
    --sc-hover: #f8fbff;         /* realce al pasar el mouse sobre fila o boton */
    --sc-disabled: #98a2b3;      /* control deshabilitado: fondo, borde y texto */

    /* Medidas del boton de los formularios migrados (.vfp-btn.vfp-portal): una sola fuente para que todos tengan el
       mismo alto, letra y esquinas. El ancho sigue siendo el de cada boton en FoxPro. */
    --sc-boton-alto: 34px;
    --sc-boton-radio: 8px;
    --sc-boton-letra: .78rem;
    --sc-boton-peso: 600;
    --sc-boton-sombra: 0 1px 2px rgba(24, 33, 47, .08);
    --sc-boton-sombra-hover: 0 2px 6px rgba(24, 33, 47, .12);

    /* Bandas de columna de las grillas de Cosecha (Laboratorio Quimico, importadas de prj-0147):
       separan lo que se lee de Merrill Crowe (flujo, leyes, gramos) de lo que se digita. */
    --sc-lab-flujo-bg: #fff7cf;
    --sc-lab-ley-bg: #ffe9d0;
    --sc-lab-gramos-bg: #ffe3c4;
    --sc-lab-codigo-bg: #e5f7df;
    --sc-lab-entrada-bg: #fffaf3;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--sc-ink);
    background:
        linear-gradient(180deg, rgba(238, 243, 248, 0.94), rgba(225, 233, 242, 0.96)),
        url("images/Tito_validaacceso.png?v=20260630b") center / cover fixed;
}

button,
input {
    font: inherit;
}

.sc-layout,
.sc-home {
    min-height: 100vh;
}

.sc-home {
    display: grid;
    grid-template-rows: auto 1fr;
}

.sc-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 22px;
    border-bottom: 1px solid rgba(207, 216, 227, 0.9);
    background: rgba(255, 255, 255, 0.93);
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 41;
}

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

.sc-brand img {
    width: 34px;
    height: 34px;
}

.sc-brand strong {
    font-size: 1rem;
    line-height: 1.2;
}

.sc-brand span {
    display: block;
    color: var(--sc-muted);
    font-size: 0.82rem;
}

/* Lado derecho de la cabecera: aviso de modo pruebas y menu del usuario. */
.sc-header-derecha {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    min-width: 0;
}

.sc-usuario {
    position: relative;
}

.sc-usuario-boton {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 300px;
    padding: 5px 10px 5px 5px;
    border: 1px solid var(--sc-line);
    border-radius: 999px;
    background: #fff;
    color: var(--sc-ink);
    cursor: pointer;
    text-align: left;
}

.sc-usuario-boton:hover,
.sc-usuario-boton[aria-expanded="true"] {
    background: var(--sc-hover);
}

.sc-usuario-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sc-accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sc-usuario-texto {
    display: grid;
    min-width: 0;
    line-height: 1.2;
}

.sc-usuario-texto strong,
.sc-usuario-texto span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-usuario-texto strong {
    font-size: 0.9rem;
}

.sc-usuario-texto span {
    color: var(--sc-muted);
    font-size: 0.78rem;
}

.sc-usuario-flecha {
    color: var(--sc-muted);
    font-size: 0.8rem;
}

.sc-usuario-fondo {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.sc-usuario-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 41;
    min-width: 240px;
    border: 1px solid var(--sc-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.sc-usuario-datos {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sc-line-soft);
}

.sc-usuario-datos span {
    color: var(--sc-muted);
    font-size: 0.82rem;
}

/* Acciones de la sesion en el menu del usuario (Cambiar de sistema, Cerrar sesion). */
.sc-usuario-accion {
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    color: var(--sc-ink);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.sc-usuario-accion:hover,
.sc-usuario-accion:focus-visible {
    background: var(--sc-hover);
}

.sc-usuario-accion + .sc-usuario-accion {
    border-top: 1px solid var(--sc-line-soft);
}

.sc-usuario-salir {
    color: #b91c1c;
}

.sc-usuario-salir:hover,
.sc-usuario-salir:focus-visible {
    background: #fef2f2;
}

.sc-main {
    width: min(1120px, calc(100vw - 28px));
    margin: 0 auto;
    padding: 28px 0;
    display: grid;
    align-items: center;
}

.sc-main.system-main {
    width: 100%;
    min-height: calc(100vh - 58px);
    margin: 0;
    padding: 0;
    align-items: stretch;
}

.login-card {
    width: min(940px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(300px, 1fr);
    overflow: hidden;
    border: 1px solid var(--sc-line);
    border-radius: 8px;
    background: var(--sc-panel);
    box-shadow: var(--sc-shadow);
}

.login-media {
    min-height: 460px;
    background-position: center;
    background-size: cover;
}

.login-form {
    padding: 36px;
    display: grid;
    align-content: center;
    gap: 18px;
}

.login-title {
    display: grid;
    gap: 6px;
}

h1 {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0;
}

.login-title p,
.closed-panel p {
    margin: 0;
    color: var(--sc-muted);
}

.field {
    display: grid;
    gap: 6px;
}

.field label {
    font-size: 0.88rem;
    font-weight: 600;
}

.field-input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--sc-line);
    border-radius: 6px;
    padding: 8px 11px;
    background: var(--sc-panel);
    color: var(--sc-ink);
}

.field-input:focus {
    outline: 2px solid rgba(31, 111, 235, 0.22);
    border-color: var(--sc-accent);
}

.validation-message {
    color: var(--sc-danger);
    font-size: 0.84rem;
}

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

.attempts {
    color: var(--sc-muted);
    font-size: 0.9rem;
}

/* Boton PILDORA. El degradado arranca en el tono OSCURO y no en el acento: el brillo de
   arriba aclara la mitad superior, y sobre los acentos claros (el naranja de Sunec, por
   ejemplo) el texto blanco no llegaba al contraste minimo. Partiendo del oscuro, las tres
   companias quedan por encima de 4.5:1. */
.sc-btn {
    position: relative;
    overflow: hidden;
    min-height: 40px;
    border: 1px solid var(--sc-accent-deep);
    border-radius: 999px;
    padding: 8px 22px;
    background: linear-gradient(180deg, var(--sc-accent-dark) 0%, var(--sc-accent-deep) 100%);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(24, 33, 47, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.30);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    transition: filter 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

/* El brillo ocupa la mitad de arriba, asi la etiqueta cae sobre la parte oscura. */
.sc-btn::after {
    content: "";
    position: absolute;
    inset: 0 0 55% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* El hover se anima con brightness y no con background: asi lo resuelve la GPU sin repintar. */
.sc-btn:hover:not(:disabled) {
    filter: brightness(1.10);
}

.sc-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(24, 33, 47, 0.30);
}

.sc-btn:disabled {
    border-color: var(--sc-disabled);
    background: var(--sc-disabled);
    box-shadow: none;
    text-shadow: none;
    filter: none;
    cursor: not-allowed;
}

.sc-btn:disabled::after {
    display: none;
}

.sc-btn.secondary {
    border-color: var(--sc-line);
    background: linear-gradient(180deg, var(--sc-panel) 0%, var(--sc-surface-soft) 100%);
    color: var(--sc-ink);
    text-shadow: none;
}

.sc-btn.secondary:hover:not(:disabled) {
    background: var(--sc-hover);
}

.link-btn {
    min-height: 32px;
    border: 1px solid var(--sc-line);
    border-radius: 6px;
    padding: 5px 10px;
    background: var(--sc-panel);
    color: var(--sc-accent-dark);
    font-weight: 600;
    cursor: pointer;
}

.link-btn:hover:not(:disabled) {
    background: var(--sc-surface-soft);
}

.link-btn:disabled {
    color: var(--sc-disabled);
    cursor: not-allowed;
}

.message {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--sc-line);
    font-size: 0.92rem;
}

.message.danger {
    border-color: var(--sc-danger-line);
    background: var(--sc-danger-bg);
    color: var(--sc-danger);
}

.message.ok {
    border-color: var(--sc-ok-line);
    background: var(--sc-ok-bg);
    color: var(--sc-ok);
}

.message.warning {
    border-color: var(--sc-warning-line);
    background: var(--sc-warning-bg);
    color: var(--sc-warning);
}

.access-panel,
.closed-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--sc-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--sc-shadow);
}

.closed-panel {
    width: min(520px, 100%);
    margin: 0 auto;
    justify-items: center;
    text-align: center;
    padding: 34px;
}

.closed-panel img {
    width: 48px;
    height: 48px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--sc-line);
    padding-bottom: 12px;
}

.panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.panel-header strong {
    display: block;
    font-size: 1.08rem;
}

.panel-header span {
    color: var(--sc-muted);
    font-size: 0.9rem;
}

.table-wrap {
    overflow: auto;
    border: 1px solid var(--sc-line);
    border-radius: 6px;
    background: var(--sc-panel);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.action-col {
    width: 92px;
    text-align: right;
}

th,
td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--sc-line-soft);
    text-align: left;
    white-space: nowrap;
}

th.action-col,
td.action-col {
    text-align: right;
}

th {
    position: sticky;
    top: 0;
    background: var(--sc-surface-soft);
    color: var(--sc-ink-soft);
    font-size: 0.88rem;
    font-weight: 700;
}

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

.empty-row td {
    color: var(--sc-muted);
    text-align: center;
    white-space: normal;
}

.system-shell {
    min-height: calc(100vh - 58px);
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: none;
}

.system-menu {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    border-right: 1px solid var(--sc-line);
    background: var(--sc-hover);
}

.system-menu-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--sc-line);
}

.system-menu-titulo {
    display: grid;
    gap: 4px;
    min-width: 0;
}

/* Boton que pliega y abre el menu lateral. */
.menu-toggle {
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--sc-line);
    border-radius: 6px;
    background: #fff;
    color: var(--sc-ink-soft);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.menu-toggle:hover {
    background: var(--sc-accent-bg);
    color: var(--sc-accent-dark);
}

/* Menu plegado: queda una franja angosta con el boton; el formulario usa el resto del ancho. */
.system-shell.menu-plegado {
    grid-template-columns: 50px minmax(0, 1fr);
}

.system-shell.menu-plegado .system-menu-head {
    padding: 10px;
    border-bottom: 0;
}

.system-shell.menu-plegado .system-menu-titulo,
.system-shell.menu-plegado .menu-groups {
    display: none;
}

.system-menu-head span {
    font-weight: 750;
}

.system-menu-head strong {
    color: var(--sc-muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.menu-groups {
    min-height: 0;
    overflow: auto;
    padding: 10px;
}

.menu-group {
    border-bottom: 1px solid var(--sc-line-soft);
}

.menu-group summary {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    color: var(--sc-ink-soft);
    font-weight: 750;
    cursor: pointer;
}

.menu-group summary::marker {
    color: var(--sc-accent);
}

.menu-options {
    display: grid;
    gap: 4px;
    padding: 0 0 10px 12px;
}

.menu-option {
    width: 100%;
    min-height: 34px;
    border: 0;
    border-radius: 6px;
    padding: 7px 9px;
    background: transparent;
    color: var(--sc-ink);
    text-align: left;
    cursor: pointer;
}

.menu-option:hover,
.menu-option.active {
    background: var(--sc-accent-bg);
    color: var(--sc-accent-dark);
}

.menu-empty {
    padding: 12px 8px;
    color: var(--sc-muted);
    font-size: 0.92rem;
}

.system-content {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 14px;
    padding: 18px;
}

.option-workspace {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 12px;
    align-content: start;
}

.option-workspace > div {
    display: grid;
    gap: 5px;
    min-height: 86px;
    align-content: center;
    border: 1px solid var(--sc-line);
    border-radius: 8px;
    padding: 14px;
    background: var(--sc-panel);
}

.option-workspace span {
    color: var(--sc-muted);
    font-size: 0.84rem;
}

.option-workspace strong {
    font-size: 1rem;
}

.construction-panel {
    min-height: 360px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 16px;
    border: 1px solid var(--sc-line);
    border-radius: 8px;
    padding: 28px;
    background: var(--sc-panel);
    text-align: center;
}

.construction-panel.compact {
    min-height: 220px;
}

.construction-panel img {
    width: min(320px, 70vw);
    max-height: 280px;
    object-fit: contain;
}

.construction-panel strong {
    display: block;
    font-size: 1.08rem;
}

.construction-panel span {
    display: block;
    margin-top: 5px;
    color: var(--sc-muted);
    font-size: 0.92rem;
}

.frm-cese {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    gap: 12px;
}

.frm-head {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.frm-head h2 {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 0;
}

.frm-head span,
.company-strip span,
.pager-bar span {
    color: var(--sc-muted);
    font-size: 0.86rem;
}

.company-strip {
    display: grid;
    grid-template-columns: minmax(260px, 1fr);
    gap: 8px;
    min-width: min(520px, 100%);
}

.company-strip > div {
    display: grid;
    gap: 3px;
    border: 1px solid var(--sc-line);
    border-radius: 6px;
    padding: 9px 11px;
    background: var(--sc-panel);
}

.company-strip strong {
    font-size: 0.96rem;
}

.frm-grid {
    min-height: 0;
}

.frm-filter {
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(260px, 520px);
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.frm-filter label {
    font-size: 0.88rem;
    font-weight: 600;
}

.filter-input {
    min-width: min(420px, 100%);
}

/* Campos de fecha en filtros: ancho ajustado a su contenido (no estirar). */
.filter-date {
    width: 170px;
    min-width: 0;
}

.report-filter {
    grid-template-columns: minmax(110px, auto) minmax(220px, 520px) minmax(110px, auto) minmax(220px, 320px) auto auto;
}

.report-filter-wide {
    grid-template-columns: repeat(2, minmax(105px, auto) auto) auto auto;
    width: auto;
}

.frm-grid table {
    min-width: 1160px;
}

.report-grid table {
    min-width: 1760px;
}

.grid-input {
    min-width: 180px;
}

.grid-date {
    min-width: 150px;
}

.check-col {
    width: 118px;
    text-align: center;
}

th.check-col,
td.check-col {
    text-align: center;
}

.check-col input {
    width: 18px;
    height: 18px;
    accent-color: var(--sc-accent);
}

.report-number {
    text-align: right;
    white-space: nowrap;
}

.pager-bar,
.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.pager-actions,
.form-actions {
    justify-content: flex-end;
}

.pager-actions {
    display: flex;
    gap: 8px;
}

.form-placeholder {
    border: 1px solid var(--sc-line);
    border-radius: 8px;
    padding: 18px;
    background: var(--sc-panel);
    color: var(--sc-muted);
}

.popup-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px;
    background: rgba(248, 250, 252, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.popup-dialog {
    width: min(430px, 100%);
    max-height: calc(100vh - 36px);
    display: grid;
    gap: 14px;
    border: 2px solid var(--sc-ink-soft);
    border-radius: 8px;
    padding: 22px;
    background: var(--sc-panel);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
    text-align: center;
    overflow: auto;
}

.popup-dialog strong {
    font-size: 1.08rem;
}

.popup-dialog p {
    margin: 0;
    color: var(--sc-ink);
    line-height: 1.45;
}

.popup-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.popup-btn {
    min-width: 86px;
    min-height: 40px;
    border: 1px solid var(--sc-line);
    border-radius: 999px;
    padding: 8px 22px;
    background: linear-gradient(180deg, var(--sc-panel) 0%, var(--sc-surface-soft) 100%);
    color: var(--sc-ink);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(24, 33, 47, 0.14);
}

.popup-btn.accept {
    border-color: var(--sc-accent-line);
    background: var(--sc-accent-bg);
    color: var(--sc-accent-dark);
}

.popup-btn.cancel {
    border-color: var(--sc-danger-line);
    background: var(--sc-danger-bg);
    color: var(--sc-danger);
}

.popup-btn:hover:not(:disabled) {
    background: var(--sc-hover);
}

.popup-btn.accept:hover:not(:disabled) {
    background: var(--sc-accent-bg-hover);
}

.popup-btn.cancel:hover:not(:disabled) {
    background: var(--sc-danger-bg-hover);
}

.popup-btn:disabled {
    opacity: 0.68;
    cursor: not-allowed;
}

.frm-legajo {
    display: grid;
    gap: 14px;
    align-content: start;
}

.legajo-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px 14px;
    align-items: end;
    border: 1px solid var(--sc-accent-line);
    border-left: 4px solid var(--sc-accent);
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--sc-accent-bg);
}

.filtro-titulo {
    grid-column: 1 / -1;
    color: var(--sc-accent-dark);
    font-weight: 700;
    font-size: 0.95rem;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--sc-accent-line);
    margin-bottom: 2px;
}

.legajo-filter .filter-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.input-upper {
    text-transform: uppercase;
}

.legajo-filter .field-wide {
    grid-column: span 2;
}

.legajo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-tip {
    position: relative;
    display: inline-block;
}

/* El boton disabled no recibe hover; con pointer-events:none el hover llega al
   contenedor .btn-tip y se puede mostrar el tooltip personalizado. */
.btn-tip button:disabled {
    pointer-events: none;
}

/* Tooltip personalizado "No tiene acceso ..." (solo si hay data-tip): dos puntos
   mas grande que el texto base y en negrita. */
.btn-tip[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    z-index: 100;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--sc-ink);
    color: #ffffff;
    font-size: calc(1rem + 2pt);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(24, 33, 47, 0.28);
    pointer-events: none;
}

/* Los botones deshabilitados se ven grises en todas las variantes. */
.sc-btn:disabled,
.sc-btn.secondary:disabled,
.sc-btn.danger:disabled {
    border-color: var(--sc-disabled);
    background: var(--sc-disabled);
    color: #ffffff;
    cursor: not-allowed;
}

.frm-grid tbody tr.data-row {
    cursor: pointer;
}

.frm-grid tbody tr.selected,
.frm-grid tbody tr.selected:hover {
    background: var(--sc-accent-bg-hover);
}

.sc-btn.danger {
    border-color: var(--sc-danger-dark);
    background: linear-gradient(180deg, var(--sc-danger) 0%, var(--sc-danger-dark) 100%);
    color: #ffffff;
}

.sc-btn.danger:hover:not(:disabled) {
    border-color: var(--sc-danger-dark);
    background: var(--sc-danger-dark);
}

.foto-col {
    width: 64px;
    text-align: center;
}

th.foto-col,
td.foto-col {
    text-align: center;
}

.foto-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--sc-line);
    vertical-align: middle;
}

.foto-empty {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    border: 1px dashed var(--sc-line);
    background: var(--sc-page);
    vertical-align: middle;
}

.tab-bar {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--sc-line);
}

.tab {
    min-height: 40px;
    border: 1px solid var(--sc-line);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    padding: 8px 18px;
    background: var(--sc-surface-soft);
    color: var(--sc-muted);
    font-weight: 600;
    cursor: pointer;
}

.tab.active {
    background: var(--sc-panel);
    color: var(--sc-accent-dark);
    border-color: var(--sc-accent);
}

.tab:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.tab-panel {
    display: grid;
    gap: 14px;
    align-content: start;
}

.detalle-encabezado {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.detalle-encabezado span {
    color: var(--sc-muted);
    font-size: 0.9rem;
}

.detalle-encabezado .leyenda-obligatorios,
.leyenda-obligatorios {
    margin-left: auto;
    color: var(--sc-danger);
    font-size: 0.85rem;
    font-weight: 700;
}

.campo-obligatorio {
    color: var(--sc-danger);
}

.detalle-acciones {
    border-top: 1px solid var(--sc-line);
    padding-top: 12px;
    margin-top: 4px;
}

.detalle-grupo {
    border: 1px solid var(--sc-line);
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--sc-panel);
}

.detalle-grupo h4 {
    margin: 0 0 12px;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--sc-accent-dark);
}

/* Datos de Control: etiquetas arriba, fila de campos */
.detalle-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 12px 14px;
    align-items: start;
}

.detalle-campos .campo-full {
    grid-column: 1 / -1;
}

/* Layout de tres columnas de la pagina Datos Generales */
.dg-cols {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) minmax(250px, 1.1fr) minmax(230px, 0.9fr);
    gap: 14px;
    align-items: start;
}

.dg-col {
    display: grid;
    gap: 14px;
    align-content: start;
}

/* Campos con etiqueta a la izquierda */
.campos-izq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px 20px;
    align-items: start;
}

.campos-izq .field {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 10px;
}

.campos-izq .field label {
    font-size: 0.86rem;
}

.campos-izq .campo-full {
    grid-column: 1 / -1;
}

/* Foto grande (grupo Foto) */
.foto-panel {
    margin-top: 8px;
}

.foto-grande {
    display: block;
    width: 100%;
    max-width: 240px;
    height: 300px;
    object-fit: contain;
    border: 1px solid var(--sc-line);
    border-radius: 6px;
    background: var(--sc-hover);
}

.foto-grande.sin-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-muted);
    font-size: 0.9rem;
}

/* Campo Foto + boton de busqueda "..." */
.foto-campo-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.foto-campo-row .field {
    flex: 1 1 auto;
    min-width: 0;
}

.foto-buscar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border: 1px solid var(--sc-line);
    border-radius: 6px;
    background: var(--sc-panel);
    cursor: pointer;
    user-select: none;
}

.foto-buscar-btn:hover {
    background: var(--sc-surface-soft);
    border-color: var(--sc-accent);
}

.foto-buscar-btn svg {
    display: block;
}

/* ===== Registro Laboral - layouts de edicion ===== */

/* Fila horizontal de campos (Trabajador, Puesto) */
.campos-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
}

.campos-fila .field {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 210px;
}

.campos-fila .field label {
    font-size: 0.86rem;
    white-space: nowrap;
}

/* Grupos a la izquierda + foto a la derecha (pagina 1) */
.rl-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.rl-left {
    display: grid;
    gap: 14px;
    align-content: start;
}

/* Grupo a una sola columna: los campos ocupan todo el ancho (mas espacio para
   codigo + descripcion, ej. Datos de Control de Costos). */
.campos-izq.campos-1col {
    grid-template-columns: 1fr;
}

/* Grupo a tres columnas fijas: mas ancho por control para ver las descripciones
   completas (ej. Registro Laborales). */
.campos-izq.campos-3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Barra de complementos del legajo (Composicion Familiar y futuros): borde que
   agrupa y se extiende con los nuevos botones (flex-wrap). */
.legajo-complementos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid var(--sc-accent);
    border-radius: 8px;
    background: var(--sc-hover);
}

.legajo-complementos .complementos-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sc-accent);
    margin-right: 6px;
}

/* ===== Importacion masiva ===== */
.imp-archivo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.imp-archivo-nombre {
    font-size: 0.85rem;
    color: var(--sc-muted);
}

.imp-resumen {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.imp-chip {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.imp-chip.total { background: var(--sc-surface-soft); }
.imp-chip.ok { background: var(--sc-ok-bg); color: var(--sc-ok); }
.imp-chip.err { background: var(--sc-danger-bg); color: var(--sc-danger); }

.fila-error > td {
    background: var(--sc-danger-bg);
}

.imp-errores {
    margin: 0;
    padding-left: 16px;
    font-size: 0.82rem;
    color: var(--sc-danger);
}

/* ===== Modal de COMPLEMENTOS (LIB_Complementos): el contenedor pone el marco y el
   formulario hijo solo el cuerpo, asi todos los complementos se ven igual. ===== */
.sc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.sc-modal {
    background: var(--sc-panel);
    border-radius: 8px;
    width: min(1180px, 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

/* Campos no editables del modal: gris claro para diferenciarlos */
.sc-modal .field-input:disabled {
    background: var(--sc-surface-soft);
    color: var(--sc-muted);
}

.sc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--sc-line);
}

.sc-modal-head strong {
    display: block;
    font-size: 1.05rem;
}

.sc-modal-head span {
    color: var(--sc-muted);
    font-size: 0.88rem;
}

.sc-modal-close {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    font-size: 1.05rem;
    cursor: pointer;
    color: var(--sc-muted);
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

.sc-modal-close:hover {
    background: var(--sc-surface-soft);
    color: var(--sc-ink);
}

.sc-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
}

/* Fecha de nacimiento + Edad calculada (al costado) */
.campos-izq .field.campo-fecha-edad {
    grid-column: span 2;
}

.fecha-edad {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fecha-edad > input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.fecha-edad .edad-box {
    flex: 0 0 96px;
    width: auto;
    background: var(--sc-surface-soft);
    color: var(--sc-muted);
    text-align: center;
}

/* Checkbox en linea (grupo Otros del familiar) */
.campo-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.campo-check input[type="checkbox"] {
    order: -1;
    margin: 0;
}

/* ===== BuscadorCodigo (autocompletado reutilizable) =====
   textbox de codigo + textbox de descripcion (solo lectura) en la misma linea,
   con dropdown de sugerencias debajo del codigo. */
.busq-wrap {
    display: grid;
    gap: 4px;
}

.busq-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

/* Contenedor del codigo: ancla el dropdown de sugerencias justo debajo */
.busq-codigo-box {
    position: relative;
    flex: 0 0 150px;
}

.busq-codigo-box .field-input {
    width: 100%;
}

.busq-desc {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 520px;
    background: var(--sc-surface-soft);
    color: var(--sc-muted);
}

/* Dropdown de sugerencias: debajo del codigo, solo lo que quepa (con scroll) */
.busq-sugerencias {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 40;
    width: max-content;
    min-width: 100%;
    max-width: 440px;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--sc-panel);
    border: 1px solid var(--sc-line);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.busq-sugerencias li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 10px;
    cursor: pointer;
}

.busq-sugerencias li:hover {
    background: var(--sc-accent-bg);
}

.busq-sug-cod {
    font-weight: 600;
    font-size: 0.86rem;
}

.busq-sug-desc {
    font-size: 0.8rem;
    color: var(--sc-muted);
}

/* Formulario de edicion de Usuarios del Sistema. */
.usuario-form {
    display: grid;
    gap: 12px;
    max-width: 780px;
    margin-top: 6px;
}

.uf-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.uf-row > label {
    font-weight: 600;
    font-size: 0.9rem;
}

.uf-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uf-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.uf-check input {
    width: 16px;
    height: 16px;
}

/* Combo con busqueda de una sola caja (ComboBuscador): input + dropdown debajo. */
.cbo-busca {
    position: relative;
    /* Ancho fijo para que siempre se vea el nombre de la compania. */
    width: 510px;
    max-width: 100%;
}

.cbo-busca > .field-input {
    width: 100%;
}

.cbo-busca-lista {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 40;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--sc-panel);
    border: 1px solid var(--sc-line);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.cbo-busca-lista li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    cursor: pointer;
}

.cbo-busca-lista li:hover {
    background: var(--sc-accent-bg);
}

.cbo-busca-desc {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cbo-busca-cod {
    flex: 0 0 auto;
    font-size: 0.72rem;
    letter-spacing: 0.3px;
    color: var(--sc-muted);
    background: var(--sc-surface-soft);
    padding: 1px 7px;
    border-radius: 6px;
}

.field-input.input-invalid {
    border-color: var(--sc-danger);
    background: var(--sc-danger-bg);
}

.field-input.input-invalid:focus {
    outline-color: rgba(220, 53, 69, 0.22);
    border-color: var(--sc-danger);
}

.ceco-error {
    color: var(--sc-danger);
    font-size: 0.84rem;
}

/* Checkboxes en fila (Informe de Gestion): etiqueta a la izq, check a la der */
.rl-checks {
    display: grid;
    gap: 6px;
}

.rl-checks .field {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* El checkbox va primero (a la izquierda), pegado a su etiqueta. */
.rl-checks .field input[type="checkbox"] {
    order: -1;
    margin: 0;
    flex: 0 0 auto;
}

.rl-checks .field label {
    font-size: 0.86rem;
}

@media (max-width: 900px) {
    .rl-cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .dg-cols {
        grid-template-columns: 1fr;
    }
}

#blazor-error-ui {
    background: var(--sc-danger-bg);
    border-top: 1px solid var(--sc-danger-line);
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(24, 33, 47, 0.16);
    color: var(--sc-danger);
    display: none;
    left: 0;
    padding: 0.75rem 1rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 760px) {
    .sc-header {
        padding: 10px 14px;
    }

    .sc-usuario-texto {
        display: none;
    }

    .login-card {
        grid-template-columns: 1fr;
    }

    .login-media {
        min-height: 190px;
    }

    .login-form {
        padding: 24px;
    }

    .system-shell,
    .system-shell.menu-plegado {
        grid-template-columns: 1fr;
    }

    .system-menu {
        border-right: 0;
        border-bottom: 1px solid var(--sc-line);
    }

    .menu-groups {
        max-height: 280px;
    }

    .option-workspace {
        grid-template-columns: 1fr;
    }

    .company-strip {
        grid-template-columns: 1fr;
    }

    .frm-filter,
    .report-filter,
    .report-filter-wide {
        grid-template-columns: 1fr;
    }

    .filter-input {
        min-width: 100%;
    }
}

/* ===== Compatibilidad SCOMM (clases del legado, estilizadas con la paleta SARH) ===== */
:root{
  --scomm-border:var(--sc-line); --scomm-border-strong:var(--sc-disabled);
  --scomm-primary-dark:var(--sc-accent-dark); --scomm-dark:var(--sc-ink);
  --scomm-radius-md:8px; --scomm-radius-sm:6px;
}
.panel{background:var(--sc-panel);border:1px solid var(--sc-line);border-radius:8px;padding:12px;}
.panel-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.header-stack{display:grid;gap:2px;}.header-stack strong{font-size:1rem;}.header-stack span{color:var(--sc-muted);font-size:.85rem;}
.muted{color:var(--sc-muted);}
.cmh-toolbar{display:grid;gap:10px;}
.cmh-field{display:grid;gap:4px;}
.cmh-label{font-size:.85rem;font-weight: 600;}
.cmh-input,.cmh-select{width:100%;min-height:40px;border:1px solid var(--sc-line);border-radius:6px;padding:8px 11px;background:var(--sc-panel);color:var(--sc-ink);font:inherit;}
.cmh-input:focus,.cmh-select:focus{outline:2px solid rgba(31,111,235,.22);border-color:var(--sc-accent);}
.cmh-card{border:1px solid var(--sc-line);border-radius:8px;padding:10px;background:var(--sc-panel);}
.cmh-section-title{font-weight:700;margin-bottom:6px;}
.cmh-form-grid{display:grid;gap:8px;}
.cmh-table{width:100%;border-collapse:collapse;}
.cmh-table th,.cmh-table td{padding:8px 10px;border-bottom:1px solid var(--sc-line-soft);text-align:left;white-space:nowrap;}
.cmh-table th{background:var(--sc-surface-soft);color:var(--sc-ink-soft);font-weight:700;font-size:.85rem;}
.cmh-table tbody tr:hover{background:var(--sc-hover);cursor:pointer;}
tr.is-selected{background:var(--sc-accent)!important;color:#ffffff;}
.cmh-btn,.btn{position:relative;overflow:hidden;min-height:40px;border:1px solid var(--sc-accent-deep);border-radius:999px;padding:8px 22px;background:linear-gradient(180deg,var(--sc-accent-dark) 0%,var(--sc-accent-deep) 100%);color:#ffffff;font-weight:600;cursor:pointer;font:inherit;box-shadow:0 1px 3px rgba(24,33,47,.24),inset 0 1px 0 rgba(255,255,255,.30);text-shadow:0 1px 1px rgba(0,0,0,.18);transition:filter 120ms ease,box-shadow 120ms ease,transform 120ms ease;}
.cmh-btn::after,.btn::after{content:"";position:absolute;inset:0 0 55% 0;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none;}
.cmh-btn:hover:not(:disabled),.btn:hover:not(:disabled){filter:brightness(1.10);}
.cmh-btn:active:not(:disabled),.btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(24,33,47,.30);}
.cmh-btn:disabled,.btn:disabled{border-color:var(--sc-disabled);background:var(--sc-disabled);box-shadow:none;text-shadow:none;filter:none;cursor:not-allowed;}
.cmh-btn:disabled::after,.btn:disabled::after{display:none;}
.cmh-btn-cancelar,.cmh-btn-editar,.cmh-btn-reporte,.btn:not(.primary){border-color:var(--sc-line);background:linear-gradient(180deg,var(--sc-panel) 0%,var(--sc-surface-soft) 100%);color:var(--sc-ink);text-shadow:none;}
.cmh-btn-cancelar:hover:not(:disabled),.cmh-btn-editar:hover:not(:disabled),.cmh-btn-reporte:hover:not(:disabled),.btn:not(.primary):hover:not(:disabled){filter:brightness(0.98);}
.cmh-btn-eliminar{border-color:var(--sc-danger-dark);background:linear-gradient(180deg,var(--sc-danger) 0%,var(--sc-danger-dark) 100%);}
.cmh-btn-salir{border-color:var(--sc-ink);background:linear-gradient(180deg,var(--sc-ink-soft) 0%,var(--sc-ink) 100%);}
.pageframe{border:1px solid var(--sc-line);border-radius:8px;overflow:hidden;background:var(--sc-panel);}
.pageframe-tabs{display:flex;gap:0;background:var(--sc-page);border-bottom:1px solid var(--sc-line);padding:6px 6px 0;}
.pageframe-tab{padding:8px 18px;border:1px solid var(--sc-line);border-bottom:none;border-top-left-radius:8px;border-top-right-radius:8px;margin-right:4px;background:var(--sc-line-soft);color:var(--sc-muted);font-weight: 600;cursor:pointer;font:inherit;position:relative;top:1px;}
.pageframe-tab.active{color:var(--sc-accent-dark);background:var(--sc-panel);border-bottom:1px solid var(--sc-panel);}
.pageframe-tab.active::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--sc-accent);border-top-left-radius:8px;border-top-right-radius:8px;}
.pageframe-tab:disabled{opacity:.5;cursor:not-allowed;}
.status-box{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--sc-line);border-radius:6px;background:var(--sc-page);color:var(--sc-ink);}
.status-box.danger{border-color:var(--sc-danger-line);background:var(--sc-danger-bg);color:var(--sc-danger);}
.actions{display:flex;gap:8px;flex-wrap:wrap;}
.report-dialog{border:1px solid var(--sc-line);border-radius:8px;background:var(--sc-panel);box-shadow:0 18px 42px rgba(24,33,47,.24);padding:0;}
.dlg-hd,.dlg-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--sc-line);}
.dlg-ft{border-bottom:none;border-top:1px solid var(--sc-line);}
.dlg-body{padding:14px 16px;display:grid;gap:10px;max-height:70vh;overflow:auto;}
.icon-btn{border:1px solid var(--sc-line);background:var(--sc-panel);border-radius:6px;padding:4px;cursor:pointer;color:var(--sc-ink);}
.left,.right{display:flex;align-items:center;}

/* =========================================================================
   AVISOS FLOTANTES (toasts) — COMUN a todos los sistemas
   Importado de prj-0147 / PRY.SCOMM4 (wwwroot/app.css) con el formulario de
   Liquidacion de DDH, reescrito con la paleta --sc-*. Lo usa ToastHost.razor
   (Components/Compartido): cualquier formulario puede montarlo.
   ========================================================================= */
.toast-zone {
  position: fixed;
  right: 18px;
  top: 84px;
  z-index: 1080;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 28px));
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--sc-line);
  background: var(--sc-panel);
  box-shadow: var(--sc-shadow);
  animation: sc-toast-in .18s ease-out;
}

.toast-text {
  font-size: .92rem;
  line-height: 1.35;
  color: var(--sc-ink);
}

.toast-close {
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--sc-muted);
  cursor: pointer;
}

.toast-close:hover {
  background: var(--sc-page);
  color: var(--sc-ink);
}

.toast-success { border-left: 4px solid var(--sc-ok); }
.toast-warning { border-left: 4px solid var(--sc-warning); }
.toast-error   { border-left: 4px solid var(--sc-danger); }
.toast-info    { border-left: 4px solid var(--sc-accent); }

@keyframes sc-toast-in {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Los avisos no van al papel. */
@media print {
  .toast-zone { display: none !important; }
}

/* =========================================================================
   IMPRESION de los informes que se muestran DENTRO del shell.
   Decision del import de Liquidacion de DDH: en prj-0147 los impresos eran
   rutas propias que se abrian en otra pestaña; aca son otra vista del mismo
   formulario, asi que al imprimir hay que sacar del papel el menu, la
   cabecera y todo lo que no sea el informe.
   ========================================================================= */
@media print {
  /* Cabecera del lanzador, menu lateral (con su cabecera: sistema y usuario) y barra de acciones del panel:
     fuera del papel. Los informes de FoxPro no imprimen el usuario. */
  .sc-header,
  .system-menu,
  .menu-groups,
  .panel-header,
  .panel-actions,
  .ddh-no-imprimir {
    display: none !important;
  }

  /* Hoja en blanco en todo impreso (reportes, cubos y Ctrl+P): html y body llevan la imagen de fondo del portal y,
     con "Graficos de fondo" activado en el dialogo, salia en el espacio que el reporte deja libre en la hoja. */
  html,
  body {
    background: #fff !important;
  }

  /* El area de trabajo ocupa la hoja completa, sin marco ni sombra (system-shell deja de ser grilla de dos
     columnas, si no el informe caeria en la columna de 310px del menu oculto). */
  .sc-home,
  .sc-main,
  .system-shell,
  .system-content,
  .option-workspace {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: var(--sc-panel) !important;
  }

  /* El informe esta oculto en pantalla y es lo unico que va al papel (CR-DDH-0032). */
  .ddh-solo-impresion {
    display: block !important;
  }

  /* Imprimir... de un cubo (LIB_Cubo): solo el cuadro con titulo y datos va al papel, como el reporte de
     cntcubo en FoxPro; el formulario que lo contiene (titulo, fechas, botones) queda fuera. */
  body:has(.cubo-impreso) * {
    visibility: hidden;
  }

  body:has(.cubo-impreso) .cubo-impreso,
  body:has(.cubo-impreso) .cubo-impreso * {
    visibility: visible;
  }

  /* El cubo de pantalla no va al papel ni ocupa lugar (si no, salen hojas en blanco detras del cuadro). */
  body:has(.cubo-impreso) .cubo {
    display: none !important;
  }

  body:has(.cubo-impreso) .cubo-impreso {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  /* El cuadro entra en el ancho de la hoja: letra chica y titulos de columna en varias lineas. */
  body:has(.cubo-impreso) .cubo-impreso .cubo-tabla {
    width: 100%;
  }

  /* Cuadricula en negro de 1.5 pt, como el reporte de DynamiCube: con la linea gris de 1px de pantalla (y aun
     con 1 pt) el visor de PDF a 100 % no dibuja buena parte de las lineas; a 1.5 pt salen todas. */
  body:has(.cubo-impreso) .cubo-impreso .cubo-tabla th,
  body:has(.cubo-impreso) .cubo-impreso .cubo-tabla td {
    font-size: 9px;
    padding: 1px 3px;
    border: 1.5pt solid #000 !important;
  }

  body:has(.cubo-impreso) .cubo-impreso .cubo-tabla th {
    white-space: normal;
  }

  /* Con Ctrl+P (sin pasar por "Imprimir...") va al papel el cubo de pantalla: su linea gris de 1px tampoco se ve
     en el visor de PDF a 100 %, asi que lleva la misma cuadricula negra de 1.5 pt. */
  .cubo-tabla th,
  .cubo-tabla td {
    border: 1.5pt solid #000 !important;
  }
}

/* -------------------------------------------------------------------------
   Capa de compatibilidad SCOMM — piezas que trajeron los componentes
   LIB_BaseMantenimiento_Forma1/2 y LIB_ReporteBase al mudarse a Compartido.
   ------------------------------------------------------------------------- */
:root {
  /* La usa LIB_ReporteBase para los textos secundarios del visor. */
  --scomm-muted: var(--sc-muted);
  /* Las usa el <style> de FRM_SCOMM_GeoMuestrasTolva. */
  --scomm-surface: var(--sc-panel);
  --scomm-shadow: var(--sc-shadow);
}

/* Salir cierra el formulario: neutro oscuro, para que no compita con Nuevo/Grabar
   (que heredan el acento de .cmh-btn). */
.cmh-btn-salir {
  border-color: var(--sc-ink-soft);
  background: var(--sc-ink-soft);
  color: #ffffff;
}

.cmh-btn-salir:hover:not(:disabled) {
  border-color: var(--sc-ink);
  background: var(--sc-ink);
}

/* Cuerpo del visor de reportes (LIB_ReporteBase). */
.report-body {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}


/* Quien pidio menos movimiento no recibe la animacion del boton. */
@media (prefers-reduced-motion: reduce) {
  .sc-btn,
  .cmh-btn,
  .btn {
    transition: none !important;
  }

  .sc-btn:active,
  .cmh-btn:active,
  .btn:active {
    transform: none !important;
  }
}

/* Cuerpo de formulario del legado SCOMM (lo usa FRM_SCOMM_GeoMuestrasTolva). */
.form-body {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  background: var(--sc-panel);
}

/* ---------------------------------------------------------------------------
   Contenedor de mantenimientos multiples (LIB_ContenedorSubopciones).
   Las subopciones van como PILDORAS, no como pestañas cuadradas: adentro cada
   formulario trae sus propias pestañas (listado / edicion) y dos filas de
   pestañas apiladas se leerian como un mismo nivel. La pildora activa usa el
   mismo degradado que .sc-btn, asi el acento de SIA manda tambien aca.
   --------------------------------------------------------------------------- */
/* Envoltura del contenedor: .system-content es un grid de filas (auto auto 1fr) y sus celdas
   son los elementos que emite el formulario. Con esta envoltura el contenedor ocupa UNA celda,
   y align-content:start evita que sus propias filas se estiren con el alto sobrante. */
.sc-subop-host {
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0;
}

.sc-subop-bar {
    display: flex;
    flex-wrap: wrap;
    /* center, no el stretch por omision: la pildora conserva su alto aunque la barra crezca. */
    align-items: center;
    align-self: start;
    gap: 8px;
}


.sc-subop {
    height: 36px;
    border: 1px solid var(--sc-accent-line);
    border-radius: 999px;
    padding: 6px 18px;
    background: var(--sc-accent-bg);
    color: var(--sc-accent-deep);
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.sc-subop:hover:not(.active) {
    background: var(--sc-accent-bg-hover);
}

.sc-subop.active {
    position: relative;
    overflow: hidden;
    border-color: var(--sc-accent-deep);
    background: linear-gradient(180deg, var(--sc-accent-dark) 0%, var(--sc-accent-deep) 100%);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(24, 33, 47, .24), inset 0 1px 0 rgba(255, 255, 255, .30);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

.sc-subop.active::after {
    content: "";
    position: absolute;
    inset: 0 0 55% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* Subopcion declarada en SIA cuyo formulario todavia no existe en este sistema. */
.sc-subop.pendiente {
    border-style: dashed;
    color: var(--sc-disabled);
}

.sc-subop-panel {
    display: grid;
    gap: 14px;
    align-content: start;
}

/* Barra de botones de COMPLEMENTOS (LIB_Complementos). Van como botones secundarios y no como
   pildoras: una pildora sugiere "elegir entre", y aca cada boton ABRE algo. */
.sc-complemento-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Pie de totales de las secciones de Liquidacion DDH. Se destaca del cuerpo para que el
   digitador lo encuentre sin buscarlo: es lo que coteja contra el total del formato en papel. */
.ddh-reg-total td {
    border-top: 2px solid var(--sc-line);
    background: var(--sc-surface-soft);
    color: var(--sc-ink);
    font-weight: 600;
}

/* =========================================================================
   LABORATORIO QUIMICO (70/01) — importado de prj-0147 (CircuitoPlanta*.razor.css).
   Comun a Circuito Planta Parcoy, Leyes Tanques y Circuito Planta Los Zambos: alla eran tres
   copias identicas por componente; aca es una sola. Colores de pantalla pasados a tokens.
   ========================================================================= */
.cp-window { display: grid; gap: 12px; align-content: start; width: 100%; }
.cp-toolbar { display: flex; flex-direction: column; gap: 10px; }
.cp-field label { margin-bottom: 4px; font-weight: 600; }
.cp-top-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: end; }
.cp-field-date, .cp-date-input { width: 170px; }
.cp-field-variant { min-width: 0; }
.cp-variant-inline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 40px;
  border: 1px solid var(--sc-line); border-radius: 6px; background: var(--sc-panel); padding: 6px 10px;
}
.cp-radio-option { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.cp-actions { display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.cp-action-btn { min-width: 92px; }
.cp-turnos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-turno-card { border: 1px solid var(--sc-line); border-radius: 8px; background: var(--sc-hover); padding: 6px; }
.cp-turno-title { margin-bottom: 6px; color: var(--sc-accent-dark); font-weight: 700; }
.cp-subcards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cp-subcard { border: 1px solid var(--sc-line); background: var(--sc-panel); min-width: 0; overflow: hidden; }
.cp-subtitle {
  margin: 0; border-bottom: 1px solid var(--sc-line); text-align: center; color: var(--sc-accent-dark);
  font-weight: 700; font-size: 0.95rem; padding: 4px 5px; background: var(--sc-surface-soft);
}
.cp-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cp-table th, .cp-table td {
  border: 1px solid var(--sc-line-soft); padding: 4px 5px; font-size: 0.86rem; text-align: center;
  white-space: normal; overflow-wrap: break-word; box-sizing: border-box;
}
.cp-table thead th { font-weight: 600; background: var(--sc-surface-soft); height: 48px; vertical-align: middle; line-height: 1.15; }
/* Las columnas numericas tienen que contener la mascara 0.000 sin pisarse. */
.cp-table th:not(.cp-col-muestra), .cp-table td:not(.cp-col-muestra) { width: 60px; }
.cp-table td:not(.cp-col-muestra) { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.cp-table td { color: var(--sc-ink); }
.cp-table .cp-col-muestra { width: 104px; text-align: left; color: var(--sc-accent-dark); font-weight: 700; background: var(--sc-hover); }
.cp-table-soluciones .cp-col-muestra { width: 46%; }
.cp-empty-row td { color: transparent; }
.cp-status {
  border: 1px solid var(--sc-line); background: var(--sc-surface-soft); color: var(--sc-ink-soft);
  border-radius: 6px; padding: 10px 12px;
}
@media (max-width: 1400px) { .cp-subcards { grid-template-columns: 1fr; } }
@media (max-width: 1180px) { .cp-top-row { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .cp-turnos-grid { grid-template-columns: 1fr; } }

/* Hoja impresa de circuito de planta. Los negros quedan LITERALES a proposito: reproducen el
   reporte en papel del legado (mismo criterio que la vista previa del reporte de tolva). */
.cp-print-actions { max-width: 920px; }
.cp-print-report { width: 172mm; margin: 0 auto; color: #000000; font-family: "Arial Narrow", Arial, sans-serif; font-size: 11px; }
.cp-print-header { display: flex; justify-content: space-between; align-items: flex-start; }
.cp-print-header-right { text-align: right; }
.cp-print-title { margin-top: 6px; text-align: center; font-size: 28px; font-weight: 700; }
.cp-print-subtitle { margin-top: 2px; text-align: center; font-size: 18px; font-weight: 700; }
.cp-print-date { margin-top: 3px; margin-bottom: 8px; text-align: center; font-size: 15px; font-weight: 700; }
.cp-print-turno { margin-bottom: 8px; }
.cp-print-turno-title { margin-top: 8px; padding: 2px 4px; border: 1px solid #2d2d2d; font-size: 15px; font-weight: 700; }
.cp-print-block-title { margin: 4px 0 3px; font-size: 12px; font-weight: 700; }
.cp-print-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0 0 5px 0; }
.cp-print-table th, .cp-print-table td { border: 1px solid #2d2d2d; text-align: center; padding: 2px 3px; min-height: 20px; }
.cp-print-table td { white-space: nowrap; }
.cp-print-table th { font-weight: 700; height: 24px; vertical-align: middle; line-height: 1.1; }
.cp-print-table .cp-col-muestra { width: 84px; }
@media print { .cp-print-report { width: 100%; margin: 0; } }

/* Reportes de Merrill Crowe (Parcoy, Cabeza, Los Zambos y Corte Filtro), importados de prj-0147
   (LeyesOroMerrill*.razor.css, OroLosZambos.razor.css). Alla eran copias por pagina con
   diferencias minimas; aca una sola, con los colores de pantalla pasados a tokens. */
.mc-shell { display: grid; gap: 12px; align-content: start; max-width: 1200px; }
.mc-toolbar { display: grid; grid-template-columns: minmax(220px, 280px) minmax(180px, 240px) 1fr; gap: 12px; align-items: end; }
.mc-toolbar-2 { grid-template-columns: minmax(280px, 360px) 1fr; }
.mc-field label { margin-bottom: 4px; font-weight: 600; }
.mc-date-input { width: 170px; max-width: 170px; }
.mc-actions { display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.mc-turnos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mc-turno-card { border: 1px solid var(--sc-line); border-radius: 8px; background: var(--sc-hover); padding: 8px; }
.mc-turno-title { margin-bottom: 6px; color: var(--sc-accent-dark); font-weight: 700; }
.mc-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 8px; }
.mc-table th, .mc-table td { border: 1px solid var(--sc-line-soft); padding: 4px 6px; font-size: 0.86rem; text-align: center; }
.mc-table thead th { font-weight: 600; background: var(--sc-surface-soft); }
.mc-table .mc-row-title { width: 70px; font-weight: 700; color: var(--sc-accent-dark); background: var(--sc-hover); }
.mc-resumen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mc-resumen-grid-single { grid-template-columns: 1fr; }
.mc-resumen-card { border: 1px solid var(--sc-line); padding: 6px 8px; background: var(--sc-panel); }
.mc-resumen-card-title { margin-bottom: 3px; color: var(--sc-accent-dark); font-size: 0.95rem; font-weight: 700; }
.mc-resumen-row { display: flex; justify-content: space-between; font-size: 0.84rem; }
.mc-grafico { overflow-x: auto; }
@media (max-width: 1024px) {
  .mc-toolbar, .mc-toolbar-2 { grid-template-columns: 1fr; }
  .mc-date-input { width: 100%; max-width: 100%; }
  .mc-turnos-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   ASPECTO DE FOXPRO para los formularios de SCOMM que lo copian (Obras Civiles).
   - .vfp-btn: boton de la clase cmdbase de controls.vcx con el tema de Windows (gris claro, letra 0,64,128, MS Sans
     Serif 8, dibujo a la izquierda y la letra del atajo subrayada con <u>).
   - .vfp-tabla: grilla de FoxPro (lineas 192,192,192, encabezado gris con negrita y la fila actual en negro con letra
     blanca, HighlightStyle 2). Se usa con .cmh-table y la fila elegida con .is-selected.
   - .vfp-etq: etiqueta en negrita y azul 0,64,128.
   ========================================================================= */
.vfp-btn {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid #adadad;
  border-radius: 3px;
  background: linear-gradient(180deg, #f6f6f6, #e3e3e3);
  color: #004080;
  font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.2;
  cursor: pointer;
}

.vfp-btn:hover:not(:disabled) {
  border-color: #3c7fb1;
  background: linear-gradient(180deg, #eaf6fd, #bee6fd);
}

.vfp-btn:active:not(:disabled) {
  background: linear-gradient(180deg, #c4e5f6, #98d1ef);
}

.vfp-btn:disabled {
  color: #8a8a8a;
  cursor: default;
}

.vfp-btn:disabled img {
  opacity: .45;
}

.vfp-btn img {
  flex: 0 0 auto;
}

/* BOTON ESTANDAR de los formularios migrados. Todo boton de una vista migrada usa "vfp-btn vfp-portal": boton de
   FoxPro (su dibujo y la letra del atajo subrayada) con el estilo del portal: fondo blanco, borde suave, esquinas
   redondeadas, texto del color de acento y realce tenue al pasar el mouse. Las medidas salen de --sc-boton-*.
   Las hojas de cada vista solo ponen el ancho o la alineacion que tiene el boton en FoxPro, nunca el aspecto.
   - .vfp-solo-icono: botones que en FoxPro solo tienen dibujo (el texto va en title y aria-label): cuadrados.
   - .is-activo: el elegido de un grupo de botones que funciona como pestana u opcion (p. ej. Eficiencias).
   - .vfp-peligro: confirmacion de una accion que borra (el "Si" de Eliminar). */
.vfp-btn.vfp-portal {
  min-height: var(--sc-boton-alto);
  gap: 6px;
  padding: 5px 10px;
  white-space: nowrap;
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-boton-radio);
  background: var(--sc-panel);
  color: var(--sc-accent-dark);
  font-family: inherit;
  font-size: var(--sc-boton-letra);
  font-weight: var(--sc-boton-peso);
  box-shadow: var(--sc-boton-sombra);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.vfp-btn.vfp-portal:hover:not(:disabled) {
  background: var(--sc-accent-bg);
  border-color: var(--sc-accent-line);
  box-shadow: var(--sc-boton-sombra-hover);
}

.vfp-btn.vfp-portal:active:not(:disabled) {
  background: var(--sc-accent-bg-hover);
  box-shadow: none;
}

.vfp-btn.vfp-portal:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
}

.vfp-btn.vfp-portal:disabled {
  background: var(--sc-surface-soft);
  border-color: var(--sc-line-soft);
  color: var(--sc-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

/* El dibujo de FoxPro (16 a 32 px) no estira el boton: como maximo el alto util (alto - 2 de borde - 10 de relleno). */
.vfp-btn.vfp-portal img {
  max-height: calc(var(--sc-boton-alto) - 12px);
  width: auto;
}

.vfp-btn.vfp-portal.vfp-solo-icono {
  min-width: var(--sc-boton-alto);
  padding: 4px;
}

.vfp-btn.vfp-portal.is-activo,
.vfp-btn.vfp-portal.is-activo:hover:not(:disabled) {
  border-color: var(--sc-accent-dark);
  background: var(--sc-accent);
  color: #fff;
}

.vfp-btn.vfp-portal.vfp-peligro {
  border-color: var(--sc-danger-line);
  color: var(--sc-danger);
}

.vfp-btn.vfp-portal.vfp-peligro:hover:not(:disabled) {
  border-color: var(--sc-danger);
  background: var(--sc-danger-bg);
}

.vfp-etq {
  font-weight: 700;
  font-size: .8rem;
  color: #004080;
}

.vfp-tabla.cmh-table th {
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  padding: 3px 5px;
  font-size: .78rem;
  background: #f0f0f0;
  color: #000;
  border: 1px solid #c0c0c0;
}

.vfp-tabla.cmh-table td {
  border: 1px solid #c0c0c0;
  color: #000;
  padding: 1px 5px;
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vfp-tabla.cmh-table tbody tr:hover {
  background: transparent;
}

.vfp-tabla.cmh-table tbody tr.is-selected {
  background: #000 !important;
}

.vfp-tabla.cmh-table tbody tr.is-selected td {
  color: #fff;
}

/* Campos numericos de las vistas migradas (ordenes 1 a 3) sin las flechas de subir y bajar: el numero se escribe
   a mano, como en FoxPro. */
input[type="number"].sin-flechas {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"].sin-flechas::-webkit-outer-spin-button,
input[type="number"].sin-flechas::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}