/* ============================================================
   Fratesa / SIGAMED — Sistema de marca
   Color primario = azul del logo institucional (petróleo).
   Para afinar el tono, cambia solo --fratesa-primary y derivados.
   ============================================================ */
:root {
  --fratesa-primary:        #15677E;
  --fratesa-primary-rgb:    21, 103, 126;
  --fratesa-primary-hover:  #114F61;
  --fratesa-primary-active: #0D3E4C;
  --fratesa-primary-light:  #4E91A6;
  --fratesa-primary-soft:   #E7F0F3;
  --fratesa-primary-border: #C5DCE3;

  /* Colores semánticos de acción (homologados) */
  --fratesa-success: #1B7A5A;   /* Verde ÚNICO: Vigente / éxito / con examen */
  --fratesa-danger:  #DC3545;   /* Borrar / No vigente */
  --fratesa-warning: #E0A106;   /* Pendiente / precaución */
  --fratesa-neutral: #64748B;   /* Cancelar */

  /* Alinear los semánticos de Bootstrap con la marca */
  --bs-primary:      #15677E;
  --bs-primary-rgb:  21, 103, 126;
  --bs-success:      #1B7A5A;
  --bs-success-rgb:  27, 122, 90;
  --bs-link-color:   #15677E;
  --bs-link-hover-color: #114F61;
}

/* ---------- Verde unificado (badges / texto / fondo) ---------- */
.text-success { color: var(--fratesa-success) !important; }
.bg-success,
.badge.bg-success,
.badge.text-bg-success { background-color: var(--fratesa-success) !important; color: #fff !important; }

/* ---------- Syncfusion homologado (dropdowns, en toda la app) ---------- */
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover,
.e-dropdownbase .e-list-item.e-hover,
.e-dropdownbase .e-list-item:hover {
  background-color: var(--fratesa-primary) !important;
  color: #fff !important;
}

/* ---------- Botones ---------- */
/* Aceptar / Guardar -> primario de marca */
.btn-primary,
.btn-fratesa {
  --bs-btn-bg: var(--fratesa-primary);
  --bs-btn-border-color: var(--fratesa-primary);
  --bs-btn-hover-bg: var(--fratesa-primary-hover);
  --bs-btn-hover-border-color: var(--fratesa-primary-hover);
  --bs-btn-active-bg: var(--fratesa-primary-active);
  --bs-btn-active-border-color: var(--fratesa-primary-active);
  --bs-btn-disabled-bg: var(--fratesa-primary);
  --bs-btn-disabled-border-color: var(--fratesa-primary);
  color: #fff !important;
}
.btn-outline-primary {
  --bs-btn-color: var(--fratesa-primary);
  --bs-btn-border-color: var(--fratesa-primary);
  --bs-btn-hover-bg: var(--fratesa-primary);
  --bs-btn-hover-border-color: var(--fratesa-primary);
  --bs-btn-active-bg: var(--fratesa-primary-active);
}

/* Borrar -> peligro consistente */
.btn-danger {
  --bs-btn-bg: var(--fratesa-danger);
  --bs-btn-border-color: var(--fratesa-danger);
  --bs-btn-hover-bg: #b52a37;
  --bs-btn-hover-border-color: #b52a37;
}

/* Guardar/confirmar positivo opcional */
.btn-success {
  --bs-btn-bg: var(--fratesa-success);
  --bs-btn-border-color: var(--fratesa-success);
  --bs-btn-hover-bg: #156048;
  --bs-btn-hover-border-color: #156048;
  color: #fff !important;
}

/* Cancelar -> neutro */
.btn-secondary {
  --bs-btn-bg: var(--fratesa-neutral);
  --bs-btn-border-color: var(--fratesa-neutral);
  --bs-btn-hover-bg: #506178;
  --bs-btn-hover-border-color: #506178;
}

/* ---------- Acentos generales ---------- */
.text-primary { color: var(--fratesa-primary) !important; }
.bg-primary   { background-color: var(--fratesa-primary) !important; }
.border-primary { border-color: var(--fratesa-primary) !important; }
a { color: var(--fratesa-primary); }
a:hover { color: var(--fratesa-primary-hover); }

/* Sidenav del template (usa bg-primary / gradiente) */
.sidenav.bg-primary,
.sidenav.bg-gradient-primary,
.bg-gradient-primary {
  background-image: none !important;
  background-color: var(--fratesa-primary) !important;
}

/* Foco de formularios con el color de marca */
.form-control:focus,
.form-select:focus {
  border-color: var(--fratesa-primary-light);
  box-shadow: 0 0 0 .2rem rgba(var(--fratesa-primary-rgb), .20);
}

/* Encabezados de tabla / secciones que usaban el índigo viejo */
.form-section-header { background-color: var(--fratesa-primary) !important; }

/* ---------- Logo ---------- */
.auth-logo {
  display: block;
  width: 116px;
  height: auto;
  margin: 0 auto 14px;
}
.footer-logo {
  height: 30px;
  width: auto;
  vertical-align: middle;
  opacity: .9;
}

/* ---------- Spinner de acción (anti doble-clic) ---------- */
.btn .fx-spin {
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: .4em;
  vertical-align: -.125em;
  border: .15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: fx-spin .65s linear infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }
.btn[data-ux-busy="1"] { pointer-events: none; opacity: .85; }