/* ==========================================================================
   Tema SRF — portal A1I (app 204, APEX 20.2, Universal Theme 42 / estilo Vita)
   Paleta y tipografía tomadas de www.sanrafael.gov.ar (WordPress / Divi):
     azul institucional #2e4d8a · azul enlace #1e5299 · verde #b1c053
     naranja #fa7f28 · gris #dedede · celeste #cad7e9 · texto #181f2a
   Se carga como "Custom CSS" del theme style "SRF" (Theme Roller) o como
   #APP_IMAGES#srf-tema.css desde User Interface Attributes. Ver
   docs/A1I_tema_SRF.md. No toca ningún template de página.
   La fuente Lato se agrega aparte como URL de CSS (ver la guía).
   ========================================================================== */

:root {
  --srf-azul:     #2e4d8a;
  --srf-azul-2:   #1e5299;
  --srf-verde:    #b1c053;
  --srf-naranja:  #fa7f28;
  --srf-rojo:     #c0392b;
  --srf-verde-oscuro: #4e7a27;
  --srf-gris:     #dedede;
  --srf-celeste:  #cad7e9;
  --srf-texto:    #181f2a;
  --srf-apagado:  #898f99;
  --srf-fondo:    #f4f6fa;
  --srf-blanco:   #ffffff;
}

/* --- Base --------------------------------------------------------------- */
body, .t-PageBody, .t-Body, .t-Button, input, select, textarea, button, .a-MenuBar {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
}
.t-PageBody, .t-PageBody--login, .t-Body-content, .t-Body {
  background-color: var(--srf-fondo);
  color: var(--srf-texto);
}
a { color: var(--srf-azul-2); }
a:hover { color: var(--srf-azul); }

/* --- Cabecera blanca con el logo a color, como el sitio ------------------ */
.t-Header {
  background-color: var(--srf-blanco);
  box-shadow: none;
}
.t-Header-branding {
  background-color: var(--srf-blanco);
  height: 72px;
  border-bottom: 1px solid var(--srf-gris);
}
.t-Header-logo-link img {
  display: block;
  max-height: 52px;
  width: auto;
}
.t-Header-controls .t-Button--header,
.t-Header-navBar .t-Button--navBar,
.t-Header-navBar .t-Button--navBar .t-Icon,
.t-Header-navBar .t-Button--navBar .t-Button-label {
  color: var(--srf-azul);
  background-color: transparent;
}
.t-Header-navBar .t-Button--navBar:hover,
.t-Header-controls .t-Button--header:hover {
  background-color: rgba(46, 77, 138, .08);
}
.t-Header-navBar .t-Button--navBar.is-active { background-color: rgba(46, 77, 138, .12); }

/* --- Menú superior: texto azul en mayúsculas, el actual en verde --------- */
.t-Header-nav {
  background-color: var(--srf-blanco);
  border-bottom: 3px solid var(--srf-azul);
}
.t-Header-nav .a-MenuBar,
.t-Header-nav .a-MenuBar-item {
  background-color: transparent;
  border: 0;
}
.t-Header-nav .a-MenuBar-label {
  color: var(--srf-azul);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.t-Header-nav .a-MenuBar-item .a-Icon,
.t-Header-nav .a-MenuBar-item .a-MenuBar-subMenuCol .a-Icon {
  color: var(--srf-azul);
}
.t-Header-nav .a-MenuBar-item:hover,
.t-Header-nav .a-MenuBar-item.is-focused,
.t-Header-nav .a-MenuBar-item.is-expanded {
  background-color: rgba(46, 77, 138, .06);
}
.t-Header-nav .a-MenuBar-item.is-current {
  background-color: transparent;
  box-shadow: inset 0 -4px 0 var(--srf-verde);
}
.t-Header-nav .a-MenuBar-item.is-current .a-MenuBar-label { color: var(--srf-verde); }
.a-Menu .a-Menu-item.is-focused > .a-Menu-inner,
.a-Menu .a-Menu-item.is-focused > .a-Menu-inner .a-Menu-label {
  background-color: var(--srf-azul);
  color: var(--srf-blanco);
}

/* --- Título de página y migas ------------------------------------------- */
.t-Body-title {
  background-color: var(--srf-blanco);
  border-bottom: 1px solid var(--srf-gris);
}
.t-Breadcrumb-item a { color: var(--srf-azul); }
.t-Breadcrumb-item.is-active .t-Breadcrumb-label { color: var(--srf-texto); font-weight: 700; }

/* --- Regiones: planas, título azul en mayúsculas -------------------------- */
.t-Region {
  background-color: var(--srf-blanco);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(24, 31, 42, .08);
}
.t-Region-header {
  background-color: var(--srf-blanco);
  border-bottom: 2px solid var(--srf-celeste);
}
.t-Region-title {
  color: var(--srf-azul);
  font-weight: 900;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.t-Region--noUI, .t-Region--noUI .t-Region-header { box-shadow: none; }

/* --- Botones ------------------------------------------------------------ */
.t-Button {
  border-radius: 3px;
  box-shadow: none;
  font-weight: 700;
}
.t-Button:not(.t-Button--hot):not(.t-Button--danger):not(.t-Button--warning):not(.t-Button--success):not(.t-Button--noUI):not(.t-Button--header):not(.t-Button--navBar) {
  background-color: var(--srf-blanco);
  color: var(--srf-azul);
  border: 1px solid var(--srf-celeste);
}
.t-Button--hot,
.t-Button--hot:visited {
  background-color: var(--srf-azul);
  color: var(--srf-blanco);
}
.t-Button--hot:hover,
.t-Button--hot:focus { background-color: var(--srf-azul-2); color: var(--srf-blanco); }
.t-Button--hot:active { background-color: #173a6d; }
.t-Button--warning { background-color: var(--srf-naranja); color: var(--srf-blanco); }
.t-Button--success { background-color: var(--srf-verde); color: var(--srf-texto); }

/* --- Formularios ---------------------------------------------------------- */
.t-Form-label { color: var(--srf-texto); font-weight: 700; }
.t-Form-inputContainer .text_field,
.t-Form-inputContainer .textarea,
.t-Form-inputContainer .selectlist,
.apex-item-text, .apex-item-textarea, .apex-item-select {
  border: 1px solid var(--srf-gris);
  border-radius: 3px;
  background-color: var(--srf-blanco);
}
.apex-item-text:focus, .apex-item-textarea:focus, .apex-item-select:focus,
.t-Form-inputContainer .text_field:focus {
  border-color: var(--srf-azul);
  box-shadow: 0 0 0 2px rgba(46, 77, 138, .2);
}

/* --- Reportes clásicos e interactivos ------------------------------------ */
.t-Report-colHead,
.a-IRR-header {
  background-color: var(--srf-celeste);
  color: var(--srf-azul);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 0;
}
.t-Report-colHead a, .a-IRR-headerLink { color: var(--srf-azul); }
.t-Report--altRowsDefault .t-Report-report tr:nth-child(even) td { background-color: #f7f9fc; }
.t-Report--rowHighlight .t-Report-report tbody tr:hover td { background-color: rgba(177, 192, 83, .18); }
.t-Report-cell { border-color: #eceff4; }
.t-Report-cell .fa { color: var(--srf-azul); }

/* --- Tarjetas y listas de menú (página Menú) ----------------------------- */
.t-Card-wrap { border-radius: 2px; box-shadow: 0 1px 2px rgba(24, 31, 42, .08); }
.t-Card-icon .t-Icon { background-color: var(--srf-azul); color: var(--srf-blanco); }
.t-Card:hover .t-Card-wrap { box-shadow: 0 0 0 2px var(--srf-verde); }
.t-Card-title { color: var(--srf-azul); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.t-LinksList-link:hover { background-color: rgba(46, 77, 138, .06); }
.t-LinksList-icon .t-Icon { color: var(--srf-azul); }

/* --- Alertas -------------------------------------------------------------
   En Universal Theme 20.2 el mensaje de error de página (#t_Alert_Notification)
   sale con la clase t-Alert--warning, no t-Alert--danger: por eso warning y
   danger van los dos en rojo. El éxito va en un verde más oscuro que el de la
   marca para que el texto blanco se lea. ---------------------------------- */
.t-Alert.t-Alert--colorBG.t-Alert--success { background-color: var(--srf-verde-oscuro); color: var(--srf-blanco); }
.t-Alert.t-Alert--colorBG.t-Alert--warning,
.t-Alert.t-Alert--colorBG.t-Alert--danger  { background-color: var(--srf-rojo);  color: var(--srf-blanco); }
.t-Alert.t-Alert--colorBG.t-Alert--info    { background-color: var(--srf-azul);  color: var(--srf-blanco); }
/* Todo lo de adentro en blanco. UT le da color propio al título, a los ítems
   de la lista de errores (a-Notification-item, que son links) y al ícono, con
   selectores de tres clases: por eso acá van cuatro y !important en el color. */
.t-Alert.t-Alert--colorBG .t-Alert-title,
.t-Alert.t-Alert--colorBG .t-Alert-body,
.t-Alert.t-Alert--colorBG .t-Alert-body p,
.t-Alert.t-Alert--colorBG .t-Alert-body li,
.t-Alert.t-Alert--colorBG .t-Alert-body a,
.t-Alert.t-Alert--colorBG .a-Notification-list,
.t-Alert.t-Alert--colorBG .a-Notification-item,
.t-Alert.t-Alert--colorBG .a-Notification-item a,
.t-Alert.t-Alert--colorBG .t-Alert-icon .t-Icon,
.t-Alert.t-Alert--colorBG .t-Alert-icon .t-Icon:before,
.t-Alert.t-Alert--colorBG .t-Button--closeAlert,
.t-Alert.t-Alert--colorBG .t-Button--closeAlert .t-Icon { color: var(--srf-blanco) !important; }
.t-Alert.t-Alert--colorBG .t-Alert-icon { background-color: rgba(255, 255, 255, .18); border-radius: 50%; }
.t-Alert.t-Alert--colorBG .t-Alert-title { font-weight: 900; font-size: 1.6rem; }
.t-Alert.t-Alert--colorBG .a-Notification-item,
.t-Alert.t-Alert--colorBG .t-Alert-body { font-size: 1.35rem; line-height: 1.5; }
.t-Alert.t-Alert--colorBG .a-Notification-item a,
.t-Alert.t-Alert--colorBG .t-Alert-body a { text-decoration: underline; text-underline-offset: 2px; }
.t-Alert.t-Alert--colorBG .t-Button--closeAlert:hover { background-color: rgba(255, 255, 255, .18); }
.t-Alert.t-Alert--page { box-shadow: 0 4px 16px rgba(24, 31, 42, .25); border-radius: 3px; }
/* error inline debajo del ítem */
.t-Form-error { color: var(--srf-rojo); }
.apex-page-item-error .apex-item-text,
.apex-page-item-error .apex-item-select { border-color: var(--srf-rojo); }

/* --- Pie de página azul, como el del sitio -------------------------------- */
.t-Footer {
  background-color: var(--srf-azul);
  color: var(--srf-blanco);
  margin-top: 2.4rem;
}
.t-Footer a { color: var(--srf-blanco); }
.t-Footer-apex,
.t-Footer-apex .t-Footer-version,
.t-Footer-apex .t-Footer-customize,
.t-Footer-apex .t-Footer-srMode { color: rgba(255, 255, 255, .7); }
.t-Footer-topButton {
  background-color: var(--srf-verde);
  color: var(--srf-azul);
  border-radius: 50%;
}
/* bloque de contacto que va en la región "Pie Página - SRF" (página 0) */
.srf-Pie {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  padding: .8rem 0;
  font-size: 1.2rem;
  line-height: 1.6;
}
.srf-Pie-col { min-width: 0; flex: 1 1 220px; }
.srf-Pie-logo img { max-height: 44px; display: block; margin-bottom: .6rem; }
.srf-Pie-titulo {
  display: block;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--srf-verde);
  margin-bottom: .4rem;
}
.srf-Pie-redes { display: flex; gap: .6rem; flex-wrap: wrap; }
.srf-Pie-redes a {
  display: inline-block;
  padding: .3rem .8rem;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 3px;
  text-decoration: none;
  font-weight: 700;
}
.srf-Pie-redes a:hover { background-color: var(--srf-verde); color: var(--srf-azul); border-color: var(--srf-verde); }
.srf-Pie-legal { width: 100%; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: .6rem; color: rgba(255, 255, 255, .8); }

/* --- Login ---------------------------------------------------------------- */
.t-PageBody--login .t-Body { padding-top: 2.4rem; }
.t-PageBody--login .t-Region-title { font-size: 1.2rem; }

/* --- Móvil ---------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
  .t-Header-branding { height: 60px; }
  .t-Header-logo-link img { max-height: 40px; }
  .t-Header-nav .a-MenuBar-label { font-size: 1.1rem; }
  .srf-Pie { gap: 1.2rem; }
}