/* ==========================================================================
   Identidad visual San Luis para Oracle APEX 23.2 / Universal Theme 23.2
   Fuente: Manual de Marca 2024 (colores, tipografia) + contrato visual de la
   Direccion de Informatica (references/contrato-visual-apex.md).

   Uso: subir este archivo y los cuatro Ubuntu-*.woff2 como Static Workspace
   Files con sus nombres tal cual (APEX no conserva carpetas al subir) y
   referenciarlo en cada app: Shared Components -> User Interface Attributes ->
   Cascading Style Sheets -> File URLs: #WORKSPACE_FILES#ut-san-luis.css
   Se aplica sobre el estilo de tema Vita; no reemplaza al Theme Roller.
   ========================================================================== */

/* --- Tipografia: Ubuntu, autoalojada (UFL 1.0) -------------------------- */
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 300; font-display: swap; src: url("Ubuntu-Light.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 400; font-display: swap; src: url("Ubuntu-Regular.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap; src: url("Ubuntu-Medium.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap; src: url("Ubuntu-Bold.woff2") format("woff2"); }

/* --- Tokens de Universal Theme ------------------------------------------ */
/* html:root gana sobre el :root del CSS del estilo de tema sin depender del
   orden de carga de los archivos. */
html:root {
  /* Marca */
  --sl-azul: #354393;
  --sl-azul-oscuro: #2a3677;
  --sl-teal: #4aacc4;
  --sl-teal-oscuro: #2d7c8f;
  --sl-gris-oscuro: #414242;
  --sl-fondo: #f3f5f8;
  --sl-texto: #1f2933;
  --sl-texto-suave: #5f6b7a;
  --sl-borde: #d9dee5;

  /* Tipografia */
  --a-base-font-family: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ut-alternate-heading-font-family: "Ubuntu", system-ui, sans-serif;

  /* Paleta primaria: azul institucional (botones hot, links, selecciones) */
  --ut-palette-primary: var(--sl-azul);
  --ut-palette-primary-contrast: #ffffff;
  --ut-palette-primary-shade: var(--sl-azul-oscuro);
  --ut-palette-primary-text: var(--sl-azul);
  /* Paleta alternativa: teal como acento */
  --ut-palette-primary-alt: var(--sl-teal);
  --ut-palette-primary-alt-contrast: #ffffff;
  --ut-palette-primary-alt-shade: var(--sl-teal-oscuro);
  --ut-palette-primary-alt-text: var(--sl-teal-oscuro);

  /* Cuerpo: fondo claro, texto oscuro */
  --ut-body-background-color: var(--sl-fondo);
  --ut-body-text-color: var(--sl-texto);
  --ut-link-text-color: var(--sl-azul);
  --ut-focus-outline-color: var(--sl-teal);

  /* Header: blanco con linea azul inferior */
  --ut-header-background-color: #ffffff;
  --ut-header-text-color: var(--sl-azul);
  --ut-header-border-color: var(--sl-azul);
  --ut-header-box-shadow: inset 0 -3px 0 var(--sl-azul);
  --ut-header-height: 3.5rem;

  /* Regiones */
  --ut-region-background-color: #ffffff;
  --ut-region-header-background-color: #ffffff;
  --ut-region-header-text-color: var(--sl-azul);
  --ut-region-header-border-color: var(--sl-borde);
  --ut-region-text-color: var(--sl-texto);

  /* Navegacion lateral */
  --ut-body-nav-background-color: #ffffff;
  --ut-body-nav-border-color: var(--sl-borde);
  --ut-body-nav-text-color: var(--sl-gris-oscuro);

  /* Footer */
  --ut-footer-background-color: var(--sl-gris-oscuro);
  --ut-footer-border-color: var(--sl-gris-oscuro);

  /* Vita 23.2 escribe #056ac8 literal en estos tokens en lugar de derivarlos
     de la paleta primaria; se redefinen uno por uno. */
  --ut-login-page-background-color: var(--sl-fondo);
  --ut-palette-info: var(--sl-azul);
  --ut-treeview-badge-background-color: var(--sl-azul);
  --ut-field-input-focus-icon-color: var(--sl-azul);
  --ut-field-fl-input-focus-icon-background-color: var(--sl-azul);
  --a-field-input-focus-border-color: var(--sl-teal);
  --a-checkbox-checked-background-color: var(--sl-azul);
  --a-menu-focused-background-color: var(--sl-azul);
  --a-cv-focus-border-color: var(--sl-teal);
  --a-cv-icon-background-color: var(--sl-azul);
  --a-cv-initials-background-color: var(--sl-azul);
}

/* Boton hot: Vita fija el color en el propio selector del boton, no en :root */
.t-Button--hot, .a-Button--hot, .a-CardView-button--hot, .apex-button-group .a-Button--hot {
  --a-button-background-color: var(--sl-azul);
  --a-button-border-color: var(--sl-azul);
  --a-button-hover-background-color: var(--sl-azul-oscuro);
  --a-button-active-background-color: var(--sl-azul-oscuro);
}
.t-Button--hot.t-Button--simple, .a-Button--hot.t-Button--simple {
  --a-button-text-color: var(--sl-azul);
  --a-button-border-color: var(--sl-azul);
}

/* --- Header y logo ------------------------------------------------------ */
/* El logo va por max-height y no por height: el SVG del manual es una caja sin
   margenes (7.24:1), y con un height fijo UT lo comprime a lo ancho para que
   entre en el header. Con max-height + max-width el navegador conserva la
   proporcion, que el manual prohibe alterar.
   El branding es content-box, asi que su padding se suma al alto del header:
   token 3.5rem (56px) + 2px de padding dan un header de 60px, con un logo de
   3rem (48 x 255px) que ya incluye el aire de acentos y descendentes. Ojo al
   migrar de PNG a SVG: el PNG de la cartera trae mucho aire vertical y a igual
   alto de caja el SVG se ve unas tres veces mas grande. */
.t-Header-branding { box-sizing: content-box; padding-block: 0.125rem; }
.t-Header-logo-link img { height: auto; width: auto; max-height: 3rem; max-width: 100%; }

/* --- Footer: texto legible sobre gris oscuro ---------------------------- */
.t-Footer, .t-Footer a { color: #ffffff; }

/* El logo institucional del footer suele entrar como Display Image de la
   Global Page: sin estas reglas hereda el alto natural de la imagen y el
   padding del contenedor de formulario, y el footer se come la pantalla. */
.t-Footer .apex-item-image { max-height: 3rem; width: auto; }
.t-Footer .apex-item-wrapper--display-image { margin: 0; }
.t-Footer .t-Form-itemWrapper { justify-content: center; padding: 0; }
.t-Footer .t-Form-inputContainer { padding: 0; }
.t-Footer .t-Footer-content, .t-Footer .t-Footer-body { padding-block: 0; }
/* El numero de release no se muestra al usuario final. */
.t-Footer-version { display: none; }

/* --- Login -------------------------------------------------------------- */
/* UT trata .t-Login-logo como un icono: cuadrado de 4rem, con el color primario
   de fondo y object-fit cover. Un PNG opaco lo tapa, pero el SVG del manual es
   transparente y sus letras azules desaparecen contra ese fondo azul. */
.t-Login-region { background-color: #ffffff; }
.t-Login-logo {
  width: auto; height: auto; max-width: 100%; max-height: 4.5rem;
  background: none; object-fit: contain; border-radius: 0;
}

/* --- Home con Cards (template de lista "Cards", opcion Featured) -------- */
/* Icono en azul institucional; la clase de color de la entrada (Card Color
   Class) "sl-acento" lo pasa a teal. Se usa en lugar de la secuencia u-colors. */
.t-Cards .t-Card-icon { background-color: var(--sl-azul); color: #ffffff; }
.t-Cards .t-Card-icon.sl-acento { background-color: var(--sl-teal); }
.t-Cards .t-Card-title { font-weight: 700; color: var(--sl-texto); }
.t-Cards .t-Card-desc { color: var(--sl-texto-suave); font-size: 0.875rem; line-height: 1.35; }
.t-Cards .t-Card-desc:empty { display: none; }
.t-Cards .t-Card-wrap { border-radius: 4px; border-top: 3px solid transparent; }
.t-Cards .t-Card:hover .t-Card-wrap,
.t-Cards .t-Card:focus-within .t-Card-wrap { border-top-color: var(--sl-teal); }

/* --- Reportes interactivos y clasicos: encabezado azul, texto 13px ------ */
.a-IRR-table th, .t-Report-colHead {
  background-color: var(--sl-fondo);
  color: var(--sl-azul);
  font-weight: 700;
  font-size: 0.8125rem;
  text-align: start;
}
.a-IRR-table td, .t-Report-cell { font-size: 0.8125rem; padding: 0.625rem 0.75rem; }
.a-IRR-table tbody tr:hover td { background-color: #eef7f9; }

/* --- Carga de archivos (item File Upload, Block Dropzone) --------------- */
/* UT pinta el titulo de la zona de arrastre a 20px en negro puro, mas fuerte
   que el titulo de la region (16px en azul), y el boton de elegir archivo como
   "hot". En un formulario con doce cargas eso da doce titulos que gritan mas que
   las secciones y doce botones hot compitiendo con el de enviar. Se baja a la
   escala del cuerpo y el hot queda reservado al envio, como pide el contrato. */
.a-FileDrop { padding: 0.75rem; border-color: var(--sl-borde); border-radius: 4px; }
.a-FileDrop-icon { padding: 0; }
.a-FileDrop-icon .fa { font-size: 1.25rem; line-height: 1.5rem; color: var(--sl-azul); }
.a-FileDrop-heading { font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--sl-texto); }
.a-FileDrop-description { font-size: 0.8125rem; line-height: 1.35; color: var(--sl-texto-suave); }
.a-FileDrop-action-choose.a-Button--hot {
  --a-button-background-color: transparent;
  --a-button-border-color: var(--sl-azul);
  --a-button-text-color: var(--sl-azul);
  --a-button-hover-background-color: #eef1f8;
  --a-button-active-background-color: #eef1f8;
}

/* --- Titulos ------------------------------------------------------------ */
.t-Region-title, .t-Body-title h1, .t-HeroRegion-title { font-weight: 700; }